@charset "UTF-8";

/*******************	Nathan Kho Photography nkpyStyle.css 	**********************/

body {
	margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0px;
	background-color: #FFFFFF;
	text-align:center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #FFFFCC; /* cream color */
	font-style: normal;
	}
	
/* #wrapper optimized for 1024x768 screen resolution widescreen*/	
#wrapper {
	background-color: #32281B; /* brown color for background */
	margin: 0px auto; /* the auto margins (in conjunction with a width) center the page */
	width: 970px;
	height: 536px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	}
	
/* Styles applied to the masthead */	
#mastHead {
	background-color: #FFFFFF;
	background-image:url(../images/modelArleneG.png);
	background-repeat: no-repeat;
	background-position: right;
	height: 50px;
	margin-top: 0px;
	}
	
#company h1 {
	margin: 0px; /* zeroing the margin of the last element in the #mastHead div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding-top: 10px;
	color: #66CC33; /* lime color for company name */
	font-weight: bold;
	float: left;
	display:none;
	}
	
#company {
	width:100%;
	height:50px;
	background-image:url(../images/nkpy/company.png);
	background-repeat:no-repeat;
	}
	
/* Styles applied to main content */	
#content {
	margin: 0px;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 0px;
	padding-left: 15px;
	height: 486px;
	text-align: left;
	}
	
#content a {
	font-weight:bold;
	}
	
h2, h3, h4 {
	color:#66CC33; /* lime green */
	}	

		
/* Styles applied to the footer */
#footer {
	background-color:#FFFFFF;
	color: #32281B;
	font-size: 10px;
	text-align: center;
	margin-top: 2px;
	}
	
#footer p {
	margin: 0px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	}
	
/***************** Miscellaneous classes for reuse ************************/
.greenFont { /* apply this class to elements containing text */
	color: #66CC33;
	font-weight: bold;
	}
		
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear: both;
    height: 0;
	}
	
/* Styles for quotes */	
.quote {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14pt;
	color: #FFFFFF;	/* white color for quotes */
	margin-left: 8px;
	margin-right: 8px;
	}		
	
.floatLeft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 15px;
	}

.floatRight { /* this class can be used to float an element right in your page */
	float: right;
	margin-left: 15px;
	}

.alignRight { /* this class can be used to align text to the right */ 
	text-align:right;
	}

	
/******************** Styles for about.html *************************/	
	
/* Styles applied to bio on about.html */

#bio {
	overflow:auto;
	height:317px;
	background-color: #FFFFCC; /* cream color */
	color: #32281B; /* brown color */
	margin:0px;
	padding-left: 10px;
	padding-right: 10px;
	}
	
#quote2 {
	padding-top:-15px;
	}
		
/******************** Styles for models.html and wedding.html *************************/	
#myGallery, #myGallerySet {
	text-align: left;
	margin: 0px auto; /* centers the slideshow */
}

/*************** Styles for Commercial Portfolio Sliding Viewing Area ******************/
#photojournalism {
	margin: 0px 10px 0px 0px;
	width: 160px;
	text-align: right;
	}
	
.commercial {
	margin: 0px;
	z-index:1000;
	overflow:auto; 
}

.commercial table {
	padding: 0px;
	margin: 0px;
	border: 0px;
}

.commercial td {
	text-align: left;
	padding: 7px 0px 17px 0px;
	margin: 0px;
	background: url(../images/tooltip/brownImg.png) no-repeat right bottom;
}

.commercial td.back {
	background: none;
	vertical-align: top;
	padding: 0px;
}

.commercial img {
	margin: 0px 10px 0px 10px;
	border:5px solid #FFFFFF;
}
.firstPhoto a {
	display: block;
	width: 70px;
	height: 60px;
	text-indent: -90000%;
	background: url(../images/return_button.png) no-repeat 0px -60px;
}

.firstPhoto a:hover {
	background: url(../images/return_button.png) no-repeat 0px 1px;
}
/*************** TOOL TIP MOOTOOLS ******************/
/* for commercial.html */
.tool-tip {
	background: url(../images/tooltip/backTooltip.gif) no-repeat 0 0;
	padding: 13px;
	color:#FFFFFF; 
	width: 200px;
	height: 50px;
	text-align:left;
}

.tool-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0px;
	color:#66CC33;
}

/***********Styles for resume.html******************/
#column1, #column2, #column3 {
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border:#FFFFCC thin solid;
	height: 230px;
	}

#column1 li, #column2 li, #column3 li {
	list-style-image:url(../images/square66CC33.gif);
	list-style:outside;
	}
	
/***********Styles for contact.html******************/
#form {
	width: 190px;
	}

#referralCard {
	margin: 0px;
	overflow:hidden;
	}