/* 
		CSS Start Template for websites
		By Trond Ulseth - trond@idl.no
		   Jørgen Skogås - jorgen@idl.no
		Started 29th September 2009
		
		Goal:
					Not having to create the same stuff each time a new site is created
		
		Change log:
					29th September 2009 - 		started this template
					
		Once implemented for a site this template should/could be edited, added to and deleted from.
		Coments can be deleted as well, but it's adviced not to.
		Parst of this template is based on the article Squeaky Clean CSS by Lokesh
			http://www.huddletogether.com/2006/02/16/practical-web-development-tips/
		Styles for css/js navigation is kept in it's own stylesheet.
		
		Table of Contents:
		
					Setting up some Global Defaults
					Main Layout
					Page elements
					Header
					Logo
					Column Layout
					Footer
					Developed By
					Forms
*/

/* Setting up Some Global defaults
---------------------------------------------------------------------- */

/* since browsers have diferent default measures for margin and padding we're zeroing them out to be treated equaly all over */
@import url('reset.css');

body {
	background: #999 url('../wsimages/body_bg.jpg') repeat-x;
}
		
/* a clear class often comes in handy in site layouts */
.clear {
	clear: both;
	height: 1px;
	overflow: hidden;
	position: relative;
	width: 10px;
}

.hidden {
	position:absolute;
	left: -999em;
	top: auto;
	width: 1px;
	height: 100px;
	overflow: hidden;
}

/* Main Layout
---------------------------------------------------------------------- */

/* There's almost always a main div container for the layout of a site */
div#mainWrapper {
	background-color: transparent;
	width: 958px;
	margin: 0 auto;
}

	/* Page elements
	---------------------------------------------------------------------- */
	div#pageWrapper {
			background: transparent url('../wsimages/pageWrapper_bg.png') repeat-y top center;
			padding: 0 10px;
		}
	
	div#pageBottom {
			background: transparent url('../wsimages/pageBottom_bg.png') no-repeat;
			height: 20px;
			padding: 20px 0 0 0;
		}

	/* Header
	---------------------------------------------------------------------- */
	div#header {
		background: transparent url('../wsimages/header_bg.png') repeat-x -20px left;
		height: 122px;
		position: relative;
		overflow: hidden;
	}
	
		h1#logo a {
			background: transparent url('../wsimages/logo.png') no-repeat;
			display: block;
			width: 228px;
			height: 41px;
			position: absolute;
			top: 30px;
			left: 20px;
			text-indent: -999em;
		}
	
	/* Column Layout
	---------------------------------------------------------------------- */
	div#mainColumn {
		background-color: transparent;
		width: 602px;
		min-height: 200px;
		padding: 0 20px 0 20px;
		float: left;
		}
	
	div#rightColumn {
		background-color: transparent;
		width: 276px;
		min-height: 200px;
		padding: 0 20px 0 0;
		float: left;
		z-index: 1000;
		}
		
		/* Product slider
		---------------------------------------------------------------------- */
		div#productWrapper {
			position: relative;
			width: 641px;
			height: 254px;
		}
		div#productSlider {
			position: relative;
			width: 603px;
			height: 233px;
			margin: 0;
			padding-top: 20px;
			overflow: hidden;
		}
		
			div#productSlider ul,
			div#productSlider ul li,
			div#productSlider ul li a,
			div#productSlider ul li img {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			
			div#productSlider ul li img {
				width: 603px;
			}

			div#productSliderOverlayTop,
			div#productSliderOverlayRight,
			div#productSliderOverlayBottom,
			div#productSliderOverlayLeft {
				position: absolute;
				padding: 0;
				margin: 0px 0 0 -20px;
				top: 0;
				left: 0;
				z-index: 1;
			}
			
				div#productSliderOverlayTop {
					background: transparent url('../wsimages/productSliderOverlay_top.png') no-repeat;
					width: 641px;
					height: 23px;
				}
				
				div#productSliderOverlayRight{
					background: transparent url('../wsimages/productSliderOverlay_right.png') no-repeat;
					width: 22px;
					height: 228px;
					top: 22px;
					left: 619px;
				}
				
				div#productSliderOverlayBottom{
					background: transparent url('../wsimages/productSliderOverlay_bottom.png') no-repeat;
					width: 641px;
					height: 23px;
					top: 250px;
				}
				
				div#productSliderOverlayLeft{
					background: transparent url('../wsimages/productSliderOverlay_left.png') no-repeat;
					width: 22px;
					height: 228px;
					top: 22px;
				}
				
				/* Product Slider Buttons */
				span#prevBtn a,
				span#nextBtn a {
					text-indent: -999em;
					position: absolute;
					display: block;
					width: 71px;
					height: 71px;
					top: 100px;
				}
				
					span#prevBtn a {
						left: -3px;
						background: transparent url('../wsimages/productSlider_leftBtn.png') no-repeat;
					}
					
					span#nextBtn a {
						left: 535px;
						background: transparent url('../wsimages/productSlider_rightBtn.png') no-repeat;
					}

		/* Shortcuts
		---------------------------------------------------------------------- */
		div#shortcutContainer {
			width: 619px;
			background: #fff url('../wsimages/shortcutContainer_bg.jpg') no-repeat bottom left;
			padding: 0 0 20px 0;
			margin: 0 0 0 -9px;
			float: left;
		}
			
			ul#shortcuts {
				width: 610px;
				background: transparent url('../wsimages/shortcuts_bg.jpg') no-repeat top left;
				list-style-type: none !important;
				margin: 0;
				padding: 34px 0 0 9px;
				float: left;
			}
			
				ul#shortcuts h3 {
					background: transparent url('../wsimages/shortcuts_h3_bg.gif') no-repeat top left;
					padding: 7px 0 0 0;
					height: 26px;
					color: #333;
					font-weight: bold;
				}
			
				ul#shortcuts li,
				ul#shortcuts ul {
					list-style-type: none !important;
					margin: 0;
					padding: 0;
				}
				
				ul#shortcuts li {
					float: left;
					width: 182px;
					padding: 0 0 0 20px;
				}
					
					ul#shortcuts li li {
						float: left;
						width: 182px;
						padding: 0 0 0 0px;
					}
					
						ul#shortcuts li li a {
							font-size: 13px;
							text-decoration: none;
						}

	/* Footer
	---------------------------------------------------------------------- */
	div#footer {
		background: transparent url('../wsimages/footer_bg.png') no-repeat;
		height: 144px;
		}
		
		div#address {
			width: 400px;
			padding: 120px 0 0 18px;
			float: left;
		}
		
		div#certificates {
			width: 400px;
			padding: 90px 18px 0 0;
			float: right;
			text-align: right;
		}

			div#certificates img {
				float: right;
				margin: 0 !important;
				padding: 0 !important;
			}

	/* Developed by
	---------------------------------------------------------------------- */
	a#dev {
			height: 20px;
			margin: 5px 15px 0 0;
			font-size: 10px;
			}
		
		/* this section usually has some other link styling than the default */
	a#dev:link,
	a#dev:active,
	a#dev:visited {
		text-decoration: none;
		color: #DDDDDD;
		float: right;
	}

	a#dev:hover {
		text-decoration: underline;
		color: #FFFFFF;	
	}

	/* Forms
	---------------------------------------------------------------------- */

.ruleadmin {
	z-index: 10;
	position: relative;
}