/*
	Current version: 1.1.1
	
	Site: Dafra
	www: dafra.atrox.se
	Author: Robert Hedman, robert.hedman@atrox.se
	Notes: This file contains the rules of the basic structure and navigation of the site.
	------------------------------------------------------------------

*/




#startPage, #defaultPage, #productPage
{
	background:#e8e4d8;
}

#openForm {
	display:none;
	height:1px;
	width:0px;
	overflow:hidden;
}

.login .errorFieldset {
	font-weight:bold;
	width:250px;
	margin:0 auto;
}

.login .msgLegend {
	display:none;
}

.login #openForm {
	display:block;
	height:200px;
	width:260px;
	margin:0 auto;
}

#wrapper
{
	margin: 0 auto;
	text-align: left;
	width: 980px;
	overflow:hidden;
	background:#fff url(../images/wrapper-bottom.gif) bottom left no-repeat;
	padding-bottom:10px;
	position:relative;
}

#headerBg
{
	background:#fff;
	-moz-opacity:.92;
	filter:alpha(opacity=92);
	opacity:.92;
	position:absolute;
	top:0;
	left:0;
	width:980px;
	height:67px;
	z-index:900;
}

#header
{
	position:absolute;
	top:0;
	left:0;
	width:980px;
	height:67px;
	overflow:hidden;
	z-index:901;
}
	
	#logotype
	{
		background: url(../images/dafra-logotype.png) no-repeat;
		height: 67px;
		width: 174px;
		display: block;
		text-indent: -9999px;
		float: left;
		overflow: hidden;
	}
	
	#eyeBrow
	{
		width:900px;
		height:20px;
		position:absolute;
		top:5px;
		left:0;
		text-align:right;
		line-height:1.5;
		font-weight:bold;
		font-size:11px;
	}
	
		#eyeBrow p{margin:2px 0 0 0 !important;}
	
		#login
		{
			position:absolute;
			top:5px;
			right:20px;
			display:block;
			height:20px;
			width:auto;
			line-height:1.5;
			font-weight:bold;
			font-size:11px;
			cursor:pointer;
		}
		#logout
		{
			position:absolute;
			top:5px;
			right:20px;
			display:block;
			height:20px;
			width:auto;
			line-height:1.5;
			font-weight:bold;
			font-size:11px;
			cursor:pointer;
		}

			#cboxLoadedContent{overflow:hidden !important;}
			
			#AtroxLogonForm
			{
				height:145px;
				overflow:hidden;
				padding:0;
				width:113px;
			}
			
			#AtroxLogonForm h3
			{
				font-weight:bold;
				margin:0 0 10px 6px;
			}
			
				#loginSelectSite{display:none;}
				#loginUsernameInput, #loginPasswordInput, #loginSubmit{ 
					float:left;
					margin:0 0 0 5px;
				}
					
					#loginUsernameInput, #loginPasswordInput {
						margin-top:5px;
						width:100px;
						height:22px;
						background:url(../images/input-bg.png) no-repeat;
					}
					
					#loginUsernameInput input, #loginPasswordInput input { 
						position:relative;
						background:transparent url(../images/blank.gif);
						width:83px;
						height:20px;
						border:0;
						margin:1px 0 0 7px;
						padding:0;
					} 
					
					#loginSubmit {
						clear:both;
						float:none;
						padding:2px 10px 0 0;
						text-align:right;
					}
					
					#loginSubmit input {
						background:url("../images/btn-login.png") no-repeat scroll 0 0 transparent;
						border:0 none;
						height:22px;
						margin-top:5px;
						padding:0 5px;
						width:70px;
					}
					#forgotPwd{clear:both;font-size:11px;text-align:right;padding:3px 25px 0 0;}
					
			
			.loginForm {
				clear:both;
			}
			
			#loginUsernameText, #loginPasswordText {
				margin:0 0 0 6px;
			}
	

	
	/* Page content */
	#pos0
	{
		margin:10px 0 0 10px;
	}
		#startPage{clear:both;}
		#defaultPage #pos0, #productPage #pos0, #defaultPage #pos2, #defaultPage #pos3{width:680px;float:right;margin:0 10px 10px 0;} 
		#productPage #pos0{width:700px;margin-right:0 !important;}
	
	#defaultPage #pos1
	{
		clear:both;
		min-height:50px;
		height:auto !important;
		height:50px;
	}
	
		#startPage #pos1{height:371px;overflow:hidden;}
		
	
	#defaultPage #main, #productPage #main{width:980px;float:left;display:inline;background:url(../images/wrapper-bg.gif) repeat-y;margin:24px 0;}
		#productPage #main{width:990px;} 
	
	
	#subMenu
	{
		width:250px;
		float:left;
	}
	
	#productPage #pos4, #productPage  #pos5{width:400px;margin-bottom:15px;float:left;}
	#productPage  #pos5{display:none;}
	
	
#footer
{
	float: none;
	clear: both;
	width: 930px;
	height:154px;
	overflow:hidden;
	padding:18px 25px 0 25px;
	margin:10px auto;
	text-align:center;
	background: url(../images/footer-bg.gif) no-repeat;
}
		
		#footer a
		{
			display:block;
			height:38px;
			width:auto;
			overflow:hidden;
			position:relative;
		}
		
			#footer a img
			{
				margin:0 auto;
			}
		
			#footer a:hover img
			{
				margin:-41px auto 0 auto;
			}


/* Primary navigation */
.topMenuList
{
	margin: 32px 0 0 69px;
	padding: 0;
	float:left;
}

	.topMenuList li
	{
		list-style: none;
		float: left;
		font-size: 1em;
		font-weight: bold;
		margin: 0 0 0 10px;
	}
		.topMenuList li a
		{
			color: #002e56;
			text-decoration: none;
			line-height:1.5;
			font-weight:bold;
		}
		
		.topMenuList li a:hover
		{
			color: #CD7800
		}
/* Tabs */ 

.topMenuItemLeft, .topMenuItemLeftSelected, .topMenuItemRight, .topMenuItemRightSelected
{
	float:left;
	height:19px;
	width:10px;
}


.topMenuItemLeft, .topMenuItemLeftSelected
{
	
	background:url(../images/menu-tab-left.png) no-repeat;
}

	.topMenuItemLeftSelected
	{
		
		background:url(../images/menu-tab-left-active.png) no-repeat;
	}

.topMenuItemRight, .topMenuItemRightSelected
{
	background:url(../images/menu-tab-right.png) no-repeat;
}

	.topMenuItemRightSelected
	{
		background:url(../images/menu-tab-right-active.png) no-repeat;
	}

.topMenuItemContent, .topMenuItemContentSelected
{
	background:url(../images/menu-tab-bg.gif) repeat-x;
	float:left;
	height:19px;
}

	.topMenuItemContentSelected
	{
		background:url(../images/menu-tab-bg-active.gif) repeat-x;
		float:left;
		height:19px;
	}
	
		.topMenuItemContentSelected a{color:#fff !important;;}

/* Secondary navigation */
.subMenuContent, .subMenuActive
{
	padding:0;
	margin:0 20px;
}
.subMenuContent a
{
	text-decoration: none;
	font-weight: normal;
}
.subMenuActiveContent h2 a
{
	text-transform: uppercase;
	font-size:18px;
	color:#52545f;
}
.subMenuActiveContent h2
{
	margin:4px 0 0 0;
}

#subMenuActive{display:none;}

.productMenuContainer #subMenuContent{margin:0;}


/* Secondary Navigation - First level */
.leftMenuSelected
{
	background:url(../images/submenu-icon-active.gif) 0 4px no-repeat !important;
}

#subMenuListLvl1, .subMenuListLvl1
{
	margin: 0;
	padding: 0;
}
	#subMenuListLvl1 li, .subMenuListLvl1 li 
	{
		list-style: none;
		margin: 0;
		padding: 8px 0;
	}
	#subMenuListLvl1 a, .subMenuListLvl1 a
	{
		color: black;
		background:url(../images/submenu-icon.gif) 0 4px no-repeat;
		padding:0 0 0 13px;
	}
		#subMenuListLvl1 a:hover, .subMenuListLvl1 a:hover
		{
			background:url(../images/submenu-icon-active.gif) 0 4px no-repeat;
		}

	
/* CAROUSEL */
#carousel
{
	display: inline;
	float: left;
	width: 960px;
	height: 355px;
	padding: 0;
	margin: 0;
	position:relative;
}

/* 
	    root element for the scrollable. 
	    when scrolling occurs this element stays still. 
	*/ 
	
	div.scrollable { 
	 
	    /* required settings */ 
	    position:relative; 
	    overflow:hidden; 
	    width: 910px;
	    height: 355px;
	    margin-left:25px;
	    float: left;
	    display:inline;
	} 
	
		div.scrollable table{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: 24px;
		height: 355px;
		float: left;
		cursor: pointer;
		position:absolute;
		z-index:999;
		background:url(../images/slider_nav.png) no-repeat;
	}
		.prev 
		{
			background-position:0 0;
			margin:0;
			top:0px;
			left:0;
		}
			.prev:hover
			{
				background-position:-24px 0px;
			}
		.next
		{
			background-position:0 -355px;
			margin:0;
			right:0;
		}
			.next:hover
			{
				background-position:-24px -355px;
			}
			
			.next.disabled, .next.disabled:hover{
				background-position:0 -355px !important;
				opacity:0.5;
				-moz-opacity:0.5;
				-webkit-opacity:0.5;
				filter:alpha(opacity:50);
				cursor:default;
			}
			
			.prev.disabled, .prev.disabled:hover{
				background-position:0 0 !important;
				opacity:0.5;
				-moz-opacity:0.5;
				-webkit-opacity:0.5;
				filter:alpha(opacity:50);
				cursor:default;
			}


.productBack {
	background:url("../images/link-bg.gif") no-repeat scroll right 0 transparent;
	display:inline-block;
	font-weight:bold;
	height:20px;
	line-height:20px;
	margin-left:10px;
	margin-top:10px;
}

	.productBack a {
		background-image:url("../images/link-back.png");
		background-position:0 0;
		background-repeat:no-repeat;
		display:block;
		margin-left:-9px;
		padding:0 8px 0 24px;
		color:#CD7800;
	}
/* Etc */
.right
{
	float: right;
}
.left
{
	float: left;
}
.inputHidden
{
	display: none !important;
	height: 0;
	width: 0;
}
.clearFix
{
	clear: both;
	float: none;
}