/* Relation House - Stylesheet 
	Created: 02/Jan/2012
	Last Mod: 09/Jan/2012
	Author: Jonathan Manas
*/

/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body {margin: 0; font-size: 12px; line-height: 1.231;
	background: #4c4c4c}
body, button, input, select, textarea { font-family: Arial, sans-serif; color: #333; }

::-moz-selection { background: #bde4f3; color: #fff; text-shadow: none; }
::selection { background: #bde4f3; color: #fff; text-shadow: none; }

/* =============================================================================
   Links
   ========================================================================== */
a { color: #00aeef; text-decoration: none }
/*a:visited { color: #971b74; }*/
a:hover { /*color: #A92981; text-decoration: underline*/}
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

/* =============================================================================
   Typography
   ========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

address { font-style: normal }	

h1,
h2,
h3,
h4,
h5,
h6 {margin:0; font-weight: normal}
h1 {font-size: 30px}
h2 {font-size: 28px}
h3 {font-size: 18px}
h4 {font-size: 16px}
h5 {font-size: 14px}
h6 {font-size: 13px}

/* =============================================================================
   Lists
   ========================================================================== */
ul, ol {margin: 0; overflow: hidden;}
dd { margin: 0; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

figure {margin: 0;}
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/* Consistent box sizing and appearance */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { border: 1px solid #fc7171 }

/* =============================================================================
   Tables
   ========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/* Misc ---------------------------------------------------*/
/* ---Floats--- */
.fRight {float: right}
.fLeft {float: left}
/* ---Alignment--- */	
.aRight {text-align: right}
.aLeft {text-align: left}
.aCenter {text-align: center}

.inline { display: inline !important }
.block { display: block }
.hide { display: none }
.highlight { background: #ff0; }

.box {margin-bottom: 20px}
.border { border: 1px solid #666 }
.dotbot { border-bottom: 1px dotted #cfcfcf }
.dottop { border-top: 1px dotted #cfcfcf }

.white {color: #fff}
.blue {color: #00b1f4}
@blue: #00b1f4;

.bebasFont { font-family: 'BebasNeueRegular' }
.akzidenzFont { font-family: 'BertholdAkzidenzGroteskBEMdCn' }

/* =============================================================================
   Primary Styling
   ========================================================================== */

/* Structure ---------------------------------------------------- */
.wrapper { margin: 0 auto; overflow: hidden; padding: 40px 60px 50px; width: 840px  }  

header { background: url(../images/bg-top.jpg) repeat-x center top #050505; height: 70px; overflow: hidden;
	.wrapper { width: 920px; padding: 20px } 
}

#main { background: url(../images/bg-main.jpg) repeat-x center -130px;
	header { background: transparent; width: 840px; padding: 45px 60px 5px; height: 50px; margin: 0 auto;
		h2 {font-size: 50px; line-height: 100%; color: #fff /*#999*/; .akzidenzFont }
	}
	.wrapper { background: #fff; min-height: 400px}
	section { .fLeft; width: 520px; margin-right: 40px }
	aside { .fLeft; width: 280px }
}

footer { background: url(../images/bg-foot.jpg) repeat-x center top; .white;
	.wrapper {  } 
}
 
/* Branding ---------------------------------------------------- */
.logo { background: url(../images/logo.png) no-repeat; width: 182px; height: 31px; .fLeft;
	a { .block; width: 100%; height: 100%; text-indent: -9999px }
}

/* Main navigation links ---------------------------------------------------- */
header nav { .fRight; position: relative; z-index:9999;
	.nav-main li {
		float: left;
		margin-left: 10px;
		padding-right: 10px;
		padding-top: 7px;
		a {
			display: block;
			text-transform: uppercase;
			.white;
			font-size: 16px;
			line-height: 81%;
			.bebasFont;
			padding-bottom: 6px;
			border-bottom: 5px solid transparent;
		}		
		&:hover,
		&.active {
			a { border-bottom: 5px solid #00b1f4 }
		}
	}
}

/* Main Content Area - Section ---------------------------------------------------- */
#main {
	h3.brief { margin-right: 0 !important; width: 100% !important; margin-bottom: 40px }
	h4 { font-weight: bold }
	p, li { line-height: 150% }
	blockquote { background: url(../images/quote-open.jpg) no-repeat left top; margin: 0 0 40px; 
		p { background: url(../images/quote-close.jpg) no-repeat right bottom; font-style: italic; font-size: 17px; line-height: 120%; color: #666; margin: 0; padding: 12px 20px }
	}
	a:hover { text-decoration: underline }
	ul.listH { padding: 0; list-style: none;
		li { .fLeft; width: 240px; margin-left: 40px; margin-bottom: 20px; border-bottom: 1px solid #eee;
			&:nth-child(odd) { margin-left: 0; clear: left }
			/*&.last { border-bottom: none} */
		}
		h4 { font-size: 14px }
		.desc { min-height: 70px; line-height: 140% }		
		&.kompetencer {
			li {
				h4 { background: url(../images/icons-kompetencer.png) no-repeat #333; height: 40px;
					a { .block; .white; height: 40px; line-height: 40px; margin-left: 40px; padding-left: 10px; border-left: 3px solid #fff; text-transform: uppercase;
						&:hover { .blue !important; text-decoration: none }
						&.small { font-size: 12px }
					}
				}
				&.digital h4 { background-position:  0 0 }
				&.apps h4 { background-position:  0 -48px }
				&.web h4 { background-position:  0 -384px }
				&.social h4 { background-position:  0 -288px }
				&.ecom h4 { background-position:  0 -192px }
				&.seo h4 { background-position:  0 -96px }
				&.episerver h4 { background-position:  0 -432px }
				&.drupal h4 { background-position:  0 -336px }
				&.net h4 { background-position:  0 -144px }
				&.php h4 { background-position:  0 -240px }
			}
			.desc { min-height: 110px }
		}
		&.cases {
			h4 { 
				a { color: inherit;
					&:hover { .blue !important; text-decoration: none }
				}
			}
		}
	}
	.thumb-container { background: #ccc; width: 232px; height: 122px; padding: 4px; margin: 5px 0; position: relative;
		&:hover { background: #ddd; }
		a { position: relative; .block; width: 100%; height: 100%;	 }
		img { width: 100%; height: 100% }
		&.big { width: 832px; height: 220px; margin-bottom: 40px 	}
	}
}	
	

/* Aside  ---------------------------------------------------- */
aside { /*font-size: 14px; */
	h4 { font-size: 26px; color: #333; .akzidenzFont; margin-bottom: 15px; padding-left: 40px}
	.container { padding-left: 39px; border-left: 1px solid #ccc; overflow: hidden }
	.padLeft0 { padding-left: 0; border-left: none }		
	ul { list-style: disc inside; padding: 0;
		&.profiler { list-style: none; 
			li { font-size: 12px; margin-top: 20px;
				&:first-child { margin-top: 0 }
			}
			.name { font-weight: bold; font-size: 14px }
			.post { color: #666; margin-bottom: 10px}
		}
		li {
			a { color: #333;
				&:hover { .blue; text-decoration: none !important }
			}
		}
	}
	p { line-height: 125% !important;
		&:first-child {margin-top: 0}
	}
	/*.thumb-container {width: 158px !important;  height: 122px !important }*/
	article + article { margin-top: 40px }
}

/* Kotakt Form  ---------------------------------------------------- */
#kontakt-form {
	label { .block; font-size: 16px; margin-bottom: 5px; width: 340px }
	input, textarea { 
		width: 320px; 
		height: 20px; 
		padding: 4px 10px; 
		margin-bottom: 15px;
		background: #fff; 
		border: 1px solid #666; 
		font-size: 12px;
		&:focus {   outline: 0; border: 1px solid @blue }
	}
	input[type=submit] { height: 36px; width: 100px; .block }
	textarea {height: 80px; padding: 10px}
	::-webkit-input-placeholder { color: #999 }
	:-moz-placeholder { color: #999 }
	:-ms-input-placeholder { color: #999 }
}

button.btn,
input[type="button"].btn,
input[type="reset"].btn,
input[type="submit"].btn { 
	background: #2FA1DB !important;
	border: none !important;
	/* border-top: 5px solid #69BDE8 !important; */
	font-size: 12px !important;
	font-weight: bold;
	color: #FFF;
	/* padding-top: 2px !important;*/
	text-shadow: 0 1px 1px rgba(125, 125, 125, 1);
	text-transform: uppercase;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	o-border-radius: 8px;
	border-radius: 8px;
	/* -webkit-box-shadow: 0 3px 0px rgba(0,0,0,.3);
	-moz-box-shadow: 0 3px 0px rgba(0,0,0,.3);
	-o-box-shadow: 0 3px 0px rgba(0,0,0,.3);
	box-shadow: 0 3px 0px rgba(0,0,0,.3);*/
	&:hover { background: #0296cd !important}
}
a.btn {
    /* display: block;
    margin-top: 20px;
    padding: 10px 20px 5px;
    text-align: center;
    text-transform: none;
    width: 200px;
	&:hover {text-decoration: none !important}*/
	 .akzidenzFont; font-size: 16px; text-transform: uppercase;
	 padding: 0 !important;
	 &:before { 
		content: url(../images/arrow-link.png);
		width: 7px;
		height: 12px;
	}
}

/* Forside  ---------------------------------------------------- */
.front #main { background-position: center 0;
	header { padding: 0; height: 230px; width: 960px; }
	section { width: 560px; }
	aside { width: 240px;
		article { height: 192px; min-height:  192px;
			.container {  font-size: 12px }
		}
		article + article {margin-top: 80px }
	}
	h3 { margin-bottom: 15px; .akzidenzFont; font-size: 26px }
	a.btn {width: 180px; padding-left: 10px; padding-right: 10px}
	ul.listH {
		li { width: 160px; margin-left: 40px; border: none; margin-bottom: 0;
			&:first-child { margin-left: 0}
			&:nth-child(3n+1)  { margin-left: 0}
			&:nth-child(odd)  { clear: none }
			&:hover .btn { text-decoration: underline }
		}
		&.kompetencer {
			li { /*width: 220px; margin: 0 40px 10px 0;*/ margin-bottom: 10px;
				a { color: inherit;
					&:hover { .blue !important; text-decoration: none }
				}
				span {
					.fLeft;
					width: 20px;
					height: 20px;
					margin-right: 10px;
					background: url(../images/icons-kompetencer-small.png) no-repeat;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
					background-size: cover }
				&.digital span { background-position:  0 0 }
				&.apps span { background-position:  0 -24px }
				&.web span { background-position:  0 -192px }
				&.social span { background-position:  0 -144px }
				&.ecom span { background-position:  0 -96px }
				&.seo span { background-position:  0 -48px }
				&.episerver span { background-position:  0 -216px }
				&.drupal span { background-position:  0 -168px }
				&.net span { background-position:  0 -72px }
				&.php span { background-position:  0 -120px }
			}
		}
		.thumb-container { width: 158px; height: 122px; background: #e5e5e5; padding: 1px; margin: 0; position: relative;
			.caption { .block; .white; position: absolute; top: 1px; left: 1px; background: #333; padding: 6px; width: 146px; line-height: 120%; pointer-events: none;
				&:hover { text-decoration: none !important }
			}
		}
		.thumb-container + p { margin: 2px 0 0; text-align: right}
	}
	.shadow { background: url(../images/shadow.jpg) no-repeat center top; width: 840px; height: 40px; margin-top: 40px}
	.slider { color: #fff;
		.desc { .fLeft; margin: 20px 0 40px 60px; width: 400px }
		h2 { font-size: 70px }
		p { line-height: 120%; margin: 16px 0 25px }
		.image { .fRight }
	}
}

/* Footer  ---------------------------------------------------- */
footer {
	.column { .fLeft; margin-left: 40px; width: 200px;
		&:first-child { margin-left: 0; width: 180px}
		&:nth-child(2) { width: 80px }
		&:nth-child(3) { width: 220px }
	}
	nav ul {list-style: disc inside}
	h4 { .bebasFont; margin-bottom: 20px; line-height: 100%	}
	a { .white;
		&:hover { .blue }
	}
	.icons { display: none;
		a { background: url(../images/icons-social.png) no-repeat 0 0; width: 33px; height: 33px; margin-right: 10px; text-indent: -9999px; .fLeft; .block;
			&.icon-twitter { background-position: 0 0;
				&:hover { background-position: 0 -34px }
			}
			&.icon-linked { background-position: -96px 0;
				&:hover { background-position: -96px -34px }
			}
			&.icon-fb { background-position: -48px 0;
				&:hover { background-position: -48px -34px }
			}
		}
	}
}
	
   
/* Contain floats ---------------------------------------------------- */
.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
	 .row:after, .clearfix:after { clear: both; }
	 .row, .clearfix { zoom: 1; }
	 

/* IE 8 -7 Fix */
.lt-ie8 { }