/*------------------------------------------------------------------
	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:#484848;
	text-align:left;
	background:#fff url('/images/bg.png') center top no-repeat; 
}
body,html    {}


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

/* Headlines */

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

h1 { font-size: 28px; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 22px; margin-bottom: 0.75em; }
h3 { font-size: 14px; line-height: 1.4; margin-bottom: 1em; }
h4 { font-size: 12px; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 11px; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 10px; font-weight: bold; margin-bottom: 1.5em; }


/* Text elements */

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

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

/* 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:700px;
	float:right;
}
#sidebar {
	width:220px;
	float:left;
}
#header {
	/*position:relative;*/
	height:324px;
}
#header #logo {
	width:225px;
	height:177px;	
	/*background:url('../images/bird.png') no-repeat;
	_behavior: url(../htc/iepngfix.htc);*/
	text-indent:-9000px;
	float:left;
	position:absolute;
	margin:0;
	top:47px;
	left:2px;
}
#header #companyInfo {
	position:absolute;
	width:555px;
	top:50px;	
	right:55px;
	text-align:left;
}
#header #companyInfo p#title {
	background:url('/images/headerTitle.png') no-repeat;
	_behavior: url(/htc/iepngfix.htc);	
	width:548px;
	height:39px;
	text-indent:-9000px;
	margin:0 0 10px 0;	
}
#header #companyInfo p {
	font-size:14px;
	line-height:20px;
	color:#484848;
}
#header #companyInfo a.btnRedBig {
	margin:10px 0 0 150px;
	display:inline;
}

/*lang */

#header #lang {
	background: transparent url('/images/btnLangRight.png') no-repeat scroll top right;
	_behavior: url(/htc/iepngfix.htc);
    display: block;
    float: left;
    height: 24px;
	padding-right: 6px; /* width for button-right */
	margin:0;
	position:absolute;
	top:0;
	right:0;	
	/* font styles */
    color: #e6e6e6;
    font-size: 12px;
    font-weight: bold;
	text-decoration: none;
	text-align:center;	
	text-shadow:1px 1px 1px #2f3d50;		
}
#header #lang span {
	background: transparent url('/images/btnLangLeft.png') no-repeat;
    display: block;
	float:left;	
    line-height: 24px;
    padding: 0 10px 0 12px;
}
#header #lang span a {
    color: #e6e6e6;
    font-size: 12px;	
	text-decoration:none;
	padding:0 0 0 25px;	
}
#header #lang span a:hover { text-decoration:underline; }
#header #lang span a#en { background:url('/images/flagEn.gif') no-repeat left 2px; }
#header #lang span a#dk { background:url('/images/flagDk.gif') no-repeat left 2px; }


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

/* sidebarMenu */

#sidebarMenu {
	width:200px;
	padding:10px
}
#sidebarMenu ul {
	list-style-type:none;
	margin:0;
}
#sidebarMenu ul li {
	display:block;
	background:url('/images/arrowRed.gif') no-repeat 10px 10px;
	padding:10px 0 10px 30px;
	/*border-bottom:1px #b3b3b3 dotted;*/
	width:190px;
	margin-left:-10px;
}
#sidebarMenu ul li a {
	color:#333;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
}
#sidebarMenu ul li a:hover {
	text-decoration:underline;
}
#sidebarMenu .elementWithSubmenu {
	border-top:1px #b3b3b3 dotted;
	border-bottom:1px #b3b3b3 dotted;
	margin-top:5px;
	margin-bottom:5px;
}

/* second ul */

#sidebarMenu ul li ul {
	margin:10px 0 0 0;
}
#sidebarMenu ul li ul li {
	background:none;
	padding:0;
	border-bottom:none;
	margin-left:-5px;
	height:16px;
	margin-bottom:7px;
	width:190px;
	display:block;
}
#sidebarMenu ul li ul li a {
	font-size:13px;
	font-weight:normal;
	color:#484848;
	background-position: left top;	
	background-repeat:no-repeat;
	padding:0 10px 0 25px;	
}
#sidebarMenu ul li ul .online a         { background-image:url('/images/submenuIconOnline.gif'); }
#sidebarMenu ul li ul .site a           { background-image:url('/images/submenuIconSite.gif'); }
#sidebarMenu ul li ul .kampagne a       { background-image:url('/images/submenuIconKampagne.gif'); }
#sidebarMenu ul li ul .dropout a        { background-image:url('/images/submenuIconDropout.gif'); }
#sidebarMenu ul li ul .nyhedsbrev a     { background-image:url('/images/submenuIconNyhedsbrev.gif'); }
#sidebarMenu ul li ul .usabillity a     { background-image:url('/images/submenuIconUsabillity.gif'); }
#sidebarMenu ul li ul .laboratorietes a { background-image:url('/images/submenuIconLaboratorietes.gif'); }
#sidebarMenu ul li ul .brugertest a { background-image:url('/images/icon-brugertest.png'); _behavior: url(/htc/iepngfix.htc);}
#sidebarMenu ul li ul .brugertest a:hover { background-image:url('/images/icon-brugertest-hover.png'); _behavior: url(/htc/iepngfix.htc); }
#sidebarMenu ul li ul .webshop-optimering a { background-image:url('/images/icon-webshop-optimering.png'); _behavior: url(/htc/iepngfix.htc);}
#sidebarMenu ul li ul .webshop-optimering a:hover { background-image:url('/images/icon-webshop-optimering-hover.png'); _behavior: url(/htc/iepngfix.htc); }

#sidebarMenu ul li ul a:hover         { background-position: left bottom; }

#sidebarMenu ul li ul li a:hover {
	text-decoration:none;
	color:#000;
}


/* Footer */

#footerContainer {
	background:url('/images/footer.jpg') no-repeat center bottom;
	height:427px;
	width:100%;
	margin:0 auto;
}
#footerContainer #footer {
	width:960px;
	height:427px;	
	margin:0 auto;
	position:relative;
}
#footer .aboutCompany {
	position:absolute;
	bottom:23px;
	left:210px;
	margin:0;
}

/* group retouch */

#footer #partOfRetouch {
	position:absolute;
	bottom:22px;
	right:0;	
}
#footer #btnRetouch {
	width:198px;
	height:31px;	
	background:url('/images/btnRetouchGroup.png') left top no-repeat;
	_behavior: url(/htc/iepngfix.htc);	
	text-indent:-9000px;
	position:absolute;
	bottom:0;
	right:0;
	cursor:pointer;
	z-index:10;
}
#footer #btnRetouch:hover  { background-position:left center; }
#footer #btnRetouch:active { background-position:left bottom; }

#footer .partOfRetouch ul {
	background:url('/images/partOfRetouchBg.png') no-repeat top;
	_behavior: url(/htc/iepngfix.htc);	
	width:198px;
	position:absolute;
	bottom:25px;
	right:0;	
	list-style-type:none;
	margin:0;
	z-index:1;
	text-align:left;
}
#footer .partOfRetouch ul li {
	background:url('/images/footerPartOfRetouchBorder.gif') repeat-x bottom;
	width:190px;
	/*padding:5px 0 20px 8px;*/
	padding:5px 0 0px 8px;
	/*margin:5px 0;*/
	display:block;
	clear:both;
	height:55px;
}
#footer .partOfRetouch ul li:hover {
	background-color:#1b1c1d;
	cursor:pointer;
}
/* first panel with top rounded corner on hover */

#footer .partOfRetouch ul li.first:hover {
	background:transparent url('/images/partOfRetouchTopHoverCorner.png') no-repeat top;
	
}
#footer .partOfRetouch li.first {
	padding-top:5px;
}

#footer .partOfRetouch li.last {
	background:none;
	padding-bottom:5px;
}
#footer .partOfRetouch li.birdsview img {
	margin-top:3px;
}

#footer .partOfRetouch ul li div {
	float:left;
	width:60px;
	margin:0 5px 0 0;
}
#footer .partOfRetouch ul li div img {
	_behavior: url(/htc/iepngfix.htc);
	margin:0 auto;
	display:block;
}
#footer .partOfRetouch ul li p {
	padding:5px 0 0 0;
	margin:0;
	font-size:18px;
	line-height:130%;
	font-weight:bold;
	color:#fff;
	text-shadow:1px 1px 1px #000;	
}
#footer .partOfRetouch ul li p span {
	display:block;
	font-size:9px;
	line-height:100%;
	color:#b7babd;
}

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

/* btnRedBig */

a.btnRedBig {
	background: transparent url('/images/btnRedBigRight.png') no-repeat scroll top right;
	_behavior: url(/htc/iepngfix.htc);
    display: block;
    float: left;
    height: 64px;
	/* font styles */
    color: #fff;
    font-size: 28px;
    font-weight: bold;
	text-decoration: none;
	text-align:center;	
}
a.btnRedBig span {
	background: transparent url('/images/btnRedBigLeft.png') no-repeat;
    display: block;
	float:left;	
    line-height: 64px;
    padding: 0 16px 0 32px;
}
a.btnRedBig:hover {
    background-position: center right;
    outline: none;
	text-decoration:none;
    cursor: pointer;	
}
a.btnRedBig:hover span {
    background-position: center left;		
    color: #fff;	
	text-decoration:none;	
}
a.btnRedBig:active      { background-position: bottom right; }
a.btnRedBig:active span { background-position: bottom left;  }
a.btnRedBig,
a.btnRedBig:hover,
a.btnRedBig:active {
	padding-right: 16px; /* width for button-right */
}


/* btnRed */

a.btnRed {
	background: transparent url('/images/btnRedRight.png') no-repeat scroll top right;
	_behavior: url(/htc/iepngfix.htc);
    display: block;
    float: left;
    height: 22px;
	/* font styles */
    color: #fff;
    font-size: 12px;
    font-weight: bold;
	text-decoration: none;
	text-align:center;	
}
a.btnRed span {
	background: transparent url('/images/btnRedLeft.png') no-repeat;
    display: block;
	float:left;	
    line-height: 22px;
    padding: 0 5px 0 10px;
}
a.btnRed:hover {
    background-position: bottom right;
    outline: none;
	text-decoration:none;
    cursor: pointer;	
}
a.btnRed:hover span {
    background-position: bottom left;		
    color: #fff;	
	text-decoration:none;	
}
a.btnRed,
a.btnRed:hover {
	padding-right: 5px; /* width for button-right */
}


/* btnGreen */

.btnGreen {
	background: transparent url('/images/btnGreenRight.png') no-repeat scroll top right;
	_behavior: url(/htc/iepngfix.htc);
    display: block;
    float: left;
    height: 29px;
	padding-right: 7px; /* width for button-right */
	/* font styles */
    color: #fff;
    font-size: 12px;
    font-weight: bold;
	text-decoration: none;
	text-align:center;	
	text-shadow:1px 1px 1px #000;	
}
.btnGreen span {
	background: transparent url('/images/btnGreenLeft.png') no-repeat;
    display: block;
	float:left;	
    line-height: 29px;
    padding: 0 7px 0 14px;
}

/* btnError */

.btnError {
	background: transparent url('/images/btnErrorRight.png') no-repeat scroll top right;
	_behavior: url(/htc/iepngfix.htc);
    display: block;
    float: left;
    height: 27px;
	padding-right: 15px; /* width for button-right */
	margin:0 0 0 10px;
	/* font styles */
    color: #333;
    font-size: 12px;
    font-weight: bold;
	text-decoration: none;
	text-align:center;	
}
.btnError span {
	background: transparent url('/images/btnErrorLeft.png') no-repeat;
    display: block;
	float:left;	
    line-height: 27px;
    padding: 0 0 0 25px;
}



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

#contactForm {
	padding-top:30px;	
	float:left;	
}
#contactForm .row {
	height:100%;
	overflow:hidden;
	clear:both;
	margin:0 0 10px 20px;
	_margin-left:10px;
}
#contactForm input.text {
	border:1px solid #bebebe;
	padding:4px;
	width:300px;
	font-size:14px;
	color:#848484;
	float:left;
}
#contactForm input.text:focus,
#contactForm .textarea:focus { border:1px solid #666; }
#contactForm input.requiredField { background-color:#ffcccc; }
#contactForm .textarea {
	border:1px solid #bebebe;	
	padding:2px;
	width:590px !important;
	height:100px;
	font-size:14px;
	color:#848484;	
}
#contactForm a.btnRed {
	float:right;
	margin:10px 24px 0 0;
	display:inline;
}
.thankyou p {
	text-align:center;
	font-size:30px;
	line-height:140%;
	font-weight:bold;
}
.thankyou p span {
	font-size:12px;
	line-height:100%;
	font-weight:normal;
	display:block;
}

/* [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 */

.error {
	background:#fee;
	border:1px solid red;
	margin:0 0 10px 0;
	padding:0.666em;
	text-align:center;
}
.success {
	background:#efe;
	border:1px solid #0f0;
	margin:0 0 10px 0;
	padding:0.666em;
	text-align:center;
}

/* 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]
----------------------------------------------- */

/* boxRoundGrey */

.boxRoundGrey {
	background:url('/images/boxGreyBg.gif') no-repeat top left;
	width:160px;
	padding:15px 30px;
	clear:both;
	margin:0 0 30px 0;
}
.boxRoundGrey .boxBottom {
	background:url('/images/boxGreyBg.gif') no-repeat bottom left;
	font-size:1px;
	line-height:1px;
	height:15px;
	margin:0 -30px -15px -30px;
}
#sidebarMenu .boxBottom {
	margin:0 -10px -10px -10px;
}
.boxRoundGrey .title {
	font-size:14px;
	font-weight:bold;
	color:#333;	
}

/* boxRoundBlue */

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

/* boxRoundNarrow */

.boxRoundBlueNarrow {
	background:url('/images/boxBlueMiddleSizeBg.gif') no-repeat top left;
	width:265px;
	padding:20px 30px;
	clear:both;
	margin:0 0 40px 0;
}
.boxRoundBlueNarrow .boxBottom {
	background:url('/images/boxBlueMiddleSizeBg.gif') no-repeat bottom left;
	font-size:1px;
	line-height:1px;
	height:15px;
	margin:0 -30px -20px -30px;
	padding:10px 0 0 0;
}

/* newsletterSignup */

#newsletterSignup {
}
#newsletterSignup input.text {
	border:1px solid #bebebe;
	padding:4px;
	width:150px;
	margin:0 0 5px 0;
	font-size:12px;
	color:#848484;
}
#newsletterSignup input.text:focus { border:1px solid #666; }
#newsletterSignup a.btnRed {
	float:right;
	margin:15px 0 10px 0;
}
#newsletterSignup #emailError {
	position:absolute;
	margin:0;
	left:200px;
	white-space:nowrap;
}

/* quoteParagraph */

.quotes {
	margin:20px 0 30px 0;	
	_margin:20px 0 15px 0;
	*margin-top:10px;
	clear:both;

}
.quotes p {
	margin:0 0 10px 0;
	text-align:center;
	font-size:14px;
	font-weight:bold;
	color:#707070;
	font-style:italic;
	padding:0 25px;
	height:73px;
	overflow:hidden;	
}
.quotes a.btnRed {
	float:right;
	margin:0 30px 0 0;
	display:inline;
}
.quotes ul { 
	margin:0; 
	padding:0;
	list-style-type:none;
}
.quotes ul li {
	position:relative;	
	width:220px;
}



/* content elements */

.columnLeft {
	float:left;
	width:315px;
}
.columnRight {
	float:right;
	width:355px;
}
.columnRightProd {
	float:right;
	width:295px;
	margin:0 30px 0 0;
	_margin:0;
}
.columnLeftWide {
	float:left;
	width:345px;
}
.borderPic {
	padding:2px;
	background-color:#cbcbcb;
}

/* services */

.services {
	float:right;
	width:255px;
	margin:20px 30px 0 0;
	display:inline;
}
.services .step {
	clear:both;
	margin:0 0 15px 0;
	background:url('/images/servicesSteps.gif') no-repeat left top;
	padding:0 0 0 105px;
	height:92px;
}
.services .step h3 {
	font-size:14px;
	line-height:110%;
	color:#333;
	margin:0px 0 10px 0;
	padding:15px 0 0 0;
}
.services .step1 { background-position: left 0 }
.services .step2 { background-position: left -105px; }
.services .step3 { background-position: left -211px; }


/* frontpage blue box */

.boxRoundBlue .leftColumn {
	width:350px;
	float:left;
}
.boxRoundBlue .points {
	width:260px;
	float:right;
}
.points {}
.points ul {
	margin:0;
	list-style-type:none;
	margin:20px 0 0 0;	
}
.boxRoundBlue .points ul {
	margin:40px 0 0 0;		
}
.points ul li {
	background:url('/images/arrowPoint.png') no-repeat left top;
	padding:0 0 0 40px;
	font-size:14px;
	font-weight:bold;
	color:#707070;
	line-height:24px;
	margin:0 0 10px 0;
}
.points a.btnRed {
	float:right;
	margin:20px 0 0 0;
}


/* products */

.products {
	width:700px;
	margin:0;
}
.productBox {
	width:670px;
	padding:20px 10px 20px 30px;
}
.boxRoundBlue .products {
	width:700px;
	margin-left:-30px;
}

.products .item {
	float:left;
	width:310px;
	margin:0 20px 50px 15px;
	display:inline;
}
.boxRoundBlue .products .item {
	margin:0 10px 50px 20px;
}
.products .item .pic {
	float:left;
	width:120px;
}
.products .item .pic img {
	float:left;
	_behavior: url(/htc/iepngfix.htc);	
}
.products .item .content {
	width:190px;
	float:right;
}
.products .item .content .title {
	margin:0 0 10px 0;
}
.products .item .content .title a{
	font-size:14px;
	font-weight:bold;
	color:#707070;
	text-decoration:none;
}
.products .item .content .title a:hover {
	text-decoration:underline;
}
.products .item .content p {
	font-size:12px;
	color:#333;
	margin:0 0 20px 0;
}


/* person */

.person {
	float:left;
	width:175px;
}
.person img {
	display:block;
	margin:0 auto 10px auto;
}
.person p {
	font-size:14px;
	line-height:18px;
	font-weight:bold;
	color:#484848;
	text-align:center;
}
.person p span {
	dispaly:block;
	font-size:12px;
	font-weight:normal;
}

/* prodPic */

.prodPic {
	_behavior: url(/htc/iepngfix.htc);
	display:block;
	margin:0 auto 40px auto;	
}

/* breadcrumbs */

.breadcrumbs {
	clear:both;
	margin:0 0 20px 0;
	font-size:12px;
	color:#9c9c9c;
	text-decoration:none;	
}
.breadcrumbs a {
	font-size:12px;
	color:#9c9c9c;
	font-weight:normal !important;
	text-decoration:underline;
	background:url('/images/arrowGrey.gif') no-repeat right center;
	padding:0 12px 0 0;
	margin:0 2px 0 0;

}
.breadcrumbs a:hover {
	text-decoration:underline;
	color:#638dc9;	
}