﻿/*------------------------------------------------------------------
	RETOUCH ApS - www.retouch.dk 
	layout.css
	
	[Table of contents]
	1. Body
	2. Typography
	3. Frame
	4. Navigation
	5. Buttons
	6. Contact form
	7. Smart text elements
	8. Page elements
	
-------------------------------------------------------------------*/


/* [1. Body
----------------------------------------------- */

body {
	font:normal 13px/normal  Georgia, Helvetica, Arial;
	/* font: font-weight font-size/line-height font-family */	
	color:#4a4a4a;
	text-align:left;
	background:#40250a url('../images/bg.jpg') no-repeat top center; 
	line-height:160%;	
}
body,html    { padding:0 0 20px 0; }


/* [2. Typography
----------------------------------------------- */

/* Headlines */

h1,h2,h3,h4,h5,h6 { font-weight: bold; color: #3d3d3d; }

h1 { font-size: 24px; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 16px; margin-bottom: 0.75em; }
h3 { font-size: 14px; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 12px; line-height: 1.25; margin-bottom: 1em; }
h5 { font-size: 11px; font-weight: bold; margin-bottom: 0.5em; }
h6 { font-size: 10px; font-weight: bold; margin-bottom: 1em; }

.sidebar h3.title {
	color:#4a4a4a;
	font-weight:bold;
	font-size:13px;
	line-height:16px;
	text-transform:uppercase;
	margin:0 0 5px 0;
}
.sidebar h3.title a {
	color:#4a4a4a;
	font-weight:bold;
	font-size:13px;
	line-height:16px;
	text-transform:uppercase;
}
h2.pageDesc {
	color:#4a4a4a;
	font-size:16px;
	line-height:26px;
	font-weight:normal;
}
.pageDesc p 
{
	color:#4a4a4a;
	font-size:16px;
	line-height:26px;
	font-weight:normal;    
}

/* Text elements */

p       { line-height:160%; margin:0 0 10px 0; font-weight:normal; }

a       { text-decoration: none; color:#f26522; }
a:focus,
a:hover { text-decoration: underline; color:#f26522; }


/* Lists */

li ul, 
li ol       { margin:0 1.5em; }
ul, ol      { margin: 0 1.5em 1.5em 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}


/* [3. Frame]
----------------------------------------------- */

#sitecontainer {
	width:1020px;
	margin:0 auto;
	position:relative;
}
#mainarea {
	/*width:949px;*/
	width:920px;
	padding:25px 15px 0 14px;
	margin:0 0 0 53px;
	clear:both;
	position:relative;
	background:url('../images/mainareaBG.png') repeat-y;
}
.divider {
	background:url('../images/divider.gif') repeat-y;
	width:920px;
	display:block;
	clear:both;
}
#content {
	width:435px;
	float:left;
	margin:0;
	padding:10px 0 0 0;
}

.productContent 
{
    /*margin-left:245px !important;
    display:inline;*/
}
.sidebarLeftProductPageFix 
{
	margin:0 0 200px 0;
}
#contentWide {
	width:675px;
	float:left;
	margin:0;
	padding:10px 0 0 0;
}
#sidebarLeft {
	width:220px;
	float:left;
	margin:0 25px 0 0;
}
#sidebarRight {
	width:220px;
	float:right;
}
#header {
	background:url('../images/headerBG.png') no-repeat;
	position:relative;
	width:1020px;	
	height:220px;
	z-index:100;
}
#header #logo {
	width:358px;
	height:84px;	
	background:url('../images/logo.png') no-repeat;
	text-indent:-9000px;
	float:left;
	position:absolute;
	margin:0;
	padding:0;
	top:63px;
	left:83px;	
}
#header #demo {
	background:url('../images/demo.png') no-repeat;
	width:323px;
	height:317px;	
	position:absolute;
	right:228px;
	top:2px;	
}
#footer {
	background:url('../images/footerBG.png') no-repeat;
	position:relative;
	width:1020px;	
	height:198px;
	z-index:1;
}
#footer ul 
{
    position:absolute;
    top:110px;
    left:70px;
    list-style-type:none;
    margin:0;
}
#footer ul li 
{
    float:left;
    margin:0 10px 0 0;
}
#footer ul li a 
{
    font-size:11px;
    font-weight:bold;
}

/* [4. Navigation]
----------------------------------------------- */

/* Topmenu */

#topmenu {
	background:url('../images/topmenuBG.png') no-repeat;
	position:absolute;
	bottom:0;
	left:43px;	
	width:970px;
	height:62px;
	z-index:100;
}
#topmenu ul {
	list-style-type:none;
	width:680px;
	height:62px;
	float:left;
	margin:24px 0 0 33px;	
	display:inline;
}
#topmenu ul li {
	float:left;
	display:inline;
	margin:0 15px;	
	position:relative;
}
#topmenu ul li a {
	color:#361907;
	font-size:13px;
	font-weight:bold;
	text-decoration:none;	
	text-transform:uppercase;
	padding:0 0 15px 0;
	float:left;
}
#topmenu ul li a:hover {
	text-decoration:underline;
}

/* Second and subsequent levels */
#topmenu ul ul {
	list-style-type:none;
    margin:0;	
    position:absolute;
    top:34px;
	left:0px;	
	background:url('../images/submenu.png') no-repeat left bottom;
	width:253px;
	padding:10px 30px 45px 15px;
	height:auto;
}
#topmenu ul li ul li {
	display:block;
	line-height:22px !important;
	margin:0;	
	padding:0;
	width:253px;
}
#topmenu ul li ul li a {
	color:#f26522 !important;
	font-size:12px;
	display:block;
	text-transform:none;
	padding:0;
}


#topmenu ul ul { display: none; }
#topmenu ul li:hover ul { display: block; }
#topmenu ul ul li { display: inline; }




/* [5. Buttons]
----------------------------------------------- */

/* styles for all buttons */

a.btn { display: block; float: left; text-align:center; text-decoration: none; }
a.btn span { display: block; float:left; }
a.btn:hover { outline: none; cursor: pointer; text-decoration:none; background-position: bottom right; }
a.btn:hover span { background-position: bottom left; }



/* btnGold */

a.btnGold {
	background: transparent url('../images/btnGoldRight.png') no-repeat scroll top right;
    height: 17px;
	/* font styles */
    color: #fff;
    font-size: 11px;
    font-weight: bold;
	text-shadow:1px 1px 1px #795801;			
}
a.btnGold span {
	background: transparent url('../images/btnGoldLeft.png') no-repeat;
    line-height: 17px;
    padding: 0 6px 0 12px;
}
a.btnGold:hover span { color: #fff; }
a.btnGold,
a.btnGold:hover {
	padding-right: 6px; /* width for button-right */
}

/* btnGoldBig */

a.btnGoldBig {
	background: transparent url('../images/btnGoldBigRight.png') no-repeat scroll top right;
    height: 33px;
	/* font styles */
    color: #312600;
    font-size: 14px;
    font-weight: bold;	
	text-transform:uppercase;	
}
a.btnGoldBig span {
	background: transparent url('../images/btnGoldBigLeft.png') no-repeat;
    line-height: 33px;
    padding: 0 18px 0 36px;
}
a.btnGoldBig:hover span { color: #312600; }
a.btnGoldBig,
a.btnGoldBig:hover {
	padding-right: 18px; /* width for button-right */
}

.btnContact {
	display:inline !important;
	margin-left:133px;
}
.btnContact span {
	width:100px;
}

/* [6. Contact form]
----------------------------------------------- */

#contactForm {
	background:url('../images/contactFormBG.png') no-repeat;
	margin:20px 0 20px 0;
	width:399px;
	height:302px;
	padding:15px 20px 20px 20px;
}
#contactForm .colLeft {
	float:left;
	width:190px;
}
#contactForm .colRight {
	float:right;
	width:200px;
}
#contactForm label {
	font-size:16px;
	font-weight:bold;
	display:block;
	color:#312600;
	margin:0 0 8px 0;
}
#contactForm label span {
	color:red;
	margin:0 0 0 3px;
	font-weight:normal;
	font-size:11px;
}
#contactForm .row {
	clear:both;
	overflow:hidden;
	margin:0 0 12px 0;
}
#contactForm .text {
	padding:5px;
	width:170px;
	border:2px #312600 solid;
}
#contactForm .telefon {
	width:180px;
}
#contactForm .textarea {
	width:391px !important;	
	height:120px;
	border:2px #312600 solid;	
}

#contactForm .requiredinfo {
	font-style:italic;
	color:#000;
	margin:0;
}
.success {
	background:url('../images/success.png') no-repeat;
	margin:0 0 20px 0;
	width:379px;
	height:79px;
	padding:19px 30px 0 30px;
	font-weight:bold;
	text-align:center;
}

/* [7. Smart text elements]
----------------------------------------------- */

.left-image,
.leftImage  { margin:5px 15px 10px 0; float:left; }
.right-image,
.rightImage { margin:5px 0 10px 15px; float:right; }

/* filegallery */

.filegallery              { margin: 0 0 20px 0; }
.filegallery .alternative { background-color:#f9f9f9; }
.filegallery .last        { text-align: right; }
.filegallery tr:hover     { background-color: #fef8bf; }
.filegallery th, 
.filegallery td {
    padding: 5px 10px 5px 10px;
    border-bottom: 1px solid #dfd09a;
}
.filegallery thead th {
    background-color: #d2c081;
    font-weight: bold;
	font-size:13px;
}
.filegallery .typeicon {
    vertical-align: middle;
    margin: 0 10px 0 0;
}

/* quote */

.quote {
	margin:10px 0 20px 40px;
	padding: 0 0 0 15px;
	border-left: 5px #000 solid;
	font-style:italic;
	font-size:14px;
}

/* image gallery */
.imagegallery {	margin:0 0 20px 0; }
.imagegallery img {	margin:0 5px 5px 0; }

/* pic */
.pic { text-align:center; margin:0 0 20px 0; }

/* embeddedmedia */
.embeddedmedia { text-align:center;	margin:0 0 20px 0; }


/* [8. Page elements]
----------------------------------------------- */

/* creditcards */

.creditcards {
	background:url('../images/creditcards.png') no-repeat;	
	width:203px;
	height:20px;
	float:left;
}
#topmenu .creditcards {
	margin:23px 37px 0 0;
	float:right;
	display:inline;
}

/* sidebarMenu */

.sidebarElement {
	height:100%;
	overflow:hidden;
	clear:both;
	margin:0 0 10px 0;
}
.sidebarElement img {
	display:block;
}
.sidebarElement p {
	padding:0 10px;	
}
.sidebarElement ul {
	list-style-type:none;
	margin:0 0 25px 8px;
}
.sidebarElement ul li a {
	font-weight:bold;
	line-height:25px;
}
.sidebarElement h3.headline {
	background:url('../images/sidebarTitle.png') no-repeat;	
	margin:0 0 10px 0;
	overflow:hidden;	
	font-size:13px;	
	padding:0 5px 0 13px;
	width:200px;	
	/*width:218px;*/
	height:45px;
	line-height:50px;
	text-align:center;
	color:#413716;
	text-transform:uppercase;
	font-weight:bold;	
}
.sidebarElement ul.sidebarMenu {
	width:202px;
}
.sidebarElement ul.sidebarMenu li {
	display:block;
	background:url('../images/sidebarBorder.png') no-repeat bottom;
	width:202px;
	line-height:35px;	
}
.sidebarElement ul.sidebarMenu li a {
	color:#f26522;
	text-transform:uppercase;
	font-weight:bold;	
	line-height:35px;	
}

/* header basket */

#header #basket {
	background:url('../images/headerBasket.png') no-repeat;
	width:138px;	
	height:77px;
	position:absolute;
	right:37px;
	top:56px;
	padding:10px 20px 0 20px;
}
#header #basket .title {
	font-size:13px;
	color:#5c3e21;
	font-weight:bold;
	text-transform:uppercase;	
	margin:0 0 2px 0;
}
#header #basket .items {
	font-size:12px;
	color:#242424;
	font-weight:bold;
	margin:0 0 6px 0;
}



/* faq */

.faqList {
	list-style-type:none;
	margin:0 0 35px 0;	
}
.faqList li{
	padding-top: 10px;
}
.faqList a {
	font-size:13px;
	line-height:24px;
	font-weight:bold;
}
.faq {
	clear:both;
	margin:0 0 30px 0;
	width:435px;
}
.faq .question {
	background:url('../images/faqQuestion.gif') no-repeat left top;
	padding:0 0 0 35px;
	line-height:22px;
	font-size:16px;
	color:#323232;
	font-weight:bold;
	float:left;
	width:340px;
}
.faq .top {
	font-size:12px;
	float:right;
	font-weight:bold;
	width:45px;
}
.faq .answer {
	background:url('../images/faqAnswer.gif') no-repeat left 5px;
	width:400px;
	padding:0 0 5px 35px;
	clear:both;
	margin:0 0 30px 0;
}
.faq .answer p {
	font-size:13px;
	color:#4a4a4a;
}

/* banner */

.banner {
	margin:0 0 20px 0;
	width:675px;
}
.bannerPic {
	float:left;
}
.banner .offer {
	background:url('../images/bannerOfferBG.jpg') no-repeat;
	width:167px;
	height:215px;
	padding:10px 20px 10px 20px;
	overflow:hidden;
	float:right;
}
.banner .offer .price {
	font-size:17px;
	color:#202b09;
	font-weight:bold;
}
.banner .offer .btnGoldBig {
	margin-bottom:5px;
}
.banner .offer .desc {
	font-size:11px;
	color:#212c09;
}

/* sidebar element - telefon */

.telefon {
}
.telefon h4 {
	background:url('../images/imageTelefon.png') no-repeat top right;
	padding:5px 80px 10px 8px;
	margin:0 0 10px 0;
	font-size:16px;
	line-height:21px;
	color:#311604;
	font-weight:bold;
}
.telefon p {
	color:#644c3d;
}
.telefon object {
	margin:0 0 0 8px;
}

/* buckets */

#bucketsContainer {
	width:942px;
	position:relative;
	margin-left:-22px;
}

#bucketsContainer .bucket {
	float:left;
	display:inline;
	margin:0 0 21px 21px;
	width:293px;
}
#bucketsContainer .bucket h2 {
	margin:0 0 15px 0;
	font-size:14px;
	color:#2d2d2d;
	font-weight:bold;
	text-transform:uppercase;	
}
#bucketsContainer .bucket h2 p 
{
	margin:0 0 15px 0;
	font-size:14px;
	color:#2d2d2d;
	font-weight:bold    
}
#bucketsContainer .bucket h2 a {
	font-size:14px;
	color:#2d2d2d;
	font-weight:bold;
	text-transform:uppercase;
}
#bucketsContainer .bucket img {
	display:block;
	margin:0 0 5px 0;
}
#bucketsContainer .bucket p {
	font-size:12px;
	color:#3f391d;
	margin:0 4px 15px 4px;
}
#bucketsContainer .bucket p a {
	font-size:13px;	
	font-weight:bold;
}

/* demoPlayer */

#demoPlayer {
	background:url('../images/hLine.png') no-repeat left bottom;
	padding:0 0 12px 0;
	margin:0 0 15px 0;
}
#demoPlayer h2 {
	font-size:14px;
	color:#2d2d2d;
	font-weight:bold;
	text-transform:uppercase;
	float:left;	
	margin:0 24px 0 60px;
	display:inline;
}


/* frontpage module */

.scrollable { 
    position:relative; 
    overflow:hidden; 
    width: 919px; 
    height: 350px; 
	z-index:1;
	margin:2px;
} 
.scrollable img {
	display:block;
}

#moduleNav {
	list-style-type:none;
	margin:10px 0 0 5px;
	position:absolute;
	z-index:10;
	cursor:pointer;
	width:224px;
}
#moduleNav li a {
	width:204px;
	height:49px;
	line-height:49px;
	display:block;
	font-size:12px;
	color:#312600;
	font-weight:bold;
	text-align:center;
	padding:0 10px;
	background:url('../images/moduleDivider.png') no-repeat center bottom;
	text-decoration:none;	
}
#moduleNav li a p 
{
    font-size:12px;
    line-height:49px;
    margin:0;
	color:#312600;
	font-weight:bold;
	text-align:center;    
}
#moduleNav li:hover,
#moduleNav .active {
	background:url('../images/moduleNav.png') no-repeat;
	text-decoration:none;			
}

/* module */

#module {
	width:919px;	
    height: 350px;
	padding:2px; 
	background:url('../images/moduleBG.png') no-repeat;	
	margin:0 0 15px 0;
	margin-left:-2px;
	margin-top:-10px;		
}
#flowpanes { 
    position:relative; 
    overflow:hidden; 
    clear:both; 
	width:919px;	
    height: 350px;
} 
 
#flowpanes div { 
    float:left; 
    display:block; 
    width: 919px; 
    height: 350px; 
} 
#flowpanes .items { 
    width:20000em; 
    position:absolute; 
    clear:both; 
    margin:0; 
    padding:0; 
} 



.productImage
{
    border:2px #473a34 solid;
}

#productPage {
	text-indent:-9000px;
	display:none;
}


