body { 
background-color: #a7a7a8;
background-image: url(../images/background.jpg);
background-position: top center;
background-repeat: repeat-x;
margin: 0;
padding: 0;
font-family: Orator Std;
}



#wrapper{
width: 960px;
height: auto;
margin-right: auto;
margin-left: auto;
}

/*nav area*/
#logo {
font-size: 40px;
height: 20px;
width: 20px;
float: left;
}
#push1{
margin-left: 70px;
font-size: 30px;
margin-top: 2px;
}
.push{
margin-left: 20px;
font-size: 30px;
margin-top: 2px;
}
.cb {
font-size: 14px;
margin-top: 34px;
float: left;
}
/*
.push a:hover{
-moz-border-radius: 5px 5px 0px 0px; border: 1px solid #ffffff;   alternate border and box keep for reference

 -moz-border-radius: 5px;
background-color: #707078; 
}
#push1 a:hover{
/*-moz-border-radius: 5px 5px 0px 0px; border: 1px solid #ffffff;   alternate border and box keep for reference

 -moz-border-radius: 5px;
background-color: #707078; 
}*/

#nav{
width: 960px;
height: 131px;
float: left;
line-height: .9;
}
#nav ul{
margin-top: 29px;
height: auto;
width: auto;
list-style: none;
float: left;
}
#nav ul li{
float: left;
}
#nav a{
font-family: Orator Std;
text-decoration: none;
color: #000000;
}


/*end of nav area*/





/*background picture*/
#display{
background-image: url(../images/city.jpg);
width: 960px;
height: 762px;
background-repeat: no-repeat;
}
/*content box area*/
#content{
width: 960px;
height: auto;
float: left;
margin-bottom: 1px;
}
/*end of content box area*/




/*left content box area*/
.lb{
width: 700px;
float: left;
height: auto;
margin-bottom: 1px;
}
.text{
width: 700px;
height: auto;
float: left;
margin-bottom: 20px;
font-family: Myriad Pro;
font-size: 17px;
margin-left: 20px;
}
.text p{
width: 700px;
height: auto;
font-family: Myriad Pro;
padding-left: 20px;
float: left;
}
.text a{
color: #ffffff;
}


.hmb, .hmb2, .hmb3, .hmb4 {
width: 738px;
height: 214px;
float: left;
background-image: url(../images/hmb.png);
margin-top: 360px;
}
.hmb p{
font-family: Myriad Pro;
font-size: 40px;
color: #ffffff;
margin-left: 60px;
margin-top: 50px;
}
/*about*/
.hmb2 p{
font-family: Myriad Pro;
font-size: 40px;
color: #ffffff;
margin-left: 60px;
margin-top: 80px;
}
.hmb3 p{
font-family: Myriad Pro;
font-size: 40px;
color: #ffffff;
margin-left: 235px;
margin-top: 80px;
}
.hmb4 p{
font-family: Myriad Pro;
font-size: 40px;
color: #ffffff;
margin-left: 200px;
margin-top: 80px;
}
/*end of left box area*/

/*contact page*/
#usermessage{
float: left;
}
#usermessage input{
float: right;
background-color: #a7a7a8;
-moz-border-radius: 5px;
}
#usermessage textarea{
float: right;
background-color: #a7a7a8;
-moz-border-radius: 5px;
}
.m{
margin-top: 40px;
margin-bottom: 40px;
margin-left: 110px;
}
.sub{
font-weight: bold;
color: #ffffff;
}
/*footer area */
#footer{
width: 100%;
height: auto;
background-image: url(../images/footer.jpg);
background-repeat: repeat-x;
padding-top: 1px;
float: left;
background-color: #707078; 
padding-bottom: 5px;

}
#fc {
width: 960px;
height: auto;
margin-left: auto;
margin-right: auto;
background-color: #707078; 
margin-top: 2px;
}
#fcn {
height: auto;
padding-left: 250px;
}
#fcn ul{
margin-top: 15px;
height: auto;
width: auto;
list-style: none;
float: left;
}
#fcn ul li{
float: left;
margin-left: 10px;
}
#fcn ul li a{
text-decoration: none;
color: #ffffff;

}

.links {
width: 500px;
height: 30px;
float: left;
margin-top: 25px;
margin-left: 340px;
}

.links a{
margin-right: 5px;

}
/*
.links p{
height: 30px;
font-size: 14px;
}*/

.da{
background-image: url(../images/da.png);
width: 32px;
height: 32px;
float: left;
}
.fb{
background-image: url(../images/fb.png);
width: 32px;
height: 32px;
float: left;
}
.in{
background-image: url(../images/in.png);
width: 32px;
height: 32px;
float: left;
}
.de{
background-image: url(../images/de.png);
width: 32px;
height: 32px;
float: left;
}
.dg{
background-image: url(../images/dg.png);
width: 32px;
height: 32px;
float: left;
}
.df {
background-image: url(../images/df.png);
width: 32px;
height: 32px;
float: left;
}
.sm {
background-image: url(../images/sm.png);
width: 32px;
height: 32px;
float: left;
}



.vd{
color: #ffffff;
margin-top: -2px;
margin-left: 20px;
float: left;
}
.vd a{
color: #929fd4;
text-decoration: none;
}
.copy{
float: left;
width: auto;
height: 10px;
font-size: 10px;
margin-top: 30px;
margin-left: 90px;
color: #ffffff;
font-family: Orator Std;
}
.bi{
float: left;
margin-left: 350px;
margin-bottom: 0;
padding: 0;
color: #ffffff;
font-size: 12px;
text-align: right;

}
/*end of footer area*/


/* right box persona pictures*/
.rb{ 
width: 200px;
height: auto;
float: right;
}
.persona{
background-image: url(../images/man.png);
width: 132px;
height: 332px;
float: left;
margin-top: 40px;
margin-left: 50px;
}
.ad{
background-image: url(../images/ad.png);
width: 36px;
height: 36px;
float: left;
margin-top: 15px;
margin-right: 200px;
background-repeat: no-repeat;
text-decoration: none;

color: #000000;
padding-left: 50px;
padding-top: 15px;
font-family: Orator Std;
font-size: 18px;
}
.ad p{
margin-top: 15px;
margin-left: 50px;
color: #000000;
font-family: Orator Std;
font-size: 18px;
float: left;
}
.f1{
width: 45px;
height: 52px;
background-image: url(../images/fws.png);
float: left;
margin-top: 15px;
margin-right: 200px;
background-repeat: no-repeat;
text-decoration: none;
margin-left: 20px;

color: #000000;
padding-left: 60px;
padding-top: 15px;
font-family: Orator Std;
font-size: 18px;
}
.f2{
width: 45px;
height: 52px;
background-image: url(../images/fws.png);
float: left;
margin-top: 5px;
margin-right: 200px;
background-repeat: no-repeat;
text-decoration: none;

color: #000000;
padding-left: 60px;
padding-top: 15px;
font-family: Orator Std;
font-size: 18px;
margin-left: 27px;
}
.hr{
background-image: url(../images/hr.png);
width: 159px;
height: 62px;
float: left;
margin: 20px;
}
.line{
width: 202px;
height: 2px;
background-color: #000000;
float: left;
}
.line2{
width: 700px;
background-color: #707078;
height: 4px;
float: left;
margin-top: 10px;
margin-bottom: 10px;
}
.word{
color: #000000;
font-family: Orator Std;
font-size: 30px;
width: 200px;
height: 10px;
float: left;
margin-top: 1px;
margin-left: 8px;
}
.info{
font-size: 14px;
margin: 20px;
float: left;
}
/*end of persona*/






/*portfolio page*/
#web{
width: 700px;
height: auto;
float: left;
margin-top: 10px;
}
#flash, #brand, #concept{
margin-top: 20px;
float: left;
width: 700px;
height: auto;
}
.nav3{
padding-left: 200px;

width: 540px;
height: 28px;
margin-top: 30px;
background-color: #707078;
-moz-border-radius: 5px;
padding-top: 3px;
}
.nav3 a{
margin-right: 5px;
text-decoration: none;
}
/* Gallery/Portfolio*/
/*portfolio main catagories*/
.wbd {
background-image: url(../port/images/webdesign.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.con {
background-image: url(port/images/concepts.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.fsh {
background-image: url(port/images/flash.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}

.bnd {
background-image: url(port/images/branding.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}



/*webdesign page*/
.ener {
background-image: url(../portfolio/images/ener.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}

.audi {
background-image: url(../portfolio/images/audi.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.keep {
background-image: url(../portfolio/images/keep.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.morg {
background-image: url(../portfolio/images/morg.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.sass {
background-image: url(../portfolio/images/sass.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.rdis{
background-image: url(../portfolio/images/rdis.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.rdims{
background-image: url(../portfolio/images/rdims.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.rdim{
background-image: url(../portfolio/images/rdim.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.lgw{
background-image: url(../portfolio/images/lgw.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.simp{
background-image: url(../portfolio/images/simp.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.emp{
background-image: url(../portfolio/images/emp.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}




/* Concepts Page*/
.meen{
background-image: url(../portfolio/images/meen.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.deck {
background-image: url(../portfolio/images/deck.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.hrt {
background-image: url(../portfolio/images/hrt.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.loon {
background-image: url(../portfolio/images/loon.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.panda {
background-image: url(../portfolio/images/panda.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.mask{
background-image: url(../portfolio/images/mask.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.tattoo{
background-image: url(../portfolio/images/tattoo.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.ddb{
background-image: url(../portfolio/images/ddb.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.grey{
background-image: url(../portfolio/images/grey.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.tale{
background-image: url(../portfolio/images/whale.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}




/*branding*/
.cab {
background-image: url(../portfolio/images/cab.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.qoo {
background-image: url(../portfolio/images/qoo.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.sharkd{
background-image: url(../portfolio/images/3dl.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.sharks {
background-image: url(../portfolio/images/sharks.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}








/*Flash Page*/
.romona {
background-image: url(../portfolio/images/romona.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}
.romona2 {
background-image: url(../portfolio/images/romona2.gif);
width: 50px;
height: 200px;
text-decoration: none;
float: left;
margin-right: 3px;
}