@charset "utf-8";
*{margin:0; padding:0;}

html {
	background-color: #162fe9;
	background-image:url(../images/bg-gradient.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	min-height:700px; overflow:inherit;
}
#wrapper {background-image:url(../images/bg-img.png); background-position:0 0; min-height:700px; background-repeat:repeat; clear:both; overflow:hidden;}
img {border:none;}

h1 { font-size:22px;}
h2 {font-size:18px ;}
h3 {font-size:16px;}
p { font:14px Tahoma, Geneva, sans-serif; color:#363636; font-weight:100;}
ul, li { font:14px Tahoma, Geneva, sans-serif; color:#232323; font-weight:100;}


/******Header******/
#header {width:100%; height:200px; background-image:url(../images/header.jpg); background-position:top center; background-repeat:no-repeat;}
#logo { float:left; width:400px; height:170px; background-image:url(../images/header-pattern.png); background-repeat:no-repeat; background-position:0 0;}
#logo img {position:relative; top:20px; left:100px;}
/****Header Navigation****/
#nav {float:right; width:400px; height:100px; padding:40px 100px;}
#nav a, #nav ul, #nav li {text-decoration:none; color:#fff; font-size:14px; font-weight:normal;}

/******Content*****/
#content {width:100%; min-height:600px; margin:0 auto;  overflow:hidden; clear:both;}
#content-bottom {width:100%; height:19px; margin:0 auto; background-image:url(../images/content-background-bottom.png); background-repeat:no-repeat; background-position:top center; clear:both;}
#content-filler { width:900px; margin:0 auto; padding:0 10px; height:600px; overflow:hidden; background-image:url(../images/content-background.png); background-repeat:repeat-y; background-position:top center;}
#content p, #content ul li {font-size:12px; font-weight:normal;}

#welcome-msg-layer {  width:590px; float:left; margin:0 10px; border-right:1px solid #555555; }
#welcome-msg-layer-content{padding-right:10px; font-size:18px; }
#reasons {float:right; clear:both; margin:10px 0;  width:260px; }


.section { text-align:left; border-bottom:1px  solid #232323; padding-bottom:10px; overflow:hidden; clear:both;}
.section img { }
.section .item {float:left;  width:220px; padding:0 10px 10px; text-align:center;}
.section .item-narrow {float:left;  width:180px; padding:0 10px 10px; text-align:center;}
.services li {display:inline; padding-right:4px;}
.services ul {list-style-type:none; display:inline; border-bottom:1px solid #232323; width:850px; padding-bottom:10px; margin-bottom:10px;}
.services a {color:#03F;}
.services { padding:0 10px; width:800px;}

#web-clients {width:820px; overflow:hidden; padding:10px; display:block; clear:both;}
.clients-right {width:400px; float:right; padding-bottom:10px; }
.clients-left {width:400px; float:left; padding-bottom:10px;}
.clients {padding:0 5%; text-align:center; }
.client-text {text-align:left; padding:20px; width:75%;  }


.contact-numbers {float:right; margin-right:40px; text-align:right; clear:both; display:block; overflow:hidden; width:440px; text-align:center;}
.contact-numbers img {border:1px solid #232323; margin-bottom:10px;}

/******Footer****/
#footer {position:relative; bottom:0px; width:960px; height:30px; padding:20px; margin:0 auto;}
#footer .links {float:left; width:600px; text-align:left;}
#footer .copyright {float:right; width:300px; text-align:right; color:#ffcc00; font-weight:bold;}
#footer ul li {list-style-type: none; display:inline; color:#ffcc00; font-weight:bold;}
#footer a {text-decoration:none; color:#ffcc00; font-weight:bold;}


/****Form Input and Home Page Slider***/
/* Content Slider */
#featured{ margin:0 auto 10px; width:650px; padding-right:210px; position:relative; border:1px solid #232323; height:250px; background:#232323; overflow:hidden;}
#featured ul.ui-tabs-nav{ position:absolute; top:0; left:650px; list-style:none; padding:0; margin:0; width:210px; }
#featured ul.ui-tabs-nav li{ padding:1px 0; padding-left:0px; border-bottom:1px solid #434343; font-size:12px; color:#666; }
#featured ul.ui-tabs-nav li img{ float:left; margin:0px 0px 0; background:#232323; padding:0px; border:1px solid #434343;}
#featured ul.ui-tabs-nav li span{ font-size:11px; font-family:Verdana;line-height:18px; }
#featured li.ui-tabs-nav-item a{ display:block;	height:60px; color:#333;  background:#232323; line-height:20px;}
#featured li.ui-tabs-nav-item a:hover{ 	background:#f2f2f2; }
#featured li.ui-tabs-selected{ 	background:url('images/selected-item.gif') top left no-repeat;  }
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:#ccc; }
#featured .ui-tabs-panel{ width:650px; height:250px; background:#999; position:relative; overflow:hidden;}
#featured .ui-tabs-panel .info{ position:absolute; top:180px; left:0; height:70px; background:url(../images/transparent-bg.png); width:650px; }
#featured .info h2{ font-size:18px; font-family:Georgia, serif; color:#fff; padding:5px; margin:0;overflow:hidden; }
#featured .info p{ margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#f0f0f0;}
#featured .info a{ font-size:22px; text-decoration:none; color:#fff; }
#featured .info a:hover{ text-decoration:underline; }
#featured .ui-tabs-hide{ display:none; }


/*Form Layout */
input, textarea, select{ 
	padding: 5px;
	margin:5px;
	border: solid 1px #E5E5E5;
	outline: 0;
	font: normal 13px/100% Verdana, Tahoma, sans-serif;
	width: 150px;
	background: #FFFFFF url('bg_form.png') left top repeat-x;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
	box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;
	border: 1px solid #888;
	}
option { background: #FFFFFF url('bg_form.png') left top repeat-x;}
#contact textarea { 
	width: 220px;
	max-width: 400px;
	height: 100px;
	line-height: 150%;
	}

input:hover, textarea:hover,
input:focus, textarea:focus { 
	border-color: #C9C9C9; 
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	}

.form label { 
	margin-left: 10px; 
	color:#555555;
	}

.submit input {
	width: auto;
	padding: 9px 15px;
	background: #617798;
	border: 0;
	font-size: 14px;
	color: #FFFFFF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}



/****Scroller****/
a.jScrollArrowUp {
	background:url(../images/osx_arrow_up.gif) repeat-x 0 0;
}
a.jScrollArrowUp:hover {
	background-position: 0 -15px;
}
a.jScrollArrowDown {
	background: url(../images/osx_arrow_down.gif) repeat-x 0 0;
}
a.jScrollArrowDown:hover {
	background-position: 0 -15px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	background-position: 0 -30px;
}
.orange-bar .jScrollPaneTrack { background: #f60; }
.orange-bar .jScrollPaneDrag { background: #00f url(../images/drag_grab.gif) no-repeat 50% 50%;
}
.orange-bar .scroll-pane { background: #69f;}
			
.holder {
	float: left;
	margin: 10px;
}
.scroll-pane {
	
	height: 250px;
	overflow: auto;
	background: #ccc;
	float: left; }
.wide {	width: 580px; }
.super-wide { width: 700px; }
.tall { height: 400px; }
#pane2 { height: 320px; font-size:12; font-weight:100; width: 580px; }
#pane2-1 { height: 460px; width:800px; font-size:12; font-weight:100; margin:10px 0; padding:10px 40px; }

.osX .jScrollPaneTrack { background: url(images/osx_track.gif) repeat-y;}
.osX .jScrollPaneDrag {	background: url(images/osx_drag_middle.gif) repeat-y;}
.osX .jScrollPaneDragTop {	background: url(images/osx_drag_top.gif) no-repeat;	height: 6px;}
.osX .jScrollPaneDragBottom {background: url(images/osx_drag_bottom.gif) no-repeat;	height: 7px;}
.osX a.jScrollArrowUp {	height: 24px; background: url(images/osx_arrow_up.png) no-repeat 0 -30px;}
.osX a.jScrollArrowUp:hover {background-position: 0 0;	}
.osX a.jScrollArrowDown {height: 24px; background: url(images/osx_arrow_down.png) no-repeat 0 -30px; }
.osX a.jScrollArrowDown:hover { background-position: 0 0; }