/* basic elements */

* {
    margin:0;
    padding:0;
}

body {
margin: 0;
padding: 0;
height: 100%;
background-color: #fff;
color: #000;
}

html>body #outer_wrapper {
height:100%; /* 100 % height */
}

h1 {
font-family: sans-serif;
font-size: 1.0em;
font-weight: normal;
color: #fff;
text-align: right;
letter-spacing: .5px;
line-height: 1.4em;
padding-top: 130px;
padding-right: 20px;
margin: 0px;
}

h2 {
font-family: 'Times New Roman', serif;
font-size: 2.0em;
font-weight: bold;
color: #000;
text-align: left;
letter-spacing: -0.05px;
line-height: 1.4em;
padding: 15px;
margin: 0px;
}

h3 {
font-family: sans-serif;
font-size: 1.0em;
font-weight: normal;
color: #000;
letter-spacing: .5px;
line-height: 1.4em;
margin: 0px;
padding: 40px 40px;
}

h4 {
font: bold 12pt arial;
letter-spacing: 1px;
margin-bottom: 0px;
color: #666;
text-align: left;
}

h4 a {
color: #666;
}

h5 {
font: italic normal 10pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #666;
text-align: left;
}

h6 {
font: normal 10pt arial;
letter-spacing: 1px;
margin-bottom: 0px;
font-size: 8pt;
text-align: center;
color: #FFFFFF;
}

p {
font-family: sans-serif;
font-size: 80%;
font-weight: normal;
color: #000;
line-height: 1.4em;
margin-right: 40px;
}

a {
text-decoration: none;
color: #fff;
}

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

/* specific divs */

#outer_wrapper {
width: 75%;
margin: 0 auto;
margin-top: 15px;
background-color: #fff;
}

#header {
width: 100%;
height: 160px;
background: #ff6E01 url(drive-display-white.gif) no-repeat top left;
border-bottom: solid 2px #fff;
}

#content-wrap {
height: 100%; /* 100 % height */
min-height: 100%;
font-family: arial;
font-size: 98%;
color: #666;
border: solid 1px #ff6e01;
}

#intro {
padding-right: 25px;
font-size: 99%;
}

#intro p {
font-family: arial;
color: #666;
}

#intro a {
color: #ff6e01;
text-decoration: underline;
}

#footer {
height: 88px;
background: #ff6e01;
text-align: center;
}

.list {
font-family: arial;
font-size: 125%;
color: #000;
text-align: left;
}

.directions {
font-family: arial;
font-size: 85%;
text-align: left;
line-spacing: normal;
color: #000;
padding-left: 25px;
}

#menu {
width: 100%;
height: 30px;
background-color: #fff;
padding: 0;
text-align: right;
}

#navlist ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navlist li {
font-family: 'arial narrow';
font-size: 100%;
display: block;
width: 106px;
height: 30px;
background: url(li_back.png) no-repeat;
margin: 0;
padding: 0;
float: right;
text-align: center;
}

#navlist a {
color: #fff;
display: block;
text-decoration: none;
margin: 0;
}

#navlist a:hover, #navlist a:active {
height: 43px;
background: url(li_back_down.png) no-repeat;
padding-top: 13px;
}

#navlist a.active:link, #navlist a.active:visited {
height: 43px;
background: url(li_back_down.png) no-repeat;
padding-top: 13px;
}

#process-content {
background: url(drive-display-process.png) no-repeat center center;
height: 500px;
font-size: 0.9em;
text-align: left;

}

#step1 {
width: 300px;
position: relative;
top: 150px;
left: 100px;
}

#step2 {
width: 325px;
position: absolute;
top: -180px;
left: 280px;
}

#step3 {
width: 300px;
position: absolute;
top: 280px;
left: 30px;
}

#portfolio {
width: 100%;
text-align: center;
}

#servicelist {
margin-left: 75px;
text-align: left;
color: #666;
}

.question {
font-size: 99%;
margin-left: 75px;
font-weight: bold;
font-style: italic;
}

.answer {
color: #666;
font-size: 95%;
margin: 0px 40px 10px 75px;
padding: 0;
}

.hoverbox {
cursor: default;
list-style: none;
height: 350px;
width: 780px;
margin: 0 auto;
text-align: center;
}

.hoverbox a {
cursor: default;
}

.hoverbox a .preview {
display: none;
}

.hoverbox a:hover .preview {
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hoverbox a .preview2 {
display: none;
}

.hoverbox a:hover .preview2 {
display: block;
position: absolute;
top: -225px;
left: -45px;
z-index: 1;
}

.hoverbox img {
background: #fff;
border: solid 1px #ff6e01;
color: inherit;
padding: 2px;
vertical-align: top;
width: 140px;
height: 140px;
}

.hoverbox li {
color: inherit;
display: inline;
float: left;
margin: 2px;
padding: 2px;
position: relative;
}

.hoverbox .preview {
border-color: #000;
width: 317px;
height: 317px;
}

.hoverbox .preview2 {
border-color: #000;
width: 317px;
height: 317px;
}

#form {
width: 65%;
float: left;
text-align: right;
}

#form p {
text-align: right;
}

#listholder {
width: 49%;
float: right;
}

#listholder p{
padding-bottom: 3px;
}

#cleardiv {
clear: both;
}

#footer a {
color: #fff ;
text-decoration: none;
}

#footer_block_left {
float: left;
width: 35%;
background: transparent;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
color: #fff;
text-align: left;
line-height: 1.2em;
margin-top: 8px;
margin-left: 8px;
}

#footer_block_right {
float: right;
width: 35%;
background: transparent;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
color: #fff;
text-align: right;
line-height: 1.2em;
margin-top: 8px;
margin-right: 8px;
}

#footer_block_right img {
display: inline;
}

/* this is the class that is applied to 2 structural hacks in the markup. The first "meaningless" element is used to clear #left in NN6 and the last one is used to clear #container in NN4 */
.clearing {height:0;clear:both}