/* MAIN
---------------------------------*/
*{ margin:0; padding:0; }
html { 
	background: #FFF;
}
body {
	background-repeat: no-repeat;
    bottom: 0;
    color: #001436;
    font-family: 'CDRegular';
    color: #286c89;
    font-size: 16px;
    min-width: 770px;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;

}
/*
body{ -webkit-background-size: 1900px 3600px;}
#menu_bg { -webkit-background-size: 1020px 189px; }*/

/* BASIC STYLES
---------------------------------*/
.wrapper { width:960px; margin-right:auto; margin-left:auto; margin-top:20px; position: relative; }
header { position:relative; clear:both; float:left; width: 100%; padding-bottom: 25px; z-index: 20; background: #FFF; }

#logo { position:relative; float:left; width: 265px; height: 77px; background: url('../images/logo-srh.png') left top no-repeat; z-index: 10;}
nav { position: relative;  float:right;  z-index: 8; color: #286c89; width:480px; text-transform: uppercase; vertical-align: bottom; }
nav span { float:left; }
nav p { clear:both; }
nav .icon { margin-bottom:10px;}
nav .link { float:right; margin-left:25px; top:27px; position:relative; opacity: 0.8;filter:alpha(opacity=80); text-decoration: none; cursor: pointer;}
nav .link:hover { float:right; margin-left:25px; top:27px; position:relative; opacity: 1;filter:alpha(opacity=100); text-decoration: none;}
#nav-yhteys a { color: #FFF; text-decoration: none;}

/* SECTIONS
---------------------------------*/
section { clear: both; float:left; width:100%; padding:100px 0 120px 0; margin-top: -40px;}

section.yritys { background: url('../images/bg-yritys.jpg') top center no-repeat; background-color: #3890b7;  color: #FFF; z-index: 16;}



/* Referenssit */
section.referenssit { 
	background: url('../images/bg-referenssit.jpg') top center no-repeat; background-color: #e2e2e2;  color: #286c89; z-index: 12;
	padding:40px 0 80px 0;
}
section.referenssit span.top-box nav {margin-top: -10px; }
section.referenssit span.content {line-height: 22px; } 
span.left { width:320px; float:left; margin-top: 60px;  line-height: 22px;}
span.middle { width:320px; float:left; margin-top: 60px;}
span.right { width:320px; float:left; margin-top: 60px;}

#makeMeScrollable {
	height: 307px;
	position: relative;
	clear:both;
	overflow: hidden;
	width: 100%;
	float:left;
	margin: 20px 0px 60px 0px;
-webkit-box-shadow: 0px 0px 15px 5px rgba(71, 71, 71, 0.3);
box-shadow: 0px 0px 15px 5px rgba(71, 71, 71, 0.3); 	
}
#makeMeScrollable div.scrollableArea
{
	position: relative;
	display: block;
	float: left;
	padding: 0;
	margin: 0;
}
.scrollableArea img {
	margin: 0;
	padding: 0;
}


/* YhteistyšssŠ */
section.yhteistyossa { 
	background: url('../images/bg-yhteistyossa.jpg') top center no-repeat; background-color: #eff0fb; color: #286c89; z-index: 12;
	padding:40px 0 80px 0;
}
section.yhteistyossa span.top-box nav {margin-top: -10px; }
section.yhteistyossa span.content {line-height: 22px; } 
section.yhteistyossa span.left { width:640px; float:left; margin-top: 60px;  line-height: 22px;}

.text-box { background:#286c89; padding:10px; color:#FFF;clear:both; float:left; margin:40px 0px 40px 0px; }
.logo {float:left; margin:0px 20px 40px 0px; width:250px; height: 83px; border-radius: 10px; opacity: 0.7;filter:alpha(opacity=70);}
.logo:hover { opacity: 1.0;filter:alpha(opacity=100);}
div.slo { background: url('../images/logo-slo.jpg') top left; }
div.ahlsell { background: url('../images/logo-ahlsell.jpg') top left; }
div.elektroskandia { background: url('../images/logo-elektroskandia.jpg') top left; }
div.onninen { background: url('../images/logo-onninen.jpg') top left; }

section.yhteys { 
	background: url('../images/bg-jeans.png') bottom center repeat; background-color: #3890b7; color: #FFF; z-index: 4;
	padding:40px 0 80px 0;
}


article { z-index: 100; position: relative; }

.clear { clear: both; }


.left { width: 500px; float:left; display: block;  }
.right { float:right; display: block; }
.right img {}


/* BORDER LINES 
---------------------------------*/
.borderline-white {
	position: relative; z-index: 18;
	height: 18px; width: 100%; background: url('../images/borderline-white.png') bottom left repeat-x;
	float: left; clear:both; 

}

.borderline-blue {
	position: relative; z-index: 14;
	height: 18px; width: 100%; background: url('../images/borderline-blue.png') bottom left repeat-x;
	float: left; clear:both; 
	margin-top:-40px;
} 

.borderline-grey {
	position: relative; z-index: 10;
	height: 18px; width: 100%; background: url('../images/borderline-grey.png') bottom left repeat-x;
	float: left; clear:both; 
	margin-top:-40px;
}

.borderline-purple {
	position: relative; z-index: 6;
	height: 18px; width: 100%; background: url('../images/borderline-purple.png') bottom left repeat-x;
	float: left; clear:both; 
	margin-top:-40px;
}


/* ICONS 
---------------------------------*/
.icon-yritys { width: 23px; height: 23px; background: url('../images/icon-yritys.png') top left no-repeat;  }
.icon-referenssit { width: 30px; height: 23px; background: url('../images/icon-referenssit.png') top left no-repeat;  }
.icon-yhteistyossa { width: 30px; height: 23px; background: url('../images/icon-yhteistyossa.png') top left no-repeat;  }
.icon-yhteys { width: 28px; height: 23px; background: url('../images/icon-yhteys.png') top left no-repeat;  }

.icon-yritys-white { width: 23px; height: 23px; background: url('../images/icon-yritys-white.png') top left no-repeat;  }
.icon-referenssit-white { width: 30px; height: 23px; background: url('../images/icon-referenssit-white.png') top left no-repeat;  }
.icon-yhteistyossa-white { width: 30px; height: 23px; background: url('../images/icon-yhteistyossa-white.png') top left no-repeat;  }
.icon-yhteys-white { width: 28px; height: 23px; background: url('../images/icon-yhteys-white.png') top left no-repeat;  }

.icon-yritys-big { width:317px; height:345px ; background: url('../images/icon-yritys-big.png') top left no-repeat; }
.icon-yhteistyossa-big { width:317px; height:345px ; background: url('../images/icon-yhteistyossa-big.png') top left no-repeat; }
/*.icon-yhteys-big { width:317px; height:255px ; background: url('../images/icon-yhteys-big.png') top left no-repeat; opacity: 0.4; }*/


/* TEXT Styles 
---------------------------------*/
.text-h1 { font-family: 'CDRegular'; font-size: 50pt; color: #fff; line-height: auto; }
.text-h2 { font-family: 'CDRegular'; font-size: 30pt; color: #fff; }

.text { margin-top: 10px; line-height: 140%; font-size: 18px; float: left; 
text-shadow: 1px 1px 2px #888888;
filter: dropshadow(color=#888888, offx=1, offy=1);    line-height: 22px; 
}
.textBold { font-family: 'CDBold';  font-size: 20px;}
.name {color:#d4d3d3;font-size:20px;}

/* LINKS
---------------------------------*/
a { color: #205877; text-decoration: none;}
.stul img {opacity: 0.8;filter:alpha(opacity=80);}
.stul img:hover {opacity: 1;filter:alpha(opacity=100);}


/* SRH FONT  
---------------------------------*/
@font-face {
    font-family: 'SRH-font';
    src: url('../font/ethnocentric_rg-webfont.eot');
    src: url('../font/ethnocentric_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/ethnocentric_rg-webfont.woff') format('woff'),
         url('../font/ethnocentric_rg-webfont.ttf') format('truetype'),
         url('../font/ethnocentric_rg-webfont.svg#SRH-font') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'CDRegular';
    src: url('../font/caviardreams-webfont.eot');
    src: url('../font/caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/caviardreams-webfont.woff') format('woff'),
         url('../font/caviardreams-webfont.ttf') format('truetype'),
         url('../font/caviardreams-webfont.svg#CaviarDreamsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CDItalic';
    src: url('../font/caviardreams_italic-webfont.eot');
    src: url('../font/caviardreams_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/caviardreams_italic-webfont.woff') format('woff'),
         url('../font/caviardreams_italic-webfont.ttf') format('truetype'),
         url('../font/caviardreams_italic-webfont.svg#CaviarDreamsItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CDBold';
    src: url('../font/caviardreams_bold-webfont.eot');
    src: url('../font/caviardreams_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/caviardreams_bold-webfont.woff') format('woff'),
         url('../font/caviardreams_bold-webfont.ttf') format('truetype'),
         url('../font/caviardreams_bold-webfont.svg#CaviarDreamsBold') format('svg');
    font-weight: normal;
    font-style: normal;

}