/*
 * CSS TEMPLATE #1
 * 
 * Description:	"Standard" template. Most commonly used 
 * Dimensions:	Fixed width, content-based height
 * Navigation:	Vertical and horizontal
 * 
 * Info: 		Column distribution is based on their main container. Use main container to differentiate between
 * 				styles e.g for columns in the header and columns in the main content area.
 * 
 */

/* Main properties */

div#grid_1 {
	position: absolute;
	width: 100%;
	left: 50%;
	margin-left: -50%;
	height: 100%;
	background: url("../images/structure/grid.gif") repeat-y center top;
	display: none;
}

body {
	background: url("../images/structure/background.gif") repeat-x top;
	background-color: #f1f1e4;
	padding-top: 65px;
}
html {
	background-color: #f1f1e4;
}
/* Main container properties */

div#wrapper {
	width: 980px;
	text-align: left;
	margin: 0 auto ;
}

div#main_content {
	position: relative;
	background: url("../images/structure/background_wrapper.png") repeat-y top left ;
}
	div#ornament_top {
		width: 587px;
		height: 66px;
		position: absolute;
		top: -65px;
		left: -18px;
		background: url("../images/structure/ornament_top.png") no-repeat ;
	}

	div#ornament_left {
		width: 35px;
		height: 315px;
		position: absolute;
		left: -29px;
		top: 0;
		background: url("../images/structure/ornament_left.png") no-repeat ;
	}
/* Header properties */
div#header {
	width: 100%;
	height: 224px;
	position: relative;
	background: url("../images/structure/background_header_large.jpg") no-repeat 6px top;
}

/* General row properties */

div.row {
	width: 100%; /* Rows are 100% of their containers width by default */
	float: left;
	clear: left;
	display: inline;
}
	div.row.row_2 {
		margin-top: -1px;
	}

/* General column properties */
div.column {
	float: left;	
	position: relative;
	/*background: url("../../images/structure/column_divider.gif") repeat-y right;*/
}
	div.column_inner { /* Inner properties, e.g padding, margin. */
		padding: 10px;	
	}
		div.column_content {
			/*padding: 5px;*/
			/*background-color: #f2f2f2;*/
		}
		
/* Header column properties */
div#header div.column {
	height: 225px;
}
	div#header div.column.content {
		background: #f2f2f2;
	}
	div#header div.column.column_1 {
		width: 250px;
	}
		div#header div.column.column_1 img {
			position: absolute;
			top: 60px;
			left: 50px;
		}
	div#header div.column.column_2 {
		width: 480px;
	}
		div#header div.column.column_2 div.column_content {
			position: relative;
			top: 12px;
		}

	div#header div.column.column_3 {
		width: 250px;
	}

/* Main content column properties */
div#content div.column.column_1 {
	width: 250px;
}
	div#content div.column.column_1 div.column_inner {
		padding-left: 20px;
	}
div#content div.column.column_2 {
	width: 480px;
}
div#content div.column.column_3 {
	width: 245px;
	height: 580px;
	float: right;
	position: relative;

	background: url("../images/structure/background_right_column.png") repeat-y right top;
}
	div#content div.column.column_3 div.column_inner {
		padding: 20px;
	}
	div#content div.column.column_3 div#right_column_bottom {
		height: 10px;
		width: 240px;
		position: absolute;
		bottom: 0;
		right: 0;
		background: url("../images/structure/right_column_bottom.gif") no-repeat;
	}

/* Main menu properties */
div.menu {
	background: url("../images/structure/puff_top.gif") #f0f0c4 no-repeat left top;
	padding-top: 1em;
}
	div.puff_bottom {
		width: 220px;
		height: 18px;
		background: url("../images/structure/puff_bottom.gif") #f0f0c4 no-repeat left bottom;
	}
	
	.content div.menu h2 {
		margin: -0.4em 0 0.5em 0.3em;
		color: #5e331a;
		padding: 0.7em 0 0.2em 2.6em;
		background: url("../images/structure/icon_cake.gif") no-repeat 3px 3px;
	}
	div.menu ul {
		list-style-type:none;
		margin: 0 0 0 2.2em;
	}
		div.menu ul li {
			list-style-type:none;
			padding: 0 0 0 25px;
			background: url("../images/structure/menu_bullet.gif") no-repeat left center;
		}
		div.menu ul li a {
			
		}

/* Footer properties */

div#footer {
	width: 980px;
	height: 25px;
	position: relative;
}

/* Footer column properties  */
div#footer div.column {
	width: 735px;
	background: #805156;
	position: absolute;
	bottom: 0px;
	left: 5px;
}

/* Article properties */

div.image img {
	height: 115px;
	float: right;
}

div.article_image {
	width: 153px;
	float: right;
	padding: 0 0 15px 15px;
}
div.article_item {
	height: 142px;
	width: 462px;
	background: url("../images/structure/article_puff.jpg") no-repeat  left top;
	margin: 0 0 20px 0;
	position: relative;
}
	div.article_item div.readmore  {
		width: 53px;
		position: absolute;
		left: 15px;
		bottom: 10px;
	}
	div.article_item div.image {
		width: 153px;
		float: right;
		position: relative;
	}
		div.article_item div.article_padding {
			padding: 12px;
		}
		div.article_item div.title {
			width: 240px;
		}
/* Special tweaks */

div#note_holder div.note_norr, div#note_holder div.note_are, div#note_holder div.note_sundsta {
	background: url("../images/structure/note_1.png") no-repeat  left top;
	height: 175px; 
	width: 175px;
	position: relative;
}
	div#note_holder div.note_norr img.note_readmore, 
	div#note_holder div.note_are img.note_readmore,
	div#note_holder div.note_sundsta img.note_readmore {
		position: absolute;
		bottom: 15px;
		right: 15px;
	}
	div#note_holder div.note_norr img.note_map,
	div#note_holder div.note_are img.note_map,
	div#note_holder div.note_sundsta img.note_map {
		position: absolute;
		bottom: 15px;
		left: 15px;
	}

	div#note_holder div.note_are {
	 	background: url("../images/structure/note_2.png") no-repeat  left top;
	}


div#note_holder div.note_sundsta {
 	background: url("../images/structure/note_3.png") no-repeat  left top;
}
div#top_right_corner {
	width: 260px;
	height: 16px;
	position: absolute;
	top: -16px;
	right: 0px;
	background: url("../images/structure/top_right_corner.png") no-repeat  left top;
}
div#cake_large {
	width: 238px;
	height: 263px;
	position: absolute;
	right: 15px;
	top: -54px;
	z-index: 900;
	background: url("../images/structure/cake_large.jpg") no-repeat;
}
/*
 * Makes floating objects take up space. Fix from http://www.csscreator.com/attributes/containedfloat.php
 * Modified by Tomas: added our column elements because I didn't want to clog the markup with floatcontainer
 * class on every column element
 */

.floatcontainer:after, .column_inner:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility:hidden;
}

.floatcontainer, .column_inner {
	display: inline-block;
}

/* Hides from IE Mac \*/
* html .floatcontainer, * html .column_inner  {
	height: 1%;
}

.floatcontainer, .column_inner {
    display:block;
}
/* End Hack */