/*Main (and only) style sheet for www.stephentempler.co.nz 
checked and works in:   Firefox, IE6/7, Safari
author:  	Jacky Dwane
email: 		jdwane@slingshot.co.nz
version:    1.0 (30 May 2008)
----------------------------------------------------*/



/*general website settings
----------------------------------------------------*/

body
{margin: 0 auto; 
padding: 0; font-size: 100%;
padding: 0;} /*set everything to 0*/

/*index.html*/


#firstpageholdall /*to set the background to black for the first page*/
{
width: 100%;
height: 1000px;
max-height:1000px; /*don't want the height page to be any bigger than this*/
background-color:#000000;
}


#mainpageimage /*index.html image style*/
{
width:426px;
height:602px;
background-image: url(firstimage.jpg); background-repeat:no-repeat;
background-position: center;
margin-left:auto; 
margin-right:auto;
padding:3%;
}

/*gallery page general settings*/
#maincontainer /*hold all for gallery pages - sets the background to blue*/
{
width: 822px;
height: 590px;
background: #a6d5e7;
margin-left:auto; margin-right:auto;
margin-top: 2%;
max-height: 620px;
overflow: hidden;
}

#pagecontent /*page content of gallery pages sets the white region which covers the blue and leaves a strip for the sidenav*/
{
padding-top:10px;
float:right;
width: 660px;
height: 547px;
background: #fff;
margin-top:5px;
border-right: 5px solid #a6d5e7;
}

#newexhib
{
font: 1em verdana, Arial, Helvetica, sans-serif;
color:#337777;
text-align:center;
text-decoration: none;
margin-top: -30px;
}

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

#buyprints 
{
color:#337777;
text-align:center;
text-decoration: none;
font: 1em verdana, Arial, Helvetica, sans-serif;
}

#buyprints a
{
color:#339999;
}

#buyprints a:hover
{
color:#fff;
}


#moveup15
{
margin-top:-5px;
text-align:center;

}


h2 /*main heading style for pages*/
{
font: .75em Verdana, Arial, Helvetica, sans-serif;
padding-left: 30px;
letter-spacing:.4em;
color:#337777;
}


.mainhead /*change styling for the description on gallery pages*/
{
font: .75em Verdana, Arial, Helvetica, sans-serif;
padding-left: 30px;
letter-spacing: normal;
color:#337777;
}

#footer /*first page footer only - to position bottom center relative to mainpageimage*/
{
position: relative;
font: .7em verdana, Arial, Helvetica, sans-serif;
color:#337777;
text-align:center;
margin-top: 15px;
}

#footerotherpages
{
display:none;
font: .7em verdana, Arial, Helvetica, sans-serif;
color:#337777;
text-align: right;
padding-right: 5px;
}

object /*embedded youtube position for anim.html*/
{
margin-left: 30px;
}


/*----------------------------------------------*/
/*left navigation on gallery pages (index.html)*/ 

#sidenav
{
margin-left: 0px;
margin-top: 10px;
width: 145px; 
padding-top:20px;
padding-left: 8px; 
}

#sidenav ul
{
font: .7em Verdana, Arial, Helvetica, sans-serif;
list-style: none;
margin: 0;
padding: 0;
}

#sidenav li
{
padding: .5em .25em;
}

#sidenav a
{
color: #337777;
text-decoration: none;
}

#sidenav a:hover
{
color: #fff;
}

#sidenav a:active /*underlines the text of the selected menu item*/
{
border-bottom: 1px solid #003333;
}

.underline /*keeps the text underlined while they are in that section*/
{
border-bottom: 1px solid #003333;
}


h3 /*heading style on sidenav*/
{
font: bold .8em/1.3em Verdana, Arial, Helvetica, sans-serif;
color: #337777;
text-decoration: none;
}


/*------------------------------------------*/
/*ABOUT ME PAGE - settings specific to this page*/

.center /*this centers the mainheading on the about me page but keeps other mainhead attributes*/
{
margin-left: 80px;
margin-top:20px;
}

.bio /*style and position text in pagecontent*/
{
margin-top:10px;
margin-left:10px;
margin-right: 10px;
font: .65em Verdana, Arial, Helvetica, sans-serif;
color: #999999;
}


.bio a:link
{color: #999999;}

.bio a:visited
{color: #999999;}

.bio img
{
margin: 30px 0 0 170px;
}

/*-------------------------------------------------------
navigation menu index.html - different positioning from other pages in website
with a little help from Eric Meyer's Book "More Eric Meyer on css - project 7"*/

#navmenu
{
width:100%;
height:39px;
font: 11px/13px verdana, arial, helvetica, sans-serif; /*font size absolute as I don't want this to change*/
margin-left: 58px;
padding-top: 514px;
}

/*main list style*/
#navmenu ul 
{
position:relative;
float:left;
width: 78px;
list-style: none;
margin: 0;
padding: 2px 1px;
margin-top: -15px;
text-align:center;
}

#navmenu ul a
{
color: #337777; 
background: transparent;
}

/*tagged text as <i> which allows this to hide navmenu text as the menu bar graphic covers this not quite symantec use of html, oh well*/
#navmenu i
{
visibility: hidden;
}

/*--------------------------------------------------------------------------------------*/
/*navigation menu on gallery pages - top of page with help from eric meyer "More eric meyer on css"*/
.menubar /*graphic for menubar to overcome font display prob in ffXP and keep it the same as index page*/
{
width:821px;
height:21px;
background-image: url(menubarlight.gif); background-repeat:no-repeat;
}

/*navigation menu container */
#navmenurest
{
width:100%;
font: 11px/11px verdana, arial, helvetica, sans-serif; /*font size absolute as I don't want this to change if user resizes text*/
margin-left: 0px;
}

/*main list style*/
#navmenurest ul 
{
float:left;
width: 78px;
list-style: none;
margin: 0;
margin-top:-14px;
padding: 2px 2px;
text-align:center;
}

#navmenurest ul a
{
text-decoration: none;
background: transparent;
}

/*hide navmenu text*/
#navmenurest i
{
visibility:hidden;
}

/*make the users selection stand out*/
#navmenurest a:hover 
{
border: 1px dotted gray;
}

#navmenurest a:active
{
border: 1px dotted white;
}


/*-------------------------------------------------------------------------------------------*/
/*thumbnail gallery: /*http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/P240/ */

.firstimage /*firstimage you see when you come to page - looks better than nothing!!*/
{
position:absolute;
width:280px;
height:280px; 
background-repeat:no-repeat;
margin-left:215px; /*lined up with thumbnail span - covered when thumbnails hovered over*/
margin-top: 8px;
}

.gallerycontainer
{
margin: 2em 1% 0px 10px; 
position:relative;
padding: 10px 0px 10px 20px; 
font: .7em/1.3em Verdana;
text-decoration:none;
height:440px;
width:620px;
 }

.gallerycontainer a
{
text-decoration:none;
}/*for safari which wants to underline the text in the large image*/

.gallerycontainer p
{
color: #999999;
}

.thumbnail img
{
border: 1px #000;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail span /*CSS for enlarged image*/
{
position: absolute;
padding: 15px 10px 5px 15px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
}

.thumbnail span img /*CSS for enlarged image*/
{
border-width: 0;
padding: 2px;
}

.thumbnail:hover span /*CSS for enlarged image when ya hover over thumby*/
{
visibility: visible;
background-color:#fff;
top: 0;
left: 217px; /*position where enlarged image should offset horizontally lined up with firstimage*/
z-index: 50;
text-decoration: none;
}


/*---------------------------------
mailing list*/
form
{
font:.75em Verdana;
padding:20px;
margin-top:50px;
margin-left:50px;
line-height:1.6em;
width:500px;
height 250px;
background-color:#033d51;
color:#8AD0D7;

}

form a:link
{
color:#8AD0D7;
}


label 
{
position:absolute;
}

input
{margin-left:150px;}

.submit
{margin-top:10px;}

/*newexhib*/

.phantas
{
margin-top: -20px;
margin-left:10px;
margin-right: 10px;
font: .65em Verdana, Arial, Helvetica, sans-serif;
color: #999999;
}

img.marginten
{
margin-left:10px;
width:310px;
height:440px;
}

#floatright
{
margin-left: 380px;
margin-top: -450px;
}



/*--------------THE END--------------*/