html, body, #wrap {height: 100%;}
body {padding:0; margin:0; font-family: arial, sans-serif; font-size: 12px; line-height: 18px;color: #666;background: #fff url("../images/body_bg.gif") repeat-x top;}
h1, h2, h3, h4, h5, h6 {font-weight: normal; line-height: 1.1em;}
h1 {font-size: 25px;}
h2 {font-size: 18px;}
h3 {font-size: 15px;}
h4 {font-size: 14px;}
h5 {font-size: 12px;}
h6 {font-size: 10px;}


/* menu style (located in the top header) */
ul#menu {float: right; margin-top: 75px; padding: 10px 0; list-style: none; float: right;}
ul#menu li {display: inline-block; padding: 0 10px; margin:0;}
ul#menu a {display:block; padding:5px 5px 4px 5px; text-decoration:none; font-weight:bold; color:#777; font-family: arial, "lucida console", sans-serif; border-top: 3px #ccc solid;}
ul#menu a:hover {border-top: 3px #0e7ec4 solid;}
ul#menu .current a {border-top: 3px #0e7ec4 solid;}

/* header layout */
#top-header {position: relative; display: block; height: 120px; background-repeat: no-repeat;}
#header {position:relative; width:763px; height: 214px;}
#header-image {position:absolute; top: 0; left: 0; width:457px; height: 214px; background: url("../images/header.jpg");}
#header-right, #header-right-portfolio, #header-right-contact, #header-right-services, #header-right-about {position: absolute; top: 0; left: 457px; width:306px; height: 214px;}
#logo-link {position: relative; float: left; display: inline-block; height: 120px; width: 168px; background: url("../images/logo_clean.png") 0 center no-repeat;}

/* images in the right side of the header */
#header-right {background: url("../images/header-right.jpg") no-repeat top;}
#header-right-services {background: url("../images/header-right-services.jpg") no-repeat top;}
#header-right-portfolio {background: url("../images/header-right-portfolio.jpg") no-repeat top;}
#header-right-about {background: url("../images/header-right-about.jpg") no-repeat top;}
#header-right-contact {background: url("../images/header-right-contact.jpg") no-repeat top;}

/* content layout style */
body > #wrap{height: auto; min-height: 100%; }
#wrap {margin:0 auto; width: 805px; background: #fff url("../images/container_bg.gif") no-repeat top right;}
#container {margin:0 auto; width: 763px;}
#content {position: relative; padding: 0;}
/* #content-container {padding-bottom: 80px; } */
#left {float: left;  padding-bottom: 20px; width: 263px;}
#right {float: left; padding-bottom: 0; width: 500px;}
#content-container #content #left .box {padding: 45px 10px 10px 0; clear: both;}
#content-container  #content #right .box {padding: 10px 0 0 10px;}
.box {padding: 10px 0 10px 10px;}


/* Global Headers */
#content-container h2 {padding: 5px 0; margin-bottom: 10px; margin-top: 10px; color: #777; border-bottom: 1px #ccc solid;}
#content-container p h2 {border-bottom: 0px;}
#content-container h3 span {padding-bottom: 3px; color: #888; font-weight: bold; border-bottom: 3px #ccc solid;}
#content-container #left h3  {font-weight: bold; border-bottom: 0;}
#content-container h3 a {color: #ccc; font-size: 13px;}
#content-container #content #right  h3 {margin-bottom: 5px;}
#content-container #content #right p {padding: 0; margin: 0 0 10px 0;}
#content-container h3 a {text-decoration: none;}


#content #slider-container ol {list-style: none;}

/* sidebar navigation */
#navigation ul {float: right; margin: 0; padding: 0; list-style: none;}
#navigation li {width: 100%; padding: 0; margin: 0; list-style: none;}
#navigation a {display:block; padding-left: 10px; padding-top: 5px ;padding-bottom: 5px; margin: 1px 0; width: 240px; text-decoration:none; font-weight:bold; color:#333; font-family: arial, "lucida console", sans-serif; border-bottom: 1px #ccc solid; border-left: 3px #0e7ec4 solid; background-color: #fcfcfc;}
#navigation a:hover {border-left: 3px #0e7ec4 solid; background-color: #f6f6f6;}
#navigation a:visited {color:#333;}
#navigation .current a {border-left: 3px #0e7ec4 solid;}


/* news style in left column */
.list  li {clear: both;}
.list  li .list-left-column {float: left; width: 80px; font-size: 13px; font-weight: bold; color: #666;}
.list  li .list-left-column span {color: #0e7ec4;}
.list  li .list-left-column div {color: #999; font-size: 11px; font-weight: normal;}
.list li .list-right-column {float: left; width: 173px;}
#content-container .list li .list-right-column  h3 {margin: 0; border-bottom: 0; color: #666; font-size: 13px;}
#content-container #content #left .list {margin: 0px; list-style: none; padding: 0;}


/* footer layout */
#footer {position: relative;  margin-top: -80px;  z-index: 10; height: 80px; clear: both;}

/* footer theme */
#footer {margin-left: auto; margin-right: auto; width: 763px; background-color: #0e7ec4; color: #fff;  width: 763px; background: url("../images/footer_bg.jpg") repeat-x bottom;}
#footer-left {float: left; width: 448px; height: 80px; background: url("../images/footer_left_top.jpg") no-repeat top;}
#footer-right {float: left; margin-top: 27px; width: 315px; height: 53px; background: url("../images/footer_right_top.jpg") no-repeat top right;}

/* footer */
#footer-left  p {padding:27px 10px 0px 10px; margin-top:0; margin-bottom: 0; color: #fff;}
#footer-left  p a{color: #d8f0ff; text-decoration: none;}
#footer-right #footer-menu {margin:0; padding:20px 10px 10px 0px; list-style:none; float: right;}
#footer-right #footer-menu .box {text-align: right;}
#footer-right #footer-menu li{display:inline; margin:0 0 0 8px;}
#footer-right #footer-menu li a{color:#fff; text-decoration: none; font-size: 11px;}
#footer-right #footer-menu li a:hover{color: #333;}
#footer-right #footer-menu li a.active {color: #fff; font-weight: bold;}
#footer-right a{color: #e8e6db;}
#prefooter {margin: 75px 0 1px; width: 100%; height: 1px; clear: both;}

/* links style */
#content-container  a:link, #content-container  a:active   {color: #0e7ec4; text-decoration: none;}
#content-container  a:visited  {color: #666; text-decoration: none;}
#content-container  a:hover {color: #333; text-decoration: underline;}
.url a {float: right; color: #0e7ec4; font-size: 18px; text-decoration: none;}


/* contact form style */
.contactusheader {padding: 5px 0; margin-bottom: 10px; margin-top: 20px; color: #777; border-bottom: 1px #ccc solid;}
.contactusparagraph {border-bottom: 0px;}
.error-message {display: block; padding-left: 15px !important; margin-left: 160px !important; vertical-align: top; text-align: left; color: red; background-image: url('/images/error-x.jpg'); background-repeat: no-repeat;}
form {padding: 0; margin: 0;}
label {float: left; width: 100px; padding-right: 1px; font-weight: bold; color: #999;}
input, textarea{padding: 2px; font: 400 12px arial, sans-serif; background: #fafafa; border: 1px solid #aaa; border-radius: 4px;}
input:focus, textarea:focus{color: #333; background-color: #edf2f5;}
#name, #email_address, #subject, #phone_number{margin-right: 5px; width:250px;}
.message{width:405px; height:130px; color: black;}
.message-watermark {color: #999;}
.button {padding: 1px 10px; min-height: 30px; font: bold 1em arial, sans-serif; cursor: pointer; color: #FFF; background-color: #0e7ec4; border-radius: 8px; border: none;}
.input-container {margin:10px;}
.input-label {margin-right: 5px; width: 150px; text-align: right; color: #777;}
.input-message {display: block; width: 385px; height: 100px;}
#note {padding: 10px; display: none; font-size: 12px; font-weight: bold; color: #992222; border: 1px #ccc solid; display: none;}
.notification_ok {color: #229922;}

/* testimonial style */

#header .box .testimonial blockquote{padding:0px 10px 20px 20px; margin: 30px 0 0 15px; width:253px; background:url(../images/quote.gif) no-repeat top left;}
#header .box .testimonial blockquote p.quote{text-align:center; font-size:14px; font-weight: bold; color:#fff; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;}
#header .testimonial blockquote p.author{margin:10px 10px 0 0; display:block; text-align:right; font-size:12px; color:#fff; font-weight:bold;}
#content .box .testimonial blockquote{margin: 0; padding:0px 10px 20px 30px; width:223px; background:url(../images/quote_white.gif) no-repeat top left;}
#content .box .testimonial blockquote p.quote{text-align:left; font-size:15px; font-weight: bold; color:#666; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;}
#content .testimonial blockquote p.author{margin:10px 10px 0 0; display:block; text-align:right; font-size:12px;  font-weight:bold; color:#999;}

/* -------- misc style ----------*/

.image-left{padding:3px; margin:0 15px 0 0; border:1px solid #ccc;}
.image-right{padding:3px; margin:0 0 0 15px; border:1px solid #ccc;}

/* thumbnail in right column */

.image-left-small{padding:3px 3px; margin:0 3px 0 0; background:#fff; border:1px solid #ccc;}
.image-right-small {padding:3px 3px; margin:0 0 0 3px; background:#fff; border:1px solid #ccc;}
.image-border-small {padding:3px 3px; background:#fff; border:1px solid #ccc;}
.image-border {padding:3px; border:1px solid #ccc;}
.textblock {padding: 10px; margin-bottom: 20px;border: 1px #aaa solid; background-color: #fafafa; color: #777;}
.clearit {clear: both;}

/* Floats */
.float-left {float: left;}
.float-right {float: right;}


/* for portfolio page style */
#portfolio {margin-top: 10px;}
#portfolio ul {padding: 0; margin: 0; list-style: none;}
#portfolio ul li {margin-top: 5px; clear: both;}
#portfolio ul li ul li {margin-top: 5px; clear: both;}
#portfolio ul li ol li {margin-top: 5px; clear: both; margin-top: 5px;}
#portfolio {margin-top: 10px;}
#portfolio ul li ul{padding: 0; padding-left: 16px;  margin: 0; margin-left: 16px; list-style: square; padding-left: 16px;}
.portfolio-item {width: 100%;}
.portfolio-item .portfolio-item-image {float: left; width: 45%;}
.portfolio-item .portfolio-item-desc {float: left; width: 54%;}
.padding-5 {padding: 5px; padding-top: 0;}


/* table style */

table {padding: 0; margin: 0 0px 20px 12px; display: block; width:97%; font-size: 12px; border-collapse: collapse;}
table caption {padding: 20px 0 5px 0; margin: 0 12px; font: 12px arial, sans-serif; text-align: left;  }
table th,table td {padding: 6px 8px; vertical-align: top; text-align: left;} 
thead th {color: #FFF; background-color: #5588bb; border-bottom: 3px solid #88aadd;}
tbody tr.highlighted {background-color: #f8f8f8;}
tbody td {border-bottom: 1px solid #ddd;}
tbody tr:hover td {background: #ededed;}

/* slider images */

#design1 {background: url("../images/screenshot.gif") no-repeat center;}
#design2 {background: url("../images/screenshot2.gif") no-repeat center;}
#design3 {background: url("../images/screenshot3.gif") no-repeat center;}