@charset "UTF-8";
/* CSS Document */


body { color: #333;}
a { color: #fff; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color:#ff0000; font-size:1.6em; margin-bottom:8px; }

h2{font-size:1.2em;}

h3{font-size:1.1em;}

.pad { padding:10px; }
.right { float:right; }
.left { float:left; }

p { overflow: hidden; line-height:1.5em;  }
p a { color:#3c05ff; text-decoration:underline; font-weight:bold; }

.container_12 { background: #fff url(img/12_col.gif) repeat-y; }

.container_16 { background: #fff url(img/16_col.gif) repeat-y; }

/* .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11 { background:#eee; } */

.l1_left {}
.l1_right { background:#c4c4c4; margin-bottom:10px;}
.l1_right span { padding:5px; display:block; text-align:center }

/* This level breks the grid */
.l2_a { float:left; width:482px; margin:10px 0px 10px 0px }
.l2_b { float:left; width:468px; margin:10px 0px 10px 0px; }
.l2_b img { position:relative; top:15px; background:#000; }

/*
.l3 ul {  list-style:none; }


.l3 ul.nav_l1 li {float:left; border-right:1px solid #ccc; margin:0px; font-size:95% }
.l3 ul.nav_l1 li a { color:#6e6e6e; display:block; padding:5px 9px; }
.l3 ul.nav_l1 li.selected { background:#ddd; }

.l3 ul.nav_l2 { clear:left; background:#ddd; height:2.6em;  }
.l3 ul.nav_l2 li {float:left; border-right:1px solid #ccc; margin:0px; }
.l3 ul.nav_l2 li a { display:block; color:#6e6e6e; background:#ddd; padding:9px 9px 5px 9px; font-size:95% }
.l3 ul.nav_l2 li.selected { font-weight:bold; }
*/


.l4_a {}
.l4_b {}
.l4_b h2 { color:#b50053}
.l4_c { text-align:right; background:url("../img/dot.png") top left repeat-y; }



.feature { background:#b50053; padding:10px; margin:0px 0px 10px 0px }
.feature h2 { color:#fff; margin:0px 0px 2px 0px; }
.feature a { color:#000; font-weight:bold; text-decoration:underline; }
.feature1 select, .feature3 select { width:230px; padding:2px; margin:0px 5px 0px 0px  }
.feature dt, .feature a { color:#fff; }
.feature dd { color:#e6a8c4; }

.feature2 { background:#b50053 url(../img/arw.png) top left no-repeat; padding:30px 10px 2px 10px; position:relative; top:-10px }

.feature3 { background:#9cc226; }


.feature1 input.submit { background:#b50053; padding:5px; border-top:2px solid #e6a8c4; border-left:2px solid #e6a8c4; border-right:2px solid #84003d; border-bottom:2px solid #84003d; color:#FFF }
.feature3 input.submit { background:#9cc226; padding:5px; border-top:2px solid #c9f14c; border-left:2px solid #c9f14c; border-right:2px solid #70900d; border-bottom:2px solid #70900d; color:#FFF }



a.story_a { display:block; height:100px;}
a.story_a img { border-right:5px solid #b50053; float:left; margin:0px 10px 10px 0px; }
a.story_a strong {  color:#b50053; }
a.story_a p {  color:#6e6e6e; }




a.story_b { display:block; height:100px;}
a.story_b img { border-right:5px solid #9cc226; float:left; margin:0px 10px 10px 0px; }
a.story_b strong {  color:#9cc226; }
a.story_b p {  color:#6e6e6e; }

a.story_c { display:block; height:100px;}
a.story_c img { border-right:5px solid #fd5974; float:left; margin:0px 10px 10px 0px; }
a.story_c strong {  color:#fd5974; }
a.story_c p {  color:#6e6e6e; }



a.box_a { display:block; }
a.box_a img { border-bottom:5px solid #b50053; margin:0px 0px 10px 0px; }
a.box_a strong {  color:#b50053; font-size:120% }
a.box_a p {  color:#6e6e6e; }

a.box_b { display:block; }
a.box_b img { border-bottom:5px solid #9cc226;  margin:0px 0px 10px 0px; }
a.box_b strong {  color:#9cc226; font-size:120% }
a.box_b p {  color:#6e6e6e; }

a.box_c { display:block; }
a.box_c img { border-bottom:5px solid #fd5974; margin:0px 0px 10px 0px; }
a.box_c strong {  color:#fd5974; font-size:120% }
a.box_c p {  color:#6e6e6e; }

a.box_d { display:block;}
a.box_d img { border-bottom:5px solid #f0b23f;  margin:0px 0px 10px 0px; }
a.box_d strong {  color:#f0b23f; font-size:120% }
a.box_d  p {  color:#6e6e6e; }




/*
.highlight_boxes { width:320px; }
.highlight { width:140px; float:left; margin:0px 20px 0px 0px }
*/

.img { float:right; margin:0px 0px 10px 10px; position:relative; top:-10px; right:-10px }




.footer { background:#77a6ea; padding:5px; font-weight:bold; margin-bottom:10px; width:940px; height:67px }





/* NAV */
.nav { height:70px; }
#nav {
	position: relative;
	width: 935px;
}

#nav li ul, #nav li ul {
	margin: 0;
	padding: 0;
	
}

#nav a {
	text-decoration: none;
	color:#666;
}

#nav li { /*float the main list items*/
	margin: 0;
	float: left;
	display: block;
}

#nav li ul {
	display: none;
}

#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
	position: absolute;
	
	left: 0;
	background: #77a6ea;
	height: 28px;
	width: 939px;
}

#nav li.on ul {
	background: #3c78d1; 
}

#nav li.on:hover ul, #nav li.over ul { /*for ie*/
	background: #3c78d1;
}

#nav li a {
	font-weight: bold;
	display: block;
	padding:5px 10px;
}

#nav li.on a {
background:#3c78d1;
	color: #fff;
}

#nav li.on ul a, #nav li.off ul a {
	border: 0;
	float: left; /*ie doesn't inherit the float*/
	color: #f90;
	width: auto;
	margin-right: 15px;
}

#nav li.on:hover a { /*for ie - the specificity is necessary*/
	
}
#nav li.on a:hover { /*for ie - the specificity is necessary*/
	background:#3c78d1!important;
}

#nav li.on ul {
	display: block;
	background:#3c78d1;
}

#nav li.off:hover ul, #nav li.over ul {
	display: block;
	z-index: 6000;
}

#nav li.off a:hover, #nav li.on a:hover { 
	background:#77a6ea;
	color: #ffffff;
}

/*do the image replacement*/

#nav li span {
	position: absolute;
	left: -9384px;
}

#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
	display: block;
	position: relative;
	height: 26px;
	background: url(bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
}

/*first, put the initial states in place*/

#liRenaissance a {
	background-position: 0 0;
}

#liArtNouveau a {
	background-position: -102px 0;
}

#liModern a {
	background-position: -204px 0;
}

#liPostModern a {
	background-position: -306px 0;
}

#liDigital a {
	background-position: -408px 0;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

 #liModern.on a {
 	background-position: -204px -37px;
 } /*add selectors for the other li's and background-positions*/

/*hover states*/

#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
	
}

#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
	background-position: -102px -73px;
}

#liModern a:hover, #liModern:hover a, #liModern.over a {
	background-position: -204px -73px;
}

#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
	background-position: -306px -73px;
}

#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
	background-position: -408px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
	display: block;
	color: #fff;
	padding:5px 10px;
	
}

#nav li.off ul a {
	
	color: #ffffff;
	
	
}

.redbox
{
	margin-bottom:10px;
	padding:10px;
  padding-top:5px;
	width:500px;
	background-color:#f8bebe;
}

.bluebox
{
	margin-bottom:10px;
	padding:10px;
	padding-top:5px;
	width:500px;
	background-color:#c4d2e7;
}

.redbox h2
{
color:black;
padding-bottom:0px;
margin-bottom:0px;
}
 
.bluebox h2
{
color:black;
padding-bottom:0px;
margin-bottom:0px;
}  


.redbox a
{
color:blue;
}
 
.bluebox a
{
color:blue;
}