body{
	margin: 0;
	margin-top: 5px;
	overflow-y: auto;
	font-family: "adobe-caslon-pro-1","adobe-caslon-pro-2",serif;
}
h1,h2,h3,h4,h5{
	font-weight: normal;
}
a{
	color: #000;
}

/*
THE GRID
===============================================================================================
*/
.col,
.col_1,
.col_2,
.col_3,
.col_4,
.col_5,
.col_6
{
	display: inline;
	float: left;
	margin-left: 20px;
	position: relative;
	min-height: 20px;
}
.first{
	margin-left: 0 !important;
	border: none;
}
.col{
	clear: both;
}
.col_1{
	width: 60px;
}
.col_2{
	width: 140px;
}
.col_3{
	width: 220px;
}
.col_4{
	width: 300px;
}
.col_5{
	width: 380px;
}
.col_6{
	width: 460px;
}
.col_7{
	width: 540px;
}
.col_8{
	width: 620px;
}
.col_9{
	width: 700px;
}
.col_10{
	width: 780px;
}
.col_11{
	width: 860px;
}
.col_12{
	width: 940px;
	margin-left: auto;
	margin-right: auto;
	clear: both;
	position: relative;
}


/*
WRAPPER
===============================================================================================
*/
.wrapper{
	clear: both;
	margin-left: auto;
    margin-right: auto;
    width: 990px;
    position: relative;
}



/*
INTRO
===============================================================================================
*/
#intro{
	text-align: center; display: none; padding-right: 150px;
	width: 990px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}


/*
CONTAINER
===============================================================================================
*/
#container{
	width: 990px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}


/*
HEADER
===============================================================================================
*/
#container #header{
	top: 4px;
	height: 80px;
}
#container #header #logo a{
	display: block;
	height: 60px;
	width: 160px;
	background-image: url(http://www.modcocreative.com/site/modco/css/images/logo.gif);
	background-repeat: no-repeat;
}
#container #header #logo span,#container #header h2{
	display: none;
}


/*
MENU
===============================================================================================
*/
#menu{
	height: 120px;
	margin-bottom: 20px;
	width: 990px;
	clear: both;
	top: 0;
}
#menu .sub{
	display: block;
	float: left;
	width: 158px; 
	position: relative;
}
#container #menu h3{
	display: block;
	font-size: 14px;
	color: #999999;
	line-height: 20px;
	position: absolute;
    z-index: 2;
}
#container #menu ul{
	padding-top: 20px;
	display: block;
	margin-bottom: 40px;
}
#container #menu li{
	display: block;
	width: 100%;
	font-size: 11px;
	color: #999999;
	height: 20px;
}
#container #menu li a{
	display: block;
	text-decoration: none;
	color: #333;
	padding-top: 6px;
	overflow: hidden;
	white-space: nowrap;
}
#container #menu li a:hover{
	text-decoration: underline;
}
#container #menu li a .section{
	display: none;
}
#container #menu li.selected{
	margin-left: -11px;
	padding-left: 11px;
	background-color: #F0F0F0;
}

/*
TOP
===============================================================================================
*/
#container #top{
	border-bottom: solid 1px #000000;
	height: 20px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	background-color: #000;
	padding-left: 10px;
	width: 980px;
	position: relative;
	padding-top: 9px;
	margin-bottom: 20px;
	clear: both;
}
#container #top h2,#container #top h3{
	display: table;
	float: left;
	margin-right: 20px;
	height: 14px;
	font-size: 11px;
	text-transform: uppercase;
	white-space: nowrap;
}
#container #top h3{
	padding-left: 20px;
	border-left: solid 1px #666;
}
#container #top h2 span,#container #top h3 span{
	display: table-cell;
	vertical-align: bottom;
}
#container #top h1{
	display: none;
}
#container #top h2{
	color: #999999;
}
#container #top h3{
	color: #FFF;
	width: 200px;
	height: 12px !important;
	overflow: hidden;
}
#container #top h3 span{
	display: block !important;
	width: 260px;
	overflow: hidden;
	padding-top: 3px;
}


/*
TOP NAV
===============================================================================================
*/
#top #nav{
	display: none;
	font-weight: bold;
}
#top .wrp{
}
#top #nav span{
	font-size: 11px !important;
	line-height: 22px;
}

/*
BT NAV
===============================================================================================
*/
#btnav{
	display: none;
	width: 460px;
	font-weight: bold;
}

/*
BT NAV 2
===============================================================================================
*/
#btnav2{
	display: block;
	clear: both;
	white-space: nowrap;
}
#btnav2 a{
	display: block;
	float: left;
	height: 12px;
	min-width: 15px;
	text-align: center;
	font-size: 10px;
	border-top: solid 2px #999;
	padding-top: 4px;
	margin-right: 5px;
	text-decoration: none;
}
#btnav2 a.selected, #btnav2 a:hover{
	border-top-color: #000;
	color: #000;
}


/*
DISPLAY
===============================================================================================
*/
.display{
	width: 990px;
	margin-left: auto;
	margin-right: auto;
	height: 620px;
	overflow: hidden;
	position: relative;
}



/*
SCREEN
===============================================================================================
*/
.screen{
	display: block;
	clear: both;
	float: left;
	width: 990px;
	margin-bottom: 20px;
}
.screen, .page, .display{
	display: block;
	height: auto;
	overflow: visible;
	min-height: 620px;
}

/*
PAGE
===============================================================================================
*/
.page {
	width: 460px;
	height: 620px;
	overflow: hidden;
	float: left;
}
.fullpage{
	width: 990px;
	height: 620px;
}
.page + .page {
	margin-left: 70px;
}
.page p{
	margin-bottom: 10px;
}

/*
lay_i
===============================================================================================
*/
.cover{
	width: 460px;
	overflow: hidden;
	height: 300px;
	margin-bottom: 20px;
	text-align: center;
	position: relative;
}
.lay_i .title{
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}
.lay_i .content{
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}


/*
MOSAIC
===============================================================================================
*/
.mosaic{
	position: absolute;
	top: 0px;
	width: 460px;
	z-index: 10;
}
.mosaic li{
	float: left;
	display: block;
	width: 230px;
	height: 207px;
}
.mosaic.tb{
	left: 530px;
	height: 620px;
	background-image: url(http://www.modcocreative.com/site/modco/css/images/tb.gif);
}
.mosaic.tb li{
	width: 220px;
	height: 194px; 
	margin-bottom: 18px;
}
.mosaic.tb li + li{
	margin-left: 20px; 
}
.mosaic.tb li + li + li{
	margin-left: 0px; 
}
.mosaic.tb li + li + li + li{
	margin-left: 20px; 
}
.mosaic.tb li + li + li + li + li{
	margin-left: 0px; 
}
.mosaic.tb li + li + li + li + li + li{
	margin-left: 20px; 
}

/*
grid
===============================================================================================
*/
.grid{
	margin-left: auto;
	margin-right: auto;
	width: 990px;
}
.grid li{
	float: left;
	display: block;
	width: 198px;
	height: 124px;
	overflow: hidden;
}


/*
FOOTER
===============================================================================================
*/
#footer{
	font-size: 9px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	text-transform: uppercase;
	color: #666666;
	letter-spacing: 0.05em;
	font-family: "Helvetica Neue", Arial, sans-serif;
	display: block;
	clear: both;
	width: 990px;
	padding-top: 10px;
	margin-bottom: 10px;
}
#footer a{
	color: #666666;
}


/*
COMMON CLASSES...
===============================================================================================
*/
.title{
	font-size: 40px;
	line-height: 40px;
	color: #000;
	font-family: "tandelle-1","tandelle-2";
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.content{
	margin-bottom: 20px;
	font-family: "Helvetica", Arial, sans-serif;
	color: #666666;
	font-size: 11px;
	line-height: 15px;
	text-align: justify;
	word-spacing: -1px;
}
.content strong{
	color: #000;
	font-weight: normal;
}
.content ul{
	margin-bottom: 10px;
}
.content li{
	list-style-type: disc;
	list-style-position: outside;
}
.question{
	font-weight: bold;
	font-style: italic;
	color: #000000;
	font-size: 12px;
	font-family: "adobe-caslon-pro-1","adobe-caslon-pro-2",serif;
	margin-right: 4px;
}
.answer{
	color: #666666;
	font-family: "Helvetica", Arial, sans-serif;
}
.bottom_image{
	position: relative;
}
.lay_h, .two_columns_layout{
	 -moz-column-count: 2;
    -webkit-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    height: 620px;
}
hr{
	display: block;
	border: none;
	border-bottom: solid 1px #000;
	width: 140px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}
.screen{
	float: left;
	width: 990px;
	margin-bottom: 20px;
}
.screen, .page, .display{
	display: block;
	height: auto;
	overflow: visible;
	min-height: 620px;
}

.font_black{
	color: #000;
}
.font_italic_serif, i, em{
	font-family: "adobe-caslon-pro-1","adobe-caslon-pro-2",serif;
	font-style: italic;
	font-size: 12px;
}

.font_serif{
	font-family: "adobe-caslon-pro-1","adobe-caslon-pro-2",serif;
	font-size: 12px;
}
.narrow_layout{
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.payoff{
	display: block !important;
	text-transform: uppercase;
	color: #999;
	position: absolute;
	white-space: nowrap;
	right: 10px;
	font-size: 11px;
	width: 300px;
	text-align: right;
	top: 10px;
}
.img_attr{
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);	
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	display: inline-block;
    bottom: 0;
    display: block;
    font-size: 12px;
    height: 10px;
    right: 0px;
    position: absolute;
    white-space: nowrap;
    width: 10px;
    color: #999;
    letter-spacing: 0;
}


/*
ARCHIVE
===========================================================================================================
*/
.archive .sub_tit{
	color: #000;
	text-transform: uppercase;
	font-size: 14px;
	margin-bottom: 10px;
	line-height: 16px;
}
.archive .wrap{
	float: left;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: dotted 1px #999;
	clear: both;
	width: 100%;
}
.archive ul{
	font-size: 11px;
}
.archive li{
	list-style: disc;
	list-style-position: outside;
	line-height: 15px;
	margin-bottom: 5px;
	color: #666;
	text-transform: uppercase;
}
.archive a{
	text-decoration: none;
	color: #666;
}

.archive a:hover{
	text-decoration: underline;
}
.archive ul + ul + ul{
	margin-left: 65px;
}

.archive ul + ul + ul + ul{
	margin-left: 20px;
}
/*
// ===========================================================================================================
*/


#header,#menu{
	position: relative;
	background-color: #FFF;
}
.screen + .screen{
	border-top: dotted 1px #999999;
	padding-top: 20px;
}
.modal_closer{
	position: absolute;
	right: -20px;
	bottom: -20px;
	width: 20px;
	height: 20px;
	background-image: url(http://www.modcocreative.com/site/modco/css/images/modal_closer.png);
}
.modal_closer span{
	display: none;
}
.social{
	margin-bottom: 10px;
	font-size: 10px;
	text-transform: uppercase;
	color: #999;
	font-family: "Helvetica", Arial, sans-serif;
}
.loading_ico{
	display: block;
	position: absolute;
	top: 280px;
	left: 473px;
	padding: 10px;
	background-color: #EEE;
	-moz-border-radius: 0.5em;
	border-radius: 0.5em;
	-moz-box-shadow: 0px 0px 8px #999; /* FF3.5+ */
	-webkit-box-shadow: 0px 0px 8px #999; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 8px #999; /* Opera 10.5, IE9, Chrome 10+ */
}
#intro .loading_ico{
	top: 280px;
	left: 520px;
}
.hid{
	display: none !important;
}
.caption{
	padding-top: 20px;
	color: #999;
	background-color: #FFF;
}
.caption a{
	color: #999;
	text-decoration: underline;
}




/*
CULTURE
===============================================================================================
*/
#menu_culture span{
	display: none;
}
#menu_culture{
	display: block;
	height: 20px;
	position: absolute;
	width: 130px;
	top: -2px;
	z-index: 3;
}
#menu_culture a{
	display: block;
	height: 20px;
}
#menu_culture.selected{
	z-index: 1;
}
#culture_splash{
	background-color: #FFFFFF;
    background-image: url("http://www.modcocreative.com/site/modco/css/images/culture.png");
    background-repeat: no-repeat;
    height: 736px;
    left: 6px;
    position: absolute;
    top: 6px;
    width: 1086px;
    background-position: right center;
}
#simplemodal-container{
	top: 180px !important;
}





/*
CLEARFIX
===============================================================================================
*/
/* http://www.positioniseverything.net/easyclearing.html */

.clearfix:after
{
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0;
}

.clearfix
{
	display: inline-block;
}

* html .clearfix
{
	height: 1%;
}

.clearfix
{
	display: block;
}