/** 
 * 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%;    
    background-color: white;
}

body#MainBody {
    background: url(images/outside-gradient.png) repeat-y center #D2E2EE; 
}

html {
	/* background: #626467 url(../images/bg.gif) repeat; background: #F6F1D6;        */
    witdh: 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;
}

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

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

#page_top_spacer{
    height:20px;
}

#LeftBack {    
    width: 1024px;        
    height: 149px;    
    position: absolute;
    z-index: 0;
    background: white url(images/header_background_2.jpg) no-repeat;    
}

/* CONTAINER
----------------------------------------- */

#HeaderStripe{
    position: absolute;    
    height:10px;    
    width:100%; 
    top:73px;
    
}

#ContainerOuter {
    width: 1024px;        
    min-height: 100%;
    height: auto !important;	
    height:100%;
    background: white;
    margin: 0 auto;         
}

#Container { 	    
    width: 1024px;        
    min-height: 100%;
    height: auto !important;	
    margin: 0 auto;         
    background: white url(images/sidebar_background_2.jpg) no-repeat;
}

    #ContainerInner {          
        margin: 0 auto;   
        margin-left: 266px;
    }


#Layout {	      
	margin: 10px 0 0 0;    
    text-align: left;     
    padding: 10px 20px 80px 20px;
    min-height: 640px;
}

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

#SideBarA {
    position:relative;
    float:left;
    width:100px;
    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 {          
    width: 758px;
    height: 144px;
    position: relative;     
	overflow: visible;    
}
    #SiteTitleContainer {        
        width: 758px;
        height: 104px;        
        position: relative;
    }

 	#header h1 { 	  		
        position: absolute;
        top: 22px;        
        left: -999em;
	}
    
	#header p {		
		clear: left;	        
	}      
    

    
#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 {	        
	overflow: hidden;
    position: absolute;
    top: 111px;
    display: table; /* Stretchs div to fit contents. May not work on IE. */
    margin-left: 2px;
}
	#Navigation ul {  	        
		margin: 0 auto;
	}
		#Navigation ul li { 
	 		list-style: none; 
			margin: 0; 
			float: left;			
			display: block;
            margin-right: 10px;
		}
  			#Navigation ul li a { 
				float: left;
				text-decoration: none;
				display: block; 
				height: 2.3em; 				
				padding: 0 0 0 0;
			}
				#Navigation ul li a span {
					text-align: center;
	        		float: left;
					padding-right: 10px;
					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-top: 10px;
    margin-bottom: 20px;
    display: block;
    border-bottom: #5F5348 solid 1px;
    overflow: visible;
}
	#SubNavigation ul {  	                
        display: inline;  
        overflow: visible;
        
	}
		#SubNavigation ul li { 
            top:1px;
            position: relative;	 		                        
            padding: 5px 0 0 0;
            margin: 0 5px;            
            float:left;
            height: 16px;
            overflow: hidden;
            border:1px #5F5348 solid;            
            background : #CED7DD;
            
		}
        
        #SubNavigation ul li:hover { 
            margin-top:-5px;
            padding-bottom: 5px;      
            background : white;
        }
        
        #SubNavigation ul li:first-of-type {             
            margin-left: 30px;            
		}
        
        #SubNavigation ul li:last-of-type {             
            margin-right: 30px;
		}
        
            #SubNavigation ul li a{ 
                position: relative;                
                line-height: 12px;
                padding: 50px 10px 50px 10px;                
            }
            
            #SubNavigation ul li a:hover {                                
                text-decoration: none;                
			}
            
  			#SubNavigation ul li.link a {                				
                
			}
            
            #SubNavigation ul li.current {
                background : white;
                border-bottom:1px white solid;                
			}
            
            
            
            
            
            #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: -160px;
}

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

#Footer {     
 	clear: both;  	
    color: #444444; 
    font-size: 1em;
    width:1024px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding-bottom: 2px;
    background: transparent;
}

    #Footer .InnerContainer {
        margin: 0 20px;
        padding-top: 130px;
    }

    #FooterImage {
        width: 1024px;
        height: 95px;
        background: transparent url(images/footerA.jpg) no-repeat;
    }
    
    #FooterImageB {
        width: 1024px;
        height: 399px;
        background: transparent url(images/footerB.jpg) no-repeat right top;
    }

    #logo_container {
        position: absolute;
        right: 0;
        margin-right: 20px;
        width: 189px;
        heigh: 200px;
    }

.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;
}

#footer_logo_image {
    margin: 0 auto;
}

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

.fb-like{
    display:inline-block;
}

div.TwitterButton {
    display: inline-block;
    margin-left: 0.5em;
}


/* Custom layout tweaks for specific page types. 
----------------------------------------------- */

#Layout .DefaultCMSPage img {
    margin: 7px 0;
}

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

.PaperTextureOverlay {    
    pointer-events: none;    
    background: url(images/texture_overlay.png) repeat;            
    position:absolute;    
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;    
}

.PaperTextureOverlay-Compatible {
    pointer-events: none;    
    background: url(images/texture_overlay.png) repeat;
    position:absolute;    
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;    
}