/* Styles for John Hull Studio
CSS and web standards design by Victor Velt <victorvelt@yahoo.com>
10-21-06, version 3 (VV)
--------------------------------------------------------------------- */

/*	QuickFind:
	=Page Setup
	=Header
	=Tab Bar
	=Content Layout
	=Photo Gallery
	=Text
	=Footer

*/

/* =Page Setup
 ----------------------------------------------------- */
body {
background: #b3ab8a url(images/page_bkgd.png) repeat-x top left;
margin: 0;
padding: 0;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Arial, sans-serif;
font-size: 100%;
text-align: center; /* helps IE center container */
}

#container {
width: 770px;
padding: 0;
margin: 0 auto;
text-align: left; /* resets all to align left */
margin-bottom: 12px;
}


/* =Header, Phark Image Replacement
 ----------------------------------------------------- */
#header {
margin: 0;
text-align: left;
height: 98px;
width: 770px;
position: relative;
border-bottom: 2px solid #fdfee9;
}

#header img#logo {
position: absolute;
left: 0;
top: 6px;
z-index: 100;
}

#header h1 {
margin: 0;
text-indent: -9999px;
position: absolute;
top: 35px;
left: 112px;
}

#header h1 a {
display: block;
width: 288px;
height: 36px;
background: transparent url(images/jhs_header.gif) no-repeat top left;
border: none;
color: #f9f9e0; /* only NS 8 Win needs this */
}


/* =Tab Bar
 ----------------------------------------------------- */
#nav {
background: #d7882c url(images/nav_bkgd.png) no-repeat top left;
width: 770px;
float: left;
position: absolute;
top: 76px;
}

#nav ul {
font-size: 12px;
font-weight: normal;
padding: 0;
margin: 0;
margin-left: 98px;
}

#nav ul li { display: inline; }

#nav ul li a {
color: #fff;
text-decoration: none;
padding: 3px 15px;
background-color: transparent;
border-left: 1px solid #e8a659;
float: left;
height: 16px;
}

#nav ul li a:hover {
background-color: #c60;
color: #fff;
}

#nav ul li a:active { 
background-color: #dd8222;
color: #630;
}

#nav ul li a.up {
background-color: #e6e7da;
}

#nav ul li a.end {
border-right: 1px solid #e8a659;
}



/* =Content Layout
 ----------------------------------------------------- */
#content {
background-color: #eee;
background-image: url(images/content_bkgd.png);
background-repeat: repeat-y;
background-position: top left;
width: 770px;
position: relative;
}

/* #col1 {
float: left;
width: 380px;
}
*/

#col2 {
float: right;
width: 350px;
padding-right: 20px;
padding-bottom: 10px;
min-height: 500px;
height: auto !important;
height: 500px;
}

.clear-l {
clear: left;
height: 10px;
}

.clearer {
clear: both;
line-height: 0px;
height: 0px;
}



/* =Photo Gallery
 ----------------------------------------------------- */
#loadingmessage {
display: block;
width: 380px;
position: absolute;
top: 100px;
left: 20px;
font-weight: bold;
text-align: center;
color: #ccc;
}

#bigDynPic {
display: block;
float: left;
width: 380px;
height: 500px;
position: relative;
}

#bigDynPic img {
display: block;
}

#bigDynPic p {
font-size: 12px;
font-weight: bold;
color: #ffefbf;
margin: 0;
line-height: 1.5em;
position: absolute;
padding-bottom: 4px;
border-bottom: 1px solid #b4b0a3;
top: 478px;
left: 15px;
width: 350px;
}

#thumbs {
width: 375px;
padding: 13px 0 13px 15px;
background: #999;
float: left;
}

#thumbs div {
float: left;
}

#thumbs div img {
display: block;
border: none;
}

#thumbs a {
border: 2px solid #999;
display: block;
margin-left: 1px;
}

#thumbs a:hover {
border: 2px solid #fc3;
}

#thumbs a:active {
border: 2px solid #f60;
}


/* =Text
 ----------------------------------------------------- */
h2 {
font-size: 1.5em;
font-weight: bold;
color: #865d2e;
margin-top: 0.8em;
margin-bottom: 0.5em;
}

h3 {
font-size: 1em;
font-weight: bold;
color: #865d2e;
margin-top: 1em;
margin-bottom: 0.5em;
}

p {
font-size: 0.9em;
font-weight: normal;
line-height: 1.7em;
color: #333;
margin-top: 1em;
margin-bottom: 1em;
}

h2+p {
margin-top: 0.5em; /* for better browsers, not IE 6 */
}

blockquote {
margin: 0 0 0 25px;
font-size: 0.8em;
}

blockquote p {
color: #886a48;
}

ul {
color: #333;
font-size: 0.8em;
margin-top: 0;
}

li {
list-style-type: square;
padding-bottom: 0.3em;
}

a { 
color: #b30;
text-decoration: none;
}

a:hover {
color: #f60;
text-decoration: underline;
}

a:active {
color: #f30;
}


/* =Sub Menu
 ----------------------------------------------------- */
ul.submenu {
font-size: 0.7em;
margin: 0;
padding: 0;
margin-top: 10px;
margin-bottom: -5px;
}

ul.submenu li { 
display: inline;
padding: 0 10px 0 8px;
background: transparent url(images/tic_arrow.gif) no-repeat center left;
}

ul.submenu a {
text-decoration: none;
}

ul.submenu li.tic a {
border-bottom: 2px solid #d4bda5;
}

ul.submenu li.tic a:hover {
border-bottom: 2px solid #b09678;
}




/* =Footer
 ----------------------------------------------------- */
#footer {
clear: both;
width: 770px;
border-top: 2px solid #fdfee9;
background: #d7882c url(images/footer_bkgd.png) no-repeat bottom left;
}

#footer p {
font-size: 11px;
font-weight: normal;
line-height: 1.5em;
color: #ffefbf;
padding: 8px 15px;
margin: 0;
}

#footer a { 
color: #fff;
text-decoration: none;
}

#footer a:hover {
color: #ffe380;
text-decoration: underline;
}

#footer a:active {
color: #630;
}



/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */