﻿/**********************************************************************************************

	CSS on Sails
	Title: Website
	Author: XHTMLized
	Date: March 2008 

***********************************************************************************************

		
	1. BASE
			1.1 Reset
			1.2 Default styles
			1.3 Basic styles
	
	2. LAYOUT
			2.1 Header
			2.2 Content
			2.3 Sidebar
			2.4 Footer
		

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	



/* 1.1	Reset
-----------------------------------------------------------------------------------------------*/	


	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	
	body {
		line-height: 1;
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, 
	blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	:focus {
		outline: 0;
	}
	
	ins {
		text-decoration: none;
	}
	
	del {
		text-decoration: line-through;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}


/* 1.2	Default styles
-----------------------------------------------------------------------------------------------*/	

	body {
		background: #F1F1F0 url(../images/bg_inner.png) repeat-x 0 0;
		font: 62.5% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Lucida", Arial, Helvetica, sans-serif;
		text-align: center;
		color: #666;
		}

	hr { 
		display: none;
	}
			
	strong {
		font-weight: bold;
	}
			
	em {
		font-style: italic;
	}
		
	abbr, acronym {
		border-bottom: 1px dotted #999; 
		cursor: help;
	}
	
	input, textarea, select {
		font: 1.2em Arial, Helvetica, sans-serif;
	}

	a {
		color: #2382C9;
		text-decoration: none;
	}
	
	a:hover, 
	a:active {
		color: #ff3300;
		text-decoration: none;
	}
	

/* 1.3	Basic styles
-----------------------------------------------------------------------------------------------*/	

	.hide {
		display: none;
	}
	

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	
	.container {
		width: 960px;
		position: relative;
		margin: 0 auto;
		text-align: left;
	}
	
	.bg_home {
		background-image: url(../images/bg.png);
	}
	
	#header {
		height: 125px;
	}
	
	#navigation {
		height: 40px;
	}

	#content {
		width: 690px; 
		float: left;
	}
		
	#sidebar {
		width: 265px;
		float: right; 
	}
	
	#footer {
		clear: both;
	}
	
	/* Headline Layout */
	#headline {
		height: 160px;
		padding-bottom: 4px;
		overflow: hidden;
	}

	#headline_inner {
		height: 110px;
		padding-bottom: 4px;
		overflow: hidden;
	}
	

/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	

	#header h1, 
	#header h1 span,
	#header .logo a,
	#header .logo span {
		display: block;
		width: 140px;
		height: 62px;
		overflow: hidden;
		cursor: pointer;
	}
	
	#header h1,
	#header .logo {
		position: absolute;
		top: 34px;
		left: 15px;
	}
		
	#header h1 span,
	#header .logo span {	
		position: absolute; 
		top: 0;
		left: 0;
		z-index: 10;
		background: url(../images/logo.png) no-repeat;
	}
	
	#accessibility-links {
		position: absolute;
		left: -1000em;
		text-align: left;
	}
	
/* 2.2	Navigation
-----------------------------------------------------------------------------------------------*/	
	#navigation {
		background: url(../images/navigation_bg.png) repeat-x top left;
		z-index: 100000 !important;
		position: relative;
	}

/* 2.3	Home Spesific
-----------------------------------------------------------------------------------------------*/	

	/* Home Spesific Layout */
	.home_wrapper {
		width: 736px;
		float: left;
	}
		.home_left {
			float:left;
			width: 430px;
			height: 360px;
			background: url(../images/home_left_bg.png) no-repeat 0 0;
		}
		.home_center {
			float:right;
			padding: 5px;
			width: 290px;
			height: 350px;
			background: url(../images/home_center_bg.png) no-repeat 0 0;
		}
		.home_right {
			float: right;
			padding: 5px;
			width: 208px;
			height: 350px;
			background: url(../images/home_right_bg.png) no-repeat 0 0;
		}

		
	/* Home Spesific Formatting */
	.home_left .intro {
		padding: 36px 36px 10px 36px; 
	}
	
	.home_left #scrollup {
			background: url(../images/quote.png) no-repeat 36px 20px;	
			font: bold italic 1.4em/1.2em Georgia, Times, "Times New Roman", serif;
			padding: 20px 36px 0 81px;
			width: 300px;
			height: 160px;
			overflow: hidden;
			position: relative;
	}
		.home_left #scrollup cite {
			display: block;
			font: 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Lucida", Arial, Helvetica, sans-serif;
			text-align: right;
			padding: 15px 0 0 0;
		}
		

	.home_center h2 {
		background: #57B6DD;
		color: #fff;
		font-size: 1.6em;
		font-weight: normal;
		padding: 0 15px;
		line-height: 36px;
	}
		.home_center p {
			font-size: 1.3em;
			line-height: 1.3em;
			padding: 15px;
			color: #000;
		}
		.home_center ul {
			font-size: 1.3em;
			line-height: 1.3em;
			color: #000;
			border-top: 1px solid #C8E9F0;
		}
			.home_center li {
				padding: 10px 20px 10px 50px;
				border-bottom: 1px solid #C8E9F0;
				background: url(../images/home_check.png) no-repeat 10px 8px;				
			}
		
	.home_right h2 {
		background: #F0F0ED;
		color: #57B6DD;
		font-size: 1.6em;
		font-weight: normal;
		padding: 0 15px;
		line-height: 36px;
	}
		.home_right ul {
			font-size: 1.1em;
			line-height: 1.5em;
			color: #000;
		}
			.home_right li {
				padding: 10px 20px 10px 20px;
				border-bottom: 1px solid #F0F0ED;
				color: #000;
			}
				.home_right li cite {
					display: block;
					color: #666;
					text-transform: uppercase;
					font-style: normal;
					padding-bottom: 3px;
				}
			

/* 2.4	Content
-----------------------------------------------------------------------------------------------*/	

	#content {
	}
		#content .content_top {
			background: url(../images/content_bg_top.png) no-repeat 0 0;
			height: 10px;
			display:block;
			overflow: hidden;
		}
		#content #content_body {
			display: block;
			padding: 10px 15px 0 15px;
			background: url(../images/content_bg_body.png) repeat-y 0 0;
			display:block;
			overflow: hidden;
		}
		#content .content_bottom {
			background: url(../images/content_bg_bottom.png) no-repeat 0 0;
			height: 10px;
			clear:both;
			display:block;
			overflow: hidden;
		}
		#content h2.pagetitle {
			color: #69A630;
			font-size: 1.6em;
			border-bottom: 1px solid #69A630;
			padding: 10px 15px;
		}

		#content .entry {
			font-size: 1.2em;
			padding: 15px 15px 1px 15px;
			display:block;
			overflow: hidden;
		}
		#content .entry p {
			margin: 0 0 1.5em 0;
			padding:0;
			display:block;
		}
		
		#content .entry hr {
			display: block;
			overflow: hidden;
			height: 1px;
			color: #DCEACF;
			background-color: #DCEACF;
			margin:0 0 1.5em 0;
			padding:0;
			border:0;
		}
		
		#content .entry ul, #content .entry ol {
			list-style: disc;
			margin: 8px 0px 15px 0;
			padding:0;
		}
		
		#content .entry ol {
			list-style: decimal;
		}
		
		#content .entry ul li {
			margin-left: 30px;
		}

		#content .entry ol li {
			margin-left: 35px;
		}
		
		#content .entry small {
			font-size: 0.86em;
		}
		
/* 2.5	Sidebar
-----------------------------------------------------------------------------------------------*/	

	.sidebar_nav_top, .sidebar_nav_bottom {
		height: 8px;
		display: block;
		overflow: hidden;
	}
		.sidebar_nav_top {
			background: url(../images/sidebar_nav_top.png) no-repeat top left;
		}
		.sidebar_nav_bottom {
			background: url(../images/sidebar_nav_bottom.png) no-repeat top left;
		}

	#sidebar_nav {
		background: #fff url(../images/sidebar_nav_body.png) repeat-y top left;
		overflow: hidden;
	}
	#sidebar_nav ul {
		padding: 0 7px 0 8px;
	}
	#sidebar_nav ul li {
		background: #fff url(../images/sidebar_nav_bg.png) repeat-x bottom left;
		padding: 0px 10px;	
		margin:0;
		font-size: 1.2em;
		font-weight: bold;
		width: 230px;		
		height: 32px;
		display: block;
		overflow: hidden;
	} 
		#sidebar_nav li a {
			float:left;
			color: #2382C9;
		}

		#sidebar_nav li a span {
			float:left;
			line-height: 32px;
			height: 32px;
			padding: 0 10px;
			cursor: pointer;
		}
		
	
		#sidebar_nav a:hover, #sidebar_nav li.cur a {
			background: url(../images/sidebar_nav_h_b.png) no-repeat bottom right;	
			color: #2382C9;
		}
		#sidebar_nav a:hover span, #sidebar_nav li.cur span {
			background: url(../images/sidebar_nav_h_f.png) no-repeat bottom left;	
		}	
		#sidebar_nav li.first {
			height: 42px
		}
		#sidebar_nav li.first a span {
			padding-top: 10px;
		}
	
	.sidebar_box_top, .sidebar_box_bottom {
		height: 8px;
		display: block;
		overflow: hidden;
	}
		.sidebar_box_top {
			background: url(../images/sidebar_box_top.png) no-repeat top left;
			margin-top: 5px;
		}
		.sidebar_box_bottom {
			background: url(../images/sidebar_box_bottom.png) no-repeat top left;
		}	
	#sidebar_box {
		padding: 5px 15px;
		background: #fff url(../images/sidebar_box_body.png) repeat-y top left;
		font-size: 1.2em;
		overflow: hidden;
	}
	#sidebar_box iframe {
		margin-bottom: 5px;
	}
		

/* 2.6	Footer
-----------------------------------------------------------------------------------------------*/	

	#footer {
		display: block;
		overflow: hidden;
		background: url(../images/footer_line.png) no-repeat 0px 14px;
		padding:0;
		margin:0;
		font-size: 1.1em;
		line-height: 60px;
	}
		#footer .copyright {
			width: 294px;
			display: block;
			float:left;
		}
		
		#footer a {
			color: #69a630;
		}
		
		#footer a:hover {
			color: #ff3300;
		}

/* 2.7	Contact Spesific
-----------------------------------------------------------------------------------------------*/	
	#contact {
		width: 690px; 
		float: left;
		padding-top: 4px;
	}
	 #contact_detail {
			float:left;
			width: 231px;
			padding: 5px;
			height: 390px;
			display: block;
			overflow: hidden;
			background: url(../images/contact_detail_bg.png) no-repeat 0 0;
		}
			#contact_detail h2 {
				font-size: 1.6em;
				background: #69A630;
				height: 32px;
				line-height: 32px;
				padding: 0 10px 0px 20px;
				color: #fff;
				font-weight: normal;
				margin-bottom: 15px;
			}
			#contact_detail p {
				font-size: 1.2em;
				line-height: 1.5em;
				padding: 0px 10px 0px 20px;
				margin-bottom: 15px;
			}
			
			#contact_detail hr {
				display: block;
				overflow: hidden;
				height: 1px;
				color: #DCEACF;
				background-color: #DCEACF;
				margin:0 0 1.0em 0;
				padding:0;
				border:0;
			}
			
			#contact_detail .phone, #contact_detail .email {
				padding: 0px 0px 10px 20px;
				font-size: 1.1em;
				display: block;
				overflow: hidden;
			}
			#contact_detail img {
				vertical-align: middle;
			}

		#contact_form {
			float:right;
			width: 435px;
			height: 380px;
			padding: 5px;
			display: block;
			overflow: hidden;
			background: url(../images/contact_form_bg.png) no-repeat 0 0;
		}		

			#contact_form h2 {
				font-size: 1.6em;
				padding: 10px 20px;
				border-bottom: 1px solid #69A630;
			}
			
			#contact_form form {
				padding: 10px 0px;
				margin: 0px;
					font-size: 1.2em;
			}
				
				#contact_form div {
					padding: 7px 20px 0 20px;
				}
				#contact_form label {
					width: 70px;
					display: block;
					float:left;
				}
				#contact_form input {
					width: 310px;
					background: #f7f7f7;
					font-size: 1.1em;
					
				}
					#contact_form input#f_check {
						width: 16px;
						vertical-align: middle;
					}
				
				#contact_form textarea {
					width: 310px;
					height: 120px;
					background: #f7f7f7;
					font-size: 1.1em;
				}			

				

.vcard {

}

.organization-name, .street-address, .locality, .region, .postal-code {
	font-weight: bold; 	
	font-size: 1.2em;
	padding: 0px 0px 5px 20px;
}

.region, .postal-code {
	padding:0;
}

.tel {
	padding: 10px 0px 10px 40px;
	margin: 10px 0 10px 0;
	font-size: 1.1em;
	display: block;
	overflow: hidden;	
	border-top: 1px solid #DCEACF;
	border-bottom: 1px solid #DCEACF;
	background: url(../images/ico_phone.png) no-repeat 18px 8px;
}

.vcard .email {
	padding: 20px 0px 0px 40px;
	font-size: 1.1em;
	display: block;
	overflow: hidden;	
	border-bottom: 1px solid #DCEACF;
	background: url(../images/ico_email.png) no-repeat 18px 0px;
}

.vcard .email a {
	padding-left: 20px;
}
