@import url("reset.css");

/*************
*** Set-up ***
*************/
body {
	text-align:center;
	background:#F5F5F5 url(/img/bg-body.jpg) 0 -60px repeat-x;}

#container {
	margin:0 auto;
	width:989px;
	text-align:left;
	background:transparent url(/img/bg-container.jpg) 0 87px no-repeat;}

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

/************
*** Debug ***
************/
#debug				{display:none;}
body.debug #debug	{display:block;}

/*************
*** Header ***
*************/

#logo a {
	display:block;
	margin:25px auto 0;
	background:transparent url(/img/logo-sas-281.png) 0 0 no-repeat;
	width:281px;
	height:61px;
	text-indent:-9999px;
	overflow:hidden;}
#header {
	display:block;
	height:275px;
	margin:52px 0 0;
	padding:56px 0 0 50px;
	/*padding:0;*/
	background:transparent url(/img/bg-header.jpg) 0 0 no-repeat;
	border:0 transparent solid;}

h2.title {
	display:block;
	width:252px;
	height:81px;
	background:transparent url(/img/title-tsrc.png) 0 0 no-repeat;
	text-indent:-9999px;
	overflow:hidden;}
p.description {
	margin:16px 0 0 9px;
	width:225px;
	color:#ACACAC;
	font:normal 12px/1.5em "Lucida Sans","Lucida Grande",sans-serif;}
p.description > strong {
	font-size:larger;
	display:block;
	margin-bottom:5px;
	font:bold;
	color:#BD8126;}

/**************
*** Buttons ***
**************/
			
a.button {
	float:left;
	margin-top:5px;
	padding-right:26px;
	background:transparent url(/img/bg-button-a.png) top right no-repeat;
	text-decoration:none;}
	
a.button strong {
	display:block;
	color:white;
	height:30px;
	font:normal 16px/30px serif;
	font-style:italic;
	background:transparent url(/img/bg-button-a-strong.png) top left no-repeat;
	padding:0 10px;}

/*******************
*** Main content ***
*******************/

#content {
	padding:45px 0 25px;
	background:transparent url(/img/bg-content.png) top left repeat-y;}
#content h3 {
	margin:0 0 4px;
	font:normal 24px/28px "Times",serif;}
#content p {
	color:#3E434A;
	font:normal 12px/18px "Lucida Sans","Lucida Grande",sans-serif;
	margin-bottom:1em;}
#content a {
	font-weight:bold;
	color:#782F2C;}
h4 {
	font:normal 14px "Times",serif;
	margin-bottom:9px;
	letter-spacing:2px;
	text-transform:uppercase;}
#content .cta {
	background-color:#ccc;}

/* Image flipping */
.section {
	padding:25px 0;}
.left {
	margin-left:50px;
	padding-right:430px;
	border:1px #D3CFCF dotted;
	border-width:1px 0;}
.right {
	padding-left:430px;
	margin-right:50px;}
.first {
	padding-top:0;
	border-top-width:0;
	/*hide border for cta
	border-bottom-width:0;*/}
.last {
	padding-left:330px;}
#genuine {
	min-height:489px;
	background:transparent url(/img/bg-section-genuine.jpg) 560px 0 no-repeat;}
#difference {
	min-height:270px;
	background:transparent url(/img/bg-section-difference.jpg) 1px 25px no-repeat;}
#restoration {
	min-height:240px;
	background:transparent url(/img/bg-section-restoration.jpg) 543px 25px no-repeat;}
#choice {
	min-height:326px;
	background:transparent url(/img/bg-section-choice.jpg) 1px 25px no-repeat;}


/*** banner ***/
div.banner {
	margin:0 25px;
	padding:20px;
	background-color:#F9F9F9;
	border:3px #DFDFDF solid;}
/*debug*/
.banner .l, .banner .r {
	border:0 red dotted;}
/*left*/
.banner .l {
	float:left;} 
.banner .l p {
	margin:0;
	padding:0;
	color:#959595;
	font:normal 12px "Verdana",sans-serif;}
.banner .l h4 {
	color:#3E434A;
	font:normal 26px "Epic","Times",serif;
	font-style:italic;
	margin-bottom:0;
	letter-spacing:-0.2px;
	text-transform:none;}
/*right*/
.banner .r {
	padding-right:20px;
	text-align:center;
	float:right;}
.banner .r p {
	color:#959595;
	font:normal 12px "Verdana",sans-serif;}
.banner .r p strong {
	font-weight:bold;
	font-size:larger;}


/*************
*** Footer ***
*************/

#footer{
	display:block;
	height:40px;
	margin:0;
	padding:0;
	background:transparent url(/img/bg-footer.jpg) 0 0 no-repeat;}