

/* Global
------------------------------------------------------*/
html,body{height:100%}
body {
	font-family:Tahoma, Arial, Verdana;
	font-size:12px;
	margin:0 auto;
	padding:0;
	color:#676767;
	background-color:#f9fbf4;
	height:100%;
}
* {
	margin:0;
	padding:0;
}
*:focus {
	outline:none; /* removes ugly dotted border but may make template more unsuable, up to you
					 if you want to keep it! */
}
.clr{clear:both}
form{margin:0; padding:0;}


/* Default Element Styles
------------------------------------------------------*/
/* heading */
h1, h2, h3, h4, h5 {margin-bottom:10px; font-family:Tahoma, Arial, Verdana;	font-weight:normal;}
h1 {color:#303030; font-size:34px;}
h2 {color:#303030; font-size:24px;}
h3 {color:#303030; font-size:18px;}
h4 {color:#303030; font-size:16px;}
h5 {font-size:12px; margin:3px 0px; padding:0px; font-weight:bold; letter-spacing:1px;}

/* links */
a {color:#676767;text-decoration:underline;}
a:hover{text-decoration:underline;}
a img{border:none;}

h4 a{color:#303030; font-size:16px; text-decoration:none;}
h4 a:hover {text-decoration:none;}

/* lists, blockquotes and paragraphs */
p, ul, ol, blockquote {
	font-size:12px;
	line-height:18px;
	margin-bottom:20px;
	color:#676767;
}
ul, ol {
	margin:10px 0 35px 40px;
}
li ol,
li ul
{
	font-size:1.0em;
	list-style:square;
	margin-bottom:0;
	margin-top:0;
}
li ol {list-style:decimal;}
blockquote {
	margin:0px;	
	padding-left:35px;
	background-image:url(http://www.systemtechs.net/images/quote.png);
	background-position:0px 5px;
	background-repeat:no-repeat;
}

/* code */
code {
	font-family:Tahoma, Arial, Verdana;
	letter-spacing:1px;
	margin:25px 0 25px 0px;
	display:block;
	font-size:0.9em;
	border-left:4px solid #676767;
	padding:15px 10px;
}


/* Container
------------------------------------------------------*/
#main_container{background-image:url(http://www.systemtechs.net/images/bg-top-container.jpg); background-repeat:repeat-x; min-height:90%; }
#bottom_container{background-image:url(http://www.systemtechs.net/images/bg-bottom-container.gif); background-color:#000; background-repeat:repeat-x; height:175px; margin:0px auto 0px auto; clear:left;}


/* Frame
------------------------------------------------------*/
#frame{width:960px; margin:0px auto 0px auto; }


/* Top
------------------------------------------------------*/
#top{height:46px;}
#logo{width:255px; float:left;}
#pad_logo{padding:9px 0px 0px 5px;}
#topmenu{width:705px; float:left;}
#rss {float:right;padding:15px 5px 0px 0px;}
.rss-text {float:left; font-size:11px; padding-top:1px;}
.rss-img {float:left; padding-left:5px; }
.rss-text a {color:#676767;text-decoration:none;}
#head-top {width:960px; height:25px; border-bottom:1px solid #71736b; padding-bottom:8px; margin:12px 0px 10px 0px; float:left;}
#head-title h2 {width:630px; padding-bottom:3px; float:left;}

/* Top Navigation bar menu styling */
#nav {margin:0px; padding:12px 0px 0px 0px; float:right;}
#nav ul li.last{background:none;}
#nav ul{ 
	padding:0;
	margin:0;
	width:auto;
	list-style: none;
	height:37px;
	position: relative;
	float:right;	
}
#nav li{
	list-style:none;
	float:left;
	text-align:center;
	padding:0;
	font:normal 14px Tahoma;	
	color:#ffffff;
	background:url(http://www.systemtechs.net/images/nav-divider.gif) no-repeat 100% 3px;
}
#nav li a {
	z-index: 10;
	display: block;
	float: left;
	height: 30px;
	position: relative;
	overflow: hidden;
	margin: auto 20px;
	color:#ffffff;
	text-decoration:none;	
}
#nav li a:hover {
	background: url(http://www.systemtechs.net/images/lava.gif) no-repeat center 28px;
	height:37px;		
	color:#ffffff;
}	
#nav li .active {
	background: url(http://www.systemtechs.net/images/lava.gif) no-repeat center 28px;
	height:37px;		
	color:#ffffff;
}	
#nav a:link{color:#ffffff; text-decoration:none;}	
#nav a:hover{color:#ffffff; text-decoration:none;}	
#nav a:active{color:#ffffff; text-decoration:none;}


/* Content
------------------------------------------------------*/
.imgleft{float:left; padding-right:15px;}
.imgright{float:right; padding-left:15px;}
.imgleft-box{float:left; border:solid 1px #cfd4c3; padding:6px; margin-right:15px; background-color:#f9fbf4;}
.imgright-box{float:right; border:solid 1px #cfd4c3; padding:6px; margin-left:15px; background-color:#f9fbf4;}
#content1{float:left; width:300px;}
#content2{float:left; width:300px; margin-left:30px;}
#content3{float:left; width:300px; margin-left:30px;}
.map{border:solid 1px #dadada; padding:6px; margin:0px; background-color:#fbfbfb;}
.newsfeed{float:right; margin-top:4px; margin-right:4px;}
.maincontent h3 {border-bottom:1px solid #71736b; padding-bottom:3px;}
.brochure{margin-top:30px;}


/* Footer
------------------------------------------------------*/
#footer{width:960px; margin:0px auto 0px auto; color:#787773; clear:both;}
#foot{padding:13px 0px 0px 0px; font-size:11px; line-height:18px; float:left;}
#foot a, #foot a:visited{color:#787773; text-decoration:none;}
#foot a:hover{text-decoration:underline;}
.footer_column {float:left; width:160px; font-size:10px; margin-right:30px;}
.footer_column ul li, .footer_column ul { list-style:none; margin:0px; padding:0px;}
.footer_column h3 {color:#787773; font-size:14px; font-weight:bold;}
.left-foot{width:504px; float:left;}
.right-foot{ background-image:url(http://www.systemtechs.net/images/twitter-bg.jpg); background-repeat:no-repeat; width:456px; height:34px; margin-top:10px; float:left;}
.twitter-code{width:400px; margin-top:7px; margin-left:8px; text-align:center; overflow:hidden; white-space:nowrap;}

#footer-h-legal{
	float:left;
	margin:10px 0 10px 10px;
	width:500px;
}

#footer-h-legal ul{
	float:left;
	margin:2px 0 5px 0px;
	list-style-type:none;
}

#footer-h-legal ul li{
	float:left;
	font-size:11px;
	line-height:1.2;
	margin-right:10px;
	padding-right:10px;
	border-right:1px solid #777;
}

#footer-h-legal ul li.last{
	margin-right:0;
	padding-right:0;
	border-right:none;
}

#footer-h-legal ul li a{
	text-decoration:none;
}

#footer-h-legal p{
	float:left;
	clear:left;
	width:500px;
	margin-left:40px;
	
}



/* Front Page Slider
------------------------------------------------------*/
#slides_container{height:315px; position:relative; float:left;}
.more-button { float:inherit;}
.flash-img {text-align:center; display:block; margin:110px auto 0 auto;}
/* CU3ER Slider */	
	#slides-cu3er {width:620px; height:314px; padding-left:30px; float:left; background-image:url(http://www.systemtechs.net/images/shadow-box.jpg); background-repeat:no-repeat; background-position:bottom;}
	#slides-text {width:310px; height:265px; float:left; padding-left:0px;}
	#slides-text h1{width:300px; text-align:left; margin:0px;}
	#slides-text h3{width:300px; text-align:left; margin-bottom:15px;}
	#slides-text p{font-size:11px; width:300px; line-height:20px;}					


/* Content
------------------------------------------------------*/
#content{padding:10px 0px 30px 0px; float:left;}





/* About
------------------------------------------------------*/
ul.about-list {margin:0px; padding:0px 0px 0px 16px; list-style-type:none; color:#bdbdbd;}
ul.about-list li {background-image:url(../images/small-arrow.png); background-position:0px 3px; background-repeat:no-repeat; padding:0px 0px 12px 17px; line-height:13px;}
ul.about-list li a {text-decoration:none;}
ul.about-list li a:hover {text-decoration:underline;}


/* Blog
------------------------------------------------------*/
ul.blog-list {margin:0px; padding:0px; list-style-type:none; color:#bdbdbd;}
ul.blog-list li {background-image:url(../images/small-arrow.png); background-position:0px 3px; background-repeat:no-repeat; padding:0px 0px 12px 17px; line-height:13px;}
ul.blog-list li a {text-decoration:none;}
ul.blog-list li a:hover {text-decoration:underline;}
.blog-post {padding-bottom:18px;}
.blog-posted {background-image:url(../images/blog-post-bg.jpg); background-repeat:no-repeat; height:27px; margin-top:30px; padding-top:8px; font-size:11px;}
.posted-left {float:left;}
.posted-right {float:right;}
.comment {float:left; margin-top:2px; margin-right:7px;}
#newsletter fieldset {margin:0px; padding:0px; border:0px;}


/* Content 
------------------------------------------------------*/
#content {padding-bottom:40px; float:left;}
#content-inner {float:left; width:630px;}
#content-right {float:left; width:300px; margin:20px 0px 0px 30px;}
#content h4 {margin-bottom:4px;}
ul.list {list-style-type:none; margin:0px; float:left;}
ul.list li {background-image:url(../images/green-arrow.png); background-position:0px 2px; background-repeat:no-repeat; padding:0px 0px 12px 22px; line-height:13px;}
#main_text {padding:20px 0px 0px 0px;}
#head-top {width:960px; height:25px; border-bottom:1px solid #71736b; padding-bottom:8px; margin:12px 0px 12px 0px; float:left;}
#head-top-inner {width:630px; height:25px; margin:13px 0px 10px 0px; padding-bottom:7px; float:left; border-bottom:1px solid #71736b;}


/* Sidebar
------------------------------------------------------*/
.side-box {padding-bottom:10px;}
.side-box h3 {border-bottom:1px solid #71736b; padding-bottom:3px;}
.but {vertical-align:middle; padding-left:5px;}
.inputbox01 {width:218px; border:1px solid #cfd4c3; vertical-align:top; padding:2px 4px 3px 3px; color:#999; }


/* Portfolio 
------------------------------------------------------*/
#quote {background-image:url(../images/portfolio-shadow.jpg); background-repeat:no-repeat; background-position:top; width:960px; float:left;}
.quote-button {padding-top:40px;}
#portfolio-list li {list-style:none;}
#portfolio-list li img {border:solid 1px #cfd4c3; padding:6px; margin:0px; background-color:#f9fbf4; }
#portfolio-list li.last {margin-right: 0;}
.portfolio-item-thumb {width:300px; float:left; margin:0px 29px 20px 0px; color:#676767; line-height:18px; position: relative; height: 250px;}
.portfolio-item-thumb-last {margin-right:0px;}

.jcarousel-skin-portfolio .jcarousel-container-vertical {width: 960px; height: 500px; margin:0px;}
.jcarousel-skin-portfolio .jcarousel-clip-vertical {width:  960px; height: 500px;}
.jcarousel-skin-portfolio .jcarousel-item {width: 960px; height: 250px; margin:0px;}

.jcarousel-skin-portfolio .jcarousel-next-vertical {position: absolute; right: 0px; top: -40px; width: 23px; height: 23px; cursor: pointer; background: url("../images/nav_carousel.gif") no-repeat 100% 0%;}
.jcarousel-skin-portfolio .jcarousel-next-vertical:hover {background-position: 100% 50%;}
.jcarousel-skin-portfolio .jcarousel-next-disabled-vertical,
.jcarousel-skin-portfolio .jcarousel-next-disabled-vertical:hover {background-position: 100% 100%;}

.jcarousel-skin-portfolio .jcarousel-prev-vertical {position: absolute; right: 30px; top: -40px; width: 23px; height: 23px; cursor: pointer; background: url("../images/nav_carousel.gif") no-repeat 0% 0%;}
.jcarousel-skin-portfolio .jcarousel-prev-vertical:hover {background-position: 0% 50%;}
.jcarousel-skin-portfolio .jcarousel-prev-disabled-vertical,
.jcarousel-skin-portfolio .jcarousel-prev-disabled-vertical:hover {background-position: 0% 100%;}


/* Clearing method
------------------------------------------------------*/
.clearfix:after	{content:".";  display:block;  clear:both;  visibility:hidden;  line-height:0;  height:0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display:block;}
* html .clearfix {height:1%;}
.clear {clear:both;}


/* Contact 
------------------------------------------------------*/
form {margin:0; padding:0;}
#contactFormArea {width:480px; color:#6b6b6b;}
.input {background-color: #ffffff; border:1px solid #cfd4c3; width:286px; padding:5px 5px 5px 5px; margin:0px; color:#6b6b6b;}
.input-submit { background-image:url(../images/but-send.gif); background-repeat:no-repeat; padding:0px; margin:0px; border:0px; width:93px; height:28px; cursor:pointer; float:right; margin-right:97px;}
.textarea {background-color: #ffffff; border:1px solid #cfd4c3; width:286px; padding:5px 5px 5px 5px; margin:0px; color:#6b6b6b;}
.facebook {float:left; width:150px; padding:10px 0px 20px 0px;}
.twitter {float:left; width:150px; padding:10px 0px 20px 0px;}
.social-text {float:left; padding-top:8px;}
.social-icon {float:left; padding-right:5px}
.social-text a {color:#7a7a7a;text-decoration:none;}
