﻿/***********************************************************
Stylesheet for sos-studio.it
@author:	Niels Bartels <niels@7u.nl>
@date:		2010-09-06

Optimised for 1024 x 768 pixels.
************************************************************/

/*----- Default styles -------------------------------------*/
html {
	overflow-y:				scroll;
	background-color:#000;
	
}


body, a{
	font-family:			bauerbod, helvetica, arial;
	font-size:				1.0em;
	color:					#050607;
}

div, span, td, body {
	padding:				0px;
	margin:					0px;
}

hr {
	height:					3px;
	background-color: 		#FFFFFF;
	border:					0px;
	padding:				0px;
	margin:					0px;
}

p {
	font-size:				0.8em;
	line-height:			16px;
}

h1 {
	margin:					0px;
	margin-top:				20px;
	padding:				0px;
	text-align:				center;
	color:					#e5c19f;
	font-weight:			normal;
}

h2 {
	margin:					0px;
	margin-top:				20px;
	padding:				0px;
	text-align:				center;
	color:					#e5c19f;
	font-weight:			normal;
}

h3 {
	margin:					0px;
	margin-top:				10px;
	padding:				0px;
	text-align:				center;
	font-weight:			normal;
	font-size:				0.8em;
}

/*----- Container / wrapper --------------------------------*/
.container {
	margin:					auto;
	width:					934px;
	background-color: #000000;
	border:0px solid #FF0000;
}

/*----- Header and navigation ------------------------------*/
.header {
	height:					86px;
	background-color: #000000;
	border:0px solid #00FF00;
}

.header .logo {
	float:					left;
	width:					200px;
	height:					75px;
	background-image:		url(../img/logo.jpg);
	background-repeat:		no-repeat;
	background-position:	center;
	
}

.logo{
margin-left:25px;
}

.header .navigation {
	float:					left;
	margin-left:			20px;
	padding-top:			30px;
	
}


.navigation a {
	text-transform:			uppercase;
	text-decoration:		none;
	margin-left:			0px;
	
}


.navigation .fixed {
	color:					#e5c19f;
}

/*

a:hover {
	color:					#e5c19f;
}

*/

.content {
	
	background-color:		#000;
	padding:				0px;
	margin:					0px;
	overflow:				hidden;
	height:450px;	
	border:0px solid #000099;
}

/* ----- some special elements below the standard navigation ---*/


.subnav.fixed {
	color:					#939598;
}

.subnav:hover {
	color:					#939598;
}

#special-nav-campaign1 {
	position:				absolute;
	text-align:				right;
	margin-left:			335px;
	margin-top:				22px;
}

#special-nav-campaign2 {
	position:				absolute;
	text-align:				right;
	margin-left:			400px;
	margin-top:				22px;
}

#special-nav-campaign3 {
	position:				absolute;
	text-align:				right;
	margin-left:			290px;
	margin-top:				22px;
}

#special-nav-collection1 {
	position:				absolute;
	text-align:				right;
	margin-left:			60px;
	margin-top:				22px;
}

#special-nav-collection2 {
	position:				absolute;
	margin-left:			125px;
	margin-top:				22px;
	text-transform:			uppercase;
}

#special-nav-collection3 {
	position:				absolute;
	margin-left:			0px;
	margin-top:				22px;
	text-transform:			uppercase;
}

#special-nav-collection4 {
	position:				absolute;
	margin-left:			205px;
	margin-top:				22px;
	text-transform:			uppercase;
}

#special-nav-campaign {
	position:				absolute;
	font-size:				0.8em;
	margin-left:			385px;
	margin-top:				22px;
	text-transform:			uppercase;
}

/* ----- the home page ------------------------------*/
 .btn_womansfitguide {
	position: 				absolute;
	border:					0px;
	margin-top:				16px;
	margin-left:			25px;
	top:90px;
	z-index:0;
}



#close-box{
	cursor:					pointer;
}

/* ----- the story page -----------------------------*/
#the-story .left-col {
	width:					450px;
	height:					425px;
	float:					left;
	border:					0px solid purple;
	text-align:				right;
	padding-right:			10px;
}

#the-story .left-col img {
	padding-top:			0px;
}

#the-story .right-col {
	width:					450px;
	height:420px;
	float:					left;
	border:					0px solid gray;
	padding-left:			20px;
	margin-top:				10px;
	border-left:			1px solid #CCCCCC;
	color:#FFFFFF;
	text-align:justify;
	font-size:16px;
	overflow: auto;
	
	SCROLLBAR-FACE-COLOR: #000000 ; 
	SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; 
	SCROLLBAR-SHADOW-COLOR: #000000; 
	SCROLLBAR-3DLIGHT-COLOR: #000000; 
	SCROLLBAR-ARROW-COLOR: #FFFFFF; 
	SCROLLBAR-TRACK-COLOR: #FFFFFF; 
	SCROLLBAR-DARKSHADOW-COLOR: #000000; 
	SCROLLBAR-BASE-COLOR: #000000;
}

#the-story p{
 margin-right:20px;
 line-height: 20px;
}

/* ----- news / events page -----------------------------*/


#news h1 {
	text-align:				left;
	padding:				0px;
	margin:					0px;
	font-size:				1.1em;
}

#news .left-col {
	width:					450px;
	height:					425px;
	float:					left;
	text-align:				right;
	padding-right:			10px;
}

.model2 {
	position:               absolute;
	bottom:0px;
	margin-bottom:             10px;
	margin-left:			-450px;
	border:3px solid #999999;
}

#news .left-col .news_image {
	padding-top:			0px;
}

#news .right-col {
	width:					450px;
	float:					left;
	border:					0px solid gray;
	padding-left:			20px;
	margin-top:				10px;
	border-left:			1px solid #000000;
	color:#FFFFFF;
	font-size:14px;
}

/* ----- the contact page -----------------------------*/
#contact .left-col {
	width:					450px;
	height:					420px;
	float:					left;
	text-align:				left;
	border:0px solid #FF0000;
	border-right:			1px solid #000000;
}

#contact .left-col .contact-img {
	adding-top:			170px;
	adding-right:			10px;
	margin-left:340px;
	
}

#contact .right-col {
	width:					459px;
	height:425px;
	float:					left;
	/*border-left:			1px solid #000000;*/
	padding-left:			20px;
	margin-top:				0px;
	overflow:auto;
	border:0px solid #FF0000;
	
	SCROLLBAR-FACE-COLOR: #000000 ; 
	SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; 
	SCROLLBAR-SHADOW-COLOR: #000000; 
	SCROLLBAR-3DLIGHT-COLOR: #000000; 
	SCROLLBAR-ARROW-COLOR: #FFFFFF; 
	SCROLLBAR-TRACK-COLOR: #FFFFFF; 
	SCROLLBAR-DARKSHADOW-COLOR: #000000; 
	SCROLLBAR-BASE-COLOR: #000000;
	
}

.model {
	position:               absolute;
	margin-top:             0px;
	margin-left:			-425px;
	border:3px solid #999999;
}

#contact .country {

	color: #FFF;
	/*font-size:				1.3em;*/
	font-size:16px;
	font-weight:bold;
	
}

#contact p{
font-size:10px;
color:#FFFFFF;
font-size:12px;
line-height: 20px;

}

/* ----- the campaign page --------------------------*/
.image-slider {
	width:					924px;
	height:443px;
	overflow:					hidden;
	border:3px solid #999999;
}

.image-slider img {
	float:					left;
}


/* ----- the lookbook page --------------------------*/

#lookbook .left-col{
	width:					450px;
	height:					420px;
	float:					left;
	text-align:				left;
	border-right:0px solid #FFFFFF;
}

#lookbook .right-col{
	width:					459px;
	height:425px;
	float:					left;
	/*border-left:			1px solid #000000;*/
	padding-left:			20px;
	margin-top:				0px;
	overflow:auto;
	border:0px solid #FF0000;

}

.lookbook-img{

margin-left:80px;
margin-top:70px;
border:3px solid #999999;
}

.pdficon{
position:absolute;


}

#text-lookbook{
position:absolute;
top:45px;
left:70px;
color:#FFFFFF;

}
#pdflink{
position:relative;
height:90px;
margin-top:150px;
border:0px solid #FF0000;
}

/* ----- arrows for extra navigation in the site. ---*/
.content .arrow {
	
	background-repeat:		no-repeat;
	background-position:	center;
	height:					24px;
	width:					12px;
	border:					0px solid red;
	display:				block;
	position:				absolute;
	margin-top:				170px;
	cursor:					pointer;
	z-index:				100;
}

.arrow.left {
	background-image:		url(../img/arrow-left.gif);
	margin-left:			20px;
	display:				none;
}

.arrow.right {
	background-image:		url(../img/arrow-right.gif);
	margin-left:			900px;
}

.arrow.left:hover {
	/*background-image:		url(../img/arrow-left.png);*/
}

.arrow.right:hover {
	/*background-image:		url(../img/arrow-right.png);*/
}

/* ----- carrousel style elements -----------------*/
.carrousel {
	position:				relative;
	height:					300px;
	overflow:				hidden;
	margin-left:			auto;
	margin-right:			auto;
	text-align:				center;
	display:				block;
	margin-top:				15px;
	border:3px solid #999999;
	z-index:0;
	background-color:#FFF;
	padding-top:10px;
	
	
}

.carrousel a {
	
}

.carrousel img {
	cursor:					pointer;
	border:					0px;
	position:				absolute;
	height:295px;
	z-index:1;
	
}

.bar {
	width:					500px; 
	height:					10px; 
	margin-left:			217px;
	margin-top:				20px;
	background-image:		url(../img/bg_slider.gif);
	background-repeat:		repeat-x;
	background-position:	center;
	
	
}

.slider {
	width:					50px; 
	height:					10px; 
	background-color:       #FFFFFF;
	margin-top:				0px;
	cursor:					pointer;
	
}

#article_title {
	text-transform:			uppercase;
	color:#FFFFFF;
}

/* ----- the carrousel on the press page is slightly different ---*/
#press .carrousel {
	height:					300px;
}


/* ----- footer (not on every page ----------------*/
.footer {
	clear:					both;
	height:					70px;
	border-bottom:			1px solid #000000;
	background-image:		url(../img/footer_logo.jpg);
	background-repeat:		no-repeat;
	background-position:	right center;
}

.social-media {
		text-align:				right;
        margin-top:				20px;
		margin-bottom:			20px;
		margin-right:5px;
        display:				none;
		
		
}

.social-media a{
	outline:				none;
}

.social-media a img{
	border:					0px;
}

/*---------------------- MENU JQUERY sevencomm-------------------   */

.subnav {
	font-size: 9px;
	color: #333333;
	display:none;
	color:#FFFFFF;
	
	
}


#menu {
  display:none;
  position: relative;
  top: 0px;
  left: 30px;
  z-index:2;
 }
 
 
 


#menu, #menu ul {
  padding: 0;
  margin: 0;
  border:0px solid #FF0000;
  list-style: none;
  
  
}

#menu li {
  float: left;
  background: #FFF;
  border:0px solid #FF0000;
  margin-right:30px;
  background-color: #000000;
 
}

#menu a {
  display: block;
  padding-bottom: 5px;
  margin-left:0px;
  /*width: 7em;*/
  border:0px solid #009900;
  
  
}

#menu ul li a{
margin-left:5px;
}

.mainnav{
	idth: 6.5em;
	background-color:#000000;
}


#menu li ul {
  position: absolute;
  left: -999em;
  width: 7em;
 	
  
}

#menu li:hover ul, #menu li ul:hover  {
  left:auto;
  /*visibility:visible; */
  
}

#menu ul li {
background-color: #000;
padding-top:10px;
border-left:0px solid #000000;
border-right:0px solid #000000;
width:7em;
padding-bottom:5px;


}

#menu ul  li.first, a{
border-top:1px solid #000000;
color:#ffffff;

}



/*---------- BOX NEWSLETTER STYLE -------------- */

#box-mailing{
display:none;
position:absolute;
op:100px;
eft:50px;
width:350px;
height:270px;
border:3px solid #999999;
padding:5px;
background-color:#fff;
z-index:100;
}

#head-box{
position:relative;
width:350px;
height:30px;
background-color:#000000;
color:#fff;
padding-top:7px;
}

.text-newsletter{
font-family: bauerbod, helvetica, arial;
font-size:11px;
text-align:justify;
display:block;
border:0px solid #FF0000;
margin-bottom:5px;
margin-top:10px;
}

#close-box{
position:absolute;
top:10px;
width:15px;
height:25px;
right:7px;
font-family:bauerbod, helvetica, arial;
font-size:15px;
font-weight:bold;
text-align:center;
border:0px solid #FF0000;

}

input{
margin-top:0px;
margin-bottom:5px;
border:1px solid #CCCCCC;
display:block;
}

select{
margin-top:3px;
margin-bottom:10px;
background-color: #FFFFFF;
color: #000000;
font-family: bauerbod, helvetica, arial;
font-size:11px;


}
#submit{
padding:1px;
width:120px;
background-color:#000000;
color:#FFFFFF;
border:2px solid #333333;
margin-top:5px;
}



form{
font-family: bauerbod, helvetica, arial;
font-size: 11px;
font-style:normal;
color: #666666;
border-right:0px solid #CCCCCC;
padding-left:10px;



}

#show{
	position: 				absolute;
	border:3px solid #999999;
	margin-left:			0px;
	top:555px;
	cursor:					pointer;
	background-color:#FFFFFF;
	font-family:bauerbod, helvetica, arial;
	font-size:12px;
	font-weight:bold;
	color:#000000;
}

#field_submit{
	position:absolute;
	top:560px;
	margin-left:80px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#FFFFFF;
	


}

/*---------- BOX COLLECTION STYLE -------------- */

#box-pdf{
position:absolute;
top:40px;
left:120px;
width:780px;
height:530px;
border:1px solid #000000;
padding:3px;
background-color:#FFFFFF;
}

#head-box-pdf{
position:relative;
width:780px;
height:30px;
margin-bottom:10px;
background-color: #000000;
color:#FFFFFF;
padding-top:7px;
}

#close-box-pdf{
position:absolute;
top:5px;
width:15px;
height:25px;
right:7px;
font-family:bauerbod, helvetica, arial;
font-size:15px;
font-weight:bold;
text-align:center;
border:0px solid #FF0000;
padding-top:5px;
cursor:pointer;

}


.card{
osition:absolute;
op:10px;
ight:120px;
color:#000000;
font-family:bauerbod, helvetica, arial;



}

.card2{
color: #FF0000;
font-family:bauerbod, helvetica, arial;
margin-left:30px;
padding:0px;


}


