/*
** CSS
**
** Styles for the Scene.org Awards site
** by Mika "DoC" Porspakka
** Original lay-out by Jukka "Sumolounge" Koops
**
** (c) Scene.org
**

** 5.1.2007 @ version 1.0 
	- Small inconsistencies and bugs weeded out, I hope.
** 2.1.2007 @ version 1.0 b
	- Full layout with all images
	- Works with all good browser AND IE 6
	  (since last version I encountered one more IE bug with borders)
** 1.1.2007 @ version 0.02b
	- Full basic layout, no images
	- Works with all good browser AND IE 6
	 (While doing this I had the pleasure to meet the following IE 'quirks': nonstandard box model, the peekaboo -bug, the doubled float margin bug... )
** 28.12.2006 @ version 0.01 
	- Basic layout, no images, works with safari

*/

/* feeling lazy: all margins and paddings to zero, thank you*/
html, body,
h1, h2, h3, h4,
ul, li, dl, dt, dd, 
form, div, p
{
padding: 0;
margin: 0;
}

h1, h2, h3, h4
{
font-weight: normal;
}

a
{
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

body
{
text-align: center; /* ie center page */
background-color: #1d1d1d;
font-family: "lucida grande", "lucida sans unicode", sans-serif ;
}

	div#pageContainer
	{
	font-size: 10px;
	margin: 0px auto 10px auto; /* margin auto: ff/opera center page */
	text-align: left; /* ie center page text-align back to normal*/
	width: 950px;
	padding: 0;
	padding-top: 0px;
	background: transparent url(../images/page_background_middle.jpg) repeat-y top center; 
	}

	/* page header - logo and login */
	div#pageHeader
	{
	padding: 25px 0 0 25px; 
	/* top rounder image here */
	background: transparent url(../images/page_background_top.jpg) no-repeat bottom center; 
	}
	
	div#headerScene
	{
	margin-top: 5px;
	margin-left: 20px;
	background-color: #101405;
	height: 115px;
	width: 220px;
	float: left;
	display: inline;
	}
	
		div#headerScene h1
		{
		color: #fff;
		height: 85px;
		width: 210px;
		margin-left: 10px; 
		display: block;
		background: #101405 url(../images/page_logo_sceneorg.gif) no-repeat center left; 
		}

		#headerScene h1 span
		{
		padding-top: 28px;
		text-align: center;
		display: block;
		font-size: 24px;
		display: none;
		}

		#headerScene p
		{
		position: relative;
		font-size: 9px;
		color: #fff;
		background-color: #87310B;  /* dark 6B2507 light ad471a*/
		height: 25px;
		width: 210px;
		padding-left: 10px;
		padding-top: 5px;
		line-height: 18px;
		}

		#headerScene p strong
		{
		font-weight: bold;
		color: #000;
		}

		#headerScene p input
		{
		vertical-align: middle;
		margin: 0px 5px 0px 0px;
		/* height: 20px; */
		font-size: 9px;
		font-family: lucida grande, lucida sans unicode, sans-serif ;

		}
		
		#headerScene p input.login
		{
		width: 60px;
		}

		#headerScene p input.loginsubmit
		{
		border:0;
		margin: 0;
		position: absolute;
		right: 5px;
		top: 5px;
		height: 19px;
		}

		#headerScene p input.logout
		{
		border:0;
		margin: 0;
		position: absolute;
		right: 5px;
		top: 5px;
		height: 19px;
		/* padding-bottom:4px; 
		width: 45px;
		text-align: center;
		background: transparent url(../images/form_logout_bg.gif) right center no-repeat;
		color: #fff;
		font-size: 9px; */
		}
		
	/* headermenu - main menu and scene.org awards logo*/
	div#headerMenu
	{
	background-color: #565446;
	height: 115px;
	width: 620px;
	margin-left: 20px;
	margin-top: 5px;
	float: left;
	display: inline;
	}
	
	h1#sceneAwardsLogo 
	{
	color: #fff;
	display: block;
	width: 620px;
	height: 85px;
	background: #101405 url(../images/page_logo_sceneawards.jpg) no-repeat center left; 
	}

	h1#sceneAwardsLogo span
	{
	padding-top: 28px;
	text-align: center;
	display: block;
	font-size: 24px;
	/*display: none;*/
	}

	/* main menu elements */
	#headerMenu ul
	{
	font-size: 10px;
	color: #fff;
	background-color: #87310B; /* dark 6B2507 light ad471a*/
	height: 30px;
	width: 620px;
	}	
	
		#headerMenu li
		{
		display:block;
		float:left;
		height: 30px;
		text-align: center;
		width: 80px; /* ie needs this or the page breaks up completely */
		border-right: 1px dashed #9d370a;
		}

		#headerMenu li.current
		{
		background-color: #6B2507 ;
		}

		#headerMenu li a
		{
		text-transform: uppercase;
		display:block;
		height: 21px;
		padding: 9px 20px 0 20px;
		text-decoration: none;
		color: #fff;
		}

		#headerMenu li a:hover
		{
		background-color: #9d370a ;
		}

	/* page content - main content and side content */
	div#pageContent
	{
	clear: left;
	margin: 0 20px;
	padding: 0;
	padding-top: 20px;
	position: relative;
	/* margin-bottom: 10px; */
	width: 885px; /* again a must for ie */
	}

	div#pageContent:after
	{
	content: " ";
	display: block;
	line-height: 1px;
	font-size: 1px;
	clear: both;
	}

	div#clear
	{
	content: " ";
	display: block;
	line-height: 1px;
	font-size: 1px;
	clear: both;
	}
	
	#pageContent hr
	{
	border: 0;
	margin: 0;
	padding: 0;
	border-bottom: 1px dashed #fff;
	clear: left;
	}
	
	/* main content */
	div#mainContent
	{
	margin: 0px 0px 0px 20px;
	width: 620px; /* needs to be declared or IE crazyness ensues (floated images disappear) */
	margin-bottom: 10px; 
	float: right;
	overflow-x: hidden;
	}

	/* width needs to be declared or IE crazyness ensues (floated images disappear) */
	/* bottom padding +5px comes from mainContent div.group border-bottom 
	was the following:
	div#mainContent 
	{
	margin: 0px 0px 0px 240px;
	width: 620px; 
	padding: 0 0 15px 0; 
	}	*/

		div#mainContent div.group
		{
		background-color: #565446;
		border-bottom: 5px solid #323241;
		width: 620px;
		background: #565446 url(../images/page_fade_blueish.gif) repeat-x left top; 
		}
	
		#mainContent div.group h4
		{
		color: #fff;
		font-size: 10px;
		height: 13px;
		text-transform: uppercase;
		padding: 5px 0px 5px 10px;
		/* border-bottom: 1px solid #5a909c; */
		}

		/* item - basic styles and positioning here */
		div#mainContent div.item
		{
		margin: 20px 10px;
		width: 600px;
		}
	
			#mainContent div.item img,
			#mainContent div.item img.image /* class="image" is not actually needed */
			{			
			float: left;
			display: inline;
			border: 0px;
			margin: 0 20px 0 0;
			/* width: 160px; */
			}

				#mainContent div.item img.ribbon
				{			
				margin: 0 20px 0 40px;
				}

				#mainContent div.item img.winner
				{			
				float: right;
				margin: 10px 20px 10px 20px;
				}
				
			#mainContent div.item h2
			{
			font-size: 22px;
			margin-bottom: 10px;
			margin-left: 180px;
			color: #fff;
			}

			#mainContent div.item h3
			{
			font-size: 14px;
			margin-left: 180px;
			color: #fff;
			}

			#mainContent div.item2 h3
			{
			font-size: 14px;
			margin-left: 10px;
			color: #fff;
			}

			#mainContent div.item p
			{
			color: #dbb9ac;
			font-size: 11px;
			margin-bottom: 10px;
			margin-left: 180px;
			line-height: 16px;
			}

			#mainContent div.item2 p
			{
			color: #dbb9ac;
			font-size: 11px;
			margin-bottom: 10px;
			margin-left: 10px;
			line-height: 16px;
			}

				#mainContent div.item p small
				{
				color: #fff;
				font-size: 9px;
				}

			#mainContent div.item em,
			#mainContent div.item i
			{
			color: #fff;
			font-style: italic;
			}

			#mainContent div.item strong,
			#mainContent div.item b
			{
			color: #fff;
			font-style: normal;
			font-weight: bold;
			}

			#mainContent div.item ul
			{
			color: #dbb9ac;
			font-size: 11px;
			margin-bottom: 10px;
			margin-left: 180px;
			line-height: 16px;
			}

			#mainContent div.item ul li
			{
			list-style-position: inside;
			list-style-type: disc;
			/* color: #dbb9ac; */ /* red colored list? */
			}

			#mainContent div.item a
			{
			color: #ffe9dc;
			}

			/* form elements for voting */
			#mainContent div.item select
			{
			font-size: 11px;
			width: 415px;
			font-family: "lucida grande", "lucida sans unicode", sans-serif ;
			}

			#mainContent div.item textarea,
			#mainContent div.item input
			{
			font-size: 11px;
			width: 410px;
			font-family: "lucida grande", "lucida sans unicode", sans-serif ;
			}

			#mainContent div.item2 textarea,
			#mainContent div.item2 input
			{
			font-size: 11px;
			font-family: "lucida grande", "lucida sans unicode", sans-serif ;
			}

			#mainContent div.item input.submit
			{
			font-size: 11px;
			width: 103px;
			height: 19px;
			border: 0;
			font-family: "lucida grande", "lucida sans unicode", sans-serif ;
			}

			#mainContent div.item2 input.submit
			{
			font-size: 11px;
			width: 50px;
			height: 19px;
			border: 0;
			font-family: "lucida grande", "lucida sans unicode", sans-serif ;
			}

			
	/* side content was
	div#sideContent
	{
	position: absolute;
	left: 0px;
	top: 20px;
	width: 220px;
	}
	*/
	div#sideContent
	{
	float: right;
	width: 220px;
	margin-left: 25px;
	margin-bottom: 10px; 
	}

	
		/* group - basic styles and positioning here */
		#sideContent div.group
		{
		background-color: #101405; /* dark #313526 */
		border-bottom: 5px solid #323241;
		background: #212612 url(../images/page_fade_greenish.gif) repeat-x left top; 
		}

		#sideContent div.group h4
		{
		color: #fff;
		font-size: 10px;
		height: 13px;
		text-transform: uppercase;
		padding: 5px 0px 5px 10px;
		/* border-bottom: 1px solid #3a3e2e; */
		width: 210px;
		}
		
		#sideContent div.group p
		{
		font-size: 12px;
		color: #abb98c;
		line-height: 17px;
		margin: 5px 10px 10px 10px;
		width: 195px; /* otherwise IE goes bonkers */
		}			

		#sideContent div.group p.sponsor
		{
		font-size: 9px;
		}

			#sideContent div.group p em
			{
			font-weight: normal;
			font-style: italic;
			}

			#sideContent div.group p a.more
			{
			color: #f6d4b6;
			padding: 5px 0px;
			}

		#sideContent div.group a.sponsor
		{
		border:0;
		text-decoration: none;
		}
			a.sponsor:hover
			{
			text-decoration: none;
			}
		
		#sideContent div.group img
		{
		margin-top: 5px;
		border: 0;
		}

		#sideContent div.group img.breakpoint
		{
		margin-left: 18px;
		margin-bottom: 10px;
		}

		#sideContent div.group h2
		{
		font-size: 22px;
		margin: 5px 10px;
		color: #fff;
		}
		
		/* side menu elements - look and feel */
		ul#sideMenu
		{
		display:block;
		font-size: 10px;
		color: #fff;
		margin: 10px 0 10px 10px;
		background: #313526 url(../images/page_fade_darkgreenish.gif) repeat-x left top; 
		}	

			ul#sideMenu li
			{
			/* margin-left: 10px; */
			margin: 0;
			padding: 0;
			border-bottom: 1px solid #101405;
			list-style-type: none;
			list-style-position: inside;
			/* background-color: #313526; ight #101405 */
			/* background-color: transparent; light #101405 */
			}

			ul#sideMenu li.current
			{
			background: #313526 url(../images/menu_side_hover.gif) no-repeat right center;
			}
			
			ul#sideMenu li a
			{
			text-transform: uppercase;
			display:block;
			padding: 9px 10px 9px 10px;
			text-decoration: none;
			color: #fff;
			}

			ul#sideMenu li a:hover
			{
			height: auto;
			background: transparent url(../images/menu_side_selected.gif) left top repeat-y; 
			}
			
			ul#secondary
			{
			background-color: #24271b;
			font-size: 10px;
			display: block;
			width: 210px;
			margin: 0; 
			padding: 10px 0;
			}
			
				ul#secondary li
				{
				text-transform: none;
				display: block;
				line-height: 13px;
				width: 170px;
				background-color: #24271b;
				margin: 0; 
				padding: 0;
				padding-bottom: 3px; 
				padding-left: 20px;
				border: 0;
				}
				
				ul#secondary li a
				{
				color: #9da28c;
				text-transform: none;
				background-color: #24271b;
				margin: 0; 
				padding: 0;
				border: 0;
				}

				ul#secondary li a.current
				{
				color: #fff;
				}

				ul#secondary li a:hover
				{
				background: transparent;
				color: #fff;
				}

				
	/* page footer - footer text and end wankery*/
	div#pageFooter
	{
	padding: 20px 0 10px 0;
	background: #1d1d1d url(../images/page_background_bottom.jpg) no-repeat top center; 
	/* bottom rounder image here 
	background: transparent url() no-repeat left top; */
	}

		div#pageFooter p
		{
		font-size: 10px;
		display: inline;
		margin-left: 285px;
		color: #888888;
		background-color: transparent;
		}

		div#pageFooter p a
		{
		color: #aaaaaa;
		}
#pageFooter p a
		{
		color: #aaaaaa;
		}