/* the following styles overwrite layout.css and typography.css */
body.splash div#branding, body.splash ul#nav-main, body.splash div#breadcrumbs{
	visibility: hidden;
}

body.content div#content{
	background: #FFF url(../../images/interface/content-main-top.gif) no-repeat top left;
	padding:0;
}
body.content div#content h1{
	position: absolute;
	width: 255px;
	height: 55px;
	bottom: 30px;
	left: 20px;
	text-indent: -9999px;
	background: transparent url(../images/interface/logo_3m_films.png) no-repeat top left;
}
body.content div#content h2{
	margin-top: 25px;
}

body.content div#content-main{
	height: 450px;
	padding: 0;
	width: 924px;
	/*border: 1px dashed black;*/
	background: transparent url(../images/interface/bg_theme_blue.jpg) no-repeat bottom left;
	overflow: hidden;
}
body.splash div#content div#content-main{
	/*height: 410px;
	background-image: none;*/
	background-image: url(../images/interface/bg_theme_3m.jpg);
}
body.splash div#content div#content-main,
body.splash ul#nav-supp{
	margin-top: -100px;
}
body.content div#content a#swatch_left{
	display: block;
	position: absolute;
	left: -35px;
	top: 100px;
	width: 25px;
	height: 25px;
	background: transparent url('../images/interface/widget_arrow_left.png') top left no-repeat;
	z-index: 100;
	text-indent: -999px;
	overflow: hidden;
}
body.content div#content a#swatch_right{
	display: block;
	position: absolute;
	right: -35px;
	top: 100px;
	width: 25px;
	height: 25px;
	background: transparent url('../images/interface/widget_arrow_right.png') top left no-repeat;
	z-index: 100;
	text-indent: -999px;
	overflow: hidden;
}
body.content div#content a#swatch_right:hover, body.content div#content a#swatch_left:hover{
	background-position: 0 -25px;
}
body.content div#content a#swatch_right:active, body.content div#content a#swatch_left:active{
	background-position: 0 -50px;
}
/* ---------- Swatches styles ---------- */
body.content div#content-main ul#swatches{
	/* border: 1px dashed teal; */
	position: absolute;
	top: 100px;
	left: 0;
	margin: 0;
	padding: 0;
	width: 2000px;
	overflow: hidden;
}
body.content div#content-main ul#swatches li{
	/*opacity: 0.5;
	-moz-opacity: 0.5;
	filter:alpha(opacity=50);*/
	position: relative;
	/* by default, swatches are pushed up, leaving only the tab h3 visible */
	top: -220px;
	/*border: 1px dotted white;*/
	width: 182px;
	height: 245px;
	margin: 0 3px 0 0;
	padding: 0;
	float: left;
	background-image: none;
}
body.content div#content-main ul#swatches li:hover{
	top: 0;
}
/* this special class is added with 3m.js to kill the CSS-based drop down of the list items */
body.content div#content-main ul#swatches li.special:hover{
	top: -220px;
}
body.content div#content-main ul#swatches li h3{
	font-size: 90%;
	position: absolute;
	bottom: 0;
	left: 0;
	font-weight: normal;
	color: #FFF;
	padding: 0 5px 0 20px;
	margin:0;
	width: 182px;
	height: 25px;
	background: transparent url(../images/interface/tab_header_swatch.png) no-repeat top left;
}
/* this element set above the h3 and the img in the li for a JS mouseover/out event */
body.content div#content-main ul#swatches li p{
	position: absolute;
	top: 0;
	right: 0;
	width: 162px;
	height: 245px;
	/*border: 1px solid red;*/
	z-index: 20;
	text-align: right;
	padding:0 20px 0 0;
	margin:0;
	color: #000;
	font-size: 80%;
}
/* ---------- Photo Gallery styles ---------- */
body.content div#content-main ul#photos{
	background: transparent url('../images/interface/bg_photo_gallery.png');
	position: absolute;
	top: 100px;
	left: 0;
	margin: 0;
	padding: 0;
	width: 2000px;
	height: 255px;
	overflow: hidden;
}
body.content div#content-main ul#photos li{
	position: relative;
	width: 185px;
	height: 255px;
	margin: 0;
	padding: 0;
	float: left;
	background-image: none;
	text-align: center;
}
body.content div#content-main ul#photos li img{
	margin-top: 45px;
}
/* Local navigation slider panel */
/* use this div as mask for right top/bottom corners of nav drawer */
div#content-supp {
z-index: 50;
right: -225px;
margin: 0;
padding: 0;
width: 240px;
height: 450px;
background: transparent url(../images/interface/mask_nav_supp.png) no-repeat top left;
}
ul#nav-supp {
/* border: 1px dashed red; */
position: absolute;
top: 190px;
/*right: 20px;*/
/* had to use left as DOM scripting effect.move refers to position from left of parent */
left: 714px;
margin: 0;
padding: 0;
width: 230px;
height: 450px;
background: transparent url(../images/interface/bg_transparent_grey_25x25.png);
z-index: 30;
}
li#nav-supp-promo {
display: none;
}
ul#nav-supp li {
float: none;
margin: 0;
padding: 0 30px 0 0;
text-align: right;
}
body.content ul#nav-supp li h3 {
	margin-top: 1em;
	margin-bottom: 0.5em;
	padding-right: 25px;
	font-size: 130%;
	text-transform: lowercase;
}
body.content ul#nav-supp li#products h3 {
	background: transparent url('../images/interface/icon_products.png') center right no-repeat;
}
body.content ul#nav-supp li#applications h3 {
	background: transparent url('../images/interface/icon_applications.png') center right no-repeat;
}
body.content ul#nav-supp li#theme h3 {
	background: transparent url('../images/interface/icon_palette.png') center right no-repeat;
}
body.content ul#nav-supp li a {
	color: #333;
	letter-spacing: 0;
	font-weight: normal;
}
body.content ul#nav-supp li a:link {
}
body.content ul#nav-supp li a:visited {
	color: #333;
}
body.content ul#nav-supp li a:hover {
}
body.content ul#nav-supp li a:active {
}
body.content ul#nav-supp li.box{
	padding: 0;
	height: 10px;
	width: 10px;
	float: right;
	margin-right: 10px;
}
body.content ul#nav-supp li#theme1{
	margin-right: 35px;
}
body.content ul#nav-supp li.box a{
	text-align: left;
	text-indent: -999px;
	overflow: hidden;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #CCC;
	border: 2px solid #333;
}
body.content ul#nav-supp li.box a:hover{
	border-color: #FFF;
}
body.content ul#nav-supp li#theme1 a{
	background-color: #809FFF;
}
body.content ul#nav-supp li#theme2 a{
	background-color: #8CFF70;
}
body.content ul#nav-supp li#theme3 a{
	background-color: #FFEA6F;
}
body.content ul#nav-supp li#theme4 a{
	background-color: #FF8C76;
}
body.splash ul#nav-supp li#theme,
body.splash ul#nav-supp li#theme1,
body.splash ul#nav-supp li#theme2,
body.splash ul#nav-supp li#theme3,
body.splash ul#nav-supp li#theme4,
body.splash ul#nav-supp li#togglepanel{
	display: none;
}
ul#nav-supp li#togglepanel{
	position: absolute;
	top: 25px;
	left: -15px;
	width: 15px;
	height: 30px;
	margin:0;
	padding:0;
	/* transparent bg image is #666 at 70% opacity */
	background: transparent url(../images/interface/toggle_nav.png) no-repeat top left;
	/*border: 1px solid green;*/
}
ul#nav-supp li#togglepanel a{
	display: block;
	width: 15px;
	height: 30px;
	text-align: left;
	text-indent: -9999px;
}