/*------------------------------------------------------------------
	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 12px/normal  Helvetica, Arial, sans-serif;
	/* font: font-weight font-size/line-height font-family */	
	color:#393939;
	text-align:left;
	background:#837b62 url('/images/bg.jpg') no-repeat top center;; 
}
body,html    { padding:13px 0; }


/* [2. Typography
----------------------------------------------- */

/* Headlines */

h1,h2,h3,h4,h5,h6 { font-weight: bold; color: #393939; }

h1 { font-size: 30px; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 24px; margin-bottom: 0.75em; }
h3 { font-size: 20px; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 18px; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 16px; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 14px; font-weight: bold; margin-bottom: 1.5em; }


/* Text elements */

p       { line-height:160%; margin:0 0 10px 0; font-weight:normal; }

a       { text-decoration: none; color:#b0252d; font-weight:bold; }
a:focus,
a:hover { text-decoration: underline; color:#b0252d; }


/* 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:930px;
	margin:0 auto;
	position:relative;
}
#mainarea {
	background:url('/images/mainareaBg.png') repeat-y;	
	width:838px;	
	margin:0 auto;
	clear:both;
	position:relative;
	padding:30px 46px 10px 46px;
	z-index:1;
}

#content {
	width:509px;
	float:left;
}
#sidebar {
	width:220px;
	float:right;
}
#header {
	position:relative;
	background:url('/images/headerBg.png') no-repeat;
	width:930px;
	height:294px;	
	text-align:left;
}
#header #logo {
	width:160px;
	height:169px;	
	background:url('/images/logo.png') no-repeat;
	text-indent:-9000px;
	float:left;
	position:absolute;
	top:-17px;
	left:-25px;
}
#header #phone {
	background:url('/images/phone.png') no-repeat;
	width:382px;
	height:222px;
	position:absolute;
	top:38px;;
	right:-57px;	
}
#header #slogan {
	position:absolute;
	top:45px;
	left:170px;
	font-size:20px;
	line-height:120%;
	font-weight:bold;
	color:#d6e5e8;
	width:400px;
}
#header #number {
	background:url('/images/number.png') no-repeat;
	width:318px;
	height:57px;	
	text-indent:-9000px;
	position:absolute;
	top:130px;
	left:200px;
}
#header #contact {
	position:absolute;
	top:200px;
	left:200px;
}
#header #contact p {
	font-size:12px;
	line-height:150%;
	color:#fff;
	width:170px;	
	float:left;
	margin:3px 0 0 0 ;
}
#header a.btn {
	margin-top:3px;
}

/* [4. Navigation]
----------------------------------------------- */

/* Topmenu */

#topmenu {
	padding:0;
    margin: 0;
    position: relative;
	float:left;
	background:url('/images/menuBg.png') no-repeat;
	width:930px;
	height:41px;	
}
#topmenu ul {
	list-style-type:none;
	margin:0 0 0 43px;;
}
#topmenu ul li {
	float:left;
	margin:0 40px 0 0;
	display:inline;
	line-height:41px;
}
#topmenu ul li a {
	color:#fff;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:1px 1px 1px #222222;	
}
#topmenu ul li a:hover,
#topmenu ul li.current a {
	text-decoration:underline;
}

/* Footer */

#footer {
	width:910px;
	margin:0 auto;	
	padding:50px 0 20px 0;
}
#footer p {
	font-size:12px;
	font-weight:bold;
	color:#7b121e;	
	text-align:center;
}
#footer a {
	font-size:12px;
	font-weight:bold;
	color:#7b121e;	
	text-align:center;
}



/* [5. Buttons]
----------------------------------------------- */

/* styles for all buttons */

a.btn {
    display: block;
    float: left;		
}
a.btn span { display: block; float:left; }
a.btn:hover { outline: none; cursor: pointer; text-decoration:none; background-position: center right; }
a.btn:hover span { background-position: center left; }

a.btn:active      { background-position: bottom right; }
a.btn:active span { background-position: bottom left;  }
a.btn,
a.btn:hover,
a.btn:active {
	padding-right: 10px; /* width for button-right */
}

/* btnGreen */

a.btnGreen {
	background: transparent url('/images/btnGreenRight.png') no-repeat scroll top right;
    height: 40px;
	/* font styles */
    color: #fffefe;
    font-size: 14px;
    font-weight: bold;
	text-decoration: none;
	text-align:center;	
}
a.btnGreen span {
	background: transparent url('/images/btnGreenLeft.png') no-repeat;
    line-height: 40px;
    padding: 0 12px 0 22px;
}
a.btnGreen:hover span { color: #fff; }

/* icons inside button */

.btn span em {
	margin-left:-10px;
	margin-top:7px;
	margin-right:10px;	
	float:left;			
	width:32px;
	height:25px;	
}

.iconSkype {
	background:url('/images/iconSkype.png') no-repeat;
}
.iconMail {
	background:url('/images/iconMail.png') no-repeat;	
}
.iconChat {
	background:url('/images/iconChat.png') no-repeat;	
}

.sameWidth span {
	width:140px;
	text-align:left;
}


/* [6. Contact form]
----------------------------------------------- */



/* [7. Smart text elements]
----------------------------------------------- */

.left-image,
.leftImage  { margin:5px 15px 10px 0; float:left; border:5px #c5c5c5 solid;  }
.right-image,
.rightImage { margin:5px 0 10px 15px; float:right; border:5px #c5c5c5 solid;  }

/* 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 #c9c9c9;
}
.filegallery thead th {
    background-color: #f2f2f2;
    font-weight: bold;
	font-size:13px;
}
.filegallery .typeicon {
    vertical-align: middle;
    margin: 0 10px 0 0;
}


/* quote */

.quote {
	font-size:24px;
	line-height:28px;
	text-align:center;
	font-weight:bold;
	color:#484848;
	width:350px;
	margin:0 auto;
}

/* image gallery */
.imagegallery {	margin:0 0 20px 0; }
.imagegallery img {	margin:0 5px 5px 0;	border:5px #c5c5c5 solid; }

/* pic */
.pic { text-align:center; margin:0 0 20px 0; }
.pic img { border:5px #c5c5c5 solid; }

/* embeddedmedia */
.embeddedmedia { text-align:center;	margin:0 0 20px 0; }


/* [8. Page elements]
----------------------------------------------- */

/* companyFooter */
#companyFooter {
	background:url('/images/bottomBoxBg.png') no-repeat;
	width:838px;
	height:249px;
	margin-top:30px;
	margin-left:-46px;
	margin-bottom:-48px;
	z-index:100;
	padding:25px 46px 0 46px;;
}
#companyFooter h3 {
	font-size:20px;
	color:#fff;
}
#companyFooter p {
	color:#fff;
}
#companyFooter .bookMeeting {
	float:left;
	width:545px;
}
#companyFooter .bookMeeting .text {}
#companyFooter .bookMeeting .btn { float:right; }
#companyFooter .bookMeeting .btn span { padding: 0 30px 0 40px;}
#companyFooter .bookMeeting .row {
	clear:both;
	margin:0 0 15px 0;
}
#companyFooter .download {
	float:right;
	width:220px;
}
#companyFooter .download p.contentTextFixedHeight {
	height:130px;
	overflow:hidden;
}
#companyFooter .downloadLink {
	text-align:right;	
	background:url('/images/iconDownload.png') no-repeat top center;	
	width:84px;
	height:85px;	
	position:absolute;
	right:-15px;
	bottom:-60px;
	cursor:pointer;
}
#companyFooter .downloadLink:hover {
	background-position:center center;
}
#companyFooter .downloadLink:active {
	background-position:bottom center;
}
#companyFooter .downloadLink a {
	color:#fff;
	font-size:16px;
	font-weight:bold;
	position:absolute;
	top:22px;
	left:-90px;
}
#companyFooter .downloadLink a span {
	display:block;
	color:#81c95d;
	font-size:11px;
}
#companyFooter .downloadLink a:hover {
	text-decoration:none;
	color:#81c95d;	
}

/* input styling */

#companyFooter .bookMeeting .text:focus { outline: 0; }
#companyFooter .inputLeft {
    background:url('/images/inputLeft.png') no-repeat;
	height: 35px;
	width: 8px;
	float: left;
}
#companyFooter .inputRight {
    background:url('/images/inputRight.png') no-repeat;
	height: 35px;
	width: 8px;
	float: left;	
	/*margin:0 13px 0 0;*/	
}
#companyFooter .inputContent {
	float: left;
    height: 35px;
    width: 250px;
    /*background:#e0e0e0;*/
}
#companyFooter .leftMargin {
	margin:0 0 0 13px;
}
#companyFooter .text {
    background:url('/images/inputContent.png') repeat-x;
	width:100%;
	border:0px;
	padding:0;
	height:26px;
	padding-top:9px;
	font-size:14px;
	color:#bcbcbc;
	font-weight:bold;	
	float:left;
}

/* boxes */

#boxes {
	/*width:837px;*/
	width:878px;
	margin-bottom:20px;
	margin-left:-40px;
}
#boxes .box {
	float:left;
	display:inline;
	width:250px;
	margin:0 0 0 40px;
}
#boxes .box h2 {
	font-size:30px;
	margin-bottom: 0.4em;
}
#boxes .box p {
	color:#393939;
	font-size:12px;
	line-height:18px;
}

/* boxRoundBlue */

.boxRoundBlue {
	background:url('/images/boxBlueBg.png') no-repeat top left;		
	width:469px;
	padding:25px 20px 15px 20px;
	clear:both;
	margin:0 0 30px 0;
}
.boxRoundBlue .boxBottom {
	background:url('/images/boxBlueBg.png') no-repeat bottom left;
	font-size:1px;
	line-height:1px;
	height:20px;
	margin:0 -20px -35px -20px;
}

.boxRoundBlue .leftCol {
	float:left;
	width:200px;
	padding:0 30px 0 0;
}
.boxRoundBlue .rightCol {
	float:left;
	width:200px;	
}

.boxRoundBlue ul {
	margin:0;
	list-style-type:none;
}
.boxRoundBlue ul li {
	background:url('/images/arrowPoint.png') no-repeat left top;	
	padding:0 0 0 40px;
	font-size:14px;
	font-weight:bold;
	color:#333;
	line-height:24px;
	margin:0 0 10px 0;
}