/*------------------------------------------------------------------
	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  Helvetica, Arial, sans-serif;
	/* font: font-weight font-size/line-height font-family */	
	color:#838383;
	text-align:left;
	background:#fff url('../images/bg.gif') repeat-x; 
	line-height:160%;	
}
body,html    {}


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

/* Headlines */

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

h1 { font-size: 34px; line-height: 1; margin-bottom: 12px; }
h2 { font-size: 20px; margin-bottom: 12px; }
h3 { font-size: 20px; margin-bottom: 12px; }
h4 { font-size: 16px; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 14px; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 12px; font-weight: bold; margin-bottom: 1.5em; }

h2.pageDesc {
	font-size:16px;
	color:#717070;
	font-weight:normal;
	line-height:150%;
	margin-bottom:30px;
}

.sidebarBox h3 
{
	line-height:120%;
}

/* Text elements */

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

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


/* 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 25px auto;
	clear:both;
	position:relative;
}
#content {
	width:630px;
	float:left;
}
#sidebar {
	width:300px;
	float:right;
}
.element,
.contentElement {
	clear:both;
	margin:0 0 25px 0;
}
#header {
	position:relative;
	height:111px;
	margin:0 0 25px 0;
}
/*
#header #logo {
	width:198px;
	height:70px;	
	background:url('../images/logo.png') no-repeat;
	text-indent:-9000px;
	float:left;
	position:absolute;
	top:25px;
	left:0;
}
*/
#header #logo {
	float:left;
	margin:25px 0 0 0;
}

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

/* Topmenu */

#topmenu {
	float:right;
}
#topmenu ul {
	list-style-type:none;
	margin:0;
}
#topmenu ul li {
	float:left;
	margin:0 30px 0 0;
	display:inline;
}
#topmenu ul li a {
	color:#919191;
	font-size:17px;
	font-weight:bold;
	text-decoration:none;
}
#topmenu ul li a:hover {
	text-decoration:none;
	color:#000;
}
#topmenu ul li.current a {
	color:#000;
}

#topmenu,
.userControls {
	margin:55px 0 0 0;
}
.userControls {
	float:right;
	margin-left:30px;
	display:inline;
}
.userControls .btn {
	margin:0 0 0 10px;
}

/* Footer */

#footer {
	width:960px;
	margin:0 auto;	
	padding:5px 0;
	border-top:1px #c9c9c9 solid;
}
#footer p {
	font-size:12px;	
	color:#505050;
	text-align:center;
	float:right;
}
#footer em {
	font-style:normal;
	margin:0 8px;
}

.creditcards {
	float:left;
	background:url('../images/creditcards.jpg') no-repeat;
	width:180px;
	height:16px;
	
}
#footer .creditcards 
{
    margin:2px 0 0 0;
}
#footer #terms 
{
    float:left;
    margin:0 0 0 20px;
    font-size:11px;
}

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

/* btnGreenSmall */

a.btnGreenSmall,
a.btnGreenSmall:hover {
	padding-right: 7px; /* width for button-right */
}
a.btnGreenSmall {
	background: transparent url('../images/btnGreenSmallRight.png') no-repeat scroll top right;
    height: 23px;
	/* font styles */
    color: #fff;
    font-size: 10px;
    font-weight: bold;		
}
a.btnGreenSmall span {
	background: transparent url('../images/btnGreenSmallContent.png') no-repeat;
    line-height: 21px;
    padding: 0 7px 2px 15px;
}
a.btnGreenSmall:hover span { color: #fff; }


/* btnGreen */

a.btnGreen,
a.btnGreen:hover {
	padding-right: 18px; /* width for button-right */
}
a.btnGreen {
	background: transparent url('../images/btnGreenRight.png') no-repeat scroll top right;
    height: 38px;
	/* font styles */
    color: #fff;
    font-size: 13px;
    font-weight: bold;		
}
a.btnGreen span {
	background: transparent url('../images/btnGreenContent.png') no-repeat;
    line-height: 38px;
    padding: 0 14px 0 32px;
}
a.btnGreen:hover span { color: #fff; }


/* btnGrey */

a.btnGrey,
a.btnGrey:hover {
	padding-right: 20px; /* width for button-right */
}
a.btnGrey {
	background: transparent url('../images/btnGreyRight.png') no-repeat scroll top right;
    height: 39px;
	/* font styles */
    color: #fff;
    font-size: 13px;
    font-weight: bold;		
}
a.btnGrey span {
	background: transparent url('../images/btnGreyContent.png') no-repeat;
    line-height: 39px;
    padding: 0 14px 0 32px;
}
a.btnGrey:hover span { color: #fff; }

/* btnGrey2 */

a.btnGrey2,
a.btnGrey2:hover {
	padding-right: 8px; /* width for button-right */
}
a.btnGrey2 {
	background: transparent url('../images/btnGrey2Right.png') no-repeat scroll top right;
    height: 38px;
	/* font styles */
    color: #fff;
    font-size: 13px;
    font-weight: bold;		
}
a.btnGrey2 span {
	background: transparent url('../images/btnGrey2Content.png') no-repeat;
    line-height: 38px;
    padding: 0 14px 0 24px;
}
a.btnGrey2:hover span { color: #fff; }

/* btnGreen2 */

a.btnGreen2,
a.btnGreen2:hover {
	padding-right: 7px; /* width for button-right */
}
a.btnGreen2 {
	background: transparent url('../images/btnGreen2Right.png') no-repeat scroll top right;
    height: 39px;
	/* font styles */
    color: #fff;
    font-size: 13px;
    font-weight: bold;		
}
a.btnGreen2 span {
	background: transparent url('../images/btnGreen2Content.png') no-repeat;
    line-height: 39px;
    padding: 0 14px 0 24px;
}
a.btnGreen2:hover span { color: #fff; }

/* btnGreyBig */

a.btnGreyBig,
a.btnGreyBig:hover {
	padding-right: 27px; /* width for button-right */
}
a.btnGreyBig {
	background: transparent url('../images/btnGreyBigRight.png') no-repeat scroll top right;
    height: 56px;
	/* font styles */
    color: #fff;
    font-size: 18px;
    font-weight: bold;		
}
a.btnGreyBig span {
	background: transparent url('../images/btnGreyBigContent.png') no-repeat;
    line-height: 56px;
    padding: 0 5px 0 35px;
}
a.btnGreyBig:hover span { color: #fff; }

.element .btn span {
	width:180px;
}

/* btnLongWord */

.btnLongWord {}
.element .btnLongWord span 
{
	width:205px !important;
	padding:0 6px 0 16px !important;
}


.btnLarge {
	width:321px;
	height:68px;	
	background:url('../images/btnLarge.png') no-repeat top;
	text-indent:-9000px;
	float:left;
}
.btnLarge:hover {
	background-position:bottom;
}

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

.form {
	font-size:12px;	
	color:#525252;
}
.form label {
	font-weight:bold;
	display:block;
	margin:0 0 2px 0;
}
.form label span {
	color:#d50000;
	margin:0 0 0 5px;
}
.form .col {
	width:200px;
	float:left;
	margin:0 30px 15px 0;
}
.form .inputText {
	padding:5px;
	width:194px;
}
.form .select {
	padding:5px;
	width:205px;
}
.form .title {
	font-weight:bold;
	border-bottom:1px #e1e1e1 solid;
	padding:0 0 5px 0;
	font-size:12px;
	color:#525252;
	margin:0 0 12px 0;
}
.form .textarea {
	width:594px !important;
	height:100px;
	margin:0 0 15px 0;
}

/* [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:#5c9507;
	border:1px solid #487c03;
	margin:0 0 10px 0;
	padding:0.666em;
	text-align:center;
	color:#fff;
	font-size:14px;
	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 {	position:relative; margin:0 0 10px 0; margin-left:-11px; }
.imagegallery img {	margin:0 0 10px 10px; float:left; display:inline; }

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

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


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



/* news */

.news {
	margin:10px 0 30px 0;
}
.news h2 {
	margin:0 0 8px 0;
}
.news h2 a {
	color: #414141;
	font-size:20px;
}
.topInfo {
	color:#727272;
	font-size:11px;
	clear:both;
	border-bottom:1px #bfbfbf solid;
	padding:0;
	margin:0 0 10px 0;
	font-style:italic;
	width:100%;
}
.topInfo span {
	float:left;
	width:500px;
}
.topInfo a.commentsLink {
	float:right;
}
.news img {
	margin:5px 15px 0px 0; 
	float:left;
}
.news,
.news p {
	font-size:13px;
	color:#838383;
}

/* sidebarBox */

.sidebarBoxTop {
	background:url('../images/sidebarBoxTop.gif') no-repeat;
	width:300px;
	height:5px;
	display:block;
}
.sidebarBox {
	background:#f2f2f2 url('../images/sidebarBox.gif') no-repeat bottom;
	width:270px;
	padding:10px 15px 15px 15px;
}


/* contentBox */

.contentBoxTop {
	background:url('../images/contentBoxTop.gif') no-repeat;
	width:630px;
	height:5px;
	display:block;
}
.contentBox {
	background:#f2f2f2 url('../images/contentBox.gif') no-repeat bottom;
	width:600px;
	padding:10px 15px 15px 15px;
}
.contentBox p {
	color:#838383;
}



/* pagenav */

.previous {
	float:left;
	font-size:12px;
}
.next {
	float:right;
	font-size:12px;
}


/* list */

.list {
	float:left;
	width:125px;
	padding:0 10px 0 0;
}
.list ul {
	width:100%;
	list-style-type:none;
	margin:0;
}
.list ul li {
	background:url('../images/bullet.png') no-repeat left 10px;
	padding:0 0 0 10px;
}

/* submenu */

.submenu {
}
.submenu ul {
	width:100%;
	list-style-type:none;
	margin:0;
}
.submenu ul li {
	background:url('../images/bullet.png') no-repeat left 10px;
	padding:0 0 0 10px;
}
.submenu ul li a:hover,
.submenu li.current a {
	color:#434343;	
}


/* comment */

.comment {
	width:100%;
	background:url('../images/commentLine.gif') repeat-y 130px top;
	clear:both;
	margin:0 0 35px 0;
}
.comment .info {
	width:120px;
	padding:0 10px 0 0;
	float:left;
}
.comment .date {
	font-size:11px;
	color:#565656;
	display:block;
	margin:0;
}
.comment .author {
	font-size:13px;
	color:#0092c6;
	font-weight:bold;
}
.comment .content {
	width:480px;
	float:left;
	padding:0 0 0 15px;
}

/* pointList */

.pointList {
	padding-bottom:30px;
}
.pointList ul {
	margin:0 0 5px 0;
	list-style-type:none;
}
.pointList ul li {
	font-size:15px;
	font-weight:bold;
	color:#414141;
	width:270px;
	float:left;
	margin:0 0 10px 0;
}
.pointList ul li span {
	width:229px;
	float:left;
	line-height:25px;
	padding:3px 0 0 0;
}
.pointList ul li em {
	background:url('../images/pointBG.gif') no-repeat;
	width:31px;
	height:31px;
	line-height:31px;
	text-align:center;
	font-size:15px;
	font-weight:bold;
	color:#fff;
	float:left;
	font-style:normal;
	margin:0 10px 0 0;
}

/* optionList */

.optionList ul {
	margin:0 0 5px 0;
	list-style-type:none;
}
.optionList li {
	padding:0 0 0 54px;
	min-height:44px;
	font-size:12px;
	line-height:18px;
	color:#505050;
	margin:0 0 15px 0;
	background-position:left top;
}
.optionList li strong {
	font-size:16px;
	color:#363636;
	display:block;
	margin:0 0 2px 0;
}
.optionList li.lifeStream {
	background:url('../images/icons/lifeStream.png') no-repeat;
}
.optionList li.growth {
	background:url('../images/icons/health.png') no-repeat;
}
.optionList li.diary {
	background:url('../images/icons/diary.png') no-repeat;
}
.optionList li.album {
	background:url('../images/icons/gallery.png') no-repeat;
}


/* function */

.function {
	margin:10px 0 30px 0;
}
.function h2 {
	margin:0 0 8px 0;
}
.function h2 a {
	color: #414141;
	font-size:20px;
}
.function img {
	margin:5px 15px 0px 0; 
	float:left;
}
.function,
.function p {
	font-size:13px;
	color:#838383;
}


/* screenshots */

.screenshots {
    background: #efefef;
	padding:20px 20px 10px 20px;
}
.screenshots h3 {
	margin-bottom:20px;
}
.screenshots div {
	 margin-left: -35px;
	 position:relative;
}
.screenshots img {
    margin: 0 0 30px 38px;
    float: left;
	display:inline;
}


/* faq */

.faqList {
	list-style-type:none;
	margin:0 0 35px 10px;	
	font-size:12px;
}
.faqList li {
	background:url('../images/bullet.png') no-repeat left 10px;
	padding:0 0 0 10px;
}
.faq {
	clear:both;
	margin:0 0 30px 0;
	padding:0 0 10px 0;
	width:630px;
	border-bottom:1px #e6e6e6 solid;
}
.faq .question {
	background:url('../images/faqQuestion.gif') no-repeat 8px top;
	padding:0 0 10px 48px;
	margin:0;
	line-height:19px;
	font-size:16px;
	color:#414141;
	font-weight:bold;
	float:left;
	width:450px;
}
.faq .top {
	font-size:12px;
	float:right;
	text-align:right;
	width:65px;
	font-weight:bold;
	padding:0;
	background:url('../images/icons/top.gif') no-repeat left center;
}
.faq .answer {
	background:url('../images/faqAnswer.gif') no-repeat top left;
	width:540px;
	padding:10px 30px 5px 60px;
	clear:both;
}
.faq .answerBottom {
	background:url('../images/faqAnswerBottom.gif') no-repeat;
	width:630px;
	height:5px;
}
.faq .answer p {
	font-size:12px;
	color:#5d585f;
	margin:0;
}

/*
#banner {
	margin-top:-29px;
	margin-bottom:30px;
	height:345px;
	width:960px;
	background:url('../images/banner2.png') no-repeat;
	position:relative;
}
#banner .content {
	width:390px;
	padding:40px 0 0 0;
}
#banner h1 {
	font-size:27px;
	line-height:35px;
	color:#fff;
	font-weight:bold;
	margin-bottom:20px;
}
#banner p {
	font-size:14px;
	line-height:21px;
	color:#fff;
}
*/

#banner {
	margin:0;
	list-style-type:none;
	margin-top:-29px;
	margin-bottom:30px;
	height:345px;
	width:960px;	
	position:relative;
}
#banner li {
	overflow: hidden;
	height:345px;
	width:960px;
	background-repeat:no-repeat;
}

#banner .content {
	width:390px;
	padding:40px 0 0 0;
}
#banner h1 {
	font-size:27px;
	line-height:35px;
	color:#fff;
	font-weight:bold;
	margin-bottom:20px;
}
#banner p {
	font-size:14px;
	line-height:21px;
	color:#fff;
}


/* boxes */

.boxes {
	position:relative;
	margin-left:-30px;
}
.boxes .element {
	float:left;
	margin:0 0 0 30px;
	padding:0;
	width:300px;
	clear:none !important;
	display:inline;
}
.boxes .element h3 {
	margin-bottom:18px;
}
.videoImage {
	clear:both;
	margin:0 0 20px 0;
}