/** 
 * SilverStripe Black Candy Theme
 * http://www.silverstripe.com
 *
 * Main Layout File
 */
 
/* gallery colour defaults */

/* Core Gallery Colours */

#Header .gallerylogo {
	width: 346px;
	height: 128px;
	display: block;
	margin-bottom: 20px;
}

#Header .gallerylogo a img {
	display: block;
    width: 346px;
	height: 128px;
}

/* default is red */
.imageblock,
p a.readmore:hover,
#Header .gallerylogo {
	background-color: #d30044 !important;
}

h3, 
h2, 
.selected,
a:hover,
.section, 
.current {
	color: #d30044 !important;
}

p a.readmore:hover {
	color: #fff !important;
	text-decoration: none;
}

/* green is deane */
.deane .imageblock,
.deane p a.readmore:hover,
.deane #Header .gallerylogo {
	background-color: #43AA3E !important;
}

.deane h3,
.deane h2,
.deane h2 a,
.deane .selected,
.deane a:hover {
	color: #43AA3E !important;
}

/* yellow is hirschfeld */
.hirschfeld .imageblock,
.hirschfeld p a.readmore:hover,
.hirschfeld #Header .gallerylogo {
	background-color:  #FFAA3E !important;
}

.hirschfeld h3, 
.hirschfeld h2, 
.hirschfeld h2 a,
.hirschfeld .selected,
.hirschfeld a:hover {
	color: #FFAA3E !important;
}

/* orange is friends */
.friends .imageblock,
.friends p a.readmore:hover,
.friends #Header .gallerylogo {
	background-color:  #FFC700 !important;
}

.friends h3, 
.friends h2,
.friends h2 a,  
.friends .selected,
.friends a:hover {
	color: #FFC700 !important;
}

/* purple is hancock */
.hancock .imageblock,
.hancock p a.readmore:hover,
.hancock #Header .gallerylogo {
	background-color: #bc34ba !important;
}

.hancock h3, 
.hancock h2, 
.hancock h2 a, 
.hancock .selected,
.hancock a:hover {
	color: #bc34ba !important;
}

/* blue is adam */
.adam .imageblock,
.adam p a.readmore:hover,
.adam #Header .gallerylogo {
	background-color: #289CE8 !important;
}

.adam h3, 
.adam h2, 
.adam h2 a,
.adam .selected
.adam a:hover {
	color: #289CE8 !important;
}

/* blue is square */
.square .imageblock,
.square  p a.readmore:hover,
.square #Header .gallerylogo {
	background-color: #728995 !important;
}

.square h3,
.square h2,
.square h2 a,
.square .selected,
.square  a:hover  {
	color: #728995 !important;
}

/* pink is north, south, east, west */
.north .imageblock,
.east .imageblock,
.south .imageblock,
.west .imageblock,
.north  p a.readmore:hover,
.east  p a.readmore:hover,
.south  p a.readmore:hover,
.west  p a.readmore:hover {
	background-color: #d30044 !important;
}

.north h3,
.east h3, 
.south h3, 
.west h3,
.north h2,
.east h2, 
.south h2, 
.west h2,
.north h2 a,
.east h2 a, 
.south h2 a, 
.west h2 a {
	color: #d30044;
}

/* pink is north, south, east, west */
.entire .imageblock,
.entire  p a.readmore:hover  {
	background-color: #d30044 !important;
}

.entire h3,
.entire h2,
.entire h2 a {
	color: #d30044;
}

 
 
 
/* Misc Styles and defaults 
-------------------------------------------- */
  
* {
	 outline: 0 none;
	 margin: 0;
	 padding: 0;
}

body {
     background: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #555;
	text-align: center;
	padding: 0;
	margin: 15px 0 0 0;
	}

img,
a img {
	border: 0 none;
}

a, 
a:active,
a:link,
a:visited {
	color: #d30044;
	text-decoration: none;
}

a:hover {
	text-decoration: none !important;
	color: #555;
}

ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}


table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}

.clear{
	clear:both;
}

/* CONTAINER
----------------------------------------- */
#BgContainer {
	position: relative;
	display: block;
	width: 900px;
	margin: 0 auto;
	text-align: left;
    background: url(../images/main-menu-bg.gif) 0px 150px no-repeat;
    padding: 0 25px;
}
#Container, #container { 
	width: 900px;
	padding-bottom: 15px;
}
#Layout {

}
#Content {
	width: 600px;
	float: left; 	
	margin: 0;
	text-align: left;
    padding: 40px 0px 40px 0;
}


/* HEADER
----------------------------------------- */
#Header { 

}
 	#Header h1 { 
	  	color: #fff; 
		font-size: 3.2em; 
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 300;
		padding: 20px 0 0 30px;
	}
	#Header p {
		font-size: 1.4em;
		color: #fff;
		clear: left;
		margin: 0 0 0 100px;
	}

/* MAIN NAVIGATION - TABS
----------------------------------------- */
#Navigation {
}
	#Navigation ul { 
	   display: block;
      height: 50px;
	}
		#Navigation ul li { 
			display: inline;
			cursor: pointer;
		}
  			#Navigation ul li a { 
				padding: 0 20px 0 0;
				text-decoration: none;
				color: #555;
				font-weight: bold;
				font-size: 12pt;
				text-transform: lowercase;
				cursor: pointer;
			}
    
/* BREADCRUMBS
-------------------------------------------- */
#Breadcrumbs { 
 	position: absolute;
    top: 200px;
    color: #B7C0C5;
	text-align: left;
	font-size: 0.9em; 
	margin: 0 5px 0px 0;
    padding-bottom: 10px;
    width: 700px;
}
	#Breadcrumbs p {
		margin: 0;
	}
    
    #Breadcrumbs p a {
        color:#d30044;
    }


/* SIDEBAR
-------------------------------------- */
#Sidebar { 
 	width: 200px; 
	float: right;  
	margin: 40px 0 0 0;
	padding: 0;
    border-left: 1px solid #ccc;
}
	#Sidebar ul {
		margin: 0;
        padding: 0;
	}
		#Sidebar li {
			margin: 8px 0;
			list-style: none;
		}
	#Sidebar h3 { 
		display: none;
	}
	
	#Sidebar a em {
		font-style: normal;
	}
	#Sidebar p {
		font-size: 11px;
	 	clear: both;
	 	margin: 10px 10px 0 10px;
	}
	
	/* MENU2 */
    ul#Menu2 li { 
    	font-size: 10pt; 
    	margin: 0;
        list-style: none;
    }
    	ul#Menu2 li a {
            display: block;
            width: 196px;
            font-size: 10pt;
            line-height: 14pt;
            color: #555;
            border-top: 1px dashed #ccc;
            padding: 8px 0;
            background: #fff !important;
      	}
			ul#Menu2 li em {
				padding-left: 8px;
				display: block;
			}
				ul#Menu2 li li em {
					padding-left: 0;
				}
      	/* Level 1 
      	- We use 3 elements for the nav to get 3 background images applied.
            * span - topleft rounded corner
            * em - bottomleft rounded corner
            * a - arrow on the right
            <a><span><em></em></span></a>
      	*/
      	ul#Menu2 li a:hover,
      	ul#Menu2 li a.current,
      	ul#Menu2 li a.current:hover {
        	color: #666;
			cursor: pointer;
            text-decoration: none;
      
      	}
	  	ul#Menu2 li a.current {
            color: #d30044;
	  	}
      	ul#Menu2 li a.section,
      	ul#Menu2 li a.section:hover {
            width: 193px; 
      	}
      	ul#Menu2 li a.levela:hover span,
      	ul#Menu2 li a.current span,
      	ul#Menu2 li a.section span,
      	ul#Menu2 li a.section:hover span,
      	ul#Menu2 li a.current:hover span {
			color: #d30044;
		} 
		ul#Menu2 li a.levela:hover em,
		ul#Menu2 li a.current em,
		ul#Menu2 li a.section em,
		ul#Menu2 li a.section:hover em,
		ul#Menu2 li a.current:hover em {
        	color: #d30044;
      	}
      		ul#Menu2 li ul {
            	
      		}
      			ul#Menu2 li ul li a{
                         font-size: 8pt;
                         width: 188px;
                         border-top: 0 none;
                         margin: -3px 0 0 14px;
                         padding-top: 0;
                               			}
      				ul#Menu2 li ul li ul {
            			
      				}	
      
					ul#Menu2 li li a.current,
      				ul#Menu2 li li a.section,
      				ul#Menu2 li li a.section:hover,
      				ul#Menu2 li li a.current:hover {
            			

      				}
      					ul#Menu2 li li ul {
            				
      					}
      					ul#Menu2 li li ul .roundWhite {
            				
      					}
      			
			/* Sub Menu */
      		ul#Menu2 li a.levelb {
   
      		}
	  		ul#Menu2 li a.levelb:hover,
      		ul#Menu2 li li a.current,
      		ul#Menu2 li li a.current:hover,
      		ul#Menu2 li li a.section,
      		ul#Menu2 li li a.section:hover {
    
      		}
      		ul#Menu2 li a.levelb:hover span,
      		ul#Menu2 li li a.current span,
      		ul#Menu2 li li a.current:hover span,
      		ul#Menu2 li li a.section span,
      		ul#Menu2 li li a.section:hover span {
            	
      		} 	
      		ul#Menu2 li a.levelb:hover em,
      		ul#Menu2 li li a.current em,
      		ul#Menu2 li li a.current:hover em,
      		ul#Menu2 li li a.section em,
      		ul#Menu2 li li a.section:hover em {
            	
      		}
      		

/* COMMENTS
---------------------------------------- */
#CommentHolder ul {
	list-style: none;
	margin: 20px 0;
}
#PageComments li {
	margin: 5px 0;
	padding: 1px;
	width: 88%;
}
	#PageComments li.odd {
		background: #E8F6FF url(../images/commentBg.png) no-repeat 1% 10%;
		padding-left: 40px;
		padding-right: 10px;
		border-bottom: 2px solid #BCE4FE;
	}
	#PageComments li.even {
		background: #fff url(../images/commentBgAlt.png) no-repeat 99% 10%;
		padding-right: 40px;
		padding-left: 10px;
	}

		#PageComments li.odd p.info {
			color: #3AA0C3;
		}

		.actionLinks li {
		   display: inline;
		   border-right: 1px solid #ddd;
		}
			.actionLinks li a {
				padding-right: 3px;
				font-size: 10px;
			}
   			.actionLinks li.last {
      			border-right: none;
   			}

.commentrss {
	background: transparent url(../images/feed-icon-14x14.png) no-repeat;
	padding-left: 20px;
	font-size: 1.1em;
	line-height: 1.6em;
}
#PageCommentsPagination p {
	text-align: center;
	font-size: 1.2em;
}
#PageComments p {
	font-size: 1em;
}
	#PageComments p.info {
		color: #999;
		margin: 0px;
		padding: 0;
		line-height: 1em;
		font-size: 0.9em;
	}

/* SEARCH RESULTS STYLES
------------------------------------------------ */
ul#SearchResults {
	margin: 10px 0;
}
	ul#SearchResults li {
		list-style: none;
		margin: 5px 0;
		font-size: 1em;
	}

/* SEARCH FORM 
-----------------------------------------------*/

div#searchbox {
    margin: 0; height: 0;
}
div#searchbox .middleColumn {
     position: absolute;
     width: 150px;
     background: none;
     padding: 0;
     margin:0;
     right: 0;
     top: 145px;
     }

div#searchbox input#SearchForm_SearchForm_Search {
	position: absolute;
    right: 56px; 
    border: 1px solid #ccc;
	height: 14px;
	padding: 3px;
	color: #999;
	margin: 0;
    width: 150px;
    font-weight: normal;
}

div#searchbox input#SearchForm_SearchForm_action_results {
    position: absolute;
    top: 145px;
    right: 28px;
    border: 1px solid #999;
	background: #999;
	width: 28px;
	height: 22px;
    margin: 0;
	background: #9e9e9e url(../images/searchgo.gif) center 1px no-repeat;
	font-size:0px;
}

/* MESSAGEBOXS
--------------------------------------------- */
.message {
	margin: 15px;
	padding: 5px;
	width: 92%;
	color: #979908;
	border: 4px solid #F7F8B4;
	background: #FFFFEA;
}
span.middleColumn .message {
	margin: 4px 0 0 3px;
}
.required {
	margin: 4px 0 0 3px;
	padding: 5px;
	width: 92%;
	color: #DC1313;
	border: 4px solid #FF7373;
	background: #FED0D0;
}



p#Remember label {
	margin: -24px 0 0 20px;
	text-align: left;
}
.entry {
	border-bottom: 1px solid #eee;
}

.typography #Content p.authorDate {
	color: #444;
	margin-top: -15px;
	}
	
	
/* UNSUBSCRIBE NEWSLETTER
------------------------------------------------ */
#Unsubscribe_MailingListForm_MailingListForm{
	min-height:100px;
}

	#Unsubscribe_MailingListForm_MailingListForm p{
		margin:0 !important;
		padding:10px;
	}
		#Unsubscribe_MailingListForm_MailingListForm p label{
			display: inline;
		}
	#Unsubscribe_MailingListForm_MailingListForm label{
		margin:0;
	}


/* FOOTER
----------------------------------------------- */

hr.divider { color: #fff; border: 0; clear: left;}

div#footercontacts {
	background: #F2F2F2;
	padding: 10px 20px;
	display: block;
	height: 150px;
		color: #999;
} 

div.footerblock {
	float: left;
	display: block;
	width: 210px;

}
div.copyright {
	text-align: right;
}

div#socialnetworks {
	border-top: 1px solid #ccc;
}

div#socialnetworks a {
	color:#333;
}

div a#facebook {
	display: block;
	width: 223px;
	height: 45px;
	background: url(../images/facebook.gif) left 9px no-repeat;
	}
	
div a#facebook:hover {
	background: url(../images/facebook-over.gif) left 9px no-repeat;
}

#socialnetworks div {
	margin-top: 20px;
	width: 240px;
	#width: 225px;
	float: left;
	}
	
#socialnetworks div.last {	
	display: block;
	width: 100px;
}

#socialnetworks div h4 {	
	margin: 0;
	padding: 0;
}
	
#socialnetworks div p {
	width: 175px;
	color: #999;
	font-size: 9pt;
	}

div a#twitter {
	display: block;
	width: 223px;
	height: 45px;
	background: url(../images/twitter.gif)  left 10px no-repeat;
	}
	
div a#twitter:hover {
	background: url(../images/twitter-over.gif)  left 10px no-repeat;
}

div a#youtube {
	display: block;
	width: 223px;
	height: 45px;
	background: url(../images/youtube.gif) left 3px no-repeat;
	}
	
div a#youtube:hover {
	background: url(../images/youtube-over.gif) left 3px no-repeat;
}

div a#newsletter {
	display: block;
	width: 223px;
	padding-top: 15px;
	height: 30px;
	color: #ccc;
	font-size: 16pt;
	text-decoration: none;
	}
	
div a#newsletter:hover {
	color: #d30044;
	}

div#footer {
	margin-top: 40px;
}

div#footermenu a,
div#footer a {
    color: #999 !important;
}

div#footer a:hover {
    text-decoration: none;
    color: #333 !important;
}

div#footermenu {
	display: block;
	height: 20px;
	margin-top: 40px;
}
div#footermenu li {
	display: inline;
	padding: 0 15px 0 20px;
	background: url(../images/bullet-grey.gif) 0px 5px  no-repeat;
}

div#footermenu li.first {
	background: none;
}


/* cgw images */
div#heroimage {
	width: 900px;
	height: 320px;
	display: block;
	margin-bottom: 15px;
	margin-top: -10px;
	overflow: hidden;
	position: relative;
	height: 319px;
}

div#galleryblock div.promo {
    display: block;
	width: 420px;
	float: left;
	padding-bottom: 20px;
	position: relative;
	margin-right: 40px;
	
	cursor: pointer;
}

div#galleryblock div.promo h3 {
	margin: 10px 0 5px 0;
	padding: 0;
	font-size: 12pt;
    font-weight: bold;
}

div#galleryblock div.promo  h6 {
	text-transform: lowercase;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	-webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
	color: #fff;
	font-size: 13pt;
	position: absolute;
	z-index: 10;
	right: -60px;
	#right: 2px;
	top: 60px;
	#top: 10px;
	width: 120px;
	display: block;
	height: 14pt;
	margin: 0;
	padding: 0;
}

div#galleryblock div.square h6 {
	right: -40px;
	#right: 5px;
	}
	
sup {
	font-size: 10pt;
	}

div#galleryblock div.promo p {
	margin: 0;
	padding: 0;
	font-size: 9pt;
	width: 400px;
}

#galleryblock .right {
	text-align: left;
	margin-right: 0 !important;
	}
	
.content p {
     #position: relative;
     #top: -10px;
}

a.readmore  {
	white-space:nowrap; 
	text-transform: lowercase;
    background: #c1c1c1 url(../images/readmore.png) top right no-repeat;
	text-decoration: none;
	color: #fff !important;
	font-size: 8pt;
	padding: 1px 12px 1px 4px;
	position: relative;
	top: -1px;
	left: 5px;
	#display: inline-block;
	#line-height: 14px;
	#top: 1px;
}

div.imageblock {
	position: relative;
    height: 140px;
    width: 440px;
	background: #d30044;
}

div.imageblock img {
    border-right: 1px solid #fff;
}

div.imageblock h4 {
    display: none;
}

hr.divider { color: #fff; border: 0; clear: left;}

/* Exhibition List */

div.exhibit {
	border-top: 1px solid #ccc;	
	padding: 15px 40px 40px 0;
	min-height: 100px;
	display: block;
	width: 620px;
}

div.exhibit .thumbnail {
	float: left; 
	width: 140px;
	margin: 0 15px 0 0 !important;
	padding: 0 !important;
	border-top: 0 none !important;
}

div.exhibit h2 {
	font-size: 18pt;
	margin: 0 0 0 155px; padding: 0;
	font-weight: bold;
}

div.exhibit p {
	margin: 10px 0 0 155px;
	padding: 0;
	font-size: 9pt;
	line-height: 16pt;
}

div.exhibit p.date {
	margin: 0 0 0 155px;
	padding: 0;
	font-size: 10pt;
	color: #666;
	line-height: 10pt;
}

#imagetray {
    position: absolute;
    width: 900px;
}

#imagetray img,
#imagetray a img{
    padding: 0; 
    margin:0;
}



/* Event pages */

div.event h3 {
	font-size: 14px;
	}
	
	div.event p {
	margin: 0 4px;
	}
	
div.event {
	border-top: 1px solid #ccc;	
	padding: 15px 40px 5px 0;
	display: block;
	width: 620px;
}

div.event a {
	color: #666 !important;
}

div.event img {
	float: left;
	}
	
.textelement {
	margin-left: 170px;
	width: 550px;
	display: block;
	clear: left;
	}


/* News pages */

ul.newsitems {
	margin: 0;
	padding:0;
}
	
	
ul.newsitems li a {
	margin: 0;
	color: #666;
	margin-left: 40px;
	position: absolute;
}


ul.newsitems li {
	border-bottom: 1px solid #ccc;
	padding:10px 0;
	margin: 0 -20px 0 -20px;
	font-size: 9pt;
}

ul.newsitems li {
	color: #999 !important;
}



/* Standard event page */

#LightboxSidebar {
	float: left;
	padding: 0;
	}
	
#LightboxSidebar a, #LightboxSidebar a img {
	margin: 0;
	padding: 0;
}

#LightboxSidebar p {
	width: 160px;
	}

#LightboxSidebar p {
	display: block;
	font-size: 10px;
	line-height: 12px;
	margin:0 15px 10px 0;
	}
	
#bodycontent {
	margin-left: 160px;
	border-left: 1px solid #ccc;
	padding-left: 20px;
	padding-bottom: 40px;
	}


#bodycontent h2, #Content h2, #topcontent h2 {
     font-weight: bold;
     font-size: 24px;
     margin-bottom: 0;
	}
	
#exhibitionmainimage {
  display: block;
  width: 680px;
  overflow: hidden;
  margin: 0 0 15px 0;
  padding: 0;
  }

#exhibitionmainimage img {
  display: block;
  width: 680px;
}

#bodycontent h5 {
     color: #333;
     font-size: 12px;
     font-weight: normal;
     margin: 2px 0 25px 0;
	}

#topcontent img {
	margin: 0 20px 20px 0;
	float: left;
	}
	
#Newsletter {
	display: none;
	padding: 40px;
	background: transparent url(../images/newsleter-bg.png) top left no-repeat;
	width: 420px;
	height: 350px;
	position: fixed;
	z-index: 100;
	#position: static;
	
	}
	
#closenewsletter {
    display: block;
     float: right;
     width: 40px;
     height: 40px;
     margin: -35px -35px 0 0; 	
}

#SearchResults li {
	padding:15px 0;
	width: 650px;
	border-bottom: 1px solid #ccc;
}

#SearchResults li h3, 
#SearchResults li p{
	margin: 0 0 4px 0;
	padding:0;
}

#topcontent h2 {
	margin-bottom: 10px;
	}

#topcontent ul,
#topcontent li {
	margin: 0 0 10px 15px;
	padding:4px 0 ;
	font-size: 12px;
	}

#topcontent li {
    list-style-type: square;
    margin: 0;
	}