/* ############################################# 

Description: 
	This style should be used for Snowboarding Transworld site. 
	
Version: 0.1

Author: Lucas Garcia

Mail: lgarcia@immersionmedia.com

############################################# */





/* ############### General settings ############### */


* {

	margin: 0;
	
	padding: 0;

}



body {

	color: #FFFFFF;

	background-color: #000000;

	font-size: 0.85em;
	
	/*font-family: "Times New Roman", Times, serif;*/
	font-family: Arial,Helvetica,sans-serif;

}


a {

	color: #000000;
	
	border: none;

	text-decoration: none;

}


/* ############### Wrapper ############### */

#wrapper {

	position: relative;

	width: 980px;
	
	margin: 20px auto !important;

}


/* ############### Header ############### */

#header {

	float: left;
	
	position: relative;
	
	height: 200px;

	width: 980px;
	
}
	
	
	#header #logo a {
	
		float: left;
	
		background:transparent url(style/logo.jpg) no-repeat scroll 0 0;
		
		height:181px;	
		
		width:189px;		
		
		overflow:hidden;
		
		text-indent:-999em;		
	
	}
	
	
	#header #banner {
	
		float: right;
	
		height:120px;	
		
		width:730px;
		
		margin: 30px 0;
	
	}


/* ############### Content ############### */

#content {

	background-color: #666666;

	float: left;
	
	position: relative;

	width: 980px;
	
}


	#content #logo2 a {
	
		background:transparent url(style/logo2.jpg) no-repeat scroll 0 0;	
		
		float: left;
	
		position: absolute;
		
		height: 63px;
		
		width: 187px;
		
		bottom: 20px;
		
		left: 15px;
	
	}



/* ############### Sidebar ############### */

#sidebar {

	float: left;
	
	position: relative;

	width: 220px;

}


	#sidebar .box {
	
		height: 200px;
		
		width: 220px;
		
		margin: 20px 0;

		text-align: center;
		
	}
	
	#sidebar .box a img {
	
		border: none;
	
	}	
	
	
		
/* ############### Sidebar | Menu ############### */

	
#sidebar #menu 	{

	width: 220px;

	margin: 50px 0 0 0;

}


#sidebar #menu ul {

	margin: 0 5px;

}


#sidebar #menu ul li {

	list-style: none;
	
	border-top: 1px solid #000000;
	
	line-height: 30px;
	
}

#sidebar #menu ul li.last {

	border-bottom: 1px solid #000000;

}


#sidebar #menu ul li a {

	color: #000000;

	font-size: 1.0em;

	font-weight: bold;

	padding: 0 0 0 20px;
	
	text-transform: uppercase;

}


#sidebar #menu ul li a:hover {

	color: #FFFFFF;

	background:transparent url(style/bullet.png) no-repeat scroll 2px 5px;	

}


#sidebar #menu ul li a.active {

	color: #FFFFFF;

	background:transparent url(style/bullet.png) no-repeat scroll 2px 5px;
		
}



/* ############### Main Content ############### */

#main-content {

	background-color:#000000;
	
	float:left;
	
	padding:50px 10px 10px;
	
	position:relative;
	
	width:730px;

}


#main-content iframe {

	width: 750px;
	
	height: 606px;
	
	border: none;

}


/* ############### Main Navigation ############### */

#main-navigation {

	float: left;

	position: absolute;
	
	background-color: #000000;
	
	height: 70px;
	
	width: 750px;
	
	left: 0px;
	
	top: -20px;

}

#main-navigation #nav,
#main-navigation #nav ul {

	float: left;

	margin:0;

	padding:0;

	list-style-type:none;

	list-style-position:outside;

	position:relative;

	line-height:1.5em; 

}


#main-navigation #nav a {

	text-decoration: none;

}


#main-navigation #nav a:hover {
	
	cursor: pointer;

}

#main-navigation #nav a img {

	border: none;

}


#main-navigation #nav li {

	float:left;
	
	position:relative;

}


#main-navigation #nav ul.submenu1 {

	background-color: #666666;

	position:absolute;

	display:none;

	width:162px;

	top:70px;
	
	left: 1px;

}

#main-navigation #nav ul.submenu2 {

	background-color: #666666;

	position:absolute;

	display:none;

	width:198px;

	top:70px;
	
	left: 0px;

}

#main-navigation #nav ul.submenu3 {

	background-color: #666666;

	position:absolute;

	display:none;

	width:151px;

	top:70px;
	
	left: 0px;

}

#main-navigation #nav ul.submenu4 {

	background-color: #666666;

	position:absolute;

	display:none;

	width:237px;

	top:70px;
	
	left: 0px;

}


#main-navigation #nav li ul h3 {

	font-size: 16px;
	
	font-weight: bold;
	
	text-transform: uppercase;
	
	padding: 10px;

}


#main-navigation #nav li ul a {

	color: #FFFFFF;

	float:left;
	
	font-weight: bold;

	height:30px;
	
	width:150px;	

	padding: 0 10px;	

}


#main-navigation #nav li ul a:hover {

	text-decoration: underline;

}

#main-navigation #nav ul ul {
	
	top:auto;

}	


#main-navigation #nav li ul ul {
	
	left:12em;
	
	margin:0px 0 0 10px;

}


#main-navigation #nav li:hover ul ul, 
#main-navigation #nav li:hover ul ul ul, 
#main-navigation #nav li:hover ul ul ul ul{
	
	display:none;
	
}


#main-navigation #nav li:hover ul, 
#main-navigation #nav li li:hover ul, 
#main-navigation #nav li li li:hover ul, 
#main-navigation #nav li li li li:hover ul{

	display:block;

}