html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 	margin: 0; 	padding: 0; 	border: 0; 	outline: 0; 	font-weight: inherit; 	font-style: inherit; 	font-size: 100%; 	font-family: inherit; 	vertical-align: baseline; } /* remember to define focus styles! */ :focus { 	outline: 0; } body { 	line-height: 1; 	color: black; 	background: white; } ol, ul { 	list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { 	border-collapse: separate; 	border-spacing: 0; } caption, th, td { 	text-align: left; 	font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { 	content: ""; } blockquote, q { 	quotes: "" ""; }


/************************** body styling **************************/
body{
	font-family: Verdana, Lucida Sans,sans-serif;
	line-height: 1.2em;
	background-color: #C4DD80;
}

/************************** wrapper styling *********************/
#wrapper{
	display: block;
	width: 100%;
	min-height: 500px;
	margin: 0 auto;
	background: #fff url(../images/bg_right.jpg) bottom right no-repeat;	
}
#wrapper_about{
	display: block;
	width: 100%;
	margin: 0 auto;
	background: #fff url(../images/bg_right.jpg) bottom right no-repeat;	
}

/*************************** header styling *******************/
#header{
	background: #FFF url(../images/header.gif) top left repeat-x;
	width: 100%;
	height: 101px;
}

/***************************** styling of h ***********************/
#wrapper h1{
	padding: 30px 0 40px 4%;
	display: block;
	width: 233px;
	color: #F26701;
	font-family: Times, serif;
	font-size: 2em;
	background: transparent url(../images/header_f.gif) bottom right no-repeat;
}

/************************ menu styling ******************************/
#menu{
	float: left;
	width: 120px;
	height: 200px;
	margin: 30px 0 0 4%;
}
#menu ul li{
	padding: 0 0 10px 0;
}
#menu ul li a{
	text-decoration: none;
	font-size: 0.9em;
	height: 42px;
	padding: 3px 0 0 35px;
	background: #fff url(../images/rollower.jpg) bottom no-repeat;
}
#menu ul li a:link{
	color: #515E22;
	background-position: 20px 40px;
}
#menu ul li a:visited{
	color: #515E22;
	background-position: 20px 40px;
}
#menu ul li a:hover, a:active{
	color: #F26701;
	background-position: 0 3px;
}
#menu ul li a.cur{
	color: #F26701;
	background-position: 0 -75px;
}

/************************ content styling **************************/
#content{
	display: block;
	width: 40%;
	margin: 30px 0 0 20%;
}
#content p{
	padding: 0 0 10px 0;
	color: #77726F;	
	width: 95%;
	font-size: 0.9em;
}
#content h2{
	color: #6E7C33;
	font-size: 0.9em;
	padding: 0 0 10px 0;
}

/************************ h2 rollover styling ******************************/
#content h2 a{
	padding: 0 0 0 12px;
	margin: 0  5px 0 0;
	text-decoration: none;
	background: transparent url(../images/h2_bg.gif) left no-repeat;
}
#content h2 a:link{
	background-position: 0 5px;
	color: #6E7C33;
}
#content h2 a:visited{
	background-position: 0 5px;
	color: #6E7C33;
}
#content h2 a:hover, a:active{
	background-position: 0 -22px;
	color: #F26701;
}

/************************ content_gallery styling ******************************/
#content_gallery{
	display: block;
	width: 60%;
	margin: 30px 0 0 20%;
}
#content_gallery h2{
	color: #6E7C33;
	font-size: 0.9em;
	padding: 0 0 10px 0;
}
#content_gallery h2 a{
	padding: 0 0 0 12px;
	margin: 0  5px 0 0;
	text-decoration: none;
	background: transparent url(../images/h2_bg.gif) left no-repeat;
}
#content_gallery h2 a:link{
	background-position: 0 5px;
	color: #6E7C33;
}
#content_gallery h2 a:visited{
	background-position: 0 5px;
	color: #6E7C33;
}
#content_gallery h2 a:hover, a:active{
	background-position: 0 -22px;
	color: #F26701;
}
#content_gallery h3{
	color: #77726F;
	font-size: 0.8em;
	margin: 0 0 0.4em 5px;
}
#content_gallery .thumb{
	display: block;
	width: 101px;
	height: 140px;
	float: left;
	padding: 5px;
	margin: 0 5% 5% 0;
	font-size: 0.8em;
	text-align: center;
	color: #77726F;	
}
#content_gallery .thumb a{
	color: #77726F;
	text-decoration: none;
}
#content_gallery .thumb a:link{
	color: #77726F;
}
#content_gallery .thumb a:visited{
	color: #77726F;
}
#content_gallery .thumb a:hover{
	color: #F26701;
}
#content_gallery .thumb a:active{
	color: #F26701;
}
#content_gallery .thumb a:link img{
	border: 1px solid #C4DD80;
}
#content_gallery .thumb a:visited img{
	border: 1px solid #C4DD80;
}
#content_gallery .thumb a:hover img{
	border: 1px solid #F26701;
}
#content_gallery .thumb a:active img{
	border: 1px solid #F26701;
}

/************************ small thumb styling ********************/
#content_gallery .thumb_small{
	display: block;
	width: 101px;
	float: left;
	padding: 5px;
	margin: 0 2% 2% 0;
	font-size: 0.8em;
	text-align: center;
	color: #77726F;	
}
#content_gallery .thumb_small a:link img{
	border: 1px solid #C4DD80;
}
#content_gallery .thumb_small a:visited img{
	border: 1px solid #C4DD80;
}
#content_gallery .thumb_small a:hover img{
	border: 1px solid #F26701;
}
#content_gallery .thumb_small a:active img{
	border: 1px solid #F26701;
}

/************************ right column styling *******************/
.right{
	display: block;
	float: right;
	width: 300px;
	margin: 30px 3% 0 0;
}
.right img{
	float: right;
	margin: 0 8% 0 0;	
}
.right_frog{
	display: block;
	float: right;
	width: 130px;
	margin: 215px 3% 0 0;
}

/************************* footer styling ***************************/
#footer{
	height:20px;
	text-align: right;
	margin: 0 0 10px 0;	
	padding: 0 5% 0 0;
	font-size: 0.7em;
}
#footer p{
	display: inline;
	padding:0 0 0 40px;	
	color: #77726F;
}
#footer a{
	text-decoration: underline;
	padding: 0 0 0 40px;
	background: transparent url(../images/footer_f.gif) left no-repeat;
	background-position: 25px 3px;	
}
#footer a:link, a:visited{
	color: #77726F;	
}
#footer a:hover, a:active{
	color: #F26701;	
}
.clear{
	clear: both;	
}

/*<!----------------------------------about me page styling------------------------------------>*/
#wrapper_about{
	display: block;
	width: 100%;
	margin: 0 auto;
	background: #fff url(../images/dragon.gif) right bottom no-repeat;
	background-position: 85% bottom;	
	height: 500px;
}
#wrapper_about h1{
	padding: 30px 0 40px 4%;
	display: block;
	width: 233px;
	color: #F26701;
	font-family: Times, serif;
	font-size: 2em;
	background: transparent url(../images/header_f.gif) bottom right no-repeat;
}
#wrapper_about h2{
	color: #6E7C33;
	font-size: 1em;
	padding: 0 0 15px 0;	
}

/*<!----------------------------------contact page styling------------------------------------>*/
#wrapper_contact{
	display: block;
	width: 100%;
	margin: 0 auto;
	background: #fff url(../images/castle.jpg) right bottom no-repeat;
	background-position: 85% bottom;	
	min-height: 500px;
}
#wrapper_contact h1{
	padding: 30px 0 40px 4%;
	display: block;
	width: 233px;
	color: #F26701;
	font-family: Times, serif;
	font-size: 2em;
	background: transparent url(../images/header_f.gif) bottom right no-repeat;
}

/*<!-----------------------------------lightbox------------------------------------>*/
#lightbox{	
	position: absolute;	
	left: 0; 
	width: 100%; 
	z-index: 100; 
	text-align: center; 
	line-height: 0;
	font-family: Verdana, sans-serif;
	font-size: 0.9em;
	letter-spacing: 0.06em;
	color: #F26701;
}
#lightbox img{ 
	width: auto; 
	height: auto;
}
#lightbox a img{ 
	border: none; 
}
#outerImageContainer{ 
	position: relative; 
	background-color: #fff; 
	width: 250px; 
	height: 250px; 
	margin: 0 auto; 
}
#imageContainer{ 
	padding: 10px; 
}
#loading a{ 
	position: absolute; 
	top: 40%; 
	left: 0%; 
	height: 25%; 
	width: 100%; 
	text-align: center; 
	line-height: 0; 
}
#hoverNav{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	height: 100%; 
	width: 100%; 
	z-index: 10; 
}
#imageContainer>#hoverNav{ 
	left: 0;
}
#hoverNav a{ 
	outline: none;
}
#prevLink, #nextLink{ 
	width: 49%; 
	height: 100%; 
	background-image: url(data:image/gif;base64,AAAA);
	 /* Trick IE into showing hover */ 
	display: block; 
}
#prevLink { 
	left: 0; 
	float: left;
}
#nextLink { 
	right: 0; 
	float: right;
}
#prevLink:hover, #prevLink:visited:hover { 
	background: url(../images/prevlabel.gif) left 15% no-repeat; 
}
#nextLink:hover, #nextLink:visited:hover { 
	background: url(../images/nextlabel.gif) right 15% no-repeat; 
}
#imageDataContainer{ 
	font: 10px Verdana, Helvetica, sans-serif; 
	background-color: #fff; 
	margin: 0 auto; 
	line-height: 1.4em; 
	overflow: auto; 
	width: 100%; 
}
#imageData{	
	padding:0 10px; 
	color: #515E22; 
}
#imageData #imageDetails{ 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#imageData #caption{ 
	font-weight: bold;	
}
#imageData #numberDisplay{ 
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#imageData #bottomNavClose{ 
	width: 66px; 
	float: right;  
	padding-bottom: 0.7em; 
	outline: none;
}	 	
#overlay{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 50; 
	width: 100%; 
	height: 500px; 
	background-color: #E1EFA8; 
}