html {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: url(../images/bg.jpg) repeat 50% 0;
height: 100%;
}
img {
border: none;
}
a:focus {
outline:none;
}
form {
margin: 0;
padding: 0;
}
.page {
float: left;
width: 100%;
min-height: 100%;
min-width: 816px;
background: url(../images/bg-shadow.jpg) repeat-y 50% 0;
}
* html .page {
height: 100%;
}
#main {
width: 816px;
margin: 0 auto;
}
/* header page */
#header {
width: 816px;
float: left;
position: relative;
}
/* logo */
.logo {
text-indent: -9999px;
overflow: hidden;
position: absolute;
top: 9px;
left: 29px;
background: url(../images/logo.gif) no-repeat;
width: 214px;
height: 52px;
z-index: 1;
}
/* slogan */
#header strong {
position: absolute;
top: 48px;
left: 94px;
font: 11px Helvetica, Arial, sans-serif;
color: #666;
z-index: 2;
}
/* main navigation start */
#header ul {
margin: 22px 0 0 290px;
padding: 0;
float: left;
display: inline;
background: url(../images/sep.gif) no-repeat 100% 0;
}
#header ul li {
float: left;
display: inline;
font: bold 12px Helvetica, Arial, sans-serif;
background: url(../images/sep.gif) no-repeat;
padding: 6px 14px 10px 17px;
}
#header ul li a {
color: #333;
text-decoration: none;
}
/* link style */
#header ul li a:visited {
color: #999;
}
#header ul li a:hover,
#header ul li a.active,
#header ul li a:active {
color: #c00;
text-decoration: underline;
}
/* main navigation end */
/* main image */
.main-image {
float: left;
margin: 17px 0 0 33px;
display: inline;
}
.main-image img {
float: left;
}
.container-padding,
.container-padding-inside {
float: left;
width: 816px;
padding-bottom: 90px;
}
.container-padding-inside {
padding: 20px 0 0;
}
/* main container */
.container {
float: left;
width: 816px;
background: url(../images/vert-line.gif) repeat-y 210px 0;
margin: 24px 0 0;
}
/* left column */
.left-column {
float: left;
width: 180px;
margin: -2px 0 0 33px;
display: inline;
position: relative;
}
/* phone */
.phone {
float: left;
font: bold 15px Helvetica, Arial, sans-serif;
color: #036;
}
/* email */
.email {
float: left;
font: bold 11px Helvetica, Arial, sans-serif;
color: #036;
padding-top: 10px;
padding-bottom: 15px;
}
.email a:link {
color: #036;
}
/* testimonials */
.testimonials {
float: left;
width: 151px;
font: 11px/13px Helvetica, Arial, sans-serif;
color: #333;
margin: 7px;
}
/* left navigation start */
.left-nav {
float:left;
width: 180px;
margin: 0;
padding: 23px 0 0;
}
.left-nav li {
list-style: none;
float: left;
font: bold 12px Helvetica, Arial, sans-serif;
padding: 0 0 13px;
width: 180px;
}
/* link style */
.left-nav li a {
color: #333;
text-decoration: underline;
}
.left-nav li a:visited {
color: #999;
}
.left-nav li a:hover,
.left-nav li a.active,
.left-nav li a:active {
color: #c00;
}
/* left navigation end */
/* banners */
.banners {
float: left;
margin: 0;
padding: 20px 0 0;
width: 180px;
}
.banners li {
list-style: none;
width: 173px;
float: left;
text-align: center;
padding: 0 7px 9px 0;
}
/* page content */
.content {
float: left;
width: 560px;
margin: -2px 0 0 25px;
position: relative;
display: inline;
}
/* content style */
.content h2 {
margin: 0;
padding: 0 0 4px;
color: #036;
font: bold 15px Helvetica, Arial, sans-serif;
clear: both;
}
.content h2 a {
color: #036;
}
.content h2 a:hover {
text-decoration: none;
}
.content h3 {
margin: 0;
padding: 0 0 0 10px;
color: #333;
font: bold 13px Helvetica, Arial, sans-serif;
clear: both;
}
.content p {
margin: 0;
padding: 0 10px 18px 10px;
color: #333;
font: 13px/16px Helvetica, Arial, sans-serif;
}
/* content p lovehate */
.content p a:link {
color: #036;
}
.content p a:visited {
color: #999;
}
.content p a:hover,
.content p a:active {
color: #c00;
}
/* content image */
.content .image {
float: left;
margin: 0;
position: relative;
display: inline;
padding: 5px 10px 10px 10px;
}
.content .image img {
float: left;
}
.content .image2 img {
float: right;
padding-right: 20px;
}
/* content list */
.content .list,
.content .list2 {
margin: 0 0 0 13px;
padding: 3px 0 5px;
float: left;
width: 270px;
display: inline;
}
.content .list2 {
margin: 0 0 0 -13px;
}
.content .list li,
.content .list2 li {
float: left;
list-style: none;
color: #333;
font: normal 13px/17px Helvetica, Arial, sans-serif;
width: 225px;
background: url(../images/square_bullet.gif) no-repeat 2px 2px;
padding: 0 0 9px 16px;
}
/* content .list li lovehate */
.content .list li a:link,
.content .list2 li a:link {
color: #333;
}
.content .list li a:visited,
.content .list2 li a:visited {
color: #999;
}
.content .list li a:hover,
.content .list li a:active
.content .list2 li a:hover,
.content .list2 li a:active {
color: #c00;
}
.content a.click-here {
color: #036;
font: bold 13px/16px Helvetica, Arial, sans-serif;
margin: 0 0 19px 10px;
float: left;
display: inline;
}
.content a.click-here:hover {
text-decoration: none;
}
/* note */
.note {
color: #999;
font: 10px/12px Helvetica, Arial, sans-serif;
float: left;
width: 540px;
padding: 3px 0 8px 10px;
}
.note-last {
padding-bottom: 0;
}
/* page footer */
.footer {
width: 100%;
min-width: 816px;
float: left;
position: relative;
height: 113px;
margin: -113px 0 0;
background: url(../images/bg-shadow.jpg) repeat-y 50% 0;
}
.footer-bg {
margin: 0 auto;
width: 816px;
text-align: center;
padding: 34px 0 0;
}
* html .footer-bg {
padding-top: 28px;
}
*+html .footer-bg {
padding-top: 28px;
}
/* footer navigation */
.footer-bg ul {
margin: 0;
padding: 0;
}
.footer-bg ul.padding {
padding-top: 5px;
}
* html .footer-bg ul {
padding-top: 10px;
}
*+html .footer-bg ul {
padding-top: 10px;
}
.footer-bg ul li {
font: 10px/14px Helvetica, Arial, sans-serif;
display: inline;
background: url(../images/sep-2.gif) no-repeat -1px 1px;
padding: 0 0 0 4px;
color: #333;
}
.footer-bg ul li.first {
background: none;
}
.footer-bg ul li a {
color: #333;
}
.footer-bg ul li a:hover {
text-decoration: none;
}
.footer-bg p {
margin: 0;
padding: 0;
font: 10px/14px Helvetica, Arial, sans-serif;
color: #333;
}
.footer-bg p a {
color: #333;
}
.footer-bg p a.sep {
background: url(../images/sep-2.gif) no-repeat 100% 1px;
padding: 0 7px 0 0;
}
.footer-bg p a:hover {
text-decoration: none;
}
/* footer end */
.browse-portfolio {
float: left;
color: #666;
font: bold 14px Helvetica, Arial, sans-serif;
padding: 3px 0 0;
margin: 0 0 0 -1px;
}
/* page navigation */
.pages-link {
float: left;
margin: 1px 0 0 3px;
padding: 0 0 15px;
display: inline;
}
.pages-link li {
float: left;
display: inline;
font: bold 14px/17px Helvetica, Arial, sans-serif;
}
.pages-link li a {
display: inline;
height: 17px;
margin: 0 3px 0 0;
padding: 1px 4px 1px 4px;
text-decoration: none;
color: #333;
background-color: #ccc;
float: left;
}
.pages-link li a:visited {
color: #999;
background-color: #ccc;
}
/* link style */
.pages-link li a:hover,
.pages-link li a:active,
.pages-link li a.active {
color: #fff;
background-color: #c00;
}
/* name */
.name {
color: #036;
font: bold 15px Helvetica, Arial, sans-serif;
float: left;
padding: 0 12px 0 0;
}
/* site name */
.site-name {
color: #666;
font: bold 14px Helvetica, Arial, sans-serif;
float: left;
margin: 2px 0 0;
}
.site-name:hover {
text-decoration: none;
}
.separator-line {
font-size: 0;
line-height: 0;
float: left;
width: 100%;
height: 1px;
}
/* block portfolio image */
.portfolio-image {
float: left;
width: 550px;
margin: 17px 0 0 3px;
display: inline;
}
.portfolio-image img {
float: left;
}
.design {
float: left;
color: #666;
font: 10px Helvetica, Arial, sans-serif;
margin: -17px 0 0 80px;
display: inline;
}
/* form start */
.form {
overflow: hidden;
width: 560px;
margin: 8px 0 0;
padding: 0 0 25px;
}
.form label {
color: #333;
font: bold 13px/16px Helvetica, Arial, sans-serif;
}
.form .label {
float: left;
width: 168px;
text-align: right;
padding: 2px 3px 0 0;
}
.form .security1 {
float: left;
width: 168px;
text-align: right;
padding: 2px 3px 0 10px;
}
.form .input {
height: 16px;
width: 257px;
}
.form .security {
height: 16px;
width: 160px;
margin-top:10px;
}
.form .clear {
clear: both;
height: 8px;
width: 100%;
font-size: 0;
line-height: 0;
}
.form .note {
float: right;
width: auto;
padding: 0 70px 11px 0;
}
.form .note a {
color: #999;
}
.form .note a:hover {
text-decoration: none;
}
.check-label {
float: left;
width: 178px;
padding: 10px 0 0;
}
.check-label label {
float: right;
padding: 0;
margin: 0;
}
.check-label span {
color: #999;
font: 10px/13px Helvetica, Arial, sans-serif;
float: right;
padding: 0 2px 0 0;
margin: 4px 0 0;
}
.security-label {
float: left;
width: 206px;
padding: 10px 2px 0 25px;;
}
.security-label span {
color: #999;
font: 10px/13px Helvetica, Arial, sans-serif;
float: right;
padding: 0 2px 0 25px;
margin: 0px 0 0;
}
.security-label label {
float: right;
padding: 0;
margin: 0;
}
/* checkboxes side */
.check-checkboxes {
float: left;
width: 340px;
padding: 11px 0 0 5px;
margin-bottom:8px;
}
.check-checkboxes label {
float: left;
clear: both;
vertical-align: middle;
height: 19px;
}
.check-checkboxes input {
vertical-align: middle;
margin: 0 5px 0 0;
}
/* textarea box */
.form .textarea {
overflow: hidden;
width: 444px;
clear: both;
padding: 8px 0 0 53px;
margin-bottom:10px;
}
.form .textarea textarea {
width: 397px;
height: 100px;
margin: 4px 0 0;
}
/* button */
.form .btn-contact {
margin: 10px 0 0 160px;
}
/* form end */
/* portfolio page static links */
h4 {
margin: 0;
padding: 0 18px 0 0;
color: #036;
font: bold 12px Helvetica, Arial, sans-serif;
clear: both;
text-align: center;
}
h4 a {
color: #036;
}
h4 a:hover {
text-decoration: none;
}
/* portfolio thumb container */
#portfolio-container,
#portfolio-container2 {
float: left;
width: 200px;
margin-left: 50px;
padding-bottom: 30px
}
#portfolio-box {
float: left;
width: 100px;
padding: 0;
}