/* CSS Document - TOBY SALKIN.com */

/* TO DO
Fix color of Links in Links page (blue from TRP) - WHEN LIVE, ADD LINKS IN CAA, VIVA and ask Janet for SFVAC (send image and 50 words)

Build Gallery hero pages
Build Contact page (form?)

Build Exhibitions page ***need list from Toby

*/

/* COLORS
RED = #A52D18

BLUE = #3494E8 = border on thumbnails in hover mode, blue links on gallery pages

Flesh orange = used in gallery titles, gallery border = #F0914F 

*/



html, body {
	margin: 0; 
	padding: 0;
	border: 0;
	min-height: 100%; margin-bottom: 1px; /* stops page jog, scrollbars always on */
	
}

body {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 100%;
	color: #000000;
	background-color: #A52D18;
	text-align: center;
}

#container {  /* NEW - added to all pages to center pages (except "hero" pages), encompasses all boxes */
	margin: 0 auto;
	width: 900px;
	text-align: left;
	background-color: #FFF; /* *** white *** */
	border: 1px solid #000000;
}


/* *** font-size is in percent, line height is in ems*** */
p, ul {
	font-size: 100%;
	color: #000;
	line-height: 1.5em;
	margin: 0;
	padding: 0;
}

/* CSS Selectors for the structure of document */

/* *** head of page, TRP logo *** */
#header {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 230px;
	background-image: url(../nav/Toby-banner-only.jpg);
	background-repeat: no-repeat;
}


/* styling horz nav bar - uses 2 layer CSS sprite bg - SEE http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/ */


div#nav { /* IE6 is served up the .GIF matted with white version, NOT PNG - see IE_fixes4toby.css */
	position: absolute; /* relative makes header bg drop down  */
	margin: 180px 0px 0px 40px;
	width: 700px;
	height: 30px;
	background-image: url(../nav/navtext.png);
	background-repeat: no-repeat;
}



#nav span {
    display: none;
}

#nav li, #nav a {
    height: 30px;
    display: block;
}

#nav li {
    float: left;
    list-style: none;
    display: inline;
}
#nav li a {
	margin: 0;
	padding: 0;
}

li#t-home { width: 70px;}
li#t-gallery {width: 95px;}
li#t-biography {width: 120px;}
li#t-exhibitions {width: 140px;}
li#t-contact {width: 105px;}
li#t-links {width: 80px;}

/* declarations to style the hover AND the current page navbar - 
note: IE6 is served a gif version in fixes4toby.css */

li#t-home a:hover, body#home #t-home a { 
background: url(../nav/navtext.png) 0px -30px no-repeat; }

li#t-gallery a:hover, body#gallery #t-gallery a { 
background: url(../nav/navtext.png) -70px -30px no-repeat; }

li#t-biography a:hover, body#biography #t-biography a {
background: url(../nav/navtext.png) -165px -30px no-repeat; }

li#t-exhibitions a:hover, body#exhibitions #t-exhibitions a {
background: url(../nav/navtext.png) -285px -30px no-repeat; }

li#t-contact a:hover, body#contact #t-contact a {
background: url(../nav/navtext.png) -425px -30px no-repeat; }

li#t-links a:hover, body#links #t-links a {
background: url(../nav/navtext.png) -530px -30px no-repeat; }



#nav a {
	float: left; /* *** for IE55Mac - hidden below from others  *** */
}

/* Commented backslash hack hides rule from IE5-Mac WATCH BACKSLASH! \*/
#nav a {
	float: none;
}
/* End IE5-Mac hack */

/* End NAV BAR */




/* *** main content box and thumbnail div on gallery page; no real distinction (built in for future)  *** */
#content, #thumbnails {
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 30px 40px;
	clear: both;
	position: relative;	
	width: 830px;
	overflow: hidden; /* to avoid IE6 bug float drop */
}


#content p, #thumbnails p {
	font-size: 85%;
	margin-top: 0.5em;
	margin-bottom: 0.75em;
	line-height: 1.75em;
	color: #333147;
}




/* *** redefining html tags - links *** */
a:link {
	color: #2C82CF;
	text-decoration: underline;
}
a:visited {
	color: #339;
	text-decoration: underline;
}
a:hover {
	color: #F0914F;
	text-decoration: underline;
}
a:active {
	color: #4D4945;
}


/* *** redefining html tags - general first */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	letter-spacing: 1px;
	color: #3493E7;
}

h1 {
	font-size: 100%;
}

h2 {
	font-size: 90%;
	margin-top: 1.5em;
	color: #A52D18;
}

h3, h4 {
	font-size: 80%;
	margin-top: 1.1em;
}

h4 {
	font-style: italic;
}

p {
	font-family: Georgia, "Times New Roman", Times, serif;
}



/* MAIN Gallery page - sits inside main Thumbnails div  - NOTE: REPLACED WITH FLAT GIF BG BECAUSE of IE6 - can update with png version when IE6 is dead... - also GIF is smaller and faster to load*/

div#portrait, div#scenic, div#still-life, div#collage {
	height: 32px;
	width: 120px;
	background-color: #FFF;
	background-image: url(../nav/gallery-subtitles.gif);
	background-repeat: no-repeat;
}

div#portrait {
	background-position: 0px -4px;
}
div#scenic {
	background-position: 0px -39px;
}
div#still-life {
	background-position: 0px -74px;
	margin-top: 8px;
}
div#collage {
	background-position: 0px -108px;
	margin-top: 8px;
}

/* hide titles */
div#portrait h2, div#scenic h2, div#still-life h2, div#collage h2 {
	display: none;
}

/* for main Gallery page thumbnails */
div#thumbnails div.thumbnails-set {
	margin-left: 50px;
}

div#thumbnails div.thumbnails-set p {
	margin: 0px;
}

div#thumbnails div.thumbnails-set img {
	border: 1px solid #F0914F; /* flesh orange */
	margin-top: 2px;
	margin-right: 16px;
	margin-bottom: 2px;
	margin-left: 0px;
	padding: 6px;
}

div#thumbnails div.thumbnails-set a:hover img {
	border: 1px solid #3494E8;
	background-color: #FC3;
}



/* HERO single gallery pages; not saved as template as everything is editable */

body#heropage {
	text-align: center;
	background-color: #222;  /* use bg color for next/previous/home matted gifs */
}

div#hero { /* main box on hero gallery pages - margin auto centers */
	margin: 6px auto;
	padding: 0;
	width: 800px;
}

div#herohead {
	height: 60px;
}

div#return {
	width: auto;
	height: 30px;
}

div#return img {
	text-align: center;
}


div#previous {
	width: 120px;
	height: 30px;
	float: left;
}

div#next {
	width: 100px;
	height: 30px;
	float: right;
}


#hero img {  /* for gallery hero */
	border: 1px solid #F0914F; /* orange */
	margin-top: 12px;
	margin-right: 0px;
	margin-bottom: 12px;
	margin-left: 0px;
	padding: 8px;
}

#herohead img {  /* then zeros out return-previous-next images */
	margin: 0px;
	padding: 0px;
	border: 0;
}


#credits h1, #credits h2, #credits h3, #credits h4 {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	color: #FFE1BF;
}

#credits h1 {
	font-size: 100%;
	letter-spacing: 0.03em;
	color: #FFA640;
}

#credits h2 {
	font-size: 90%;
	margin-top: .5em;
	font-style: normal;
}
#credits h3 {
	font-size: 70%;
	margin-top: 1em;
	font-style: normal;
}
#credits h4 {
	font-size: 66%;
	margin-top: 1em;
	font-style: normal;
}

/* *** redefining links on darker gallery hero pages *** */
#hero a:link {
	color: #3494E8;
	text-decoration: underline;
}
#hero a:visited {
	color: #3494E8;
	text-decoration: underline;
}
#hero a:hover {
	color: #F0914F;
	text-decoration: underline;
}
#hero a:active {
	color: #4D4945;
}


/* *** misc classes*** */
.nomargins {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.smallmargintop {
	margin-top: 4px;
}
.xtraSpaceB4 {
	padding-top: 10px;
}


/* *** styling images, no border *** */
.floatleft {
	float: left;
}
.floatright {
	float: right;
}



.img_borderonly_left {  /* use for a stack of images, does NOT float */
	border: 2px solid #A52D18; /* toby red */
	margin-top: 6px;
	margin-right: 10px;
	margin-bottom: 8px;
	margin-left: 0px;
}
.imgfloatrighthead {
	border: 2px solid #A52D18;
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 8px;
	margin-left: 8px;
	clear: right;
}
.imgfloatright {
	border: 2px solid #A52D18;
	float: right;
	margin-top: 3px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 8px;
	clear: right;
}
.imgfloatleftclear {
	border: 2px solid #A52D18;
	float: left;
	clear: both;
	margin-top: 8px;
	margin-right: 10px;
	margin-bottom: 8px;
	margin-left: 0px;
}
.imgfloatleft {
	border: 2px solid #A52D18;
	float: left;
	margin-top: 6px;
	margin-right: 10px;
	margin-bottom: 8px;
	margin-left: 0px;
}
.imgfloatlefthead {
	border: 2px solid #A52D18;
	float: left;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 8px;
	margin-left: 0px;
}


.clearleft { /* assign class to div to clear a float */
	clear: left;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}
.clearright { /* assign class to div to clear a float */
	clear: right;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}
.clearboth { /* assign class to div to clear a float */
	clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}
.clearboth_xtraSpaceB4 { /* assign class to div to clear a float */
	padding-top: 10px;
	clear: both;
}

.aligncenter {
	text-align: center;
}
.alignright {
	text-align: right;
}


/* *** styling footer*** */

div#footer {  
	margin: 0 auto;
	width: 900px;
	text-align: center;  
	clear: both;
	margin-top: 0.5em;
	margin-bottom: 1em;
}

#footer p {
	font-size: 70%;
	color: #9FF;  /* pale blue*/
	margin: 0;
	padding: 4px 8px 4px 10px;
}

#footer a {  
	color: #DCFFD9;  /* light green*/
	text-decoration: underline;
}
#footer a:hover {
	text-decoration: none;
}