/*   
Theme Name: JampE
Theme URI: http://jampe.fi
Description: Custom theme.
Author: Jukka Lariola
Author URI: 
Version: 1.1
*/

/*
Goldilocks Approach to Responsive Web Design Boilerplate

Author: Design by Front - @designbyfront
Version: 0.1
URL: http://www.goldilocksapproach.com
----------------------------------------------------------------------------------------

CONTENTS - GLOBAL.CSS
-----------------------------------------
1. RESET
2. ROOT
3. CORE TYPOGRAPHY
4. LINKS
5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)
7. BROWSER AND NON-SEMANTIC STYLING

CONTENTS - LAYOUT.CSS
-----------------------------------------
8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)

harmaa #9D9D9C
sininen #006FB9
vihreä #39B54A

*/


/* 1. RESET
----------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size:100%;
  font: inherit;
  vertical-align: baseline;
  }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
  }
  
  
/* 2. ROOT
----------------------------------------------------------------------------------------*/
html { 
  overflow-y: scroll;
  }

/* /ht Ethan Marcotte - http://front.ie/l8rJaA */
img, embed, object, video, iframe { max-width: 100%; height: auto;}
.ie6 img.full, .ie6 object.full, .ie6 embed, .ie6 video { width: 100%; }


/* 3. CORE TYPOGRAPHY
----------------------------------------------------------------------------------------*/
body {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  line-height: normal;
  color: #333;
  background: #FFF;
  }

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.809em;
  font-weight: 900;
  color: #000;
  }

h1 {
font-size: 200%;
}

h2 {
font-size: 155%;
margin-bottom: 0;
}

h2.ingressi { font-weight: 900; margin-bottom: 0.809em;}

h2.product_description { color: #39B54A; margin-bottom: 0.809em; }

h3 {
font-size: 150%;
line-height:130%;
}

h4 {
font-size: 125%;
line-height:130%;
}
p, ul, ol, dl, blockquote {
    font-size: 1em;
    line-height: 1.618em;
    margin-bottom: 1.618em; 
   /* max-width: 32em; *//* Optimal width for long-form text */
  }
    
ul { list-style-type: disc; margin-left: 1.618em; margin-bottom: 1em;}
ol { list-style-type: decimal; margin-left: 1.618em; margin-bottom: 1em; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0;}

li { margin-bottom: 0.5em; }



b, strong { font-weight: bold; }
i, em { font-style: italic; }
small { font-size: 80%; }


/* 4. LINKS
----------------------------------------------------------------------------------------*/
a, a:visited { outline: none; color: #333; text-decoration: underline; }  
a:hover { outline: none; text-decoration:none; }  
a:active, a:focus { outline: none; }


/* 5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
----------------------------------------------------------------------------------------*/

.heading_stripe { background: #2C438F; color: #fff;}
	.lesspad {padding: 0.8em 0 0 0  !important;}
	.heading_stripe .lesspad {padding: 0.8em 0 0.8em 0  !important;} 
	.heading_stripe h1 { color: #fff !important; margin-bottom: 0;}

.stripe { height: 35px; background: #9D9D9C; text-align: center;}
  .stripe span { padding: 0 0.5em; }
  .stripe span.current {font-weight: 700;}
  header#header .stripe .container {padding: 0 !important;}

.nosto { background: url(images/vehvia_ruiskubetonisalaoja.jpg) no-repeat right top; background-size: cover; height: 125vw; }
  .nosto h1 { margin: auto; padding-top: 50vw; text-align: center; font-size: 190%; color: #fff; }
  .nosto h1 span.firstline {display: block; font-size: 250%;}

  .nosto_se h1 { font-size: 140%; }
  .nosto_se h1 span.firstline { font-size: 275%; }


.highlight { padding-top: 1.618em; padding-bottom: 1.618em; }
	.highlight h1 { font-size: 180%; color: #fff; text-align: center; }
	.highlight p { font-size: 1.2em; max-width: 32em; }
	
.highlight_yhteystiedot { background: #006FB9; }	
.highlight_tuotetiedot { background: #39B54A;  }	

.infopallo { max-width: 50%;  display: block; margin: 1em auto; }

header#header {  padding: 0; border-bottom: 3px solid #9D9D9C;}
	header#header .container { padding: 2em 0; }


footer#footer {  margin-top: 4em; padding: 1em 0; background: #9D9D9C; }
	footer#footer p { font-size: 0.8em; color: #000; width: 100% !important; max-width: 100%; font-weight: 700;	text-align: center; }
	

#logo { display: block;  padding: 0; width: 180px; height: 80px; background: url('images/logo.png') no-repeat; background-size: contain; margin: 0 auto; max-width: 70%;}
	#logo a { font: 0/0 a; text-shadow: none; color: transparent; display: block; width: 180px; height: 80px; z-index: 900; position: relative; max-width: 70%;}


.alignleft { float: left; margin: 0 1em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1em; }



	
a.button { background: #006FB9; padding: 0.25em 1.25em; margin: 0; display: inline-block; color: #fff; text-decoration: none; font-weight: 700; text-transform: uppercase; }	
  a.button:hover { background: #9D9D9C; }
  
#footer a.button { background: #000; }
#footer a.button:hover { background: #666; }
  
.mobilemenulink	{ float: right; margin:0 1em 1em 1em; z-index: 999;}
	a.mobilemenulink  { color: #333; }
	
.top_link	{ text-align: center; margin: 4em 0; }
	.top_link a { text-decoration: none; }


/* 6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)
----------------------------------------------------------------------------------------*/
.container {
    padding: 2em 0.4em 1em 0.4em;
    width: auto;
    margin: auto;
    position: relative;
  }


.column {
	float: none;
	margin: 0 auto;
	padding: 1.33em;
}

.navigation h3 { padding: 1em 0; text-align: center;   margin: 3em 0 0 0; font-weight: 400; color: #000; }

.navigation {z-index: 400; }
.navigation ul.menu  { display: block; margin: 0 -0.4em; border-top: 1px solid #333;}
	
	.navigation ul.menu li { margin: 0;  }
	.navigation ul.menu li a { display: block; border-bottom: 1px solid #333; color: #006FB9; padding: 1em; text-align: center;  text-transform: uppercase; text-decoration: none; font-weight: 400; }
	.navigation ul.menu li a:hover, .navigation ul.menu li a:focus  { color: #9D9D9C; }
	.navigation ul.menu li.current-menu-item a { color: #39B54A; }
	

	



/* 7. BROWSER AND NON-SEMANTIC STYLING
----------------------------------------------------------------------------------------*/
.cf:before, .cf:after { content: ""; display: block; }
.cf:after { clear: both; }
.ie6 .cf { zoom: 1 }



/* Print styles!
-------------------------------------------------------------------------------*/
@media print {

}