/*
	
	G R I D  &  M A R G I N S
		Outer / Inner:				40px / 20px
		Subheading top / Box inner	1em / 10px
		Img inner					5px
	
	T Y P O G R A P H Y
		Header
		- headline					5.2em	uppercase bold
		- description				2.4em/1.5em
		- menu						1.8em	uppercase bold
		
		Body/content
		- heading					2.4em	uppercase bold
		- subheading				1.2em	uppercase bold
		- copy						1.4em
		- lineheight				1.5em
		- label						1.2em
		- input						1.4em
		- links						1.4em	uppercase bold
		
		Box
		- headline					1.8em	uppercase bold
		- copy						1.4em

	C O L O R S
		Base (sand)					#f2e4ce
		Header emphasis (cream)		#fbebc4
		Borders - Img & box (beige)	#dac190
		
		Body
		- headings (deep orange)	#d66200
		- subheadings (light brown)	#b3a08f
		- copy (chestnut)			#875a29
		- emphasis (charcoal)		#887565
		- links (turqouise)			#70bdc6
		
*/
/* @group G L O B A L */
	/* @group Layout/Structure */
	* {margin: 0; padding: 0;}
	body {background: #f2e4ce; color: #875a29; font: normal 62.5%/1em Calibri, 'Lucida Grande', Tahoma, Verdana, sans-serif; text-align: center;}

		#header {
			margin: 0 0 40px;
			padding: 0 0 40px;
			border-bottom: 5px solid white;
			background: url(/gfx/header_pattern.jpg) repeat-x center bottom;
			color: #fff;
			}
		#wrapper {width: 960px; margin: 0 auto; text-align: left;}
			#content {float: left; width: 580px; min-height: 300px; margin: 0 0 20px;}
			#sidebar {float: right; width: 340px; margin: 0 0 20px;}
			#footer {clear: both; background: #b3a08f; color: #fff; font-size: 1.2em;}
				#footer p {padding: 20px;}
				#footer a {color: #fff;}
			
	/* @end */
	
	/* @group User Toolbar */
	#toolbar {background: #333; color: #f1f1f1; font-size: 1.2em; border-bottom: 1px solid #c1c1c1;}
		#toolbar p {position: relative; width: 939px; margin: 0 auto; padding: 10px 0 10px 21px; text-align: left;}
			#toolbar p strong {color: #fbebc4; margin-right: 10px;}
			
			#toolbar .fontSizeControls {position: absolute; right: 130px; top: 50%; margin-top: -.4em; height: 1.2em;}
				#toolbar .fontSizeControls em {font-style: normal;}
				#toolbar .fontSizeControls a {
					margin-left: .5em;
					padding-right: .5em;
					border-right: 1px solid #777;
					text-decoration: none;
					color: #bbb;
					outline: 0;
					}
				#toolbar .fontSizeControls a:hover {color: #70bdc6;}
				#toolbar .fontSizeControls a.reset {border: 0;}
			
			#toolbar #addThisButton {position: absolute; top: 50%; margin-top: -8px; right: 0;}
	/* @end */

	/* @group Header */
		#header #logo {
			position: absolute;
			left: 50%;
			top: 0;
			margin-left: -480px;
			display: block;
			width: 199px;
			height: 81px;
			text-indent: -9999px;
			outline: 0;
			background: url(/gfx/header_logo.png) no-repeat;
			}

		/* @group Menu */
		#header div {height: 81px; background: url(/gfx/nav_bg.png) repeat-x; position: relative;}
			#header ul {
				position: absolute;
				right: 50%;
				float: left;
				display: inline;
				margin-right: -480px;
				padding: 26px 0 0;
				list-style: none;
				text-align: right;
				}
				#header li {float: left; display: inline; margin-left: 20px; font-size: 1.8em;}
					#header li a {
						float: left;
						display: inline;
						padding: 10px 0;
						color: #fff;
						font-weight: bold;
						text-decoration: none;
						text-transform: uppercase;
						}
					#header li a:hover {text-decoration: underline; color: #fbebc4;}
				
				#header li#current {background: #c4530d;}
					#header li#current a {
						margin-left: 14px;
						padding-right: 14px;
						background: #c4530d no-repeat right center;
						color: #fbebc4;
						text-decoration: none;
						cursor: default;
						}
		/* @end */

		/* @group Description */
		h1 {
			margin: 30px auto 20px;
			width: 960px;
			color: #fff;
			text-align: left;
			font-size: 5.2em;
			line-height: 1em;
			text-transform: uppercase;
			text-shadow: 2px 2px 20px #222;
			}
		#header p {margin: 0 auto; width: 960px; text-align: left; font-size: 2.4em; line-height: 1.25em; text-shadow: 2px 2px 20px #333;}
			#header p strong {color: #fbebc4;}
		/* @end */
	/* @end */
		
	/* @group Typography */
	a:link {color: #70bdc6;}
	a:visited {color: #9db2b4;}
	a:hover {color: #70bdc6; text-decoration: none;}
	#wrapper a {font-weight: bold; text-transform: uppercase;}
	#wrapper p a {text-transform: none;}
	
	h2,
	h3,
	legend {margin: 0 0 20px; font: bold 2.4em/.85em Calibri, 'Lucida Grande', Tahoma, Verdana, sans-serif; color: #d66200; text-transform: uppercase;}
	h3 {margin: 10px 0; font-size: 1.8em;}
	
	#content p {margin: 0 0 20px; font-size: 1.4em; line-height: 1.25em;}
	#content ul {font-size: 1.4em; line-height: 1.25em;}
	
	.subHeading,
	form p {color: #b3a08f; font: bold 1.2em/1.25em Calibri, 'Lucida Grande', Tahoma, Verdana, sans-serif; text-transform: uppercase;}
		.subHeading strong,
		form p strong {color: #887565;}
	/* @end */
	
	/* @group Elements */
	img {border: 0;}
	hr {
		float: left; width: 100%;
		margin: 10px 0;
		color: #e4c698; background: #e4c698;
		border: 0; border-bottom: 1px solid #f9f3e9;
		}
	
		/* @group Icons */
		.icon {padding-left: 21px; background-repeat: no-repeat; background-position: left center;}
		.user			{background-image: url(/gfx/icons/user.png);}
		.user_edit		{background-image: url(/gfx/icons/user_edit.png);}
		.user_delete	{background-image: url(/gfx/icons/user_delete.png); color: #c34646 !important;}
		.lock			{background-image: url(/gfx/icons/lock.png);}
		.pdf			{background-image: url(/gfx/icons/pdf.png);}
		.cms			{background-image: url(/gfx/icons/cms.png);}
		.facebook		{background-image: url(/gfx/icons/facebook.jpg);}

		/* Employee status */
		.new,
		.pending	{background-image: url(/gfx/icons/new.png);}
		.approved	{background-image: url(/gfx/icons/approved.png);}
		.standby	{background-image: url(/gfx/icons/standby.png);}
		/* @end */
		
		/* @group Flash/Notifications */
		#authMessage,
		.notification 	{margin: 0 0 40px; padding: 1em; border: 1px solid; text-align: center; font-size: 1.4em; line-height: 1.5em;}
		
		.success		{background: #E0ffE8; border-color: #98cd99; color: #060;}
		.warning		{background: #fff2c0; border-color: #eadeb1; color: #000;}
		.error,
		#authMessage	{background: #ffbcbc; border-color: #c34646; color: #411717;}
		
		#ie6Warning {margin: 0; text-align: left;}
			#ie6Warning a {color: #d66200; font-weight: bold;}
		
			.notification strong {display: block; text-align: left;}
		/* @end */

		/* @group Boxes */
		.box {margin: 0 0 40px;}
			.box h3 {
				margin: 1px 1px 0;
				padding: 20px;
				outline: 1px solid #dac190;
				border: solid #fff;
				border-width: 2px 2px 0;
				background: #fff url(/gfx/box_bg.png) repeat-x;
				color: #fff;
				text-transform: uppercase;
				font-size: 1.8em;
				font-weight: bold;
				line-height: .4em;
				}
			.box div {
				position: relative;
				top: -1px;
				padding: 20px;
				background: #fff;
				border: 1px solid #dac190;
				border-top-color: #fff;
				font-size: 1.4em;
				line-height: 1em;
			}
			.box ul {list-style: none;}
				.box li {margin: 0 0 .5em;}
					.box li a {display: block;}
		/* @end */	
	/* @end */
	
	/* @group Forms */
	fieldset {border: 0;}
		legend {padding: 0;}
		form div {margin: 0 0 20px; line-height: 2em;}
			form div em {display: block; font-size: 1.4em; color: #000; font-style: normal;}
		
		label, .label {display: block; margin: 0 0 .5em; font-size: 1.4em; color: #000; font-weight: normal;}
		input[type=radio] + label,
		label.forCheckbox {display: inline-block; margin: 0 1em 0 .4em; font-weight: bold;}
		
		input {font-size: 1.4em; margin: 0 0 10px; padding: 2px; font-weight: bold;}
		input[type="checkbox"] {margin: 0; width: 15px !important; /* Safari */}
		
		select {margin-right: 10px;}
		button {
			clear: both;
			display: block;
			margin: 20px 0 0;
			padding: 1em;
			background: #28777f url(/gfx/button_simple_bg.png) repeat-x;
			color: #fff;
			text-transform: uppercase;
			font-weight: bold;
			cursor: pointer;
			}

		.form-error {background: #ffbcbc;} /* Invalid fields */ 
	/* @end */
/* @end */

/* @group V I E W S */

	/* @group Pages */
		/* @group Frontpage */
		.frontpage #header {position: relative; height: 437px; background: #875a29 url(/gfx/header_frontpage.jpg) center 40px;}
			.frontpage #header h1,
			.frontpage #header p {position: absolute; left: 50%;}

			.frontpage #header h1 {width: 786px; margin-left: -460px; text-align: right; top: 2em;}
/*			.frontpage #header p {width: 578px; margin-left: -120px; top: 9.3em; text-align: center;}*/
			.frontpage #header p {width: 578px; margin-left: -120px; top: 9.3em;}
				.frontpage #header p a {float: right; margin-right: -210px;}
			
			.frontpage #header .calloutButton {
				display: block;
				width: 300px;
				height: 53px;
				margin: 1.5em auto 0;
				background: url(/gfx/button_bliv_medarbejder.png) no-repeat; text-indent: -9999px;
				outline: 0;
				}
			
			.frontpage #content {width: 960px;}
				.frontpage #content p {float: left; width: 960px; margin: 0 0 24px;}
				.frontpage #content a {float: left; display: inline; margin-right: 24px;}
				.frontpage #content a.last {margin: 0;}
					.frontpage #content a img {float: left; padding: 5px; background: #fff; border: 1px solid #dac190;}
		/* @end */
	/* @end */
	
	/* @group Users */
		/* @group Add */
		#UserAddForm fieldset {margin: 0 0 20px;}
			#UserAddForm legend {margin: 0;}
			#UserAddForm p {margin: 0 0 20px;}
			#UserAddForm span {float: left; display: inline; margin: 0 20px 0 0;}
			#UserAddForm span.last {margin-right: 0;}				

				#UserAddForm span input[type=text] {width: 270px;}
				
				#UserAddForm span input#EmployeeAddress,
				#UserAddForm span input#EmployeeFriends {width: 570px;}
				#UserAddForm span input#EmployeePostalcode,
				#UserAddForm span input#EmployeeCity,
				#UserAddForm span input#EmployeeCountry {width: 170px;}
			
			#UserAddForm textarea {width: 578px;}
		/* @end */
		
		/* @group Login */
		#UserLoginForm {margin: 0 0 20px;} /* Forgot password? */
			#usersView.login #content a {font-size: 1.4em; color: #70bdc6;}
			#usersView.login .notification.success {text-align: left;}
		/* @end */
		
		/* @group Index */
		#usersView.index #content h2 {margin-bottom: 10px;}
		
		p#userActions {margin: 0 0 10px;}

		p#employeeStatus {background: #fff; margin: 0 0 40px; padding: .5em; border: 1px solid #875a29;}
			#employeeStatus strong {display: block; margin: .5em 0;}
			#employeeStatus a {text-align: right;}
		
		#usersView.index #content ul {
			float: left;
			display: inline;
			list-style: none;
			width: 580px;
			margin: 0 0 10px;
			font-size: 1.6em;
			text-align: right;
			}
			#usersView #content li {float: left; display: inline; width: 580px; margin: 0 0 .5em; border: solid #dac190; border-width: 0 0 1px;}
				#usersView #content li strong {float: left;}

			#usersView #content li.extendedInfo {text-align: left;}
				#usersView #content li.extendedInfo strong {float: none; display: block;}
		/* @end */
	/* @end */
	
	/* @group Employees */
	/* @end */
	
	/* @group Contact */
	#contactView #content input[readonly] {color: #999; font-weight: normal;}
	/* @end */
/* @end */

/* @group Alpha PNG stuff */
div[id="header"] div {height: 91px !important; background-image: url(/gfx/nav_bg_dropshadow.png) !important;}
div[id="header"] li#current {background: transparent url(/gfx/menu_bg_base.png) no-repeat 0% 60% !important;}
div[id="header"] li#current a {background: transparent url(/gfx/menu_bg_end.png) no-repeat 100% 60% !important;}
#usersView.add form[id="UserAddForm"] button {
	display: block;
	width: 201px;
	height: 48px;
	border: 0;
	padding: 0 !important;
	background: transparent url(/gfx/button_send_ansogning.png) !important;
	text-indent: -9999px;
	}
div[class="box"] {margin: 0 0 25px !important; padding: 0 0 15px; background: url(/gfx/box_dropshadow.png) no-repeat 50% 99.5%;}
/* @end */