@charset "utf-8";
*{ margin:0px; padding:0px;}
header, section, footer, aside, nav, article {display:block;}

body  {
width:100%;
	font-size:15px;
	line-height:22px;
	font-family: 'Open Sans', sans-serif;
	background: #000000;
	margin:0px;
	padding:0px;
	text-align: center;
	color:#404040;
}

h1 {
font-size:18px;
font-family: 'Open Sans', sans-serif;
text-align:left;
color:#000000;
padding:20px 0px 10px 0px;
}

h2 {
font-size:17px;
font-family: 'Open Sans', sans-serif;
text-align:left;
color:#006600;
padding:0px;
}

.front {display:inline-block; float:left; padding:10px; width:calc(50% - 20px);}
.front a {font-size:10px; text-decoration:none;}
.front h2 {font-size:18px; padding-bottom:10px;}
.foot {padding:10px 15px 10px 15px; display:inline-block;}
.foothead {color:#fff; text-align:left;}

.footlist {
font-size:12px;
font-family: 'Open Sans', sans-serif;
text-align:left;
color:#0880e3;
line-height:20px;
padding-left:15px;
background-image:url(images/plus.png);
background-repeat:no-repeat;
background-position:left center;
}


#container { 
max-width: 800px;
	position: relative;
	background: #FFFFFF;
	margin: 0 auto;
	border: 1px solid #000000;
	text-align: left;
} 

#header { 
	height: 148px;
} 
#header img {display:inline; padding:0px; margin:0px; float:left;}

#sidebar {
float:left;
	width: 25px;
	padding: 0px 0px 15px 0px;
}

#content {
float:left;
	padding:0px 10px 0px 15px;
	width:635px;
}
	 
#footer { 
	padding:10px 0px 0px 0px;
	margin:0px 0px;
	text-align:center;
	clear:both;
	width:100%;
} 

#navlist {
float:left;
clear:left;
	width: 100px;
	background-image:url(images/linksbar.gif);
	padding:0px 15px 0px 0px;
	}

#navlist li {
display:block;
list-style-type: none;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
width:115px;
text-align:center;

}

#navlist a
{
color:#1975FF;
text-decoration: none;
display:block;
width: 115px;
border-top: 1px solid #000;
margin:0px;
}
#navlist a:hover { background-image:url(images/linksa.gif); color:#FF6600;  }

.notepad {float:right; margin:0px 0px 0px 0px;}

#top1 {float:left; clear:left; display:inline-block; height:53px; width:256px; background:url('images/bay-area-web-design.png') top; text-indent: -99999px;}
#top1:hover {background-position: 0 -53px; text-decoration:none;}

#top2 {float:left; height:53px; width:272px; background:url('images/bay-area-it-consultant.png') top; text-indent: -99999px;}
#top2:hover {background-position: 0 -53px; text-decoration:none;}

#top3 {float:left; height:53px; width:272px; background:url('images/bay-area-tech-support.png') top; text-indent: -99999px;}
#top3:hover {background-position: 0 -53px; text-decoration:none;}

#top4 {float:left; height:54px; width:341px; background:url('images/bay-area-seo.png') top; text-indent: -99999px;}
#top4:hover {background-position: 0 -54px; text-decoration:none;}

#top5 {float:left; height:54px; width:217px; background:url('images/bay-area-virus-removal.png') top; text-indent: -99999px;}
#top5:hover {background-position: 0 -54px; text-decoration:none;}

#top6 {float:left; height:54px; width:242px; background:url('images/bay-area-computer-repair.png') top; text-indent: -99999px;}
#top6:hover {background-position: 0 -54px; text-decoration:none;}

#menu {display:none;}

/*
Media Queries
---------------------------------------------------------------------------------------------------- */	

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min-device-pixel-ratio: 1.5) {
	.site {color:#000;
	}

}

@media only screen and (max-width: 795px) {
#container {width:100% !important;}
#content {width:95% !important; padding:10px; float:left;}
#footer {width:100% !important;}
#footer img {width:100% !important;}
#header {width:100% !important; height:100%;}
#header img {width:100%;}
#sidebar {display:none;}
#top1, #top2, #top3, #top4, #top5, #top6 {display:none;}
.notepad {width:33%;}
/* nav-wrap */
	#navlist {
		position: relative;
		background-image:none;
	}
	/* menu icon */
	#menu {
		color: #000;
		width: 42px;
		height: 30px;
		background: #ecebeb url(images/menu.png) no-repeat 10px center;
		padding: 8px 10px 0 42px;
		cursor: pointer;
		border: solid 1px #666;
		display: block; /* show menu icon */
	}
	#menu:hover {
		background-color: #f8f8f8;
	}
	#menu.active {
		background-color: #bbb;
	}
	
	/* main nav */
	#navol {
		clear: both;
		position: absolute;
		top: 38px;
		width: 160px;
		z-index: 10000;
		padding: 5px;
		background: #f8f8f8;
		border: solid 1px #999;
		display: none; /* visibility will be toggled with jquery */
	}
	#navol li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
	}
	#navol a, 
	#navol ul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 0;
		color: #666;
		border: none;
	}
	#navol a:hover, 
	#navol ul a:hover {
		background: none;
		color: #000;
	}
	
	/* dropdown */
	#navol ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#navol ul li {
		margin: 3px 0 3px 15px;
	}
}