/* CSS Styling for www.stebersolutions.com (c) 2009 */
*{
	margin: 0; 
	padding: 0; 
	border: 0; 
	font-weight: normal;
} 

strong {
	font-weight: bold;
} 
body {
	margin: 0; 
	padding: 0; 
	font-family:Arial, Helvetica, sans-serif; 
	font-size: 15px; 
	line-height: 1.3em; 
	color: #4A4742; 
	background: #2f0147 url(../../images/nav-wrap-bg.jpg) top repeat-x;
}
a {
	color: #514D44; 
	cursor: pointer; 
	text-decoration:none;
}
a:hover {
	color: #333; 
	text-decoration:underline;

}
/* Common properties */
#header, #nav, #content, #lower-content {
	width: 960px; 
	margin: 0 auto; 
	position: relative;
}

/* Header*/
#header-wrap{height: 40px; background: transparent;}
#header{position: relative; height: 40px;}
#header a{color: #9e9e9e; font-size: 18px;}
#header p{position: absolute; top: 18px; right: 0; text-align: right; color: #333; font-size: 20px;}
#header a{color: #333;}
#header a:hover{color: #000;}
#header a.current{color: #000;}

/* Logo and Nav box */
#nav-wrap{height: 60px; background: transparent;}
#nav img{position: absolute; bottom: -53px; left: 0px;}
#logo {
	position: absolute;
	left: -10px;
	top: 3px;
}


/* Start Main Navigation */
#nav-box{width: 600px; position: absolute; bottom: 0; right: 0; height: 40px; background: url(../../images/nav.jpg) top left no-repeat;}
#nav-box ul{list-style-type: none; height: 40px; margin: 0; padding: 0;}
#nav-box li{float: left; cursor: pointer; }
#nav-box li a{height: 0; margin: 0; padding-top: 40px; color: #2d3440; overflow: hidden; cursor: pointer; background: url(../../images/nav.jpg) no-repeat; display: inline; float: left; position: relative;}
#nav-box li a:active, #nav-box li a:hover{cursor: pointer;}

/* Static nav item*/
#nav-box li#index a{width: 120px; background-position: 0 0;}
#nav-box li#about-us a{width: 120px; background-position: -120px 0;}
#nav-box li#services a{width: 120px; background-position: -240px 0;}
#nav-box li#portfolio a{width: 120px; background-position: -360px 0;}
#nav-box li#contact-us a{width:120px; background-position: -480px 0;}

/* Current nav item */
#nav-box li#index a.current, #nav-box li#index a.current:hover, #nav-box li#index a.current:active{width: 120px; background-position: 0 -40px;}
#nav-box li#about-us a.current, #nav-box li#about-us a.current:hover, #nav-box li#about-us a.current:active{width: 120px; background-position: -120px -40px;}
#nav-box li#services a.current, #nav-box li#services a.current:hover, #nav-box li#services a.current:active{width: 120px; background-position: -240px -40px;}
#nav-box li#portfolio a.current, #nav-box li#portfolio a.current:hover, #nav-box li#portfolio a.current:active{width: 120px; background-position: -360px -40px;}
#nav-box li#contact-us a.current, #nav-box li#contact-us a.current:hover, #nav-box li#contact-us a.current:active{width:120px; background-position: -480px -40px;}

/* Hover nav item */
#nav-box li a span{cursor: pointer; overflow: hidden; position: absolute; top: 0; left: 0; display: none; height: 0; margin: 0; padding-top: 125px;}
#nav-box li#index a span{width: 120px; background: url(../../images/nav.jpg) 0 -120px;}
#nav-box li#about-us a span{width: 120px; background: url(../../images/nav.jpg) -120px -120px;}
#nav-box li#services a span{width: 120px; background: url(../../images/nav.jpg) -240px -120px;}
#nav-box li#portfolio a span{width: 120px; background: url(../../images/nav.jpg) -360px -120px;}
#nav-box li#contact-us a span{width: 120px; background: url(../../images/nav.jpg) -480px -120px;}

/* Clicked nav item*/
#nav-box li a span{cursor: pointer; overflow: hidden; position: absolute; top: 0; left: 0; display: none; height: 0; margin: 0; padding-top: 125px;}
#nav-box li#index a span{width: 120px; background: url(../../images/nav.jpg) 0 -120px;}
#nav-box li#about-us a span{width: 120px; background: url(../../images/nav.jpg) -120px -120px;}
#nav-box li#services a span{width: 120px; background: url(../../images/nav.jpg) -240px -120px;}
#nav-box li#portfolio a span{width: 120px; background: url(../../images/nav.jpg) -360px -120px;}
#nav-box li#contact-us a span{width: 120px; background: url(../../images/nav.jpg) -480px -120px;}
/* End Navigation */

/* Main Content */
h2, h3 {
	color: #333; 
	font-size: 20px; 
	line-height: 25px; 
	padding-bottom:10px; 
	font-weight: normal; 
	margin-bottom: 3px;
}
#content-wrap { 
	border-top: 2px solid #ABABAB;
	background: #ffffff url(../../images/content-bg.gif) repeat-x;
}
#content {
	overflow: hidden;
}
#left-col {
	width: 300px; 
	float: left; 
	padding-top: 25px;
}
	#left-col h1 {
	font-size: 21px;
	text-align: left;
	font-weight: normal;
	color: #4A4742;
	line-height: 26px;
	padding-bottom: 0px;
	}
	#left-col p{
	padding-top: .3em;
	text-align: left;
	color: #4A4742;
	}
	
p.last{padding-bottom: 1.5em;}

#left-col a{color: #06206D; text-decoration:underline;} 
#left-col a:hover{color: #06206D; text-decoration:none;}

#right-col{
	position: absolute; 
	right: 0; 
	top: 0; 
	width: 600px; 
	background: #F4E9CB; 
	height: 100%;}

	#right-col h1 {
		font-size: 21px;
		text-align: left;
		font-weight: normal;
		color: #4A4742;
		line-height: 26px;
		padding-bottom: 10px;
		padding-top: 25px;
		padding-left: 10px;
	}
	
	#right-col h4 {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	#right-col p {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	#right-col ul {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	#right-col li {
		margin-left: 15px;
	}

/* Slideshows */

#slideshow, #slideshow2{position: relative; width: 600px; background: #333; height: 250px; margin: 0 auto; padding: 0; }
#slideshow img, #slideshow2 img{position: absolute; width: 600px; height: 250px; top: 0; left: 0;}
#slideshow a{position: absolute; width: 600px; height: 250px; top:0; left: 0;}

/* Lower Main Content */
#lower-content-wrap{
	border-top: 2px solid #9F9F9F;
	background-image: url(../../images/grey-gradient.gif);
	background-repeat: repeat-x;
	background-position: center top;
}
#lower-content{position: relative; overflow: hidden; font-size: 14px;}
#lower-content h2, #lower-content h3{margin-top: 25px;}
#lower-left-col{
	width: 350px;
	float: left;
	text-align: left;
	padding-right: 10px;
	padding-bottom:5px;
}
#lower-content p{color: #333; padding-bottom: 10px; padding-top: 2px;}
#lower-content p.date{color: #FFFFFF; font-size: 11px; padding-bottom: 0;}

#lower-right-col{
	position: relative;
	float: right;
	width: 600px;
	padding-top: 5px;
	padding-bottom: 3em;
	background-color: #E6E6E6;
}

.product-row {
	padding-bottom: 30px;
	}
	
.product-col {
	float: left;
	padding-bottom:20px;
	padding-top:10px;
	padding-right:5px;
	}

.product-row img {

	border: 1px solid #CCC;
}

.product-row-title {
	margin: 0;
	margin-top: 15px;
	padding: 5px 0;
	color: #0A96C2;
	border-bottom: 1px dotted #CCC;
	font-weight:normal;
	font-size:22px;
}
	

.col{width: 234px; float: left; text-align: left; padding-left: 22px; padding-right: 24px;}
.col a.image, .col a.image:hover{padding: 0; margin: 0;}
.col a{
	color: #333333;
	padding: 2px 1px;
	text-decoration: underline;
} .col a:hover{background: #eefbfc; color: #333; padding: 2px 1px; text-decoration:underline;}
#lower-right-col p{padding-top: 3px;}
.second{background: none; border-left: #DAC4A3 1px dotted;}
#lower-left-col a{color: #FFFFFF; padding: 3px 2px; } #lower-left-col a:hover{background: #eefbfc; color: #333; padding: 3px 2px; text-decoration:underline;}
#lower-left-col a img { float:none; }
#lower-left-col li{
	color: #333333;
	margin-bottom: 10px;
	padding-left: 25px;
	background: url(../../images/point2.png) 0px 50% no-repeat;
	list-style-type: none;
}
#lower-left-col img {float:left; padding-right: 10px;}
.testimonial {color:#333333; font-size:12px; font-style:italic;}
.testimonial img {float:left; padding-right:9px; }

/* Universal Content */

.subtitle{font-size: 13px; color: #4A463E; font-weight: bold;  line-height: 1.6em; text-align:left;}
.price{color:#FF0000; font-size:22px; font-family:Georgia, "Times New Roman", Times, serif; padding-bottom: 1.5em; text-align:center}
a.box{position: relative; color: #333333; display: block; height: 20px; width: 200px; border-top: 1px solid #d5c9a3;  padding: 8px; text-align: left; background: url(../../images/a-box-bg.gif) repeat-y; text-decoration: none;}
a.box img{position: absolute; border: none; width: 10px; height: 10px; margin: 0; padding: 0; top: 10px; right: 12px;}
a.box:hover{background: #6c5b3c; color: #333333; cursor: pointer;}
.footnote {font-size: 80%;  font-style:italic;}

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

/* Home Page Content */
body#home #content {overflow:visible; }
body#home #content-wrap { height: 250px; }

/* About-us Content */
body#about #left-col p{font-size: 14px;}
body#about #right-col h4 {padding-top: 25px;}

/* Services Content */
body#services #left-col p{font-size: 14px;}
body#services #right-col h4 {padding-top: 25px;}
body#services #col li {list-style-image:url(../../images/check.jpg); padding-left:10px}
body#services #col ul {padding-top:10px;}
body#services button {background: url(../../images/order-button.jpg) top center no-repeat; width: 119px; height: 56px; color:#FFFFFF; cursor:pointer; padding: 3px; text-transform:uppercase; padding-left:5px; border: none }

/* Portfolio Content */
body#folio #left-col {height: 2000px;}
body#folio #left-col p{font-size: 14px;}
body#folio #right-col h4 {padding-top: 25px;}

.item {
	PADDING-RIGHT: 12px;
	BORDER-TOP: #d5c9a3 4px solid;
	PADDING-LEFT: 12px;
	BACKGROUND: #333;
	MARGIN-BOTTOM: 10px;
	PADDING-BOTTOM: 10px;
	OVERFLOW: hidden;
	WIDTH: 600px;
	PADDING-TOP: 12px;
	POSITION: relative; 
}
	.item IMG {
		BORDER-RIGHT: #d5c9a3 1px solid;
		BORDER-TOP: #d5c9a3 1px solid;
		PADDING: 2px;
		BACKGROUND: url(../../images/loading.gif) no-repeat 235px 240px;
		MARGIN-RIGHT: 5px;
		BORDER-LEFT: #d5c9a3 1px solid;
		WIDTH: 400px;
		BORDER-BOTTOM: #d5c9a3 1px solid;
		HEIGHT: 200px;
		FLOAT: left; 
	}
	
	.item h2 {
		color: #4A4742;
		font-size: 18px;
		text-align: left;
		font-weight: normal;
		line-height: 18px;
		padding-bottom: 10px;
		padding-top: 25px;
		padding-left: 10px;
	}
.info {
	WIDTH: 170px;
	FLOAT: right;
	LINE-HEIGHT: 1.2em;
	POSITION: relative;
	TEXT-ALIGN: left;
	font-size:13px;
	height: 206px;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	padding-right: 15px;
}

A.box {
	PADDING-RIGHT: 8px;
	BORDER-TOP: #d5c9a3 1px solid;
	DISPLAY: block;
	PADDING-LEFT: 8px;
	BACKGROUND: url(../../images/a-box-bg.gif) repeat-y;
	PADDING-BOTTOM: 8px;
	WIDTH: 154px;
	COLOR: #6c5b3c;
	PADDING-TOP: 8px;
	POSITION: relative;
	HEIGHT: 20px;
	TEXT-ALIGN: left;
	TEXT-DECORATION: none;
}
A.box IMG {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	RIGHT: 12px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	WIDTH: 10px;
	BORDER-TOP-STYLE: none;
	PADDING-TOP: 0px; 
	BORDER-RIGHT-STYLE: none; 
	BORDER-LEFT-STYLE: none; 
	POSITION: absolute; 
	TOP: 10px; 
	EIGHT: 10px; 
	BORDER-BOTTOM-STYLE: none;
}
A.box:hover {
	BACKGROUND: #6c5b3c;
	CURSOR: pointer;
	COLOR: #333333;
}



/* Contact-us Content */
body#contact #left-col{float:left; width: 570px; border-right:dotted 1px #d5c9a3; padding-bottom: 25px; }
body#contact #right-col {float: right; width:380px; height: 100%; }
body#contact #right-col p {padding-left: 25px; }

body#contact A.box { PADDING-RIGHT: 8px; BORDER-TOP: #d5c9a3 1px solid; DISPLAY: block; PADDING-LEFT: 8px; BACKGROUND: url(../../images/a-box-bg.gif) repeat-y; PADDING-BOTTOM: 8px; WIDTH: 154px;	COLOR: #333333;	PADDING-TOP: 8px; POSITION: relative; HEIGHT: 20px; TEXT-ALIGN: center; TEXT-DECORATION: none; }
body#contact A.box:hover { BACKGROUND: #6c5b3c;	CURSOR: pointer; COLOR: #333333; }
body#contact A.box IMG { PADDING-RIGHT: 0px; PADDING-LEFT: 0px;	LEFT: 5px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 10px;	BORDER-TOP-STYLE: none;	PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; 	BORDER-LEFT-STYLE: none; POSITION: absolute; TOP: 13px; HEIGHT: 10px; BORDER-BOTTOM-STYLE: none; }




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

/* Pagination */
.pages{position: absolute; right: 5px; top: 20px; }
.pages ul{list-style-type: none;}
.pages li{float: left; border: 1px solid #d5c9a3; margin-left: 3px;}
.pages li a{display: block; padding: 6px 0px 0px 10px; width: 180px; color: #333333; cursor:pointer; text-decoration: none; background: #333; text-align: left; height:25px;}
.pages li a:hover{color: #333333; background: #d5c9a3; padding: 6px 0px 0px 10px; width: 180px; text-decoration:underline;}
.pages li.current a, .pages li.current a:hover{background: #89795b; color: #fff;}
.pages li a:active{background: #333; color: #fff;}
.pages2{position: relative; float: right; margin-bottom: 25px;}
#products.item a.notmain:hover{color: #000;}

/* Contact-us Content - form */
body#contact #lower-right-col{position: relative; float: right; padding-bottom: 10px;}
body#contact input.userdetails, body#contact textarea{font-size: 12px; font-family: georgia, "Times New Roman", serif; width: 350px; padding: 6px 4px;}
body#contact textarea{height: 70px;}

/* Forms */
input, textarea{padding: 4px; border: 1px solid #d5c9a3; font-size: 16px; color: #4A4742; background: #FFFFFF;  font-family: monospace; margin: 2px 0;}
form label {display: block; float: left; width: 150px;  padding: 0; padding-left:8px; margin: 7px 0 0 0; text-align: left; color:#4A4742;}
input.submit{ text-align: center; font-family: georgia; font-size: 14px; margin-left: 25px; margin-bottom: 20px; padding: 12px 6px; width: 130px; border: 1px solid #6c5b3c; background: url(../../images/a-box-bg.gif); color:#4A4742; }
input.submit:hover{cursor:pointer; background: #6c5b3c; color:#333333; border: 1px solid #6c5b3c;}
fieldset{background: #FFFFFF; padding: 12px 2px; margin: 0; margin-bottom: 0px;}
select{padding: 4px; border: 1px solid #6c5b3c; font-size: 14px; color: #666666; background: #FFFFFF; width: 210px; margin: 2px 0; width:360px;}
button {background: #FFFFFF url(../../images/quote.gif) left no-repeat; color:#4A4742; cursor:pointer; padding-left:15px; width: 170px;padding: 1px; font-size:14px; border: 1px solid #8A7C68; font-weight: bold;}

/* Testimonials */
blockquote {
  background: transparent url(../../images/quoleft.png) left top no-repeat;
  font-style:italic;
  font-size:20px;
  width:350px;
  float:right;
  text-indent:0;
  color: #333333;
  margin-top: 20px;
  font-family: "Times New Roman", Times, serif;
}

blockquote div {
  padding: 0 55px;
  padding-top: 25px;
  padding-bottom: 20px;
  background: transparent url(../../images/quoright.png) right bottom no-repeat;
}

.quote {
font-size: 80%;
float: right;
}

/* Footer */
#footer{
	color: #FFFFFF;
	line-height: 6em;
	text-align: left;
	font-size: 10px;
	height:120px;
	width:100%;
	background-image: url(../../images/footer-wrap-bg.gif);
	background-repeat: repeat-x;
	background-position: top;
}
#footer p{font-size: 10px;}
#footer a{color: #FFFFFF; text-decoration: none;}

/* Copyright */
#copyright {width:960px; margin-left:auto; margin-right:auto;}

/* Misc Classes, etc */
body{-moz-opacity: 0.9999;} /* Fix the FF Mac font glitch */
.about-links{float: left; padding-bottom: 40px; width: 116px;}
.linkedin{clear: both; float: left; margin: 0; padding: 0; margin-left: 10px;}
.col2{width: 250px; float: left;}
.center{ text-align: center; }
p.legal{font-size: 10px; line-height: 20px; text-transform: none; color: #FFFFFF; margin-bottom: 25px;}
p.legal a{color: #FFFFFF; text-decoration: none;}
.underline{text-decoration:underline;}
.sent, .error{display: none;}
.zoomerz{cursor: pointer;}
.clear{clear: both;}
/* Remove silly dotted outline from links in FF */
a{outline: none;}