/*
READ THIS FIRST!
This CSS file has been divided into sections for greater maintainability.
Comments in each section describe what types of things go there.
Here is an outline / overview:

general styles
    - body styles
    - reset
    - links
    - headings
    - other elements, tags
    
Helper Styles
    [consistent items with normally just one class]
    - General
    - Image Replacement
    - Forms
    - Notifications and Errors
    

Page Structure / Overall Layout
    [skeleton including page furniture, layout for overall containers]
    
page components
    [most of your styles will be in here]
    - Branding
    - Navigation
    - Content Areas
    - Footer
    
overrides



Parts of form styles based on blueprint css framework.

*/




/* ============================================= */

/*Group: General Styles */
/* body styles, reset, default element styles */
/*BeginGroup */

/*@ body styles 
============ */ 
/* set your default font and font size here */


html {
    font-size: 100%; /* fixes crazy font-size issue in IE */
}

body {
 /* 'HelveticaNeue Heavy', 'MyriadPro Regular'; */
 font-style: normal;
/* Helvetica Black, HelveticaNeue Heavy, MyriadPro Regular */
 font-size: 1em;  /* should be 16px at this point */
 color: #000;
 background-color: #fff;
}

/* default font all in one place */
body, input, textarea, select,
#user_actions {
 font-family: "MyriadPro Regular", MyriadPro, "Myriad Pro", Myriad, Verdana, Tahoma, "DejaVu Sans", sans-serif;
}






/*@ resets
============ */

input, textarea, select {
 font-family: "MyriadPro Regular", MyriadPro, "Myriad Pro", Myriad, Verdana, Tahoma, "DejaVu Sans", sans-serif;
 font-size: 11px;
}



form {
    margin: 0;
}

label { 
	font-weight: bold; 
	color: red;
}

fieldset { 
	padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; 
}

legend { 
	font-weight: bold; font-size:1.2em; 
	padding: 0;
	margin: 0;
}

.lteIE7 legend {
	position: relative;
	left: -7px;
}

a img {
 border: none;
 text-decoration: none;
}

dt {
    margin: 0;
    font-weight: bold;
}

dd {
    margin: 0;
    margin-bottom: 0.5em;
}

ul, p {
    margin-top: 1em;
    margin-bottom: 1em;
}





/*@ resets: headings
============ */

/* these are taken from firefox user-agent css, and mostly to give IE some more sensible defaults */
h1, h2, h3, h4, h5, h6 {
	/* font-family: "Comic Sans MS", "Helvetica Black", "Arial Black", Helvetica, Arial, sans-serif; */
	font-family: "DejaVu Sans Mono", "Courier New", Courier, monospace;
	color: #ee2b2c;
	/* text-transform: lowercase; */
	font-weight: bold;
}

h1, h2 {
	font-size: 
	/* text-transform: uppercase!important; */
}

h2 {
	color: #e3b03c;
	text-transform: none;
	border-top: 1px dotted #e3b03c;
	font-size: 16px;
	padding-top: 5px;
}


h3 {
	font-size: 14px;
}

h4, h5, h6 {
	font-size: 12px;
}
.tight h2, .tight h3, .tight h4, .tight h5, .tight h6,
h2.tight, h3.tight, h4.tight, h5.tight, h6.tight {
	margin-bottom: -1em;
}

.box ul {
	padding-left: 0;
}






/*@ links 
============ */
/* define default link styles */

a, a:link {
	color: #ee2b2c;
}

a:visited {
	color: #777;
}

a:hover {
	background: #ee2b2c;
	color: #000;
}

a:active {
	color: #ccc;
}

/* TODO: images for pdf and mailto links, a la CAC */


/*@ headings
============ */
/* better to use h1, h2, h3 etc tags than span class="stylex" or font tags on headers */




/*EndGroup General Styles*/









/* ============================================= */

/*Group: Helper Styles */
/* forms, notifications, paginations, etc: consistent items with a class */
/*BeginGroup */

/*@ General
============ */

.clear {
 clear: both;
 height: 0;
}

* html .clear {
 /* needed for IE6 to not give it height */
 position: absolute;
 top: -9999em;
left: -9999em;
}

a.more {
    float: right;
    display: block;
    font-weight: bold;
    border: 1px solid #333;
    margin-bottom: 0.5em;
    padding: 2px;
    color: #333;
    background: #aaa;
}

a.more:hover {
    background: #333;
    color: #eee;
}

.first {
	/* ie, for first paragraph or element in a box, etc */
	margin-top: 0;
}

/* for preloading images -- place the img in the body of the page, with alt=""
	and they will load, but not be shown
*/
.preload {
	display: none;
}



/*@ Image Replacement
============ */

.ir {
    position: relative;
    display: block;
}

.ir span.ir {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

.image {
/* for putting img tag inside of h1.image, h2.image, etc 
	using alt text instead of css image replacement
*/
	margin: 0;
	padding: 0;
	text-align: center;
}

/* to do image replacement, make a rule for the specific span.ir with a 
    background-image: url(); then for the containing .ir with height and width.
*/



/*@ Forms
============ */

fieldset {
	width: 250px;
	border: 0;
	margin: 0;
	padding: 0;
}

label {
	display: block;
}

label, .field legend {
	font-size: 12px;
	color: red;
}

.field, .field_group {
	width: 100%;
	margin-bottom: 10px;
	clear: both;
}

.field .field_help {
	margin: 0;
	font-style: italic;
	font-size: 11px;
}

.field.headless label {
	display: none;
}

.field.headless {
	margin-top: -8px;
}

input.text, input.password, input.file, 
input.title,
textarea, select {
	background-color: #aaa;
  /* border: 1px solid #666; */
}

input:focus, input.text:focus, input.title:focus,
textarea:focus, select:focus {
	background: #333!important;
	color: #eee!important;
	font-weight: bold;
	/* border: 1px solid #008051; */
}

input.text, input.title, input.file, input.password { 
	width: 100%; 
	/* padding: 3px; */
}

input.title { 
	font-size:1.5em; 
}

textarea { 
	width: 100%; 
	height: 120px; 
	padding: 3px; 
}

fieldset.choices_field {
	border: none;
	padding: 0;
}

.choices_field .field {
	width: auto;
	float: left;
	margin-right: 10px;
	clear: none;
}

.choice_field input,
.choice_field label {
	float: left;
	line-height: 15px;
	vertical-align: middle;
}

.field_group .field {
	float: left;
	clear: none;
}

.field.state {
	width: 40%;
}

.field.state select {
	width: 10em;
}

.field.month {
	width: 9em;
}

.field_group.date .field label {
	display: none;
}

.field.mday {
	width: 5em;
}

.field.year {
	width: 4em;
}

.field.zip {
	width: 50%;
	float: right;
}



/*@ field errors
============ */

.field.has_err {
	border: 1px solid red;
	padding: 2px 5px;
	padding-right: 9px;
	position: relative;
	background: url(../images/splat2.gif) no-repeat bottom left;
	width: 100%;
	float: none;
	clear: both;
}

.has_err input, .has_err select, .has_err textarea {
	background: #fbc2c4;
	color: #333;
}

.field .errors {
	list-style: none;
	margin-left: 1em;
	padding-left: 0;
	font-weight: bold;
	color: #e3b03c;
	font-size: 11px;
}

.error-indicator {
	visibility: hidden;
}





/*@ ctr_blk
============ */

/* "Center Block" : 
	to allow centering of non-fixed-width block elements
	block elements must be floated to shrink-wrap width
	see http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
	*/


.ctr_blk {  
	float: left;
	width: 100%;
	overflow: hidden;
}

.ctr_blk .centrer {
	display: block;
	float: left;
	position: relative;
	left: 50%;
}

.ctr_blk .centrer .centred {
	display: block;
	float: left;
	position: relative;
	right: 50%;
}





/*@ Actions
============ */


.form_actions, .actions {
	text-align: center;
	width: 100%;
}

.form_actions input,
.actions input,
.actions a {
	font-weight: bold;
	font-size: 14px;
	display: block;
	padding: 5px 10px;
	background: #aaa;
	border: 1px solid #900;
	color: #900;
	text-decoration: none;
	text-transform: uppercase;
}

.actions a:hover,
.actions input:hover {
 background: #d9d9d9;
 color: #111;
 text-decoration: underline;
}

.actions a:active {
 border-top: 2px solid;
 border-left: 2px solid;
 border-bottom: 1px solid;
 border-right: 1px solid;
 background: #999;
 color: #111;
}










/*@ Notifications and Errors
============ */

.messages {
	list-style: none;
	margin: 0.2em 0.5em;
	margin-right: 1em;
	padding: 0;
	color: #514721; 
}

.messages li {
	padding: .8em; 
	margin-bottom: 1em; 
	border: 2px solid #ddd; 
	background: #FFF6BF; 
	border-color: #FFD324; 
}

.error, li.error { 
	background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; 
}

.success, li.success { 
	background: #E6EFC2; color: #264409; border-color: #C6D880; 
}

.error a    { color: #8a1f11; }
.notice a, .messages li a { color: #514721; }
.success a  { color: #264409; }

.messages li ul {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.messages li li {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}




/*@ Navigation
============ */

/* TODO: put a basic suckerfish in here */

ul.nav {
    list-style: none;
    margin: 0;
    padding: 3px 0;
    float: left;
}

ul.nav li {
    float: left;
    padding: 0;
}

ul.nav a {
    display: block;
    padding: 0 1.25em;
    border-left: 1px solid #eee;
}

ul.nav .first a {
    border-left: none;
}

ul.nav a:hover, ul.nav .current a {
    text-decoration: underline;
}


ul.vnav, ul.vnav li {
	float: none;
}


/* also see AWdebug.css for rules for debugging blocks */

/*EndGroup Helper Styles*/












/* ============================================= */

/*Group: Page Structure */
/* Skeleton including page furniture ---
the header, footer, and the generic layout blocks that make
up a basis for your components to fit snugly into. */
/*BeginGroup */


#page {
	background: #000 url(../images/mainbg.gif) no-repeat;
	width: 59.6em; /* 1 / 16px x 955px = 59.6875em */
	height: 37.4em; /*  1/16 x 600px  */
	margin: 0 auto;
	color: #fff;
	position: relative;
}

#feature_pix {
	width: 300px;
	height: 100%;

}

#test {
	position: absolute;
	top: 0px;
	left: 0px;
	background: #fff;
	width: 250px;
	color: #000;
	border: 2px solid red;
	background-color: #fff;
}

#content_and_header_container {
	float: right;
	width: 40.9375em; /* 1/16 x 655 */
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

#header_container {
	text-transform: uppercase;
	font-family: "Helvetica Black", "Arial Black", Helvetica, Arial, sans-serif;
	font-weight: bold;
}

#branding {
	background: url(../images/red-splotch.png) no-repeat center center;
	width: 427px;
	height: 110px;
	position: relative;
	float: left;
}

* html #branding {
	background-image: url(../images/red-splotch.gif); /* avoids alpha png bug */
}

#site_actions {
	float: left;
	margin-left: 10px;
	margin-top: 0;
	font-size: 18px;
	text-align: center;
	font-weight: bold;
}

.content_container {
	clear: both;
	float: right;
	position: relative;
	height: 480px;
	width: 630px;
	overflow: scroll;
	overflow-y: scroll;
	overflow-x: hidden;
	font-size: 12px;
}

.content_container.short {
	overflow: hidden;
	margin-right: 10px;
}

.padded .content_innertube {
	padding: 0 2em;
}




/*EndGroup Page Structure */









/* ============================================= */

/*Group: Page Components */
/* most styles will go in here */
/*BeginGroup */



/*@ Branding
============ */

#branding_innertube {
	padding-top: 29px;
}

#branding h1 {
	margin: 0 auto;
	height: 38px;
	width: 378px;
	color: #ee2b2c;
	font-size: 24px;
}



#branding h1 .ir {
	background: url(../images/clickdontsplat.png) no-repeat center center;
}

* html #branding h1 .ir {
	background: url(../images/clickdontsplat.gif) no-repeat center center;
}



/*@ Navigation
============ */

#header_container a {
	text-decoration: none;
	color: #fff;
	border: none;
}

#branding .nav {
	font-size: 10px;
	text-transform: uppercase;
	margin-left: 20px;
}

#branding .nav a {
	padding: 0 5px;
	border: 1px solid transparent;
}

#branding .nav a:hover,
#branding .nav .current a {
	color: #000;
	background: #ee2b2c;
	border: 1px solid #111;
}

#branding .nav .current a {
	color: #000;
	background: #e3b03c;
}

#user_actions {
	position: absolute;
	top: 90px;
	right: 0;
	margin-right: 15px;
	background-color: #000;
	padding-bottom: 2px;
	border-bottom: 1px solid #666;
	font-size: 10px;
	font-weight: normal;
	text-transform: none;
}

#user_actions a {
	color: red;
	padding: 0 0.5em;
	text-transform: uppercase;
}

#user_actions a:hover {
	text-decoration: underline;
	background: transparent;
}

#site_actions a {
	padding: 0;
	white-space: nowrap;
}

#site_actions #watch_vids a {
	background: url(../images/yellowbox.png) no-repeat center center;
	color: #231f20;
	width: 173px;
	height: 54px;
	line-height: 54px; 
}

#site_actions #watch_vids a span {
	background: #e3b03c;
}

#site_actions #watch_vids a:hover {
	background: url(../images/yellowbox-wht.png) no-repeat center center;
	color: #000;
}

#site_actions #watch_vids a:hover span {
	background-color: #fff;
}


* html #site_actions #watch_vids a {
	background: url(../images/yellowbox.gif) no-repeat center center;
}

* html #site_actions #watch_vids a:hover {
	background: url(../images/yellowbox-wht.gif) no-repeat center center;
}



#site_actions #submit_vids a {
	background: url(../images/redbox.png) no-repeat center center;
	width: 174px;
	height: 33px;
	line-height: 33px;
}

#site_actions #submit_vids a:hover {
	background: url(../images/redbox-wht.png) no-repeat center center;
	color: #111;
}

* html #site_actions #submit_vids a {
	background: url(../images/redbox.gif) no-repeat center center;
}

* html #site_actions #submit_vids a:hover {
	background: url(../images/redbox-wht.gif) no-repeat center center;
}


/*@ Sounds
============ */

#sounds {
	position: absolute;
	bottom: 5px;
	left: 122px;
	display: block;
	border: 1px solid red;
	background: #444;
	padding: 3px 10px;
	padding-top: 1px;
	font-size: 10px!important;
	z-index: 200;
	color: #eee;
	font-weight: bold;
}

#sounds:hover {
	background: #ccc;
	color: #111;
	border-color: #111;
}




/*@ Content
============ */

.content_container .col1 {
	float: left;
	width: 48%;
}

.content_container .col2 {
	float: right;
	width: 48%;
}

/* homepage */

.homepage .col1 {
	width: 265px;
}

.homepage .col2 {
	width: 340px;
}

.homepage h2, .sep h2 {
	color: #ee2b2c;
	font-size: 13px;
	line-height: 15px;
	padding: 0;
	border: none;
	text-transform: uppercase;
}

.homepage .col1 h2 {
	text-align: center;
	text-transform: none;
	font-size: 18px;
	line-height: normal;
	zoom: 1; /* goddammit. no time to fix properly right now*/
}

.content_container.homepage .col2 {
	margin-top: 10px;
}


.feat_vid {
	width: 322px;
	margin-left: auto;
	margin-right: auto;
	height: 241px;
	
}

.feat_vid .player {
	height: 240px;
	width: 320px;
	border: 1px solid #e3b03c;
}








.vid_thnls {
	width: 335px;
	margin: 0 auto;
	/*
	overflow: scroll;
	overflow-x: scroll;
	overflow-y: hidden;
	*/
}

.vid_thnls ul a {
	border: none;
	padding: 0;
}

.vid_thnls li {
	margin: 0 3px;
}

.vid_thnls img {
	border: 1px solid #666;
	height: 71px;
}


#vid_stuff, #vid_stuff * {
	color: #e3b03c;
	font-size: 15px;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: normal;
}

#vid_stuff a {
	color: #ee2b2c;
	border: 1px solid transparent;
	background: #000;
}

#vid_stuff a:hover {
	background: #000;
	border: 1px solid #900;
	color: #fff;
}

#vid_stuff h2 {
	text-align: center;
	color: #EE2B2C;
	font-size: 16px;
	line-height: normal;
	margin: 0;
}







/*@ Splat
============ */

ul.splat {
	color: #e3b03c;
	font-size: 15px;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	list-style: none;
	margin: 0;
	margin-top: 0.5em;
	padding: 0;
	margin-left: 5px;
}

ul.splat li {
	background: url(../images/splat1.gif) no-repeat top left;
	padding-left: 38px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.splat li.s1 {
	background: url(../images/splat1.gif) no-repeat top left;
}

.splat li.s2 {
	background: url(../images/splat2.gif) no-repeat top left;
}

.splat li.s3 {
	background: url(../images/splat3.gif) no-repeat top left;
}






/*@ Box
============ */

.box {
	/* background-color: #fff; */
	color: #231f20;
}


.bg-cont {
	position: relative;
	/* z-index: -2; */
}

.bg {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	background-color: #fff;
}

.bg-cont .innertube {
	position: relative;
	top: -10px; left: 0;
	z-index: 9!important;
}

.bg-cont .innertube a {
	position: relative;
}



.maintxthp {
	font-size: 15px;
	font-weight: bold;
	color: #FFFFFF;
	padding: 0.5em 0;
	text-align: center;
	line-height: 25px;
	/* font-family: "Comic Sans MS"; */
	font-family: "DejaVu Sans Mono", "Courier New", Courier, monospace;
	/* font-weight: normal; */
	font-weight: bold;
}

.box h2, .box h3 {
	margin-top: 0;
	margin-bottom: -0.5em;
	text-align: center; 
	font-family: Impact, 'Arial Black', Verdana, Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 16px; 
	line-height: 18px;
	text-transform: uppercase;
}

.box a.f_button {
	display: block; 
	margin: 1em auto;
	margin-top: 1em;
	width: 66%;
	text-align: center;
	border: 2px solid #EE2B2C;
	padding: 3px;
	background: #666;
	color: white;
	font-weight: bold;
	text-transform: uppercase;
}

.box a.f_button:hover {
	background: #EE2B2C;
	color: black;
	border-color: black;
}

box .innertube {
	padding: 5px 5px 6px 12px;
}

#box1 {
	/* background: url(../images/whitebox1.gif) no-repeat top left; */
	width: 180px;
	height: 9.83em;
	margin: 0 auto;
}

#box1 .innertube {
	padding: 18px 10px 6px 18px;
}


#box2 {
	background: url(../images/whitebox2.gif) no-repeat top left;
	width: 247px;
	height: 118px;
	margin-left: 7px;
}

#box2 .innertube {
	padding: 10px 6px 6px 15px;
}





/*@ Login
============ */

.login .actions {
	text-align: right;
}

.login {
	width: 200px;
}




/*@ This / That
============ */

.this_that .col1,
.this_that .col2 {
	width: 39%;
	float: left;
}

.this_that .sep {
	float: left;
	width: 19%;
	margin-top: 5%;
	text-align: center;
}

.sep {
	text-align: center;
	width: 66%;
	border-top: 1px dotted red;
	border-bottom: 1px dotted red;
	margin: 2em auto;
	line-height: 2em;
	vertical-align: middle;
}

.lteIE7 .sep {
	padding-top: 1em;
}





/*@ Videos
============ */

.videos {
	padding-bottom: 10px;
	margin-bottom: 20px;
}

.video {
	clear: both;
	float: left;
	width: 100%;
	border-bottom: 1px dotted #666;
	padding-top: 5px;
	padding-bottom: 10px;
	margin-bottom: 5px;
}

.video .info {
	width: 270px;
	float: left;
}

.video h3 {
	margin: 0;
	text-transform: none;
	font-size: 140%;
}

.video h4 {
	margin-bottom: 0;
	border-bottom: 1px dotted #ccc;
	font-weight: normal;
}

.video .collab {
	margin-top: 0;
}

.video dl {
	display: block;
	margin: 0;
	margin-bottom: 10px;
}

.video dt {
	float: left;
	clear: left;
	margin: 0;
	margin-right: 10px;
}

.video dd {
	margin-bottom: 0;
}

.video .desc {
	clear: left;
	margin-top: 10px;
}

.vid_player {
	float: left;
	width: 322px;
	margin-right: 10px;
}

.player {
	border: 1px solid #e3b03c; /* #ccc */
}

.player .flowplayer {
	display: block;
	width: 320px;
	height: 240px;
	position: relative;
}

.flowplayer .play_button {
	background-image: url(/images/play-bttn.png);
	background-repeat: no-repeat;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-position: center;
	top: 0;
	left: 0;
}

.flowplayer:hover .play_button {
	background-image: url(/images/play-bttn-down.png);
}

.video .admin {
	text-align: center;
	padding: 10px 0;
}

.approve, .reject {
	padding: 5px 10px;
	font-weight: bold;
	font-size: 12px;
	margin: 5px;
}

a.approve {
	border: 1px solid #C6D880;
	background: #e6efc2;
	color: #264409;
}

a.approve:hover {
	background: green;
	color: white;
}

a.reject {
	border: 1px solid #fbc2c4;
	background: #fbe3e4;
	color: #8a1f11;
}

a.reject:hover {
	background: red;
	color: white;
}



/*@ Loud
============ */

.loud {
	font-size: 14px;
	font-weight: bold;
}

.loud ul {
/*
	text-align: left;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	*/
}




/*@ Ads
============ */



/*@ colophon / footer
============ */
#colophon {
    background: #ccc;
    border-top: 1px dotted #999;
    text-align: center;
    padding: 0.5em;
    font-size: 0.8em;
}





/*@ Register Form
============ */

.register_form h2 {
	margin: 0.25em 0;
	margin-bottom: 0.5em;
}

.register_form .field, .register_form .field_group {
	margin-bottom: 7px;
}






/*EndGroup Page Components */










/* ============================================= */

/*Group: Overrides */
/* with good overall structure, shouldn't have to use this much */
/*BeginGroup */


/*@ IE
============ */




/*EndGroup Overrides */
.whiteboxbackground {
	background-image: url(../images/whitebox1.gif);
	background-repeat: no-repeat;
}
.gold {
	color: #E3B03C;
}

.prizebkgrnd {
	background-image: url(../images/prizebkgrnd.jpg);
	padding-right: 190px;
	background-repeat: no-repeat;
	background-position: right top;
}

.prizebkgrnd h2.gold {
	margin-right: -190px;
}