/* screen styles from template version 1.0 */
/* NOTE: any * > selector rules are for standards-compliant browsers. The rule before will have a style that works in IE6. */
/* Table of Contents 
	Non-displaying Elements
	Layout
		Page Specific Layout
	Typography and Inline Elements
		Page Specific Typography
	Navigation
		Specific Nav Button Styling
*/

/* Non-displaying Elements*/
/* *************************************************************************************** */
#foo { display:none; }

#nav-main a { text-indent:-9999px; overflow:hidden } /* moves text inside menu anchors off screen. Remove if not using graphics for menu links. */

/* Layout */
/* *************************************************************************************** */
body { font-size:0.875em; /* makes font a specific size... must find it... */ text-align:center; margin-top:20px; }

#branding { text-align:center; margin:0 0 110px; padding:30px 0 0 0 }

#container { height:auto; margin:0 auto; position:relative; text-align:left; width:870px }

#content { width:870px; min-height:250px }

#siteinfo,
#admin_info { font-size:0.8em; border-top: .15em solid #9B9DB6; margin:3em 0; padding-top: 0.5em; width: 870px; color: #666; padding-bottom:3em; }

.column.left { width:45% }

.column.right { width:45% }

.layout-admin .column.left { width:60% }

.layout-admin .column.right { width:30%; background-color: #efefef; border: 2px solid #dedede; padding:.5em 1em; }

.social {margin-top:3em; text-align:center;}
.addthis_toolbox {width:48%; margin:0 auto;}

.layout-photo_info .addthis_toolbox, .layout-collection .addthis_toolbox {width:100%; margin:0 46px; float:left;}

.layout-collection .addthis_toolbox { margin:2em 77px}

.layout-home .social {display:none}

/* Page Specific Layout */
/* use a class on the body to change specific parts of the layout based on portions of the website (e.g. user vs. admin) */

/* layout_home */
.layout-home #content { text-align:center; margin-top:2em; }

/* layout_gallery */
.collections { margin-left:-210px; overflow:hidden; width:auto; float:left }

* > .collections { margin-left:-105px; }

.collection_example { width:220px; float:left; margin-left:105px; margin-bottom:25px; line-height:1.2em; min-height:204px }

.collection_example img { margin-bottom:0px }

.collection_example a:link,
.collection_example a:visited { color:#000; text-decoration:none }

.collection_example a:hover,
.collection_example a:active { color:#25276F; }

/* layout-collection */
.layout-collection .thumbnails { margin-left:-10px; width:600px; float:left; overflow:hidden }

* > .layout-collection .thumbnails { width:600px }

.layout-collection .thumbnails img { margin:0 0 10px 10px; float:left; }

.layout-collection .description { width:270px; clear:right; float: right; }

#back_to_gallery,
#back_to_collection { display: block; background: #9A9A9A; color: #FFFFFF; font-size: 0.8em; width: 9em; text-align: center; line-height: 1em; padding:0.25em 0; text-decoration: none; position:absolute; top:0; right:-370px; }

#back_to_gallery { right:0; top:220px; }

/* layout-photo_info */
#photo_and_nav { width:500px; float:left; }

.layout-photo_info #description { width:330px; clear:right; float: right; }

#photo_nav { position:absolute; top:220px; width:500px; text-align:center }

#btn-previous_image { position:absolute; left:0px; }

#btn-zoom_in_photo { left:218px; position:absolute }

#btn-next_image { position:absolute; right:0px; text-align:right; }

.button,
ul.buttons a:link,
ul.buttons a:visited { background: #9A9A9A; color: #FFFFFF; font-size: 0.8em; line-height: 1em; padding:0.25em 16px; text-decoration: none; margin:0; }

ul.buttons { list-style:none; margin-left:0 }

ul.buttons li { margin-left:0 }

/* layout-admin */
.layout-admin #nav,
.layout-admin #siteinfo { display:none }

/* Typography and Inline Elements */
/* *************************************************************************************** */
h1 { margin-bottom:38px; }

#siteinfo p,
#admin_info p { line-height: 1.4em; margin-bottom: 0.5em; }

#simpleTooltip { padding: 7px 7px 7px 28px; border: 1px solid #A6A7AB; background: #FEF5BE; text-align:left }

/* Page Specific Typography */
/* use a class on the <body> to change specific typographic elements (e.g. <h1> backgrounds) */
.layout-home h1 { }

/* Navigation */
/* placement of navigation */
/* *************************************************************************************** */
#nav-main { position:absolute; top:95px; left:0; width:890px; height:40px }

#nav-main a { display:block; float:left; height:13px; background-repeat:no-repeat; background-image:url(../images/menu.png); }

#nav-main a,
#nav-main ul { margin:0 25px 0 0; }

ul#nav-main { margin:0; }

#nav-main ul,
#nav-main li {/* fix IE6 and IE7 List bug */ display: inline; }

/* Specific Nav Button Styling */
/* used if buttons use images instead of text or combined with text */

#btn-home { background-position:0px 0px; width:37px; }

#btn-home:hover { background-position:0px -13px; }

#btn-exhibits { background-position:-174px 0px; width:62px }

#btn-exhibits:hover { background-position:-174px -13px }

#btn-fine_art_gallery { background-position:-265px 0px; width:153px }

#btn-fine_art_gallery:hover { background-position:-265px -13px; }

#btn-people_gallery { background-position:-447px 0px; width:47px }

#btn-people_gallery:hover { background-position:-447px -13px; }

#btn-commercial_gallery { background-position:-524px 0px; width:90px; margin-right:3px !important }

#btn-commercial_gallery:hover { background-position:-524px -13px }

#btn-workshops { background-position:-66px 0px; width:80px }

#btn-workshops:hover { background-position:-66px -13px; }

#btn-about_hayward_photography { background-position:-738px 0px; width:44px }

#btn-about_hayward_photography:hover { background-position:-738px -13px; }

#btn-ordering { background-position:-642px 0px; width:69px }

#btn-ordering:hover { background-position:-642px -13px; }

#btn-contact { background-position:-810px 0px; width:60px; margin-right:0 !important }

#btn-contact:hover { background-position:-810px -13px; }

#nav-main ul { padding:20px 10px 0; height: 25px; display:block; float:left; border-left:solid 1px #9CBADE; border-right:solid 1px #9CBADE; }

#nav-main .galleries { position:absolute; text-indent:-9999px; background:url(../images/galleries-header.png) center 8px no-repeat; display:block; width:350px; left:261px; top:5px; border-top:solid 1px #9CBADE; margin-top:-5px; }

#nav-main li a { margin-top:30px }

#nav-main ul li a { margin-top:10px; }

#nav-admin { position:absolute; top:85px; left:0; width:890px; overflow:hidden; text-align:right }

#nav-admin ul { margin:0; list-style:none }

#nav-admin a { float:left; height:20px; margin-right:20px; padding:5px; background-color:#efefef; text-decoration:none; color:#545454; font-weight:bold; border: 2px solid #dedede; }

#nav-admin #public_site { float:right; }

#nav-admin #logout { float:right; background-color:#fef5be; border:2px solid #fdd425; }

#supportLink { position:absolute; top:160px; left:0; width:870px; text-align:center }

#supportLink a:link,
#supportLink a:visited { color:#808080; padding:.1625em 1em; text-decoration:none; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; text-transform: uppercase; font: normal 1em "Times New Roman", Times, serif; letter-spacing: .04em; }

#supportLink a:focus,
#supportLink a:hover,
#supportLink a:active { background-color:#25276F; color:#B4C3E3 }