@charset "utf-8";
/* CSS Document */

 body {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1em;
 padding:0;
 margin:0;
 background:#353b4a;
			}

#web_design {
background:url(../images/pencil2.png);
height:550px;     
text-indent:-9999px;     
width:600px;
position:absolute;
top: -10px;
right: 0px;
}

#web_design2 {
background:url(../images/bakersfields-web-design2.jpg);
height:235px;     
text-indent:-9999px;     
width:400px;
position:absolute;
top: 200px;
right: 0px;
}

#website {
	width:100%;
	text-align:center;
	float:left;
	font-size:1.6em;
font-weight:bolder;
color:#FFF;
height:60px;
position: fixed; 
z-index:1100;
background-color:#1A5276;
}

#website a {
	color:white;
	text-decoration:none;
}

#domainHome {
width:100%;
height:65px;
float:left;
}

#services_img {
background:url(../images/services.png);
height:377px;     
text-indent:-9999px;     
width:300px;
position:absolute;
top: 174px;
right: 10px;
}

#contact_img {
background:url(../images/contact-me.png);
height:349px;     
text-indent:-9999px;     
width:300px;
position:absolute;
top: 186px;
right: 10px;
}

#twitter {
background:url(../images/twitter.gif);
height:100px;     
text-indent:-9999px;     
width:100px;
position:absolute;
top: 575px;
right: 200px;
}

.style1 {
font-size: 36px;
color:#FFFFFF;
}
.style2 {
color:#ffaa00}

#nav {
list-style-type:none;
width:750px;
}

#nav li a{
display:block;
position:absolute;
top:83px;
width:750px;
height:75px;
text-indent:-9999px;
background:url(../images/website-portfolio.png);
}

li#nav_home a {
left:0;
width:150px;
background-position: 0 0;
}

li#nav_home a:hover {
background-position:0 -75px;
}

li#nav_home2 a {
left:0;
width:150px;
background-position: 0 -150px;
}

li#nav_home2 a:hover {
background-position:0 -75px;
}

li#nav_portfolio a {
left:150px;
width:150px;
background-position: -150px 0;
}

li#nav_portfolio a:hover {
background-position:-150px -75px;
}

li#nav_portfolio2 a {
left:150px;
width:150px;
background-position: -150px -150px;
}

li#nav_portfolio2 a:hover {
background-position:-150px -75px;
}

li#nav_services a {
left:300px;
width:150px;
background-position: -300px 0;
}

li#nav_services a:hover {
background-position:-300px -75px;
}

li#nav_services2 a {
left:300px;
width:150px;
background-position: -300px -150px;
}

li#nav_services2 a:hover {
background-position:-300px -75px;
}

li#nav_prices a {
left:450px;
width:150px;
background-position: -450px 0;
}

li#nav_prices a:hover {
background-position:-450px -75px;
}

li#nav_prices2 a {
left:450px;
width:150px;
background-position: -450px -150px;
}

li#nav_prices2 a:hover {
background-position:-450px -75px;
}

li#nav_contact a {
left:600px;
width:150px;
background-position: -600px 0;
}

li#nav_contact a:hover {
background-position:-600px -75px;
}

li#nav_contact2 a {
left:600px;
width:150px;
background-position: -600px -150px;
}

li#nav_contact2 a:hover {
background-position: -600px -75px;
}


#address {
position:absolute;
top:555px;
margin-left:10px;
width:300px;
font-size:22px;
padding:6px;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
}

#site_menu {
position:absolute;
top:555px;
margin-left:360px;
width:100px;
font-size:12px;
font-weight:bold;
padding:6px;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
line-height:18px;
}

#site_menu a {
text-decoration:none;
color:#444444;
}

#site_menu a:hover {
text-decoration:underline;
}

#what_I_do {
position:absolute;
top:190px;
margin-left:0px;
width:400px;
height:325px;
font-size:18px;
padding:6px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}

#what_I_do h1 {
font-size:32px;
}


.site_frame {
border: 1px solid;
border-color:#000000;
margin-right:30px;
margin-bottom:3px;
padding:5px 5px 5px 5px;
float:left;
background-color:#ffffff;
height:160px;
}

.site_frame a {
text-decoration:none;
color:#0000FF;
}

#services {
position:absolute;
top:180px;
margin-left:0px;
width:650px;
height:347px;
font-size:18px;
padding:6px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}

#prices {
position:absolute;
top:180px;
margin-left:0px;
width:975px;
height:347px;
font-size:18px;
padding:6px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}

#contact_me {
position:absolute;
top:180px;
margin-left:0px;
width:500px;
height:347px;
font-size:18px;
padding:6px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}


/* new CSS */

#menu-box {
width:100%;
float:left;
color:#FFFFFF;
background-color:#000000;
height:70px;
line-height:70px;
}

#menu-box a {
padding-left:15px;
text-decoration:none;
color:#FFFFFF;
text-transform:uppercase;
}

#menu-box a:hover {
text-decoration:underline;
}

img {
max-width: 100%;
}

.box {
width:100%;
float:left;
}


#content {
width:100%;
float:left;
}

#left-home {
width:30%;
float:left;
text-align:center;
}

#right-home {
width:60%;
padding:5%;
float:left;
font-size:2em;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#FFFFFF;
text-align:center;
text-transform:capitalize;
}

#main-home {
width:96%;
padding:2%;
color:#ddd;
font-size:1.3em;
}

#all-footer {
width:100%;
padding-top:20px;
float:left;
height:400px;
background-color:#3e4557;
}

#footer-contact {
width:48%;
padding-left:2%;
float:left;
}

#footer-links {
width:50%;
float:left;
}

#copyright {
width:100%;
float:left;
margin-top:100px;
text-align:center;
}

#footer-links a {
text-decoration:none;
color:#999;
font-size:1.2em;
}

#footer-links a:hover {
text-decoration:underline;
}


.scrollToTop{
z-index:1000;
	width:80px; 
	height:80px;
	position:fixed;
	bottom:10px;
	right:10px;
	display:none;
	background: url(../images/top.png) no-repeat;
}
.scrollToTop:hover{
	text-decoration:none;
}


.style7 {
color:#ffaa00;
font-size:1.4em;
}

#phone-number {
color:#CCCCCC;
font-size:1.4em;
}

.phone-number2 {
color:#ececec;
font-size:1.1em;
}

.onpage {
text-decoration:underline;
text-decoration-color: red;
}


#left-main {
width:46%;
padding:2%;
float:left;
color:#dddddd;
}


#right-main {
width:50%;
float:left;
}

#right-main2 {
width:50%;
float:left;
text-align:center;
}

#portfolio {
width:96%;
padding:2%;
float:left;
}

.contact {
width:100%;
float:left;
}

.contact-left {
width:48%;
padding:1%;
float:left;
}

.contact-right {
width:48%;
padding:1%;
float:left;
}

@media screen and (max-width: 640px) {

#left-home {
width:100%;
}

#right-home {
width:90%;
}

#footer-contact {
width:96%;
padding:2%;
height:auto;
}

#footer-links {
width:98%;
padding-left:2%;

}

.scrollToTop{
	width:60px; 
	height:60px;
	background: url(../images/top2.png) no-repeat;
	}

#left-main {
width:96%;
}

#right-main {
width:98%;
padding:1%;
}

#right-main2 {
width:98%;
padding:1%;
}

}

@media screen and (max-width: 480px) {
#menu-box a {
padding-left:10px;
font-size:.8em;
}
}