html {
    height: 100.2%; /* forces scroll bar on firefox */
}

body {
    margin: 0;
    padding: 0;
    background-image: url(../img/bg-main.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0;
    font: 13px/22px verdana, arial, sans-serif;
    color: #374C5D;
}

#big-box {
    margin: 0 auto;
    width: 800px;
    background-image: url(../img/walking-away.jpg);
    background-repeat: no-repeat;
    background-position: 100% 100%;
}

#box {
    width: 750px;
    background-image: url(../img/bg-logo.jpg);
    background-repeat: no-repeat;
}

#navigation{
    float: left;
    display: inline;
    margin: 333px 0 0 50px;
    width: 200px;
}

#content {
    float: right;
    display: inline;
    margin: 75px 0 0 0;
    width: 450px;
}

#copy {
    clear: both;
    margin: 45px 0 0 0;
    padding: 5px 0 10px 0;
    border-top: 2px solid #D6DADD;
}

/* ---------------------------------------------------------------------------------------------- */

#navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #DDE1E5;
}

#navigation li {
    margin: 0;
    padding: 0 3px 0 3px;
    border-bottom: 1px solid #DDE1E5;
}

#navigation li a {
    display: block;
	padding: 0 0 0 30px;
    border: 0;
	text-decoration: none;
	font: 13px/34px verdana,arial,sans-serif;
	letter-spacing: 1px;
	color: #8A9294;
    
}

#navigation li a:hover {
    text-decoration: none;
	color: #293C4D;
}

#intr{
     background: url(../img/bullet-introduction.gif) no-repeat 0 50%;
}

#serv{
     background: url(../img/bullet-service.gif) no-repeat 0 50%;
}

#exam{
     background: url(../img/bullet-example.gif) no-repeat 0 50%;
}

#clie{
     background: url(../img/bullet-client.gif) no-repeat 0 50%;
}

#cont{
     background: url(../img/bullet-contact.gif) no-repeat 0 50%;
}

/* ---------------------------------------------------------------------------------------------- */

.print-only {
    display: none;
}

h1 {
    margin: 0 0 1em 0;
    padding: 0 15px 3px 0;
    font: 16px/23px clarendon, georgia, 'times new roman', serif;
    color: #15516E;
    letter-spacing: 1px;
    text-align: right;
    border-bottom: 2px solid #D6DADD;
}

h2 {
    margin: 1.5em 0 0.5em 0;
    padding: 0 0 0 30px;
    font: 16px/23px clarendon, georgia, 'times new roman', serif;
    color: #15516E;
    letter-spacing: 1px;
}

h2.services {
    background: url(../img/bullet-service.gif) no-repeat 0 50%;
}

h2.examples {
    /*background: url(../img/bullet-example.gif) no-repeat 0 50%;*/
    padding: 0;
}

/* ---------------------------------------------------------------------------------------------- */

p {
    margin: 0 0 1.5em 0;
    line-height: 1.5em;
}

p.next {
    margin-right: 35px;
    text-align: right;
}

#content a {
    padding: 0 0 1px 0;
    color: #374C5D;
    text-decoration: none;
    border-bottom: 1px solid #ADBDBD;
}

#content a:hover {
    color: #293C4D;
    text-decoration: none;
    border-bottom: 1px solid #293C4D;
}

.thumb {
    margin: 0 10px 5px 0;
    padding: 4px;
    background-color: #FFFFFF;
    border: 1px solid #CFCEC4;
}

.example {
    float: left;
    margin: 0 10px 10px 0;
    text-transform: uppercase;
    font-size: 9px;
}

.example img {
    margin: 0;
    padding: 4px;
    background-color: #FFFFFF;
    border: 1px solid #CFCEC4;
}

/* ---------------------------------------------------------------------------------------------- */

#clients {
    margin: 0 0 0 10px;
    padding: 0;
    list-style: none;
}

#clients li {
	padding: 7px 0 7px 30px;
    background: url(../img/bullet-client.gif) no-repeat 0 50%;
}

/* ---------------------------------------------------------------------------------------------- */

.work {
    margin: 0 0 0 240px;
    padding: 0;
    list-style: none;
}

.work li {
	padding: 6px 0 6px 30px;
}

.des {
    background: url(../img/bullet-design.gif) no-repeat 0 50%;
}

.pro {
    background: url(../img/bullet-programming.gif) no-repeat 0 50%;
}

.seo {
    background: url(../img/bullet-seo.gif) no-repeat 0 50%;
}

.pho {
    background: url(../img/bullet-photography.gif) no-repeat 0 50%;
}

.mai {
    background: url(../img/bullet-maintenance.gif) no-repeat 0 50%;
}

.hos {
    background: url(../img/bullet-hosting.gif) no-repeat 0 50%;
}

.vis {
    background: url(../img/bullet-visit.gif) no-repeat 0 50%;
}

.atn {
    background: url(../img/bullet-attention.gif) no-repeat 0 50%;
}

.cli {
    background: url(../img/bullet-client.gif) no-repeat 0 50%;
}

.cop {
    background: url(../img/bullet-copy.gif) no-repeat 0 50%;
}

.tea {
    background: url(../img/bullet-teach.gif) no-repeat 0 50%;
}

/* ---------------------------------------------------------------------------------------------- */

.form_errors {
    margin: 0 0 2em 0;
    padding: 10px;
    line-height: 1.6em;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #CC0000; 
}

.form_errors li {
    margin-left: 20px; 
}

form {
    margin: 25px 0 0 0;
    padding: 25px 0 0 0;
    border-top: 1px solid #D6DADD;
}

.form_label {
	margin: 0 0 5px 0;
}

.form_field {
	margin: 0 0 15px 0;
}

.boxes {
	margin: 0;
	padding: 3px;
	background-color: #EFEFEF;
	font-family: Arial, Helvetica, sans-serif;;
	font-size: 13px;
	color: #333333;
	border-left: 1px solid #6B767F;
	border-top: 1px solid #6B767F;
	border-right: 1px solid #B4C6D5;
	border-bottom: 1px solid #B4C6D5;
}

.boxes:focus {
    background-color: #CCFF99;
}

.buttons {
	margin: 15px 0 0 0;
	padding: 6px;
	width: 150px;
	font-weight : bold ;
	font-family: Arial, Helvetica, sans-serif;;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 5px;
	color : #FFFFFF ;
	background-color : #818F9A ;
	border-left: 1px solid #99A9B6;
	border-top: 1px solid #99A9B6;
	border-right: 1px solid #6B767F;
	border-bottom: 1px solid #6B767F;
}

.confirm
{
    margin: 0 0 2em 0;
    padding: 10px 15px 10px 15px;
    font-weight: bold;
    background-color: #009900;
    color: #FFFFFF;
}

/* ---------------------------------------------------------------------------------------------- */

#copy {
    font: normal 11px/16px verdana, arial, sans-serif;
    text-align: right;
	color: #656B71;
}

#copy a {
    float: left;
	color: #656B71;
	border: 0;
}

#copy a:hover {
    color: #293C4D;
    border: 0;
}