/*
	Current version: 1.0
	
	Site: Better Bodies - Better Bodies
	Author: Malin Klingsell, malin.klingsell@atrox.se
	Notes: This file contains the rules of the basic structure and navigation of the site.
	------------------------------------------------------------------
*/



html, body, form, fieldset, textarea, input
{
	margin: 0;
	padding: 0;
	font: 100%/1.2 Arial, Helvetica, sans-serif;
}
html body
{ 
	font-size: 76%;
	background:#fff;
}

	#startPage, #viewPage
	{
		background:#000 !important; 
	}

h1, h2, h3, h4, h5, h6 {font-family: Arial, helvetica, Sans-Serif;font-weight: bold;margin: 1em 0 .5em 0;}
h1
{
	font-size: 1.4em;
	text-transform: uppercase;
	display: block;
	padding: 0 0 2px 0;
}
h2 {	
	text-transform: uppercase;
	color:#fb7115;
	font-size: 1.4em; 
	margin: 1em 0 .2em 0;
	}
h3 {font-size: 1.1em;}
h4, h5, h6 {font-size: 1em;}

p {font-size: .916em;padding: 0;margin: 0 0 1.1em 0;font-family: Arial, helvetica, Sans-Serif;}
table, td{font-family: Arial, helvetica, Sans-Serif;}

a {font-family: Arial, helvetica, Sans-Serif !important;color: #fb7115;text-decoration: none;}
	a:hover {color: #444444;}

form label {cursor:pointer;position: relative;top: -2px;font-size: .916em;}
input, select, textarea {font-size: 100%;padding: 2px;border: 1px solid #5c5c5c;}
	select{padding: 0;}
	.submit
	{
		background: url(../images/common/submit_bg.gif) repeat-x;
		color: black;
		font-weight: bold;
		border: 1px solid #d09d02;
		border-width: 0 1px 1px 0;
		cursor: pointer;
	}
fieldset {border: none;}

li {margin: 0 0 .5em 0;}

img {border: 0;}

form
{
	margin:0;
	padding:0;
}


#startPage, #viewPage
{
	background: #000000;
}

#wrapper
{
	margin: 0 auto;
	text-align: left;
	width: 970px;
	position:relative;
}

	#splashWrapper
	{
		text-align: left;
		width: 420px;
		height:500px;
		overflow:hidden;
		margin: 20px auto;
	}

#startPage #logo
{
	width: 328px;
	height: 250px;
	background: url(../images/custom/splash-logo.gif) no-repeat;
	overflow: hidden;
	ouline: 0;
	display: block;
	text-indent: -9999px;
	margin: 0 0 0 10px;
}
#leftColumn
{
	width: 205px;
	float: left;	
	padding: 0;
}
#sLang
{
	margin: 20px 0 0 0;
}


#view2SubmenuColumn
{
	width: 205px;
	display: block;
	float: left;	
	padding: 0;
	height: auto !important;
	height: 350px;
	min-height: 350px;
}

/* SNIPPET WITH SUBMENU AND SMALL IMAGE  */

#view2LeftColumn
{
	width: 256px;
	display: block;
	float: left;	
	padding: 0;
	height: auto !important;
	height: 350px;
	min-height: 350px;
}
#view2MainContainer
{
	width: 449px;
	float: left;	
	height: auto !important;
	height: 231px;
	min-height: 231px;
}

/** END OF: SNIPPET WITH SUBMENU AND SMALL IMAGE  **/

/* SNIPPET WITH SUBMENU AND SMALL IMAGE  */

#view2LeftColumnBig
{
	width: 400px;
	display: block;
	float: left;	
	padding: 0;
	height: auto !important;
	height: 350px;
	min-height: 350px;
}
#view2MainContainerSmall
{
	width: 305px;
	float: left;	
	height: auto !important;
	height: 231px;
	min-height: 231px;
}

/** END OF: SNIPPET WITH SUBMENU AND SMALL IMAGE  **/

/* SNIPPET WITHOUT SUBMENU, WITH SMALL IMAGE  */

#view1LeftColumnSmall
{
	width: 256px;
	display: block;
	float: left;	
	padding: 0;
	height: auto !important;
	height: 350px;
	min-height: 350px;
}
#view1MainContainerBig
{
	width: 654px;
	padding: 0 20px 20px 30px;
	float: left;	
	height: auto !important;
	height: 231px;
	min-height: 231px;
}
/** END OF: SNIPPET WITHOUT SUBMENU, WITH SMALL IMAGE  **/

/* SNIPPET WITHOUT SUBMENU, WITH BIG IMAGE  */

#view1LeftColumnBig
{
	width: 526px;
	display: block;
	float: left;	
	padding: 0;
	height: auto !important;
	height: 350px;
	min-height: 350px;
}

#view1MainContainerSmall
{
	width: 384px;
	float: left;	
	height: auto !important;
	height: 231px;
	min-height: 231px;
}

/** END OF: SNIPPET WITHOUT SUBMENU, WITH BIG IMAGE **/

.athleteImg
{
	padding: 25px 0 0 40px;
}
#leftColumn ul.productMenu
{
	margin: 0 0 0 9px;	
}
#header
{
	height: 165px;
	padding: 0;
	width: 970px;
	overflow: hidden;
	background:url(../images/common/header-bg.gif) no-repeat;
}
#headerContainer
{
	width: 970px;
	height: 269px;
}
#mainContainer
{
	width: 970px;
	float: left;	
	background: url(../images/common/submenu_bg.gif) repeat-y;
	height: auto !important;
	height: 400px;
	min-height: 400px;
}

#mainContainer2
{
	width: 731px; 
	float: left;
}

	#logotype
	{
		height: 138px;
		width: 163px;
		display: block;
		text-indent: -9999px;
		float: left; 
		overflow: hidden;
	}
	#startPageLogotype
	{
		margin:0;
		padding:0;
		text-align:center;
	}
	#startPageImg
	{
		display: block;
		float: left;
		clear: both;
		height: 468px;
		overflow: hidden; 
	}
	
	#startPagePreFooter
	{
		display:block;
		clear:both;
		float:none;
		height:105px;
		width:510px !important;
		padding:0 0 10px 0;
		background:url(../images/common/language-line.gif) bottom center no-repeat; 
	}

	
	#chooseLanguage
	{
		clear:both;
		height:100px;
		margin: 0;
		padding:5px 0 0 85px;
		background: url(../images/common/puff-country.gif) 10px top no-repeat;
	}
	
		#chooseLanguage form
		{
			margin:0;
			width:170px;
			float:left;
		}
	
	#menuItem0_0, #menuItem0_1
	{
		display: none;
	}

	#footer
	{
		display: block;
		width: 970px;
		float: left;
		clear: both;
		font-size: .916em;
		line-height: 1.3em;
		color:#fff;
		padding:15px 0;
		margin:10px 0;
		background:url(../images/common/footer-bg.gif) no-repeat;
	}
	
	#splashFooter
	{
		display: block;
		width: auto !important;
		float: right;
		color: #fff;
		font-size: .916em;
		line-height: 1.3em;
		margin: 0 37px 0 0;
	}
	#startPagePreFooter #flash
	{
		float: left;
	}
	#check-products
	{
		background: url(../images/common/check-products.jpg) no-repeat;
		display: block;
		float: left;
		height: 94px;
		margin: 3px 0 0 0;
		overflow: hidden;
		text-indent: -9999px;
		width: 202px;
	}
	
	#download-pdf
	{
		background: url(../images/common/download-latest-pdf.jpg) no-repeat;
		display: block;
		float: left;
		height: 94px;
		margin: 3px 0 0 0;
		overflow: hidden;
		text-indent: -9999px;
		width: 150px;
	}
	
	#gasp-newsletter
	{
		background: url(../images/common/gasp-newsletter.jpg) no-repeat;
		display: block;
		float: left;
		height: 94px;
		margin: 3px 0 0 0;
		overflow: hidden;
		text-indent: -9999px;
		width: 164px;
	}
	#gasp-dealer
	{
		background: url(../images/common/become-a-gasp-dealer.jpg) no-repeat;
		display: block;
		float: left;
		height: 94px;
		margin: 3px 0 0 0;
		overflow: hidden;
		text-indent: -9999px;
		width: 245px;
	}
	#gasp-products
	{
		background: url(../images/common/gasp-products.jpg) no-repeat;
		display: block;
		float: right;
		height: 94px;
		margin: 3px 0 0 0;
		overflow: hidden;
		text-indent: -9999px;
		width: 202px;
	}
	
	
		#footerContent
		{
			width:700px;
			float:left;
		}
		
		#credit
		{
			width:200px;
			float:right;
		}

#productContainer
{
	float: left;
	clear: both;
	margin: 20px 0 0 0;
	min-height: 500px;
	height: auto !important;
	height: 500px;
	background: #fff;
}

#view1Container, #view2Container
{
	float: left;
	clear: both;
	width: 970px;
	overflow-x: hidden;
	margin: 0;
	min-height: 468px;
	height: auto !important;
	height: 468px;
	background: #f7f7f7;
}

#view1Container
{
	background:#000 !important;
	margin:0;
	padding:0;
}	

#view2Container
{
	
}
#container
{
	margin: 17px 0 0 0;
}

#bannerContainer
{
	float: left;
	clear: both;
	width: 970px;
	overflow-x: hidden;
	margin: 0;
}

#mainContainerTop
{
	width:970px;
	height:10px;
	font-size:0;
	background:url(../images/common/main-container-top.gif) no-repeat;
}

#mainContainerMiddle
{
	width:970px;
	background:url(../images/common/main-container-bg.jpg) no-repeat;
	min-height: 468px;
	height: auto !important;
	height: 468px;
}


#mainContainerMiddleSubMenu
{
	width:970px;
	background:url(../images/common/main-container-bg-submenu.jpg) ;
	min-height: 468px; 
	height: auto !important;
	height: 468px;
}

#mainContainerBottom
{
	clear:both;
	width:970px;
	height:10px;
	font-size:0;
	background:url(../images/common/main-container-bottom.gif) no-repeat;
}

.mainContent
{
	margin:0 30px;
	padding:0;
}

	.mainContentMini
	{
		width:350px;
		float:left;
		padding:0 0 0 20px;
	}
	
	.mainContentMini2
	{
		width:350px;
		float:right;
	}


/* Primary navigation */
#menuContainerView
{
	height: 138px;
	width:800px;
	float:right;
	padding: 0;
	margin: 0;
}
#menuContainerProduct
{
	height: 19px;
	width: 970px;
	padding: 0;
	margin: 0;
}
	#menuContainer li, #menuContainerProduct li, #menuContainerView li
	{
		color: #fff;
		list-style: none;
		float: left;
		font-size: 1em;
		font-weight: bold;
		margin: 0;
	}
		#menuContainer li a, #menuContainerProduct li a, #menuContainerView li a
		{
			color: black;
			color: #fff;
			text-transform:uppercase;
			text-decoration: none;
		}

		
		
ul#topMenuList
{
	margin: 0;
	padding: 0;
}

ul#topMenuList li div a
{
	text-indent: -9999px;
	display: block;
	overflow: hidden;
}

#menuItem0_2 a
{
	background: url(../images/common/menu-item02.gif) no-repeat;
	width: 66px;
	height:42px;
	position:absolute;
	top:70px; 
	left:200px;
}

	#menuItem0_2 a:hover
	{
		background: url(../images/common/menu-item02.gif) 0 -58px no-repeat;
	}

	#menuItem0_2.topMenuItemContentSelected a
	{
		background: url(../images/common/menu-item02.gif) 0 -58px no-repeat;
	}
	
#menuItem0_3 a
{
	background: url(../images/common/menu-item08.gif) no-repeat;
	width: 87px;
	height:25px;
	position:absolute;
	top:35px;
	left:250px;
}

	#menuItem0_3 a:hover
	{
		background: url(../images/common/menu-item08.gif) 0 -30px no-repeat;
	}

	#menuItem0_3.topMenuItemContentSelected a
	{
		background: url(../images/common/menu-item08.gif) 0 -30px no-repeat;
	}
	
#menuItem0_4 a
{
	background: url(../images/common/menu-item05.gif) no-repeat;
	width: 84px;
	height:50px;
	position:absolute;
	top:80px;
	left:300px;
}

	#menuItem0_4 a:hover
	{
		background: url(../images/common/menu-item05.gif) 0 -60px no-repeat;
	}

	#menuItem0_4.topMenuItemContentSelected a
	{
		background: url(../images/common/menu-item05.gif) 0 -60px no-repeat;
	}
	
#menuItem0_5 a
{
	background: url(../images/common/menu-item06.gif) no-repeat;
	width: 97px;
	height:30px;
	position:absolute;
	top:50px;
	left:390px;
}

	#menuItem0_5 a:hover
	{
		background: url(../images/common/menu-item06.gif) 0 -34px no-repeat;
	}

	#menuItem0_5.topMenuItemContentSelected a
	{
		background: url(../images/common/menu-item06.gif) 0 -34px no-repeat;
	}
	
#menuItem0_6 a
{
	background: url(../images/common/menu-item07.gif) no-repeat;
	width: 89px;
	height:45px;
	position:absolute;
	top:80px;
	left:460px;
}

	#menuItem0_6 a:hover
	{
		background: url(../images/common/menu-item07.gif) 0 -60px no-repeat;
	}

	#menuItem0_6.topMenuItemContentSelected a
	{
		background: url(../images/common/menu-item07.gif) 0 -60px no-repeat;
	}
	
#menuItem0_7 a
{
	background: url(../images/common/menu-item11.gif) no-repeat;
	width: 98px;
	height:30px;
	position:absolute;
	top:35px;
	left:510px;
}

	#menuItem0_7 a:hover
	{
		background: url(../images/common/menu-item11.gif) 0 -40px no-repeat;
	}

	#menuItem0_7.topMenuItemContentSelected a
	{
		background: url(../images/common/menu-item11.gif) 0 -40px no-repeat;
	}


#menuItem0_8 a
{
	background: url(../images/common/menu-item09.gif) no-repeat;
	width: 76px;
	height:25px;
	position:absolute;
	top:70px;
	left:615px;
}
	
	#menuItem0_8 a:hover
	{
		background: url(../images/common/menu-item09.gif) 0 -40px no-repeat;
	}
	
	#menuItem0_8.topMenuItemContentSelected a
	{
		background: url(../images/common/menu-item09.gif) 0 -40px no-repeat;
	}
	
#menuItem0_9 a
{
	background: url(../images/common/menu-item10.gif) no-repeat;
	width: 83px;
	height:25px;
	position:absolute;
	top:35px;
	left:670px;
}
	
	#menuItem0_9 a:hover
	{
		background: url(../images/common/menu-item10.gif) 0 -50px no-repeat;
	}
	
	#menuItem0_9.topMenuItemContentSelected a
	{
		background: url(../images/common/menu-item10.gif) 0 -50px no-repeat;
	}
	
#menuItem0_10 a
{
	background: url(../images/common/menu-item10.gif) no-repeat;
	width: 83px;
	height:25px;
	position:absolute;
	top:80px;
	left:730px;
}
	
	#menuItem0_10 a:hover
	{
		background: url(../images/common/menu-item10.gif) 0 -50px no-repeat;
	}
	
	#menuItem0_10.topMenuItemContentSelected a
	{
		background: url(../images/common/menu-item10.gif) 0 -50px no-repeat;
	}
	
#menuItem0_11 a
{
	background: url(../images/common/menu-item11.gif) no-repeat;
	width: 98px;
	height:30px;
	position:absolute;
	top:45px;
	left:820px;
}
	
	#menuItem0_11 a:hover
	{
		background: url(../images/common/menu-item11.gif) 0 -40px no-repeat;
	}
	
	#menuItem0_11.topMenuItemContentSelected a
	{
		background: url(../images/common/menu-item11.gif) 0 -40px no-repeat;
	}	



/* Active tab */
.topMenuItemContentSelected
{
	float: left;
	padding: 0 28px 0 0;
}
	.topMenuItemContentSelected a
	{
		color:#00aeef !important;
	}


/* Inactive tabs */
.topMenuItemLeft, .topMenuItemRight
{

}
.topMenuItemContent
{
	margin: 0 28px 0 0;
	float:left;
}
.topMenuItemContent a:hover
{
}


/* Secondary navigation */
#subMenuContent
{
	padding: 20px 0 20px 20px;
	width:165px;
}
#subMenuContent a
{
	
}
#subMenuActive
{
	display: none;
}


/* Secondary Navigation - First level */
#subMenuListLvl1 li a.leftMenuSelected
{
	background: url(../images/common/nav_arrow_black.gif) 0 3px no-repeat;
	color:#000;
	margin:0 0 0 10px;
}
#subMenuListLvl1
{
	width: 166px;
	margin: 0 0 0 9px;
	padding: 0;
}
	#subMenuListLvl1 li 
	{
		border-bottom: 1px solid #fff;
		list-style: none;
		padding: 2px 0;
		margin: 0 0 0 2px;
	}
	#subMenuListLvl1 li a
	{
		padding: 0 0 0 10px;
		display: inline-block;
		color: #fff;
		font-size: .816em;
		font: Verdana;
	}
		#subMenuListLvl1 a:hover
		{
			color:#000;
		}


/* Secondary Navigation - Second level */
#subMenuListLvl2
{
	margin: 5px 0 0 8px;
	padding: 0;
}
	#subMenuListLvl2 li
	{
		border: 0;
		width: 155px;
		display: inline-block;
		padding: 0 0 0 10px;
		margin: 0 0 4px 0;
	}
		#subMenuListLvl2 li a
		{
			color: #fff;
		}
	#subMenuListLvl2 .leftMenuSelected
	{
		font-weight: normal !important;
		color: #fff !important;
		background: url(../images/common/nav_arrow_white.gif) 0 2px no-repeat !important;
	}


	#col1
	{
		width: 464px;
		float: left;
		margin: 40px 0;
		padding: 0 40px 0 0;
	}
		#col1 .date
		{
			font-size: 11px;
			color: #aaa;
		}
		#col1 h2
		{
			margin: 5px 0 10px 0;
		}
		#col1 .article
		{
			margin: 0 0 20px 0;
			padding: 0 0 54px 0;
			border-bottom: 1px solid #ccc;
		}
			#col1 .articleReadMore
			{
				background: url(../images/common/read-more.gif) no-repeat;
				display: block;
				text-indent: -9999px;
				overflow: hidden;
				height: 34px;
				width: 53px;
				margin: 0 0 0 0;
				float: right;
			}
	#col2
	{
		width: 406px;
		float: left;
		margin: 20px 0;
	}
	
	
/* CAROUSEL */
#carousel
{
	display: inline;
	float: left;
	width: 718px;
	background: #fff;
	border:1px solid #a4a4a4;
	height: 478px;
	padding: 0;
	margin: -10px 0 0 0;
	position:relative;
}

/* 
	    root element for the scrollable. 
	    when scrolling occurs this element stays still. 
	*/ 
	
	div.scrollable { 
	 
	    /* required settings */ 
	    position:relative; 
	    overflow:hidden; 
	    width: 718px;
	    height: 478px;
	    float: left;
	} 
	 
	/* 
	    root element for scrollable items. Must be absolutely positioned 
	    and it should have a super large width to accomodate scrollable items. 
	    it's enough that you set width and height for the root element and 
	    not for this element. 
	*/ 
	div.scrollable div.items { 
	    /* this cannot be too large */ 
	    width:20000em; 
	    position:absolute; 
	} 
	 
	/* 
	    a single item. must be floated on horizontal scrolling 
	    typically this element is the one that *you* will style 
	    the most. 
	*/ 
	div.scrollable div.items img { 

	    overflow: hidden;
	    display: inline;
	}

	.prev, .next
	{
		display: inline;
		width: 62px;
		height: 480px;
		float: left;
		cursor: pointer;
		position:absolute;
		z-index:999;
	}
		.prev 
		{
			margin:0;
			background:url(../images/common/prev.png) no-repeat;
			top:0px;
			left:2px;
		}
		.next
		{
			margin:0;
			background:url(../images/common/next.png) no-repeat;
			right:0;
		}		

/* Etc */
.right
{
	float: right;
}
.left
{
	float: left;
}
.inputHidden
{
	display: none !important;
	height: 0;
	width: 0;
}
.clearFix
{
	clear: both;
	font-size: 0;
	height: 0;
	line-height: 0.0;
}

#lang
{
	z-index: 9999;
	display: block;
	position: absolute;
	right: 50px;
	top: 40px;
	
}
	#lang ul, #sLang ul
	{
		float: left;
		width: 100px;
		margin: 0;
		padding: 0;
	}
	#lang ul li, #sLang ul li
	{
		list-style: none;
	}
	#lang a, #sLang a
	{
		color: white;
		font-size: 11px;
		text-decoration: none;
		position:relative;
	}
		#lang a:hover, #sLang a:hover
		{
			color: #f7941e;
		}
	
	#toggle
	{
		clear:both;
		display:none;
		position:absolute;
		right: 0;
		top: 15px;
		width: 400px;
		height: 260px; 
		padding: 10px 0 0 30px;
		background: url(../images/common/lang-bg.png) bottom no-repeat;
	}
	
	.visible
	{
		display: block !important;
	}
	.invisible
	{
		display: none;
	}