/*MAIN CSS FILE FOR THE NEW CHILDREN'S MUSEUM*/

@import url('bootstrap.min.css');

/*Global*/

body{
	margin:0;
	padding:0;
	background: #aaa;
	color:#666;
	font-family: Helvetica, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin:0;
	line-height: 1em;
}

h1{
	margin-bottom:10px;
	color:#D10074;
	font-size:20px;
	padding:0;
}

h2{
	margin-bottom:10px;
	color:#D10074;
	font-size:16px;
}

h3{
	margin-bottom:5px;
	font-size:14px;
}

h4{
	margin-bottom:5px;
	font-size:12px;
}

ul + h3,p + h3,
ul + h4,p + h4{
	margin-top:20px;
}

p{
	line-height: 1.35em;
}

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

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

a:active {
	text-decoration: underline;
	color: #D10074;
}

hr{
	margin:15px 0;
	border-top:0px solid #fff;
	border-bottom: 1px dotted #666;
}

tbody{border:none;}

iframe{
	border:0;
}

/*=========================================================
 *	LAYOUT
 *  Page Wrap, Header, Columns, Footer
 *=========================================================*/


#page-wrapper,#user-bar .bar-wrapper{
	margin:0 auto;
	max-width:850px;
	width:850px;
}

#user-bar{
	height:30px;
	width:100%;
	background: #ccc;
}

#user-bar .block{
	margin:5px 5px 0;
}

/* ___HEADER_________________
 * Elements that fall in the Header are included here
 */

#header{
	position:relative;
	height:180px;
	width:100%;
	background: url(../images/page_header.png) no-repeat;
}

#header #logo{
	position:absolute;
	top:25px;
	left:15px;
	display: block;
	width:210px;
	height:80px;
	background: url(../images/ncm_logo.png) no-repeat;
	text-indent: -9999999px;
}

/* Remove odd h1 margin from homepage*/
.front #header h1{
	width:210px; /*Fix for Firefox*/
	display:block;
	margin:0;
}


/* ___COLUMN WIDTHS_________________
 * Column Widths and Styles
 */

#content{
	padding:15px 0;
	position:relative;
	width: 100%;
	background: #fff;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	-khtml-border-radius: 10px; /* for old Konqueror browsers */	
}

#left-column,
#content-column,
#right-column,
#right-column,
#left-column-a,
#left-column-b,
#right-column-a,
#right-column-b{
	display:inline-block;
	padding-top:10px;
	vertical-align: top;	
}

#content-column{
	width: 510px;
	min-height:500px;
}

.ncm-three-column #left-column{
	width:140px;
	padding:10px 10px 10px 15px;
}

.ncm-three-column #right-column{
	width:140px;
	padding:10px 15px 10px 10px;
}

.ncm-three-column #content-column{
	border-left: 1px dotted #666;
	border-right: 1px dotted #666;
}

/* ___CONTENT COLUMN STYLES_________________
 * Styles defined the for elements inside .content-column
 */

#content-column{
	padding-bottom:15px;
	font-size: 12px;
}

#main-content{
	padding:0;
}

/*Because the designers cried they wanted blocks that
have no margins, we have to define blocks that have margins/paddings*/

#content-column .panel-pane .node,
#content-column .panel-pane .entity-bean,
#content-column .panel-pane .view,
#content-column .panel-pane.pane-custom,
#content-column .panel-pane .fieldable-panels-pane
{
	margin:0;
	padding:0 15px;
	line-height: 18px;
	font-weight: normal;
}

#content-column .panel-pane{
	margin-bottom:15px;
}

#content-column .panel-pane > .pane-title{
	padding:0 15px;
}

.node-body ul{
	margin: 0 0 15px 10px;
	padding: 0;
	list-style: none;
}

.node-body ul li{
	padding: 0 0 2px 12px;
	text-indent: -10px;
	line-height: 1.5em;
}

.node-body ul li:before{
	content:">";
	padding-right:3px;
	color: #D10074;
	list-style: none;
}

.node-body p > img,
.node-body > img{
	padding:0 10px 5px 0;
	max-width:480px;
}

.node-body p:empty{
	display:none;
	margin:0;
}

.node-body *:last-child{
	margin:0;
}

.node-body table{
	width:100%;
	max-width: 480px !important;
	padding:0 15px 15px 0;
	border:0;
	border-collapse: separate;
}

.node-body table tbody{
	border:0;
}

.node-body table.two-col-50-50{
}

.node-body table.two-col-50-50 td{
	width:50%;
	vertical-align: top;
}

.node-body table.two-col-50-50 td:first-child{
	border-right:15px solid #fff;
}

/* ___LEFT COLUMN STYLES_________________
 * Left Column Styles
 */

#left-column h2{
	margin: 0 0 5px;
	color:#999;
	font-size: 12px;
	line-height: 1em;
}

/* ___RIGHT COLUMN STYLES_________________
 * Right Column Styles
 */

#right-column h2{
	color: #999;
	font-size: 14px;
	text-transform: uppercase;	
	margin: 0 0 5px;
	line-height: 1em;
}

#right-column hr{
	margin:15px 0;
	border-top:0px solid #fff;
	border-bottom: 1px dotted #666;
}
/* ___FOOTER STYLES_________________
 * Footer Styles
 */

#footer{
	height:100px;
	margin: 10px 0;
}

 /*=========================================================
 *	MISC
 *  
 *=========================================================*/

.left-padding{
	padding-left: 15px
}

.right-padding{
	padding-left: 15px
}

.no-padding{
	padding:0;
}

.inline{
	display: inline-block;
}

 .align-left{
 	float:left;
 }

 img.align-left,.header-banner img{
 	padding:0 15px 15px 0;
 }

.photo-credits{
	font-family: Helvetica,sans-serif;
	font-size: 11px;
	font-style: italic;
	line-height: 1em;
	color: #666;
}

.page-toolbox{
	display:table-caption;
	padding: 5px 10px;
	background: #fff;	
}

#messages{
	padding: 5px 10px;
	background: #fff;
}

#tabs ul.primary{
	border:none;
}

.view-exhibition-listing{
	margin-top:25px;
	padding: 0 15px;
}

.view-exhibition-listing .view-content > div{
	clear:both;
	margin-bottom:25px;
}

.view-exhibition-listing .view-content > div > a{
	display:block;
	float:left;
	width: 120px;
}

.view-exhibition-listing .view-content > div > a + h4,
.view-exhibition-listing .view-content > div > p{
}

/* ___STATUS MESSAGES_________________
 * Styles for Status Messages
 */

#messages {
	margin-bottom: 10px;
	padding: 0;
}

div.messages {
	background-position: 8px 13px;
	margin:0;
	padding: 15px 10px 15px 50px;
}

/* ___FEAST STYLING_________________
 * Styles related to the FEAST Exhibtion
 */

.wood-border-top:before,
.wood-border-bottom:after{
	width:100%;
	max-width:510px;
	height:15px;
	content: ' ';
	display:block;
	background-image:url(../images/woodborder.jpg);
}

/* ___COLORBOX POPUP Versailles_________________
 * Content styles for Colorbox slides for the Versailles theme
 */

#slide-page{
	width:680px;
	height:448px;
	padding:25px 30px;
	position: relative;
	background-image: url(../images/colorbox_slidebg.jpg);
	background-repeat:no-repeat;
}

#slide-page .slide-photo{
	float:left;
	width:340px;
	height:419px;
	margin-right:40px;
	border:15px solid #333;
}

#slide-page div{
	color:#fff;
}

#slide-page .slide-name{
	padding: 55px 0 5px;	
	font-size: 14px;
	font-weight: bold;
}

#slide-page .slide-subtitles{
	font-style: italic;
	font-size:12px;
}

#slide-page .slide-description{
	padding-right:35px;
	font-size:12px;
}

#colorbox.versailles #cboxLoadedContent{
	border: 0px solid #000;
}

#colorbox.versailles #cboxClose{
	top: 25px;
	right: 40px;	
	width: 24px;
	height: 24px;	
	background: url(../images/colorbox_versallis_controls.png) no-repeat top center;
}

#colorbox.versailles #cboxPrevious{
	left:30px;
	background: url(../images/colorbox_versallis_controls.png) no-repeat top left;		
}

#colorbox.versailles #cboxNext{
	right:30px;
	background: url(../images/colorbox_versallis_controls.png) no-repeat top right;	
}

/***
 *  THE I LOVE IE7 CODE
 *******/

.ie7{margin-top:50px;}

.ie7 #compatibility-warning{
	position:fixed;
	top:0;
	height:40px;
	padding:10px 40px;
	background: #08a4dd;
	color:#fff;
	font-size: 14px;
	border-bottom:3px solid #ccc;
}

.ie7 #compatibility-warning p{
	width:80%;
	margin: 10px auto;
}

.ie7 #compatibility-warning .icon{
	float:left;
	width:32px;
	margin-bottom: 20px;
	padding-right:30px;
}

.ie7 #user-bar{display:none;}

.ie7 #ncm-home #right-column-b{
	width:160px;
}

.ie7 #left-column, .ie7 #content-column, .ie7 #right-column, .ie7 #right-column, .ie7 #left-column-a, .ie7 #left-column-b, .ie7 #right-column-a, .ie7 #right-column-b {
	display:block;
	float:left;
}

.ie7 h1{clear:both;}

.ie7 #footer #social-media-footer .menu > li,
.ie7 #breadcrumbs li { display:block; float:left;}
.ie7 #breadcrumbs li { margin-right:10px;}

.ie7 .view-education-filter .view-header{display:none;}

.ie7 .view-education-filter #filtered-results .item{display:block;}
.ie7 .view-education-filter .ncm-pager .content li { display:block;float:left;}

.ie7 .grid-colorbox,.ie7 .grid-listing-block{
 	background-color: #fff;
	background-image: none;
}
.ie7 .grid-colorbox li,.ie7 .grid-listing-block li{
 	width:170px;
 	position: relative;
 }

.ie7 .grid-colorbox li .photo-label,
.ie7 .grid-listing-block li .photo-label {
position: relative;
bottom: auto;
width: 100%;
color:#000;
}