/* CSS Document */

html, body{
padding: 0;
margin: 0 auto;
font-family:Arial, Helvetica, sans-serif;
line-height: 15px;
background-color:#fff;
}

h1{
padding:0;
margin: 0;
font-size: 18px;
font-family:Georgia, "Times New Roman", Times, serif;
} 

p {
font-size:12px;
line-height: 18px;
letter-spacing: 0.5px;
}

p a {
text-decoration: underline;
}

a:link {
text-decoration:none;
color:#000;
}

a:visited {
text-decoration:none;
border:none;
color:#000;
}

a:hover {
text-decoration:none;
color:#FF6633;
}

a:active {
text-decoration: none;
color:#000;
}

ul {
padding: 0;
margin:0;
}

li {
display: block;
padding: 5px;
margin: 0;
list-style:none;
font-size:12px;
}

#wrapper {
position:relative;
height: 600px;
margin: 0 auto;
padding-top: 15px;
bottom: 20px;
background-image:url(../bgimages/containerbg1b.jpg);
background-color: #fff;
background-repeat:repeat-x;
}

#containerhome {
position:relative;
margin-top: 10px;
margin-left: 35px;
/*background-image:url(../bgimages/containerbg1b.jpg);*/
}

#header{
width: 1003px;
height:180px;
text-decoration:none;
}

#header a img {
border:none;
}

.logo{
margin: 20px 0 0 5px;
}

/*start of rollover menu css*/

.menu {
margin: 0;
padding: 0;
list-style: none;
background: ;
}
.menu li {
padding: 0;
margin: 0;
height: 50px;
margin-right: 5px;
list-style: none;
background-repeat: no-repeat;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -1000px;
height: 50px;
background-repeat: no-repeat;
}
#home {background-image: url(../images/iconlinks/hometext.gif); width: 50px;}
#home a {background-image: url(../images/iconlinks/homeicon.gif);}
#about {background-image: url(../images/iconlinks/abouttext.gif); width: 50px;}
#about a {background-image: url(../images/iconlinks/abouticon.gif);}
#portfolio {background-image: url(../images/iconlinks/portfoliotext.gif); width: 50px;}
#portfolio a {background-image: url(../images/iconlinks/portfolioicon.gif);}
#contact {background-image: url(../images/iconlinks/contacttext.gif); width: 50px;}
#contact a {background-image: url(../images/iconlinks/contacticon.gif);}
#home a:hover, #about a:hover, #portfolio a:hover, #contact a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

/*end of rollover menu css*/

#topnavbar {
padding: 0;
margin: 30px 0 0 5px;
}

#navbarleft {
position:relative;
width: 215px;
margin-top: 8px;
float:left;
}

#navbarleft li{
border-bottom:#000000 1px solid;
margin-left: 10px;
padding: 10px 0 5px 10px;
}

#contentHome { /* this is for all the content divs on other pages */
float:left;
position:relative;
width: 520px;
margin: 8px 0 0 20px;
padding: 0;
background-image: url(../images/homeimg.jpg);
background-repeat: no-repeat;
}

.hometextbox {
	clear:both;
width: 110px;
height: 150px;
margin: 15px 0 0 410px;
padding: 0;
}

.hometextbox p {
height: 26px;
width: 90px;
padding: 0;
margin: 0 10px 0 10px;
color: #fff;
font-size: 20px;
font-weight: bold;}

#contentHome p {
width: 400px;
}

#content { /* this is for all the content divs on other pages */
float:left;
position:relative;
width: 520px;
margin: 8px 0 0 20px;
padding: 10px;
}

.subhead {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 14px;
}

.subhead1 {
margin-right: 10px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color:#FF6600;
}

.subhead1a {
margin-right: 10px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color:#FF6600;
line-height: 20px;
text-align:center;

}

/* example_4 css */  

#example_4 { /*this div controls the outside container for the slider*/ 
position: relative; /* important */  
overflow: hidden; /* important */  
width: 110px; /* important */  /*this adjust the width of the slider*/
height: 220px; /* important */  /*this adjust the hieght of the slider*/
background: #fff; /*changes part of the background color*/  
float: right;
padding-top: 0;
margin-top: -14px;/*this is my css style to position on my page*/
margin-right: 0; /*this is my css style to position on my page*/
}  

#example_4_frame {
position: relative; /*somehow the top and bottom buttons live in thsi div, it must float above all the others?*/
}

#example_4_frame img {position: absolute;}/*this effects the frame the buttoms are in*/  

#example_4_previous {top: 0px; left: 0; margin:0; padding:0;}/*this effects the top button position*/  

#example_4_next {top: 205px; left: 0;}/*adjust the top setting to move the bottom buttom down the page, when you do this you need to adjust the height of the frame to see it*/ 

#example_4_content { /*i don't understand this div, adding margin and padding seems to duplicate the images*/ 
position: absolute;    
left: 0;  
}  

.example_4_item img { /*this div seems to effec the positioning of the images, adjustments here effect images*/  
display: block;  
float: left;
margin-left: 0px; 
padding-top: 15px; /*this effects the spacing between images*/ 
padding-bottom: 15px; /*this effects the spacing between images*/ 
border: none;
background-color: #fff; /*this changes part of the background color*/
overflow:hidden;
}  

/* example_4 css ends */           

.recentworks {
height: 20px;
width: 106px;
padding: 2px;
margin-top: -15px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
color:#fff;
background-color:#999999;
float: right;
}

.hostingspecs {
margin: 0 0 0 25px;
}

#formreply {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

.portfolio_img {
margin-left: 85px;
}

img.mugShot {
float: right;
margin: 0 32px 20px 0;
}

/* ######### CSS for Indented CSS Tabs. Remove if not using ######### */


.folioMenu{
float: left;
width: 130px;
margin: -4px 0 0 0;
padding: 0;
}

.folioMenu ul{
float: left;
width: 130px;
margin: 0;
padding: 0;
}

.folioMenu ul li {
float: left;
width: 59px;
height: 59px;
margin: 2px;
padding: 1px;
border: none;
}

.folioMenu ul li a{
float: left;
width: 59px;
height: 59px;
margin: 0;
padding: 0;
border: 1px solid #fff;
}

.folioMenu ul li a img{
width: 59px;
height: 59px;
margin: 0;
padding: 0;
border: none;
}

.folioMenu ul li a:hover{
margin: 0;
padding: 0;
border: 1px solid #FF6633; 
}

.folioMenu ul li a.selected{
margin: 0;
padding: 0;
border: 1px solid #FF6633; 
}

#folioDisplay {
float: left;
width: 525px;
height: 253px;
margin: 0 0 0 5px;
}

.folioImage {
float: left;
width: 356px;
height: 253px;
padding: 0;
margin: 0;
background-color: #ff3300;
}

.folioImage a img{
border: none;
}

.folioText {
float: left;
width: 149px;
height: 253px;
padding: 0 10px 0 10px;
margin: 0;
overflow: auto;
}




#content1 .folioText p a {
text-decoration: none;
}

.folioText p a.viewWebsite {
margin: 5px 0 0 0;
text-decoration: underline;
color:#FF6633; /*orange*/
}

.clear {
clear: both;
height: 10px;
}

.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

/* ### Homepage Portfolio ### */

.display {
float: left;
width: 490px;
height: 196px;
margin: 0 20px 0 0;
padding: 10px;
background-color: #f8f8f8;
}

.text {
clear: both;
float: left;
width: 490px;
height: 80px;
}

.text h1 {
margin: 0 0 3px 0;
padding: 0;
font-size: 14px;
}

.text h1 a{
margin: 0;
font-size: 13px;
color:#FF6633; /*orange*/
}

.text p {
margin: 0;
padding: 0;
}

.smallDisplay {
float: left;
width: 210px;
height: 216px;
background-color: #f8f8f8;
}

.smallDisplay img {
width: 190px;
padding: 10px;
}

.displayBorder {
margin: 0 0 15px 0;
clear: both;
border-bottom: 1px solid #666;
}