/* 
Green Tomec 1.0
By Jay - http://jayj.dk / kontakt@jayj.dk
Buy it on ThemeForest.net
*/

@import "css/reset.css"; /* Imports the reset.css */

body { 
	background: url(images/bg.png) repeat-x; /* This is the topbar and header background */
	font: 12px Arial, Helvetica, sans-serif; 
}

	/* Text */
		p { margin-bottom: 0.6em; line-height: 22px;}
		a { color: #5d6259; font-weight: bold; text-decoration: none; } /* Links */
		a:hover { text-decoration: underline; }
		
		/* Headings */
		h2 {
			font: 28px Georgia, "Times New Roman", Times, serif;
			color: #5d6259;
			letter-spacing: -1px;
			border-bottom: 1px dotted #b7b7b7;
		}
		h3 {
			font: 28px Georgia, "Times New Roman", Times, serif;
			font-size: 22px;
			color: #829107;
			letter-spacing: -1px;
			border-bottom: 1px dotted #b7b7b7;
		}
		h4 { font-size: 18px; margin: 10px 0 5px;}
	    h5 { font-size: 16px; margin: 10px 0 5px;}
	    h6 { font-size: 13px; font-weight: bold; margin: 0 0 5px;}
		
#container { width: 940px; margin: 0 auto -31px; } /* -31px is the height of the footer and push */
#footer, #push { height: 31px; } /* The push and footer height must be the same */
#push { margin-top: 40px; }

/* Topbar */
#topbar {
	color: #fff;
	font-weight: bold;
	height: 35px;
	line-height: 35px; /* Vertical centers the text */
	overflow: hidden;
}
#topbar p { margin: 0; 	line-height: 35px;} /* Remove margin-bottom: 0.6em; from p elements inside #topbar */
.top-content { width: 720px; }
#topbar p.twitter a{ 
	background: url(images/twitter.png) no-repeat right; /* The Twitter Bird */ 
	color: #fff;
	padding: 10px 36px 10px 0;
}
#topbar p.email-us { margin-right: 20px;}
#topbar p.email-us a { color: #dde78c; } /* Mail text color */

	/* Search form */
	#searchform { float: right; margin-top: 4px; width: 220px;}
	#searchform input.searchfield, #searchform #searchsubmit { border: none; float: left; width: auto;}
	/*  The input field */
	#searchform input.searchfield {
		background: url(images/search_input.png) no-repeat;
		padding: 5px 0 0 8px;
		height: 21px; /* Will be 26px with padding */
		width: 161px; /* Will be 169px with padding */
	}
	/* Search button */
	#searchform #searchsubmit { 
		background: url(images/search_submit.png) no-repeat; 
		margin-left: 8px;
		height: 26px;
		width: 43px;
		text-indent: -9999px; /* Push the text away */
	}

/* Header */

#header {
	height: 125px;
	position: relative;
}
#header #logo { float: left; margin-top: 42px; width: auto;}
#header #logo h1 a{ 
	background: transparent url(images/logo.png) no-repeat;
	color: #343434; /* Color of the text if you remove the logo */
	display: block; 
	font: 48px Georgia, Arial, Times, serif; 
	height: 48px; /* Height of logo.png */
	width: 302px; /* Width of logo.png */
	text-indent: -9999px; /* Push the text away */
}
#header #logo p.tagline{ 
	font: 14px Georgia, Arial, Times, serif;
	float: right;
	margin: -7px 0 0;
	width: auto;
}

/* Navigation */
ul#nav { 
	position: absolute;
	bottom: 0; right: 0;
}
ul#nav li { 
	background: url(images/menu_li.png) repeat-x;
	border: 1px solid #b5bda6;
	border-bottom: none; 
	font-size: 13px;
	float: left; 
	height: 28px;
	line-height: 28px;
	padding: 0 26px;
	margin: 0 3px 0 0;
	width: auto;
	position: relative;
	text-shadow: #89933d 0 1px 0;
}
ul#nav li.last { margin-right: 0; } /* The last navigation li have the class "last" */
ul#nav li a { color: #fff; } /* Color of the navigation text */

	/* Active page */
	ul#nav li.active {
		background: url(images/menu_li_active.png) repeat-x;
		border: 1px solid #fff;
		border-bottom: none;
		text-shadow: none;
	}
	ul#nav li.active a{ color: #363636;}
	
	/* 2. level */
	ul#nav li ul{ 
		visibility: hidden;
		background: #b5c059 url(images/menu_li.png) repeat-x bottom;
		position: absolute; 
		top: 27px; 
		left: 0; 
		z-index:5;
	}
	ul#nav li ul li{
		background: none;
		border: none;
		border-top: 1px solid #dbe094;
		margin: 0 0px -1px 0;
		float: none; 
	}
	ul#nav li.active ul li{ border: none;}
	ul#nav li.active ul li a{ color: #fff;}



/* Top section */
#top-section { margin-top: 55px; }
#top-section .top-image { float: left; width: 540px; }
#top-section img { border: 3px solid #343434; } /* The image border */
#top-section .top-info{ float: left; margin-left: 40px; height: 200px; width: 360px; position: relative;}
#top-section h2 {
	margin-bottom: 15px;
	color: #5d6259;
}

	/* Read more button */
	a.readmore { position: absolute; bottom: 0; left: 0; }

/* Main */
#main {
	float: left;
	margin-top: 55px;
	width: 540px; 
}
#main p { text-align: justify; }
#main img.alignleft, #main img.alignright { border: 1px solid #dedede; padding: 4px; }
#main a:hover img.alignleft, #main a:hover img.alignright { border: 1px solid #8A8A8A;}
	/* Main headings */
	#main h2 {
	margin-bottom: 15px;
	color: #5d6259;
}
	#main h3 {
	margin: 20px 0 10px;
	color: #5d6259;
}
	#main h4.btn { float: left; padding: 5px 20px; }
	
	/* Main lists */
	#main ul, #main ol { font-size: 13px; margin: 10px 0 20px 10px;}
	#main ul li, #main ol li { list-style: inside; line-height: 40px; border-bottom: 1px dotted #dedede;  } 
	#main ul li{ list-style: url(images/list_bullet.png);}
	#main ol li{  list-style: decimal; }
	

/* Services */
	
h3.services { margin-top: 20px; }
#main ul.services { margin: 10px 0 0 5px; width: 450px;}
#main ul.services li{ color: #595959; margin-bottom: 30px;  line-height: 20px; border-bottom: none; list-style: none;  }
#main ul.services li:hover{ color: #101010; }
#main ul.services li strong{ color: #101010; }
#main li.service1, li.service2, li.service3, li.service4, li.service5 {  padding: 7px 0 0 40px; }

#main ul.services li.service1 {
	background: url(images/service-icons/money.png) no-repeat left center; 
}
#main ul.services li.service2 {
	background: url(images/service-icons/web.png) no-repeat left center; 
}
#main ul.services li.service3 {
	background: url(images/service-icons/users.png) no-repeat left center; 
}
#main ul.services li.service4 {
	background: url(images/service-icons/clock.png) no-repeat left center; 
}
#main ul.services li.service5 {
	background: url(images/service-icons/favorite.png) no-repeat left center; 
}

	/* Gallery */
	
	div.gallery { overflow: hidden; }
	div.gallery img { margin: 0 5px 5px 0; }
	div.gallery-nav{
	font: 16px Georgia, "Times New Roman", Times, serif;
	margin-top: 20px;
	margin-right: 8px;
	margin-bottom: 0;
	margin-left: 0;
} /* The gallery navigation */
	div.gallery-nav a {font-weight: normal; }
	
		/* The Gallery Slider */

 		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 540px; height: 465px; }
		.csw .loading {margin: 200px 0 300px 0; text-align: center; }
 
		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			width: 540px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 465px;
			clear: both;
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */			position: relative;
			left: 0; top: 0;
			width: 100%;
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 540px; /* Also specified in  .stripViewer  above */
		}
		
		.stripNav { /* Removes the tab menu */
			display: none;
		}

/* Sidebar */

#sidebar {
	border-left: 1px solid #dedede;
	float: right;
	margin-top: 55px;
	width: 280px; /* 300px with padding */ 
	padding: 10px 0 25px 20px; /* I add some padding so there's a little space between the top and bottom of the left border and text */
}
#sidebar h3 {
	border-bottom: none;
	margin-bottom: 12px;
	color: #5d6259;
}
#sidebar .box { margin-bottom: 20px; border-bottom: 1px dotted #dedede; padding-bottom: 10px;}
#sidebar p { line-height: normal; }
#sidebar ul li {
	margin-left: 20px;
	line-height: 20px;
	list-style-type: disc;
}
#sidebar img.alignleft { margin-right: 5px; }
#sidebar img.alignright { margin-left: 5px; }

	/* Ads area */
	.ads-area { margin-top: 30px; }
	.ads-area img.alignleft{ margin: 0 5px 5px 0;}
	
/* Footer */
#footer {
	background: url(images/footer_bg.png) repeat-x;
	color: #777;
	font-size: 11px;
} 
#footer-inner {
	width: 940px;
	margin: 0 auto;
	color: #688a9c;
}
#footer p { margin: 0; line-height: 31px; /* Height of footer (look on about line 37) */}
#footer a { color: #777;font-weight: normal; }
#footer a:hover {
	color: #688a9c;
	text-decoration: none;
}


/* Form elements and contactform */
form#contactform { margin-top: 25px; }
form#contactform p{ margin-bottom: 4px; }
form label {
	color: #688a9c;
	font-weight: bold;
}

form input[type=text] { /* Text input fields */
	border: 1px solid #d3d3d3;
	padding: 4px 72px 4px 5px;
	margin-bottom: 12px;
}
form input[type=text]:focus, form input[type=text]:hover, form textarea:focus, form textarea:hover{
	border: 1px solid #B2B2B2;
}
form label.error { /* Error */
	background: none;
	border: none;
	font-weight: normal;
}
form input[type=text].error, form textarea.error {
	border: 1px solid #C00;
	padding: 4px 64px 4px 5px;
	font-family: Arial, Helvetica, sans-serif;
}
form textarea {
	border: 1px solid #d3d3d3;
	font: 12px Arial, Helvetica, sans-serif;
	padding: 4px 5px;
	margin-bottom: 12px;
	width: 368px; /* Will be 380px with padding and border */
	overflow: auto;
	-moz-box-sizing: border-box;   
	-webkit-box-sizing: border-box;   
	-ms-box-sizing: border-box;   
	box-sizing: border-box;   
}

form input.btn { /* The submit button */
	border: 1px solid #89933d; 
	padding: 4px 12px;
	margin-bottom: 10px;
}
form input.btn:hover {
	border: 1px solid #688a9c;
}
p.human { display: none; } /* Hide the human text field */

	/* Different things */
	.aligncenter { display: block; margin-left: auto; margin-right: auto; }
	.alignleft { float: left; }
	.alignright{ float: right; }
	img.alignleft { float: left; margin-right: 10px; }
	img.alignright { float: right; margin-left: 10px;}
	
	.clear { clear: both; }
	
	/* Give some things attention to your users - Just give a element a class - For example <p class="error">Some error text!</p>*/
	.warning, .alert, .error, .success, .download {
		padding: 6px 9px;
		font-family: Georgia, "Times New Roman", Times, serif; 
		/* I think it looks better with Georgia instead of Arial, just delete this line if you dont' */
	}
	.warning, .alert { background: #fffbbc; border: 1px solid #E6DB55; }
	.error { background: #ffebe8; border: 1px solid #C00; }
	.success, .download{ background: #e7f7d3; border: 1px solid #6c3; }
	
	/* Buttons */
	.btn {
	border: 1px solid #89933d;
	color: #fff;
	padding: 4px 12px;
	text-shadow: #89933d 0 1px 0;
	border-radius: 5px; /* Rounded corners - Currently not supported by any browser */
	-moz-border-radius: 5px; /* Rounded corners for Firefox */
	-webkit-border-radius: 5px; /* Rounded corners for Safari and Chrome */
	background-color: #5d6259;
	background-image: url(images/btn_bg.png);
	background-repeat: repeat-x;
	}
	.btn:hover { border: 1px solid #727a32; }
	.btn a { color: #fff; }
	input[type="submit"] { cursor: pointer; } /* Gives all submit buttons a hand cursor on rollover - Not working in IE6 */
	
	
	blockquote {
		border-left: 3px solid #dde78c;
		color: #666;
		font: italic 12px Georgia, "Times New Roman", Times, serif;
		overflow: hidden;
		margin: 10px 0;
		padding-left: 9px;
	}
	code { padding: 0 3px; background: #eee; }
	pre {
		background: url(images/pre.png) repeat;
		border: 1px solid #eee;
		padding: 9px;
		overflow-x: auto; /* Use horizontal scroller if needed*/
	}
	
	/* Table */
	
	table {	
		width: 100%;
		border:1px solid #dedede;
		margin: 10px;	
	}
	table caption{
		color: #829107;
		font-size: 18px;
		text-align:left;
		line-height:40px;
	}
	table thead th {
		background: #EAEAEA url(images/table_head_bg.png) repeat-x; /* The background image is just a soft gradient */
		border: 1px solid #dedede;
		font-size: 12px;
		padding: 15px;
	}
	table tbody td{ 
		background: #fcfcfc;
		border-left:0px solid #dedede;
		border-bottom:0px solid #dedede;
		font-size: 12px;
		padding: 10px;
		text-align: left;
	}
	table tbody td:hover{ background: #F8F8F8;} /* Color of the hover background in tables */