@charset "utf-8";
/* CSS Document */


/* ---------- @ Nav & overall structure -----------*/
* { margin: 0; padding: 0; outline: none; }
html { background:none repeat scroll 0 0; }
body { background: #C5E0E8 none repeat scroll 0 0; color: #000; font: 100% Arial, Verdana, Sans-Serif;}

h1{ text-transform: uppercase; color: #C00; font-size: 2em; letter-spacing: -0.01em; }
h2{ line-height: 120%; margin: 6px 0 18px 0; }

a:link { color: #0babe0; text-decoration: none; font-weight: bold; }
a:visited { color: #0babe0; text-decoration: none; font-weight: bold; }
a:hover { color: White; text-decoration: none; font-weight: bold; background-color: #CC0000; }
a:active { color: White; text-decoration: none; font-weight: bold; }

.bullet{ color:#C00; margin-bottom:10px; }

#page { width: 960px; margin: 0 auto; padding-top: 8px; }

#social_fb { position: absolute; top: 160px; right: 10px; width: 125px; }
#social_tw { position: absolute; top: 160px; right: 135px; width: 133px; }

#masthead { padding: 22px 0; background: #000; border-bottom: 1px solid #607b88; position: relative; z-index: 1; }

#nav-cat { background: #8FC0CE none repeat scroll 0 0; line-height: 1; font-size: 0.75em; margin: 0 auto; padding: 4px 0px 4px 15px; position: relative; z-index: 2; }

#nav-cat a, #nav-cat a:visited { -x-system-font: none; color: #000; display: block; font-family: Arial,Verdana; font-size: 1em; font-size-adjust: none; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: 0.07em; line-height: normal; padding: 2px 4px 2px 4px; text-decoration: none; }
#nav-cat a.off:link, #nav-cat a.off:visited { color: black; text-decoration: none; }
#nav-cat a.off:hover { color: white; background-color: black; text-decoration: none; }
#nav-cat a.on:link, #nav-cat a.on:visited { color: white; background-color: black; text-decoration: none; }
#nav-cat a.on:hover { color: red; background-color: black; text-decoration: none; }
#nav-cat a:active, #nav-cat a:hover { color: #fff; background-color: black; padding: 2px 4px 2px 4px; }

#nav-cat li { border-right: 1px dotted #000; float: left; list-style-image: none; list-style-position: outside; list-style-type: none; margin-right: 1px; padding: 0 7px 0 4px !important; position: relative; }

#mainSection { position: relative; }

.ad { font-family: Verdana, Geneva, sans-serif; font-size: 9px; margin-top: 8px; color:#999; }

.copyright{ color: #666; }

.copyright a:link { color: #666; text-decoration: none; font-weight: bold; }
.copyright a:visited { color: #666; text-decoration: none; font-weight: bold; }
.copyright a:hover { color: White; text-decoration: none; font-weight: bold; background: #000; }
.copyright a:active { color: White; text-decoration: none; font-weight: bold; }

#footer { padding: 22px 12px 22px 12px; background: url(imgs/footer.gif) no-repeat center top; line-height: 120%; font-size: 0.70em; font-family: Verdana, Geneva, sans-serif; color: #fff; clear:both;}

#wrapper { background: #fff; padding: 0 25px 10px 25px; }


/* ---------- @ Float Clearing -----------*/
.clearfloat:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; }
/*.clearfloat { display: inline-block; } not sure what this is for - delete?*/ 
.clearfloat { display: block; }



/* ---------- form -----------*/
div.form { padding: 10px; color: #000; margin-bottom: 20px; font-size: 0.75em; position: relative; top: -815px; left: 440px; width: 450px;}

div.form input .input-text{ color: #666; width: 250px; }

div.form p { padding-bottom: 10px; border-bottom: 1px solid #8FC0CE; margin-bottom:12px; }



input{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .90em; margin-right:8px;}



/* ---------- @ About sections -----------*/
.ABox { float: left; display: inline; width: 432px; padding 0;}

.Editors { background: #f5f3ee url(imgs/about_editors.gif) no-repeat center top; margin: 0 19px 0 0;}
.Writers { background: #f5f3ee url(imgs/about_writers.gif) no-repeat center top; margin: 0 0 0 19px;}

.ABox p { margin: 80px 17px 18px 18px; line-height: 140%; font-size: 0.75em; }
.ABox p+p { margin: 0px 17px 18px 18px; line-height: 140%; font-size: 0.75em; }
.ABox p.reset { margin: 10px 17px 18px 17px; }

.ABox a:link { color: #0babe0; text-decoration: none; font-weight: bold; background-color: #f5f3ee;}
.ABox a:visited { color: #0babe0; text-decoration: none; font-weight: bold; background-color: #f5f3ee;}
.ABox a:hover { color: White; text-decoration: none; font-weight: bold; background-color: red; }
.ABox a:active { color: White; text-decoration: none; font-weight: bold; background-color: red;}

.aPic { display: inline; padding: 0; border: 0; }

/* ---------- @ Friends links -----------*/
#friends { width: 908px; margin: 40px 0 20px 0; padding: 70px 0 0 0; background: url(imgs/t_friends.gif) no-repeat left top; }
#friends ul { list-style: none; padding: 0; margin: 0; width: 1000px; overflow:hidden; }
#friends li img { border: Black solid 1px; }
#friends li { float: left; margin: 0 12px 12px 0; list-style:none; }
#friends li:nth-child(8n){margin-right: 0;}


/* ---------- @ Theme sections -----------*/
#theme { float: left; display: inline; width: 415px; padding: 0; margin: 20px 0 20px; overflow:hidden; line-height: 160%; font-size: 0.75em; }
#theme p{ margin-top:3em;}

#theme h3 { line-height: 120%; margin: 6px 0 10px 0; margin-bottom: -1px; margin-top: 20px;}

#theme ul{ margin-left: 0; padding-left: 1em; text-indent: -1em; }
#theme li { list-style: square inside; }

#themeArchive { float: left; display: inline; width: 910px; padding: 0; margin: 110px 0 20px 0; overflow:hidden;}

.TBoxBlue { float: left; display: inline; width: 432px; padding: 0;}

.Themes { background: #c5e0e8 url(imgs/theme_theme.gif) no-repeat center top; margin: 0 19px 0 0;}
.Dir { background: #c5e0e8 url(imgs/theme_director.gif) no-repeat center top; margin: 0 0 0 19px;}
.Person { background: #c5e0e8 url(imgs/theme_personalities.gif) no-repeat center top; margin: 0 0 0 19px;}

.TBoxBlue p { margin: 80px 17px 12px 18px; line-height: 140%; font-size: 0.75em; }
.TBoxBlue p+p { margin: 0px 17px 12px 18px; line-height: 140%; font-size: 0.75em; }

.TBoxBlue a:link, .TBoxBlue a:visited, .TBoxBlue a:active { color: Red; text-decoration: none; }
.TBoxBlue a:hover { color: Black; text-decoration: none; background-color: #c5e0e8; }

#theme a:link, #theme a:visited, #mainImages p a:link, #mainImages p a:visited { color: #355e6a; text-decoration: none; }
#theme a:hover, #mainImages p a:hover { color: Red; text-decoration: none; background-color: #fff; }
#theme a:active, #mainImages p a:active  { color: #355e6a; text-decoration: none; }



/* ---------- @ Homepage sections -----------*/
.issue{ text-transform: uppercase; color: #FFF; background: #cc0000; padding: 2px 4px; }

#Editorial { display: inline; float:left; position: absolute; top: 0; left: 0; margin-top: 20px; width: 415px; line-height: 160%; font-size: 0.75em; }
#Editorial p {text-indent: 2em;}

#Ads {
	position: absolute;
	top: 385px;
	right: -2px;
	width: 468px;
	padding: 8px;
	margin-top: 20px;
	z-index: 2;

}

#mainImages {
	position: absolute;
	top: 2px;
	right: -2px;
	width: 468px;
	background-color: #f5f3ee;
	padding: 8px;
	margin-top: 20px;
}
#mainImages p { margin:0; padding:5px 0; text-align:center; font-size: 0.75em;}

#subsections { float: left; display: inline; width: 910px; padding: 0; margin: 430px 0 20px 0; overflow:hidden;}

.ssBoxBlue { float: left; display: inline; width: 221px; margin: 0; padding: 0; }
.ssBoxWhite { float: left; display: inline; width: 234px; margin: 0; padding: 0; }

.Theme { background: #c5e0e8 url(imgs/subsec_b_theme.gif) no-repeat center top; }
.Win { background: #c5e0e8 url(imgs/subsec_b_win.gif) no-repeat center top; }
.Anth { background: #c5e0e8 url(imgs/subsec_b_antho.gif) no-repeat center top; }
.Event { background: #c5e0e8 url(imgs/subsec_b_event.gif) no-repeat center top; }
.Event2 { background: #fff url(imgs/subsec_w_event.gif) no-repeat center top; }
.Anth2 { background: #fff url(imgs/subsec_w_antho.gif) no-repeat center top; }
.Club { background: #fff url(imgs/subsec_w_filmclub.gif) no-repeat center top; }
.Pod { background: #fff url(imgs/subsec_w_podcast.gif) no-repeat center top; }
.Radio { background: #c5e0e8 url(imgs/subsec_b_radio.gif) no-repeat center top; }
.Radio2 { background: #fff url(imgs/subsec_w_radio.gif) no-repeat center top; }


.ssPic { float: left; display: inline; padding: 90px 17px 12px 18px; border: 0; }

.ssBoxBlue .info { float: left; width: 170px; font-family: Verdana, Geneva, sans-serif; font-weight: bold; line-height: 150%; font-size: 0.70em; text-align: left; margin: 17px 0 20px 15px; background-color: #fff; padding: 8px; }
.ssBoxWhite .info { float: left; width: 170px; font-family: Verdana, Geneva, sans-serif; font-weight: bold; line-height: 150%; font-size: 0.70em; text-align: left; margin: 17px 0 0 15px; background-color: #c5e0e8; padding: 8px; }

.ssBoxBlue a:link { color: #000; text-decoration: none; }
.ssBoxBlue a:visited { color: #000; text-decoration: none; }
.ssBoxBlue a:hover { color: Red; text-decoration: none; background-color: #c5e0e8; }
.ssBoxBlue a:active { color: Red; text-decoration: none; }

.ssBoxBlue .info a:link { color: #000; text-decoration: none; }
.ssBoxBlue .info a:visited { color: #000; text-decoration: none; }
.ssBoxBlue .info a:hover { color: Red; text-decoration: none; background-color: White; }
.ssBoxBlue .info a:active { color: Red; text-decoration: none; }

.ssBoxBlue p { margin: 0 17px 12px 18px; line-height: 160%; font-size: 0.75em; }
.ssBoxWhite p { margin: 70px 17px 0 18px; line-height: 160%; font-size: 0.75em; }
.ssBoxWhite p.reset { margin: 10px 17px 0 17px; }

.ssBoxWhite .info a:link { color: Red; text-decoration: none; }
.ssBoxWhite .info a:visited { color: Red; text-decoration: none; }
.ssBoxWhite .info a:hover { color: #0babe0; text-decoration: none; background-color: #c5e0e8; }
.ssBoxWhite .info a:active { color: #0babe0; text-decoration: none; }



/* ---------- @ Play sub-sections -----------*/
#play { float: left; display: inline; width: 550px; padding: 0; margin: 20px 0 20px; overflow:hidden; line-height: 160%; font-size: 0.75em; }
#play p { margin: 18px 0 0 0;}


#Win { float: left; display: inline; width: 910px; padding: 0; margin: 60px 0 20px 0; overflow:hidden;}

#mainFlash { position: absolute; top: 0; right: 0; width: 300px; background-color: #c5e0e8; padding: 8px; margin-top: 20px; }
#mainFlash p { margin:0; padding:5px 0; text-align:center; font-size: 0.75em;}

.WBox { float: left; display: inline; width: 910px; padding 0;}

.Prize { background: #f5f3ee url(imgs/win.gif) no-repeat center top; margin: 0 19px 0 0;}
.PrizePic { float: right; display: inline; padding: 80px 17px 12px 18px; border: 0; }
.Prize .question { width: 400px; font-weight: bold; color: #fff; font-size: 1em; text-align: left; margin: 0 0 0 18px; background-color: #cc0000; padding: 8px; }
.Prize .date { color: #0babe0; width: 400px; font-weight: bold; font-size: 1em; text-align: left; margin: 0 0 0 18px; background-color: #fff; padding: 8px; }

.WBox p { margin: 80px 17px 18px 18px; line-height: 140%; font-size: 0.75em; }
.WBox p+p { margin: 0px 17px 18px 18px; line-height: 140%; font-size: 0.75em; }
.WBox p.reset { margin: 18px 17px 60px 17px; }

.WBox a:link, .ABoxBlue a:visited, .ABoxBlue a:active { color: #0babe0; text-decoration: none; background-color: White; }
.WBox a:hover { color: Red; text-decoration: none; background-color: White; }



/* ---------- @ About us sub-sections -----------*/
#about { float: left; display: inline; width: 900px; padding: 0; margin: 20px 0 20px; overflow:hidden; line-height: 160%; font-size: 0.75em; }
#about p { margin-top:3em;}
