/*

Rekka-Rasti CSS

Copyright (C) 2015 Riku Nurminen

Voit soveltaa yksittäisiä osia ja tekniikoita tämän sivuston
tyylitiedostoista (CSS) omiin tarkoituksiisi, mutta sivuilla olevien kuvien,
värien, kokojen, typografian ja asettelun muodostaman kokonaisuuden
("ulkoasun") on luonut Hyvinkän Rekka-Rasti eikä sitä saa kopioida sellaisenaan. 

*/



/* ==========================================================================
   Base rules
   ========================================================================== */

/* fullscreen setup */
html, body {
    height:100%;
}


body {
    font: normal 18px/1.4 "Open Sans", Arial, Helvetica, sans-serif;
    text-rendering: optimizeLegibility;
    color: #fff;
    text-shadow:
      -1px -1px 2px rgba(0, 0, 0, 0.5),  
       1px -1px 2px rgba(0, 0, 0, 0.5),
      -1px 1px 2px rgba(0, 0, 0, 0.5),
       1px 1px 2px rgba(0, 0, 0, 0.5);
}


p {
    margin-bottom: 1.4em;
}


a:link, a:visited, a:active {
    color: #fff;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}


#sivukehys {
    margin: 0 auto;
    width: 960px;
}



/* ==========================================================================
   ========================================================================== */

header h1 {
    font-size: 4em;
    color: #fff;
    text-shadow:
      -2px -2px 2px rgba(0, 0, 0, 0.5),  
       2px -2px 2px rgba(0, 0, 0, 0.5),
      -2px 2px 2px rgba(0, 0, 0, 0.5),
       2px 2px 2px rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 0;
}

header h2 {
    font-size: 2em;
    color: #fff;
    text-shadow:
      -1px -1px 2px rgba(0, 0, 0, 0.5),  
       1px -1px 2px rgba(0, 0, 0, 0.5),
      -1px 1px 2px rgba(0, 0, 0, 0.5),
       1px 1px 2px rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 0;
}


#content h3 {
    color: #fff;
    text-decoration: underline;
    font-size: 2em;
    margin: 0px;
    padding: 40px 0 50px 0;
    text-shadow:
      -1px -1px 2px rgba(0, 0, 0, 0.5),  
       1px -1px 2px rgba(0, 0, 0, 0.5),
      -1px 1px 2px rgba(0, 0, 0, 0.5),
       1px 1px 2px rgba(0, 0, 0, 0.5);
}

@media (min-width: 1281px) {
	#rows {
		width: 90%;
		margin: 0 auto;
	}
}

.rowbox,
.lastrowbox {
    width: 25%;
    display: inline-block;
    background-color: rgba(055, 055, 055, 0.7);
    min-width: 290px;
    margin-right: 4%;
    margin-bottom: 20px;
    padding: 20px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}


.lastrowbox {
    margin-right: 0;
}


.rowbox h4,
.lastrowbox h4 {
    margin: 0;
    padding: 0;
    line-height: 1em;
    font-size: 1.2em;
}


/* background setup */
/* www.minimit.com/articles/solutions-tutorials/fullscreen-backgrounds-with-centered-content */
.background {
    background-repeat:no-repeat;
    /* custom background-position */
    background-position:50% 50%;
    /* ie8- graceful degradation */
    background-position:50% 50%\9 !important;
}


.fullscreen,
.content-a {
    width:100%;
    height:100%;
    overflow:hidden;
}
.fullscreen.overflow,
.fullscreen.overflow .content-a {
    height:auto;
    min-height:100%;
}

/* content centering styles */
.content-a {
	display:table;
}
.content-b {
	display:table-cell;
    position:relative;
	vertical-align:middle;
	text-align:center;
}

.not-fullscreen {
    height:50%;
}



/* ==========================================================================
   HTML5 Boilerplate / html5boilerplate.com
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}


/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}


/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img { vertical-align: middle; }


/*
 * Chrome Frame prompt
 */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}