/** 
 * SilverStripe Black Candy Theme
 * http://www.silverstripe.com
 *
 * Main Layout File
 */
 
/* Misc Styles and defaults 
-------------------------------------------- */
  
* {
	margin: 0;
	padding: 0;    
}

body {
	color: #000; 	    
    width: 100%;        
    position: absolute;
    height: 100%;
    
}

html {
	/* background: #626467 url(../images/bg.gif) repeat; background: #F6F1D6;        */
    
    /* background: #f00 url(../images/chrome/paper-tile.jpg) repeat; */
    width: 100%;
    height: 100%;
}

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

.clear{
	clear:both;
}

a {
    color: #444444;   
    text-decoration: none;
}

a:hover {
    color: #444444;   
    text-decoration: underline;
}

hr {
    margin: 2px 0 6px 0;
}

p {
    margin: 2px 0 0.6em 0;
}

.pos-center {
    display: block;
    margin: 0 auto;
}

/* Background Page Graphics
----------------------------------------- */

#BgGraphicsWrapper {        
    width: 100%;        
    position: absolute;
    text-align: center;
}

#page_top_spacer{
    height:20px;
}

/* CONTAINER
----------------------------------------- */
#Container { 	
    width:100%;
    min-width: 732px;    
    min-height: 100%;
    height: auto !important;	
    margin: 0 auto; 
    text-align: center;
    background: url(images/background_tile.jpg) repeat;    
    
    
}

#Layout {	
    min-height: 300px;
	margin: 0 auto;
    margin-bottom: 80px;    
    text-align: left;     
}

#Content {	
	float: right; 	
	margin: 0;
	text-align: left;
}

#SideBarA {
    position:relative;
    float:left;
    width:135px;
    overflow: hidden;
}

#MainColumn {
    margin-left: 150px;
}

/* HEADER
----------------------------------------- */

/* When using a background header image, we need to 
   force the header to be the same size as the image. 
   "head_hack". There might be cleaner ways to do it
   if the layout was fiddled with. But perhaps this will do. */
.header_hack {
    height: 362px; /* same height as header image.  */   
    margin: 0 auto 10px auto;    
}

.header_hack2 {
    margin: 0 auto 60px auto;    
}

#header {          
    position: relative;     
	overflow: visible;
    text-align: center;
    margin: 0 auto 20px;
}
    #header #SiteTagLine{
        position: absolute;
        width : 100%;
        top:4px;

    }
    #HeaderImage {
        width: 732px;
        height: 103px;
        margin:0 auto; 
        background: url(images/header.png);

    }

 	#header #Navigation { 	  			
        position: relative;
        top:-22px;
	}
    
	
    

    
#header_background {      
    position: absolute;
    width: 100%;
    text-align: center;    
}

#header_background .inner {
    position: relative;
    text-align: center;
}
    
#EstablishedTextContainer {
    text-transform: uppercase;
    margin-top: 20px;
}

#EstablishedTextContainer img {    
    top: 3px;
    position: relative;
}

#EstablishedText {        
    position: relative;
}



/* MAIN NAVIGATION - TABS
----------------------------------------- */
#Navigation {	
	margin: 0 auto;	
	overflow: hidden;
    position: relative; 
    display: table; /* Stretchs div to fit contents. May not work on IE. */
}
	#Navigation ul {  	        
		margin: 0 auto;
	}
		#Navigation ul li { 
	 		list-style: none; 
			margin: 0 2px; 
			float: left;			
			display: block;
		}
  			#Navigation ul li a { 
				float: left;
				text-decoration: none;
				display: block; 
				height: 2.3em; 				
				padding: 0 0 0 6px;
			}
				#Navigation ul li a span {
					text-align: center;
	        		float: left;
					padding-right: 6px;
					height: 1.3em;
				}
					#Navigation ul li a:hover { 						
						cursor: pointer;                        
					}
					#Navigation ul li a:hover span {						
						cursor: pointer;
					}
					
    			#Navigation ul li a.current,
	    		#Navigation ul li a.section,
	    		#Navigation ul li a.section:hover,
	    		#Navigation ul li a.current:hover { 				 	
				}
				#Navigation ul li a.current span,
				#Navigation ul li a.section span,
	    		#Navigation ul li a.section:hover span,
				#Navigation ul li a.current:hover span {										
				}
                
/* SUB-PAGE NAVIGATION - TABS
----------------------------------------- */
#SubNavigation {	        
    position: relative;	 		
    float: left;
    margin-bottom: 20px;
    display: block;
}
	#SubNavigation ul {  	                
        display: inline;  
        overflow: hidden;
	}
		#SubNavigation ul li { 
            position: relative;	 		
            padding: 0;
            margin: 0;            
            float:left;
		}
        
            #SubNavigation ul li a{ 
                position: relative;
                top:-2px;
                padding: 3px 10px 0px 10px;                
            }
            
            #SubNavigation ul li a:hover {
                top: -5px;
                padding-bottom: 3px;
			}
            
  			#SubNavigation ul li.link a {                				
                border:1px #5F5348 solid;                                
			}
            
            #SubNavigation ul li.current a {                
                border:1px #5F5348 solid;
                border-bottom: none;                
			}
            
            
            
            
            
            #SubNavigation ul li.MenuSpacer {
                position: relative;
                color: transparent;
                border-bottom:1px #5F5348 solid;
                margin: 0 -1px 0 -1px;
            }
				
            #SubNavigation ul li a:hover { 						
                
            }	
            #SubNavigation ul li a.current,
            #SubNavigation ul li a.section,
            #SubNavigation ul li a.section:hover,
            #SubNavigation ul li a.current:hover { 				 	
            }
            #SubNavigation ul li a.current span,
            #SubNavigation ul li a.section span,
            #SubNavigation ul li a.section:hover span,
            #SubNavigation ul li a.current:hover span {										
            }
 
    
/* BREADCRUMBS
-------------------------------------------- */
#Breadcrumbs { 
 	color: #B7C0C5;
	text-align: left;	
	margin: 0px 5px 10px 0;
}
	#Breadcrumbs p {
		margin: 0;
	}




/* 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;				
			}
   			.actionLinks li.last {
      			border-right: none;
   			}

.commentrss {
	background: transparent url(../images/feed-icon-14x14.png) no-repeat;
	padding-left: 20px;		
}
#PageCommentsPagination p {
	text-align: center;	
}
#PageComments p {	
	margin: 8px 0;
}
	#PageComments p.info {
		color: #999;
		margin: 0px;
		padding: 0;		
	}


#PageCommentInterface_Form_PostCommentForm_action_postcomment {
	margin-bottom: 20px;
}

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

/* SEARCH FORM 
-----------------------------------------------*/
#SearchForm_SearchForm {
	float: right;
	width: 240px;
	margin: 5px;
}
	#SearchForm_SearchForm .middleColumn {
		float: left;
		width: 164px;
		margin: 0 5px 0 0;
		padding: 2px;
		background-color: #51a9df;
	}
	
		#SearchForm_SearchForm .middleColumn input.text {
			width: 160px;
			border: none;
			color: #666;
		}
		
	#SearchForm_SearchForm #SearchForm_SearchForm_action_results {
		float: left;
		margin-top: 2px;
	}

/* 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: 1px dotted #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
----------------------------------------------- */

#Container { 	
    margin-bottom: -235px;
}

#Footer, .push {	
	height: 235px; /* .push must be the same height as .footer */
    clear: both;
}

#Footer { 
 	clear: both;  	
    color: #444444; 
    font-size: 0.85em;    
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.footer-column-left {    
    display:inline-block;
    vertical-align: text-top;
    width:49%;
    float: left;
}

.footer-column-right {    
    display:inline-block;
    vertical-align: text-top;
    width:49%;
    float: right;
    text-align: right;
}



#Footer .InnerContainer {
    position: relative;
    padding-top: 90px;
}

#footer_logo_image {
    margin: 0 auto;
}

.fb-like{
}

div.TwitterButton {
    margin-bottom: 0.3em;
    margin-left: -14px;
}

#CircalStudiosLinkage {
    position: absolute;
    right:0px;
    bottom:0px;
}
#SocialMediaLinks {
    position: absolute;
    left:0px;
    bottom:10px;
}


/* ------- Setting the Page Width ----- */

#header, #Layout, #FooterContent {
    width: 100%;
    min-width:732px;
    max-width:732px;    
    margin: 0 auto;
}

#Footer {
    width: 100%;
    min-width:732px;    
    max-width: 1028px;
    margin: 0 auto;
    
}




/* Special
----------------------------------------------- */

.Crossbar {
    margin: 10px auto;
}




#sfxTopStain {
    position: absolute;       
    top:-20px;
    left:-150px;
    width: 484px;
    height: 281px;
    background: url(images/top-stain.png);    
    pointer-events:none;    
}

#sfxBottomStain {
    position: absolute;    
    height: 423px;
    width: 100%;
    min-width:732px;    
    max-width: 1028px;    
    bottom: 0px;    
    background: url(images/bottom-stain.png);    
    pointer-events:none;
    /* http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements */
}