/* 
   css Copyright © 2006-2012 Karelia Software. All rights reserved.
   css released under Creative Commons License 
        - http://creativecommons.org/licenses/by-sa/2.5/ 
   All associated graphics belong to their respective owners 
        and are licensed separately. 
*/


/*
GLOBAL

Try to define style properties as globally as possible. E.g. the basic font setting should be right there for the body element
*/


* { 
	margin:0px;
	padding:0px;
}

body {
	font-family: Optima, Tahoma, sans-serif;
	font-size: 76%; /* as recommended in CSS guide */
	background-color:#fff;
	color:#111;
	line-height:1.6;
}

img {
	border:0px #000 none;
}

ul, ol {
	padding-left:2.5em;
}

ul {
	list-style-image: url(listStar.gif);
}

dt {
	font-weight: bold;
}

dd {
	margin-left: 2.5em;
}

#page {
	margin-top:24px;
	position:relative;
}

#page-top {
	position:relative;
	padding-top:2.7em;
	width:100%;
}

#page-content {
	margin:0px auto;
	padding: 0px 24px;
	max-width: 80em;
}

h2, h3, h4, h5, h6 {
	background: #fff url(45degreelightstripes.png) repeat-x;
	text-align:center;
	padding:3px 7px;
	margin:10px 0px 5px 0px;
}

h5, h6 {
	font-size: 100%;
}

#main-content {
	float: left;
	width: 100%;
}

* html #main-content {
	padding-right: 30px;
}

.article, .no-callouts {
	margin: 0px 7px;
	clear: left;
}

.article p, .article dl, .article table {
	margin-bottom: 0.8em;
}

.timestamp {
	text-align:right;
	padding:0px 7px;
}

.article h3 {
	margin-top: 2em;
}

.article-info {
	clear:left;
}


#title {
	position:relative;
	min-height:128px;
	width:100%;
}

body.has-custom-banner #title {
	background-position: center top;
	background-repeat: no-repeat;
}


h1 {
	text-align: center;
	text-shadow: #fff 0px 0px 5px;
	background: transparent;
	font-size: 250%;
	width: 770px;
	margin:0px auto;
	padding-top:24px;
	line-height:28px;
}


h1 a {
	text-decoration: none;
}

h1 a:hover {
	text-decoration:underline;
}

h1 span.in {
	width:770px;
}

.has-logo h1 span.in {
	width:570px;
	padding-right:200px;
}

#title p {
	bottom:4px;
	width:100%;
	font-size:120%;
	text-align: center;
}

#title p span.in {
	width:770px;
	display:block;
	margin:0px auto;
}

.has-logo #title p span.in {
	width: 600px;
	padding-right:200px;
}

#logo-container {
	position:absolute;
	left:50%;
	margin-left:200px;
	width:200px;
	text-align:right;
}




/*
SITEMENU
*/
#sitemenu-container {
	position:absolute;
	top: 0px;
	width:100%;
	background:#fff;
}

#sitemenu ul {
	list-style:none;
	line-height:2.5em;
	height: 2.5em;
	background:#fff;
	padding: 0;
	margin:0 auto;
	max-width: 80em;
	position:relative;
}

#sitemenu ul li ul {
	white-space: normal;
}

#sitemenu ul li {
	display:inline;
}

#sitemenu ul span.in {
	display:inline-block;
	margin:0em;
	padding:0 1em 0 1.5em;
	color:#eee;
	text-decoration:none;
	max-width:770px;
}
#sitemenu-content ul li ul {
	line-height: 1.6em;
}

#sitemenu-content ul li ul li span.in {
	padding-left: 1.5em;
}

#sitemenu-content .submenu-indicator {
	left: 2px;
}

#sitemenu-content ul ul .submenu-indicator {
	left: auto;
	right: 5px;
	top: 11px;
}

#sitemenu a,
#sitemenu-content ul li ul li a:hover {
	text-decoration:none;
}

#sitemenu-content ul li ul li span.in{
	border-bottom:solid 1px #FFF !important;
}

/*
SIDEBAR & CALLOUTS
*/

body.allow-sidebar #main {
	margin-right:245px;
	padding-top:1px;
}

#sidebar {
	margin-top:10px;
	width:230px;
	float:right;
}

.pagelet {
	margin-bottom:15px;
}

.pagelet h4 {
	margin-top:0px;
	font-size: 133%;
}

#sidebar .pagelet h4, #sidebar h5.index-title{
	text-align:left;
}
.pagelet.bordered.titled {
	border-top: 0px none;
}

.pagelet.bordered h4 {
	margin-left:-1px;
	margin-right:-1px;
	padding-left:24px;
	color: #fff;
}

.pagelet div {
	margin:0px 3px;
}

.pagelet .slider-index div {
	margin:0px;
}

.pagelet p {
	padding:0px;
	margin-bottom: 0.8em;
}

.callout {
	width:230px;
	float:left;
	margin-right:10px;
}

blockquote {
	padding: 0px 8px;
	border-left: 3px double;
	font-style: italic;
}


/* 
PHOTO GRID PAGE
*/

.photogrid-index {
    height:1%; /*  for the IEs */
	position:relative; /* for IE < 7 */
	margin:auto;
    text-align: center;
	/*float:left;*/
}

.gridItem {
/*	display:inline-block; argh! Firefox can't do this */
	float:left;
    position:relative;
    width:150px;
    height:190px;
   	margin:5px;
    overflow: hidden;
}

.gridItem * {
	padding:0px;
	margin: 0px;
}

.gridItem a.imageLink {
	position: absolute;
	bottom:54px;
	left:10px;
	width: 130px;
	display:block;
	text-align:center;
}

.gridItem img {
    margin: auto;
 }

.gridItem h3 {
	position:absolute;
	top:0px;
	left:0px;
	width:150px;
	height:190px;
	margin:0px;
	background: transparent;
    font-size: 100%;
	line-height:17px;
}

.gridItem h3 a {
	display:block;
	position:absolute;
	top:0px;
	left: 0px;
	width:150px;
	height: 54px;
	padding-top: 136px;
	background: transparent;
	text-decoration:none;
}

.gridItem h3 a:hover {
	 background:url(greystar.png) no-repeat 2px 104px;
}

/* IE Hack */
/* Hides from IE5-mac \*/
* html .gridItem h3 a:hover {
	 background:url(greystar.gif) no-repeat 2px 104px;
}
/* End hide from IE5-mac */


.gridItem h3 span.in {
	margin-top: 136px;
	display:block;
	width: 100%;
	padding:2px;
	background: url(45degreelightstripes.png) repeat-x;
}

.gridItem h3 a span.in {
	/* if we're inside a link, the link will provide correct positioning */	
	margin-top: 0px; 
}

#sidebar .photogrid-index{
	width:auto;
	margin-left:32px;
}





/*
PHOTO NAVIGATION
*/

.text-navigation #previous-photo, .text-navigation #next-photo, .text-navigation  #photo-list, .text-navigation a, .text-navigation a:hover{
	background:none!important;
	font-weight:bold;
}


.photo-navigation {
	position:relative;
    height: 30px;
    width:200px;
    margin:0px auto 8px auto;
}

.photo-navigation div {
	width:65px;
	height:30px;
	position: absolute;
    text-indent: -5000em;
    background-repeat: no-repeat;
}

.photo-navigation a {
	border-bottom:none;
	display:block;
	width:100%;
	height:100%;
    background-repeat: no-repeat;
}

#previous-photo	{
    left: 0px;
    background-position: 0px -5px;
}
#previous-photo a {
	background-position: 0px -36px;
}
#next-photo {
    left: 135px;
    background-position: -75px -1px;
}
#next-photo a {
	background-position: -75px -32px;
}
#photo-list {
    left: 83px;
    width:35px;
	background: url(photo-list-off.gif) center center no-repeat;
}
#photo-list a {
	background-position: center center;
}
.image-controls a {
	border-bottom:none !important;
}



/* 
PAGE BOTTOM
*/
#page-bottom {
	margin-top:24px;
	padding: 0px 12px 0px 30px;
	color:#fff;
}

#page-bottom p {
	padding: 3px 0px 0px 0px;
}

#page-bottom p+p {
	padding: 0px;
}

#page-bottom a {
	color:#fff;
}


/* 
SANDVOX INTERNALS
	
these should be present in every style sheeto ensure that certain classes used by Sandvox to hide and clear elements are respected.
Don't change them unless you have very good reason to do so.
*/

.clear {clear: both; height: 0;}
#main .clear {clear:left;}
.hidden {display:none;}
.narrow {float: right; margin:5px 0 5px 10px;}
img.wide {display: block;}
.ImageElement, .VideoElement { text-align:center;}
.contactElement{ padding-top:25px;}
.narrow.left { margin: 0.3em 0.6em 0.3em 0; }
.narrow.right {	margin: 0.3em 0 0.3em 0.6em; }
.article-thumbnail {
    float: left;
	margin: 5px 10px 5px 0;
}
