@import url('resetStyles.css');

@font-face {
	font-family: 'Urban Brush';
	src: url('../styes/fonts/UrbanBrush.eot');
	src: local('Urban Brush'), url('../styes/fonts/UrbanBrush.ttf') format('truetype');
}


/*  GLOBAL STYLES  */


html, body {
height: 100%;
background: #000;
color: #DDD;
}

#wrapper {
min-height: 100%; 
}

#innerWrapper {
width: 940px;
min-height: 560px;
margin: 0 auto 20px;
}

#logo {
width: 230px;
z-index: 100;
}

#logo a {
display: block;
width: 230px;
height: 115px;
top: 2px;
background: url(../images/XLogo.jpg) no-repeat 0px 0px;
}

#logo a:hover {
background-position: 0px -118px;
}

#content {
width: 550px;
margin: 50px 0px;
padding: 0 0 50px;
}



#socialLinks {
position: absolute;
top: 10px; 
z-index: 80;
}

#socialLinks p {
margin: 5px; padding: 0;
margin-left: 270px;
text-align: center;
}

#socialLinks img {
width: 75px;
}

#socialLinks img.wider {
width: 100px;
}

#footer p {
margin: 0; padding: 0;}

#footer span.companydetails {
margin-left: 50px;
}

/*  NAVIGATION   */


#navigation {
position: absolute;
top: 20px;
font-weight: bold;
text-align: center;
z-index: 10;
}

#navigation ul {
width: 500px;
margin-left: 450px;
}

#navigation li {
/*font-family: 'Urban Brush';*/
padding: 5px;
float: left;
width: 110px;
}

#navigation li a {
display: block;
color: #DDD;
width: 100%;
height: 30px;
text-indent: -9999px;
}

#navigation li.about a {background: url(../images/nav/about.gif) no-repeat;}
#navigation li.gallery a {background: url(../images/nav/gallery.gif) no-repeat;}
#navigation li.involve a {background: url(../images/nav/involve.gif) no-repeat;}
#navigation li.contact a {background: url(../images/nav/contact.gif) no-repeat;}
#navigation li.productions a {background: url(../images/nav/productions.gif) no-repeat;}
#navigation li.happenings a {background: url(../images/nav/happenings.gif) no-repeat;}
#navigation li.sponsor a {background: url(../images/nav/sponsor.gif) no-repeat;}

#navigation li a:hover {
background-position: -113px 0px;
}

.navpush {margin-left: 60px;}



#edAppeal2010 {
width: 550px;
float: right;
font-weight: bold;
text-align: center;
font-variant: small-caps;
font-size: 1.2em;
}

#edAppeal2010 a, #homeEdAppeal2010 a {
color: #F9C847;
}

#appeal #edAppeal2010, 
#home #navigation #edAppeal2010 {
display: none;
}

#homeEdAppeal2010 {
width: 100%;
font-size: 2.2em;
font-weight: bold;
text-align: center;
font-variant: small-caps;
}

#homeEdAppeal2010 a:hover {
color: #9F0015;
}



#itclogo {
display: block;
width: 50px;
height: 50px;
float: right;
margin: 0 0 20px;
}

#itclogo img {width: 100%;}




/*   BACKGROUND IMAGES   */


body#home #wrapper {
background: url(../images/backgrounds/indexBG.jpg) no-repeat center top;
}
body#aboutus #wrapper {
background: url(../images/backgrounds/aboutusBG.jpg) no-repeat top center;
}
body#getinvolved #wrapper {
background: url(../images/backgrounds/involvedBG.jpg) no-repeat top center;
}
body#contact #wrapper {
background: url(../images/backgrounds/contactBG.jpg) no-repeat top center;
}
body#productions #wrapper {
background: url(../images/backgrounds/productionsBG.jpg) no-repeat top center;
}
body#jdcoke #wrapper {
background: url(../images/backgrounds/jdcokeBG.jpg) no-repeat top center;
}
body#goingdown #wrapper {
background: url(../images/backgrounds/goingdownBG.jpg) no-repeat top center;
}
body#idolchat #wrapper {
background: url(../images/backgrounds/idolchatBG.jpg) no-repeat top center;
}
body#happenings #wrapper {
background: url(../images/backgrounds/happeningsBG.jpg) no-repeat top center;
}
body#sponsor #wrapper {
background: url(../images/backgrounds/sponsorBG.jpg) no-repeat top center;
}
body#fragments #wrapper {
background: url(../images/backgrounds/fragmentsBG.jpg) no-repeat top center;
}
body#fragments11 #wrapper {
background: url(../images/backgrounds/fragments11BG.jpg) no-repeat top center;
}
body#atlpac #wrapper {
background: url(../images/backgrounds/atlpacBG.jpg) no-repeat top center;
}
body#yesterdays #wrapper {
background: url(../images/backgrounds/yesterdaysBG.jpg) no-repeat top center;
}

body#appeal #content {
width: 750px;
margin: 0 auto 30px;
background: url(../images/backgrounds/appealBG.jpg) no-repeat bottom center;
padding: 0px 70px 360px;
}

body#fragments #content, body#atlpac #content {
width: 480px;
}

body#home #content {
margin: 0;
padding: 0 0 340px 0;}





#jdcoke .textPusher, #sponsor .textPusher {
display: block;
float: right;
width: 160px;
height: 250px;
}
#getinvolved .textPusher {
display: block;
float: right;
width: 100px;
height: 250px;
}
#happenings .textPusher {
display: block;
float: right;
width: 120px;
height: 380px;
}




/*   TITLES   */

#content h2 {
font-family: 'Urban Brush';
font-size: 2.5em;
}

#jdTitle {
display: block;
background: url(../images/titles/jdcokeTTL.jpg) no-repeat -20px 0px;
height: 65px;
width: 260px;
}

h2#goingdownTitle {
font-family: serif;
font-variant: small-caps;
color: #BB0000;
}

#idolChatTitle {
display: block;
background: url(../images/titles/idolchatTTL.jpg) no-repeat 0px 0px;
height: 65px;
width: 260px;
}

#redBetrayalTitle {
display: block;
background: url(../images/titles/redbetrayalTTL.jpg) no-repeat 0px 0px;
height: 65px;
width: 320px;
}

#jdcoke #content h2, #goingdown #content h2,
#idolChat #content h2, #fragments #content h2 {
margin-bottom: 0px;
}

#appealTitle {
text-align: center;
font-variant: small-caps;
font-size: 2.5em;
color: #F9C847;
}

#appeal #jdTitle {
display: block;
background: url(../images/titles/jdcokeTTL.jpg) no-repeat -20px 0px;
height: 65px;
width: 260px;
margin: 0 auto;
}



#idolChat h2.hideText {display: none;}


/*  OTHER CONTENT STYLES   */


.back a {
display: block;
width: 62px;
height: 48px;
margin: 0px 50px 50px;
background: url(../images/back.jpg) no-repeat 5px 0px;
text-indent: -9999px;
}

.back a:hover {
background-position: 0px 0px;
} 

hr {
border: 0;
color: #ddd;
background-color: #ddd;
height: 1px;
width: 100%;
margin-bottom: 1.5em;
}

#comingup {
text-align: right;
width: 250px;
}

#productions #comingup {
margin-top: 50px;
}

#comingup .notice, #comingup h3 {
text-align: left;
}

#comingup .notice {
float: left;
}

#comingup .notice a {
z-index: 20;
color: #CF0021;
}

#comingup .notice a:hover {
color: #9F0015;
}

#reviews {
margin-top: 2.5em;
padding: 15px;
border: 2px dashed;
}

#appeal #reviews {
border: none;
width: 500px;
margin: 0 auto 2.5em;
}

#reviews p {
margin: 0 0 2.5em;
}

#reviews h4 {
text-align: center; 
}

#reviews em {
font-weight: bold;
color: #9F4545;
}



body#gallery #content {
width: 900px;
min-height: 400px;
}



#idolchat #videowrap {
border: solid 1px #555;
width: 450px;
margin: 0 padding: 0;
text-align: center;
}
#videowrap p { margin: 0; padding: 0;}