/*
*
*  Based on
*  Golden Grid System (1.01)	<http://goldengridsystem.com/>
*  by Joni Korpi 				<http://jonikorpi.com/>
*  licensed under MIT			<http://opensource.org/licenses/mit-license.php>
*  
*  Modified by Rolf Anders Storset / WTW AS
*	
*/


//
// Important numbers
//

@import 'styles/overlock-fontfacekit/stylesheet.css';
@import 'styles/css/thickbox.css';

@line: 24;
@column: 100% / 18;
@font-size: 16;
@em:@font-size*1em;
@font1: "Helvetica Neue", Helvetica-Neue, HelveticaNeue, Arial, Tahoma, Verdana, Sans;
@font2: "Helvetica Neue", Helvetica-Neue, HelveticaNeue, Arial, Tahoma, Verdana, Sans;


.border-radius(@r:12px) {
    -webkit-border-radius: @r;
    -moz-border-radius: @r;
    -ms-border-radius: @r;
    border-radius: @r;
}

/*
*  Simple elastic gutters
*  Note: box-sizing will not work in IE6-8
*/

.wrapper {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		 -o-box-sizing: border-box;
			box-sizing: border-box;
}


/*
*
*  Margin, padding, and border resets
*  except for form elements
*
*/

body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	margin: 0;
	padding: 0;
	border: 0;
}


/*
*
*  Consistency fixes
*  adopted from http://necolas.github.com/normalize.css/
*
*/

html {
	height: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
}
body {
	min-height: 100%; 
	font-size: 100%;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, nav, section, audio, canvas, video {
	display: block;
}
sub, sup {
	font-size: 75%; 
	line-height: 0; 
	position: relative; 
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
pre {
	white-space: pre; 
	white-space: pre-wrap; 
	word-wrap: break-word;
}
b, strong {
	font-weight: bold;
}
abbr[title] {
	border-bottom: 1px dotted;
}
input, textarea, button, select {
	margin: 0;
	font-size: 100%;
	line-height: normal;
	vertical-align: baseline;
}
button,
html input[type="button"], 
input[type="reset"], 
input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}
input[type="checkbox"],
input[type="radio"] {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		 -o-box-sizing: border-box;
		-ms-box-sizing: border-box;
			box-sizing: border-box;
}
textarea {
	overflow: auto;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: #0072A5;
}

label {
    display: block;
    font-size: (@font-size + 2) / @em;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #999;
    font-family: @font2;
    margin-bottom: 0.3em;
}

input {
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    outline: none;
    font-size: (@font-size + 8) / @em;
    color: #666;
    font-family: @font2;
    width: 100%
}

div.wrapper-input-text, div.wrapper-textarea  {
    padding: 5px 10px;
    border: 1px solid #DDD;
    margin-bottom: 10px;
    .border-radius(8px);
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5),0 1px 0 #FFF; 
    background: #FFF;
    width: 100%;
    float: left;
    .wrapper;
}

div.wrapper-button  {
    .wrapper;
    padding: 2px;
    .border-radius(12px);
    background: rgb(30,30,30); /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666', endColorstr='#333'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(102,102,102,0.8)), to(rgba(51,51,51,0.8))); /* for webkit browsers */
    background: -moz-linear-gradient(top,  rgba(102,102,102,0.8),  rgba(51,51,51,0.8)); /* for firefox 3.6+ */
    background: gradient(linear, left top, left bottom, from(rgba(102,102,102,0.8)), to(rgba(51,51,51,0.8))); /* for webkit browsers */
    -webkit-box-shadow:  inset 0 1px 3px rgba(0,0,0,0.8), 0 1px 0 #FFF;
    -moz-box-shadow:  inset 0 1px 3px rgba(0,0,0,0.8), 0 1px 0 #FFF;
    box-shadow:  inset 0 1px 3px rgba(0,0,0,0.8), 0 1px 0 #FFF;
}

input[type=submit], button, a.button  {
    display: block;
    text-decoration: none;
    color: #FFF;
    padding: 10px 20px;
    .border-radius(10px);
    font-weight: bold;
    font-size: (@font-size + 8) / @em;
    line-height: 1em;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
    background: #0072A5; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0072A5', endColorstr='#0072A5'); /* for IE */
    background:     -webkit-gradient(   linear, 
                                        left top, 
                                        left bottom, 
                                        from(#0072A5),
                                        color-stop(50%, desaturate(lighten(#0072A5,7%),40%)), 
                                        color-stop(50%, #0072A5), 
                                        to(darken(#0072A5,10%))); /* for webkit browsers */
    background:     -moz-linear-gradient(   top,  
                                            lighten(#0072A5,5%),  
                                            darken(#0072A5,5%)); /* for firefox 3.6+ */
    -webkit-box-shadow:  inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 0 rgba(0,0,0,0.3);
    -moz-box-shadow:  inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 0 rgba(0,0,0,0.3);
    box-shadow:  inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 0 rgba(0,0,0,0.3);

}


/*
*
*  Simple fluid media
*
*/

figure {
	position: relative;
}
figure img, figure object, figure embed, figure video {
	max-width: 100%; 
	display: block;
}
img {
	border: 0; 
	-ms-interpolation-mode: bicubic;
}

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

/*
*
*	Zoomable baseline grid
*	type size presets
*
*/

body {
	/* 16px / 24px */
	font-size: @font-size / 16 * 1em; 
	line-height: @line / @em;
}

.small {
	/* 13px / 18px */
	font-size: (@font-size*0.8125) / @em;
	line-height: (@line*0.75) / (@font-size*0.8125) * 1em;
}

.normal, h3 {
	/* 16px / 24px */
	font-size: @font-size / @em;
	line-height: @line / @em; /* 24 */
}

.large, h2, h1 {
	/* 26 / 36px */
	font-size: 26 / @em;
	line-height: (@line*1.5) / 26 * 1em;
}

.huge {
	/* 42px / 48px */
	font-size: 42 / @em;
	line-height: (@line*2) / 42 * 1em;
}

.massive {
	/* 68px / 72px */
	font-size: 68 / @em;
	line-height: (@line*3) / 68 * 1em;
}

.gigantic {
	/* 110px / 120px */
	font-size: 110 / @em;
	line-height: (@line*5) / 110 * 1em;
}


/*
*
*  Four-column grid active
*  ----------------------------------------
*  Margin   | #  1   2   3   4   |   Margin
*  5.55555% | %  25  50  75  100 | 5.55555%
*
*/

body {
    background: url(../gfx/background-body.png) repeat;
    font-family: @font2;
}

div#wrapper {
    background: url(../gfx/background-top.png) repeat-x top;
    padding-bottom: 30px;
    width: 100%;
}

header, section#content, footer {
    width: 960px;
    margin: 0 auto;
}

/*
div#wrapper-header {
    background: url(../gfx/background-header-border.png) no-repeat center bottom ;
}
*/

header {
	position: relative;
/*     overflow: visible; */
	height: 301px;
/*     background: url(../gfx/background-header-border.png) no-repeat -100px bottom ; */
}

header div#logo {
    position: absolute;
    top: 26px;
    display: block;
    width: 231px;
    height: 49px;
    z-index: 1002;
    background: url(../gfx/logo_gopark.png) no-repeat;
}

header h1 {
    position: absolute;
    color: white;
    font-weight: normal;
    margin: 0;
    top: 82px;
    text-shadow: 0 -1px 0 #0073A8;
	font-size: (@font-size) / @em;

}

div#cloud-1, header div#cloud-2, header div#cloud-3 {
    position: absolute;
    display: block;
    z-index: 1001;
}

div#cloud-1 {
    width: 123px;
    height: 72px;
    top: 25px;
    right: 40%;
    background: url(../gfx/cloud-1.png) no-repeat;
}

div#cloud-2 {
    width: 260px;
    height: 145px;
    top: 56px;
    right: 15%;
    background: url(../gfx/cloud-2.png) no-repeat;
}

div#cloud-3 {
    width: 209px;
    height: 100px;
    top: -10px;
    right: 0px;
    background: url(../gfx/cloud-3.png) no-repeat;
}

div#border {
    width: 100%;
    z-index: 1000;
    height: 305px;
    position: absolute;
    top: 0;
    background: url(../gfx/background-header-border.png) no-repeat 50% bottom;
}



section#content {
    margin-top: 58px;
}

section#content div#intro, section#content div#features {
    margin-bottom: 70px;
}

section#content div#intro div#right-column {
    float: right;
    width: 470px;
    position: relative;
    height: 290px;
}

section#content div#intro div#right-column p, div#part_register p, div#part_success p {
    font-size: (@font-size + 2) /@em;
    line-height: 29px; 
    padding: 0; 
    margin: 0; 
    color: #666666; 
    text-shadow: 0 1px #FFF;
}

section#content div#intro div#right-column form {
    position: absolute;
    bottom: 1em;
}

section#content article {
	font-size: (@font-size - 2) / @em;
    color: #666;
    text-shadow: 0 1px 0 #fff;
}

section#content div#features article {
    float: left;
    padding: 0 20px;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #E6E6E6;
	min-height: 200px;
}

section#content h2 {
    font-weight: bold;
    font-size: (@font-size + 2) / @em;
    margin-bottom: 0.6em;
    color: #0072A5;
    font-family: @font1;
}

section#content div#features article p, section#content div#features article ul {
    width: 874px / 3;
    margin: 0;
    padding: 0;
}

ul {
    list-style: square;
}

ul li {
    list-style-position: inside;

}

section#content div#features article:first-child {
    padding-left: 0;
    border-left-color: transparent;
}

section#content div#features article:last-child {
    padding-right: 0;
    border-right-color: transparent;
}

div#extra div#quotes {
    float: left;
    .wrapper;
    width: 50%;
    padding: 0 40px
}

div#extra div#quotes blockquote {
    text-align: center;
    font-size: (@font-size + 4) / @em;
    line-height: 1.6 em;
    font-style: italic;
    color: #666666; 
    text-shadow: 0 1px #FFF;

}

div#extra div#quotes div#sender {
    font-size: (@font-size - 2) / @em;
    text-align: right;
    margin-top: 0.8em;
    margin-bottom: 40px;
}

div#extra article#provider-info {
    .wrapper;
    width: 50%;
    float: right;
    background: rgba(255,255,255,0.3);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    border-radius: 12px;
    padding: 30px 30px 40px;
}

div#extra article#provider-info img {
    vertical-align: top;
    float: left;
    margin: 10px 20px 10px 10px;
}

div#wrapper-footer {
    background: #222;
    box-shadow: 0 3px 10px rgba(0,0,0,1);
    margin-top: 70px;
}

footer {
    padding-top: 30px;
    color: #F3F3F3;
    text-shadow: 0 -1px #000;
    font-size: (@font-size - 2) / @em;
    line-height: 1.2em;
    height: 130px;
    margin: 0 auto;
}

footer address, footer div#contact {
    float: right;
    margin:20px 40px 0 0;

}

footer img {
    float: right;
    margin-right: 40px;

}

footer a{
    text-shadow: 0 -1px #000;
    color: #f3f3f3;
    text-decoration: none;

}


/*
*
*  Fixes for IE6-8
*  http://jonikorpi.com/leaving-old-IE-behind/
*
*/

.ie body {
	width: 640/@em;
	margin: 0 auto;
	font-size: (@font-size + 1) / @em;
}

.ie h1 {
	.huge();
	margin: (48/42*1em) 0 (24/42*1em);
}

.right {
    float: right;
}

.left {
    float: left;
}

.clear {
    clear:both;
}