﻿/*------------------------------------------------------------------
	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  Arial, Helvetica, sans-serif;
	/* font: font-weight font-size/line-height font-family */	
	color:#363636;
	text-align:left;
	background:#e6e6e6; 
	line-height:160%;	
}
body,html    {}


/* [2. Typography
----------------------------------------------- */

/* Headlines */

h1,h2,h3,h4,h5,h6 { font-weight: bold; color: #363636; }

h1 { font-size: 31px; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 16px; margin-bottom: 0.75em; }
h3 { font-size: 18px; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; 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:#057dc2; }
a:focus,
a:hover { text-decoration: underline; color:#057dc2; }


/* 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:960px;
	margin:0 auto;
	position:relative;
}
#mainarea{
	width:960px;
	margin:0 auto;
	clear:both;
	position:relative;
}
#content {
	width:720px;
	float:right;
}
#content #contentArea {
	width:465px;
	float:left;
}
#content #contentSidebar {
	width:186px;
	float:right;
}
#sidebar {
	width:220px;
	float:left;
}
.divider {
	background:url('/images/divider.gif') repeat-y 482px 0;
}
#header {
	position:relative;
	height:150px;
	z-index:1000; /* get submenu working */	
	margin:0 0 15px 0;
}
#header #logo {
	width:342px;
	height:52px;	
	background:url('/images/logo.png') no-repeat;
	text-indent:-9000px;
	float:left;
	position:absolute;
	top:31px;
	left:0;
}

/* [4. Navigation]
----------------------------------------------- */

/* Topmenu */

#topmenu {
	float:right;
	margin:45px 0 0 0;
}
#topmenu ul {
	list-style-type:none;
	margin:0;
}
#topmenu ul li {
	float:left;
	display:inline;
	color:#979797;
	padding:0 0 0 10px;
}
#topmenu ul li a {
	color:#057dc2;
	font-size:11px;
	font-weight:bold;
	text-decoration:none;
	margin:0 0 0 10px;
	text-transform:uppercase;
}
#topmenu ul li a:hover {
	text-decoration:underline;
}


/* navmenu */

#navmenu {
	position:absolute;
	bottom:0;
	background:url('/images/navmenuBg.png') no-repeat;
	width:966px;
	height:44px;
	margin-left:-3px;	
	padding:2px 0 4px 0;	
}
#navmenu ul {
	list-style-type:none;
	padding:0;
	width:670px;
	float:left;
}
#navmenu ul li {
	float:left;
	display:inline;
	padding:0 2px 0 0;
	line-height:44px;	
	position:relative;
	background:url('/images/navmenuBorder.gif') no-repeat right 2px;
}
#navmenu ul li a {
	color:#fff;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;	
	float:left;
	padding:0 20px;
	text-shadow:1px 1px 1px #214c65;
	cursor:pointer;
}
#navmenu ul li.current a,
#navmenu ul li a:hover {
	background:#1c475f;
	text-decoration:none;
}


/* Second and subsequent levels */
#navmenu ul ul {
    margin:0;
	padding:0;	
	list-style-type:none;
    position:absolute;
    top:44px;
	left:0px;	
	width:210px;
	height:auto;
	z-index:10;
	background:#1c475f;
}
#navmenu ul li ul li {
	display:block;
	line-height:25px !important;
	margin:0;	
	padding:0 0 2px 0;
	background:url('/images/navmenuBottomBorder.gif') repeat-x bottom;
}
#navmenu ul li ul li a {
	color:#fff !important;
	font-size:11px;
	text-shadow:none;
	padding:0 20px;
	display:block;
	width:170px;	
}
#navmenu ul li ul li a:hover {
	text-decoration:none;
	background:#2d607d;
}
#navmenu ul ul { display: none; }
#navmenu ul li:hover ul { display: block; }
#navmenu ul ul li { display: inline; }


#topSearch {
	margin:10px 20px 0 0;
}
#topSearch .inputLeft {
    background:url('/images/searchInputLeft.png') no-repeat;
	width: 13px;
	height: 25px;	
	float: left;
}
#topSearch .inputRight {
    background:url('/images/searchInputRight.png') no-repeat;
	width: 13px;
	height: 25px;
	float: left;	
}
#topSearch .inputContent {
	float: left;
    height: 25px;
    width: 150px;
}
#topSearch .text {
    background:url('/images/searchInputContent.gif') repeat-x;
	width:150px;
	border:0px;
	padding:6px 0px 0 0px;	
	height:19px;
	font-size:11px;
	color:#afafaf;
	font-style:italic;
	float:left;
	outline:none;
}
#topSearch .searchBtn {
	background: url('/images/searchBtn.png') no-repeat;
	width: 44px;
	height: 26px;
	border:none;
	padding:0;
	margin:0 0 0 10px;	
	float:left;
	outline:none;
}

/* Footer */

#footer {
	background:url('/images/footerBorders.gif') repeat-x;
	height:49px;
	line-height:49px;
	width:960px;
	margin:20px auto;		
}
#footer p {
	font-size:12px;
	color:#6d6d6d;
	line-height:49px;
	margin:0;
}
#footer .infoaboutcompany {
	float:left;
	margin:0;
}
#footer .designed {
	float:right;
}
#footer .designed a {
	font-weight:bold;
}

/* [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; }


/* btnGrey */

a.btnGrey {
	background: transparent url('/images/btnGreyRight.png') no-repeat scroll top right;
    height: 34px;
	/* font styles */
    color: #363636;
    font-size: 12px;
    font-weight: bold;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #ebebeb;		
}
a.btnGrey span {
	background: transparent url('/images/btnGreyLeft.png') no-repeat;
    line-height: 34px;
    padding: 0 12px 0 18px;	
}
a.btnGrey:hover span { color: #363636; }
a.btnGrey,
a.btnGrey:hover {
	padding-right: 6px; /* width for button-right */
}

/* btnGrey */

a.btnGreyBig {
	background: transparent url('/images/btnGreyBigRight.png') no-repeat scroll top right;
    height: 45px;
	/* font styles */
    color: #022928;
    font-size: 14px;
    font-weight: bold;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #f2f2f2;		
}
a.btnGreyBig span {
	background: transparent url('/images/btnGreyBigLeft.png') no-repeat;
    line-height: 45px;
    padding: 0 24px 0 30px;	
}
a.btnGreyBig:hover span { color: #363636; }
a.btnGreyBig,
a.btnGreyBig:hover {
	padding-right: 6px; /* width for button-right */
}

/* [6. Contact form]
----------------------------------------------- */


.contactBox {
	width:907px;
	padding:25px 30px 25px 15px;
}
.col2Box {		
	background:url('/images/divider.gif') repeat-y 430px 0;
	width:907px;
}
.colLeft {
	float:left;
	width:400px;
}
.colRight {
	width:451px;
	float:right;
}

.contactInfo h2 {
	font-size:18px;
	line-height:100%;
	border-bottom:1px #cbcbcb solid;	
	padding:0 0 5px 0;
	margin:0 0 20px 0;	
}
.contactInfo .col {
	width:170px;
	padding:0 30px 25px 0;
	float:left;
}
.contactInfo .col .flag {
	width:25px;
	float:left;
	margin:5px 0 0 0;
}
.contactInfo .col .text {
	width:145px;
	float:left;
}
.contactInfo .col h3 {
	font-size:13px;
	line-height:21px;
	margin:0;
}
.contactInfo .col p {
	line-height:21px;
}



#contactForm {
	margin:10px 0 0 0;
}
#contactForm .colLeft {
	float:left;
	width:203px;
}
#contactForm .colRight {
	float:right;
	width:203px;	
}
#contactForm .title {
	font-weight:bold;
	border-bottom:1px #e1e1e1 solid;
	padding:0 0 5px 0;
	font-size:12px;
	color:#525252;
}
#contactForm .row {
	clear:both;
	margin:0 0 10px 0;
	height:100%;
	overflow:hidden;
}
#contactForm label {
	font-size:12px;
	font-weight:bold;
	display:block;
	color:#525252;
}
#contactForm label span {
	color:#d50000;
	margin:0 0 0 5px;
}
#contactForm .inputLeft {
    background:url('/images/inputWhiteCornersLeft.png') no-repeat;
	height: 34px;
	width: 5px;
	float: left;
}
#contactForm .inputRight {
    background:url('/images/inputWhiteCornersRight.png') no-repeat;
	height: 34px;
	width: 5px;
	float: left;	
}
#contactForm .inputContent {
	float: left;
    height: 34px;
    width: 191px;
}
#contactForm .text {
    background:url('/images/inputWhiteCornersContent.png') repeat-x;
	width:181px;
	border:0px;
	padding:0;
	height:26px;
	padding:8px 5px 0 5px;
	font-size:12px;
	float:left;
	outline:none;
}
#contactForm .select {
	width:198px;
	margin:3px 0 0 0;
	padding:5px;
}
#contactForm .textarea {
	width:415px !important;
	height:100px;
	font-size:12px;	
}
#contactForm .cornerTop {
	background:url('/images/cornerContactTop.gif') no-repeat;
	width:451px;
	height:5px;
	display:block;
}
#contactForm .cornerBottom {
	background:url('/images/cornerContactBottom.gif') no-repeat;
	width:451px;
	height:5px;
	display:block;	
}
#contactForm .contactFormDiv {
	background:#f0f0f0;
	padding:5px 12px;	
}
#contactForm .btn {
	margin-top:10px;	
}
#contactForm .btn span {
	width:140px;
}


/* [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 #c9c9c9;
}
.filegallery thead th {
    background-color: #f2f2f2;
    font-weight: bold;
	font-size:13px;
}
.filegallery .typeicon {
    vertical-align: middle;
    margin: 0 10px 0 0;
}

/* messages */

.success{
	background:#67b315;
	margin:0 0 10px 0;
	padding:0.666em;
	text-align:center;
	color:#fff;
	font-weight:bold;
}

/* 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]
----------------------------------------------- */

.prodImage {
	margin:5px 25px 15px 15px; float:left;	
}

/* pageNav */

.pageNav {
	background:url('/images/pageNavBorder.gif') repeat-x bottom;
	padding:0 0 5px 0;
	margin:0 0 10px 0;
	width:960px;
}
/*
.pageNav ul.breadcrumb {
	float:left;
	list-style-type:none;
	margin:0;
}
.pageNav ul.breadcrumb li {
	float:left;
	text-transform:uppercase;
	font-size:14px;
	font-weight:bold;
	color:#545454;
	margin:0 5px 0 0;
}
.pageNav ul.breadcrumb li a {
}
*/
.breadcrumb
{	
	float:left;
	text-transform:uppercase;
	font-size:14px;
	font-weight:bold;
	color:#545454;

}
.breadcrumb span,
.breadcrumb a 
{
	margin:0 0 0 5px;		
}	

.pageNav .print {
	font-size:11px;
	font-weight:bold;
	line-height:16px;
	text-transform:uppercase;
	float:right;
}


/* roundBox */

.standardBox {
	padding:20px;	
}
.dialog {
	margin:0 0 10px 0;
}
.dialog .hd .c, .dialog .ft .c { font-size: 1px; }
.dialog .hd .c,
.dialog .ft .c { height: 4px; }
.dialog .hd { 
	background: transparent url('/images/cornerTL.gif') no-repeat 0px 0px; 
}
.dialog .hd .c { 
	background: transparent url('/images/cornerTR.gif') no-repeat right 0px;
}
.dialog .ft {
    background: transparent url('/images/cornerBL.gif') no-repeat 0px 0px;
}
.dialog .ft .c {
    background: transparent url('/images/cornerBR.gif') no-repeat right 0px;
}
.dialog .bd .c .s {
    margin: 0px 4px;
    background: #fff;
}
.dialog .hd,
.dialog .bd .c,
.dialog .ft {
	background-color:#cdcdcd;
}


/* styling sidebar roundBox */

#sidebar .dialog .bd .c .s {
	padding:20px 15px 10px 15px;
}
#sidebar h3 {
	border-bottom:1px #cbcbcb solid;
	line-height:100%;
	padding:0 0 5px 0;
	margin:0 0 5px 0;
}

/* submenu */

ul.submenu,
#bucketsContainer .bucket .styleUL ul {
	list-style-type:none;
	margin:0;
}
ul.submenu li,
#bucketsContainer .bucket .styleUL ul li {}
ul.submenu li a,
#bucketsContainer .bucket .styleUL ul li a {
	background:url('/images/bullet.gif') center left no-repeat;
	padding:0 0 0 12px;
	font-size:14px;
	font-weight:bold;
	color:#057dc2;
	line-height:30px;
}
ul.submenu li a:hover,
ul.submenu li.current a,
#bucketsContainer .bucket .styleUL ul li a:hover {
	background:url('/images/bulletHover.gif') center left no-repeat;	
	color:#545454;
	text-decoration:none;
}

/* styling content roundBox */

#content .dialog .bd .c .s {
	padding:20px 15px 10px 15px;
}


/* calltoAction */

.calltoActionTop {
	background:url('/images/calltoActionTop.gif') no-repeat;
	width:186px;
	height:7px;
	display:block;
}
.calltoActionBottom {
	background:url('/images/calltoActionBottom.gif') no-repeat;
	width:186px;
	height:7px;
	display:block;
	margin:0 0 30px 0;	
}
.calltoAction {
	background:#f0f0f0;
	width:166px;
	padding:10px 10px 5px 10px;
}
.calltoAction h3 {
	font-size:16px;
	line-height:130%;
	margin:0 0 5px 0;
}
.calltoAction p {
	font-size:12px;
	color:#5e5e5e;
}
.calltoAction .btn span {
	width:130px;
}

/* latestNews */

.latestNews {
	margin:0 0 30px 0;
}
.latestNews .date {
	display:block;
	font-size:11px;
	line-height:21px;
	color:#5b5b5b;
}
.latestNews .title {
	display:block;
	font-size:12px;
	line-height:17px;
	font-weight:bold;
	color:#057dc2;	
	margin:0 0 12px 0;
}
.latestNews h3 {
	border-bottom:1px #cbcbcb solid;
	line-height:100%;
	padding:0 0 5px 0;
	margin:0 0 5px 0;	
}

/* industriesNav */

ul.industriesNav {
	list-style-type:none;
	margin:0;
	width:192px;
	margin-right:-10px;
}
ul.industriesNav li {
	width:192px;
	display:block;
	float:left;
}
ul.industriesNav li a {
	padding:0 0 0 5px;
	font-size:14px;
	font-weight:bold;
	color:#057dc2;
	line-height:30px;
}
ul.industriesNav li a:hover,
ul.industriesNav li.current a {
	color:#545454;
	text-decoration:none;
}
ul.industriesNav .pic {		
	margin:0;
	width:30px;
	height:30px;
	line-height:30px;
	float:left;
}
ul.industriesNav .pic img 
{
	margin:0 auto;
	vertical-align:middle;
	padding:3px 0 0 0;
}
ul.industriesNav .plastic .pic {
	background:url('/images/indPlastic.png') center center no-repeat;	
}
ul.industriesNav .rubber .pic {
	background:url('/images/indRubber.png') center center no-repeat;	
}
ul.industriesNav .coating .pic {
	background:url('/images/indCoating.png') center center no-repeat;	
}
ul.industriesNav .adhesive .pic {
	background:url('/images/indAdhesive.png') center center no-repeat;	
}
ul.industriesNav .ink .pic {
	background:url('/images/indInk.png') center center no-repeat;	
}
ul.industriesNav .lab .pic {
	background:url('/images/indLab.png') center center no-repeat;	
}
ul.industriesNav .construction .pic {
	background:url('/images/indConstruction.png') center center no-repeat;	
}
ul.industriesNav .road .pic {
	background:url('/images/indRoad.png') center center no-repeat;	
}
ul.industriesNav .detergent .pic {
	background:url('/images/indDetergent.png') center center no-repeat;	
}
ul.industriesNav .medico .pic {
	background:url('/images/indMedico.png') center center no-repeat;	
}
ul.industriesNav .textile .pic {
	background:url('/images/indTextile.png') center center no-repeat;	
}


/* productTable */

.productTable {
	margin:0 0 30px 0;
	color:#363636;
	font-size:12px;
	
}
.productTable thead tr {	
	background:url('/images/productTableHeader.gif') repeat-x;
	height:32px;
}

.productTable thead th {
	border-bottom:1px #cbcbcb solid;
	font-size:13px;
	padding:0 10px;	
	font-weight:bold;	
}
.productTable tbody td {
	padding:12px 10px;
	font-weight:bold;	
	border-bottom:1px #cbcbcb solid;
	vertical-align:top;
}
.productTable .company
{
	font-size:12px;
	font-weight:bold;
	color:#057dc2;
	text-transform:uppercase;
	width:200px;
}
.productTable .company img 
{
	display:inline;
	vertical-align:middle;
}



/* banner */

#banner {
	width:952px;
	height:290px;
	position:relative;
	/*background:url('/images/banner.jpg') no-repeat;*/
}
#banner .descriptionArea {
	padding:30px 0 0 25px;
	width:430px;
}
#banner .descriptionArea h1 {
	font-size:25px;
	line-height:33px;
	font-weight:bold;
	color:#fff;
	margin:0 0 5px 0;
}
#banner .descriptionArea p {
	font-size:14px;
	line-height:22px;
	color:#fff;
}
#banner .descriptionArea .btn  {
	margin-top:20px;
}
.roundBoxContainer {
	width:100%;
}
.roundBoxContainer .dialog {
	padding:0;
}

/* buckets */

#bucketsContainer {
	width:982px;
	position:relative;
	margin-left:-22px;
	margin:20px 0 0 -22px;
}

#bucketsContainer .bucket {
	float:left;
	display:inline;
	width:305px;
	margin:0 0 0 22px;
	position:relative;
}
#bucketsContainer .bucket .roundBox {
	padding:15px;
}
#bucketsContainer .bucketArrow {
	background:url('/images/bucketArrow.png') no-repeat;
	width:24px;
	height:46px;
	position:absolute;
	top:0;
	right:-20px;
}
#bucketsContainer .bucket h2 {
	font-size: 18px;		
	border-bottom:1px #cbcbcb solid;
	line-height:100%;
	padding:0 0 8px 0;
	margin:0 0 10px 0;		
}
#bucketsContainer .bucket .styleUL ul 
{
	margin:0 0 0 5px;	
}
#bucketsContainer .bucket .styleUL ul li a {
	line-height:24px;
}

/* industries */

.industries {
	padding:25px;
	width:902px;
}
.col4Box {
	padding:0;
	/*margin:0 0 0 25px;*/
	background:url('/images/industriesDivider.gif') repeat-y 40px top;
	position:relative;
	margin-left:-40px;
	width:942px
}
.col4Box .col {
	width:195px;
	float:left;
	display:inline;
	margin:0 0 20px 40px;
}
.col4Box .col h2 {
	padding:0;
	margin:0 0 10px 0;		
	font-size: 18px;		
	line-height:100%;	
}
.col4Box .col h2 a {
	color: #363636;	
}
.col4Box .col h2 a:hover {}
.col4Box .col .pic {
	float:left;
	width:45px;
}
.col4Box .col img { display:block; margin:5px 0 0 0; }
.col4Box .col .text {
	width:150px;
	float:left;
}
.col4Box .col .text p {
	font-size:12px;
	margin:0;
}
.col4Box .col .text a {
	font-weight:bold;
}


/* news */


.news {
	margin:15px 0 20px 0;
}
.news .date {
	color:#4d4d4d;
	font-size:11px;
	display:block;
	margin:0 0 5px 0;
	border-bottom:1px #cbcbcb solid;	
}
.news h2 {
	margin:0;
	line-height:21px;
}
.news .topInfo h2 a {
	display:inline;
	font-size:16px;
	font-weight:bold;
	color:#057dc2;
}
.news a {
	font-weight:bold;
}
.newsArchive {
	font-weight:bold;
	margin:50px 0 10px 0;
}

/* searchResults */

.searchResults {
	margin:0;
	list-style-type:none;
}
.searchResults li {
	margin:0 0 20px 0;
}
.searchResults h2 {
	margin-bottom:.3em;
}
.searchResults h2 a {
	color:#25aae1;
	font-size:14px;
}
.searchResults p span {
	background-color:#ffe29b;
	padding:0 2px;
}

