@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700|Pacifico);
@import url(http://fonts.googleapis.com/css?family=Merriweather:400,700);
@import url(http://fonts.googleapis.com/css?family=Playfair+Display|Lora:400italic|Playfair+Display+SC);
@import url(http://fonts.googleapis.com/css?family=Merriweather:400italic,400);


html {background: url(trak.png) center top fixed no-repeat, url(test.jpg) repeat fixed #edeff0;}
body {height: 100%; min-height: 100%; margin:0; padding: 0; }

::-moz-selection { background-color: rgba(39, 39, 39, 0.9); color: #fff; }
::selection { background-color: rgba(39, 39, 39, 0.9); color: #fff;  }

/* Skeleton */
header {margin: 20px auto 0px auto;  height: 117px; width: 100%; padding: 85px 0px 0px 0px; background: url(cassini.png) center center no-repeat;}
.container {width: 100%; margin: 0; padding: 2px 0px; }
.wrapper {width: 960px; margin: 0px auto 0px auto; padding: 0;  }
footer { display: block; width: 100%; overflow: hidden; padding: 0; 	}

h1 {font: 2.2em/1.5em 'reklame_script_regular_demoRg', cursive; color: #211c1c; text-align: center; margin: 0; text-shadow: -1px 1px 0px #fff, -2px 2px 0px #dedede;  }
h2 {font: 14px/1.8em 'Playfair Display', sans-serif; color: #fff; font-weight: 400; text-align: left ;}
h3 {font: .9em/2em 'Merriweather', sans-serif; text-indent: 15px; color:  #fff; font-style: italic; text-align: left ; border-bottom: 2px solid rgba(18, 20, 21, 0.6); padding: 8px 0px; margin-bottom: 20px;}

p, pre { font: 12px/1.6em 'Merriweather', serif; font-weight: 400; color: #e8e8e8; text-shadow: -2px 1px 0px #121314; } 
article {padding: 20px 60px;} 

.half {width: 49%; display: inline; float: left; margin: 0;}
.score {text-align: left; font: 11px/1.8em 'Merriweather', serif; color: #fff; font-weight: 400; -moz-column-count: 2; -moz-column-gap: 40px; -webkit-column-count: 2; -webkit-column-gap: 40px; column-count: 2; column-gap: 40px; }
.score p:first-child {padding-top: 0px; margin-top: 0px;}
footer p {font: 10px/1.5em 'Merriweather', serif; color: #fff; text-align: center; text-transform: uppercase;}

/* Navigation and other crappy lists */
ol, ol li {list-style: decimal-leading-zero; text-align: left; font: 12px/1.8em 'Merriweather', serif; font-weight: 400; margin: 0; padding-left: 24px; color: #e8e8e8; text-shadow: -2px 1px 0px #121314;}
ol strong {font-weight: 700; color: #5a5a5a;}
ol u {color: #5a5a5a;}
.cup {margin-bottom: 10px; }

.kuvagalleria {text-align: center; margin: 8px auto; padding: 15px 0px 0px 0px; }
.kuvagalleria li {display: inline; margin: 4px 12px; text-align: center;}
.kuvagalleria img {overflow: hidden; border: 1px solid rgba(98, 104, 107, 0.14); padding: 4px; background: white;}

/* Figure, img */
figure   {display: inline-block; position: relative; float: left; overflow: hidden; margin: 10px 85px 30px 85px;}
figure img {height: 236px; width: 350px; background: white; border: 1px solid #dadada; padding: 6px; }
figcaption {text-align: right; font: 11px/1em 'Merriweather', serif; text-align: center; padding: 4px 0px; color: #b4b4b4;}
figcaption a:link, figcaption a:active, figcaption a:visited, figcaption a:hover {color: #b4b4b4; text-decoration: none;}

/* Tables */
.pedigree { color: #6c767e; font: 14px/1.3em 'Playfair Display', serif;  font-weight: 400; text-align: center; border-spacing: 0px;     border-collapse: separate;  padding: 0; margin: 20px 30px 10px 30px; vertical-align: middle; width: 900px; background:rgba(18, 20, 21, 0.25); border: 1px solid #111619;}
.pedigree td {width: 33%; padding: 12px 0px 12px 0px; border: 1px solid #111619;}
.pedigree span { font-family: 'Merriweather', serif; color: #777777; font-style: italic; display: block; font-size: 10px;}	
.third {text-align: left; font: .8em/1.5em 'Merriweather', serif; font-style:italic; text-indent: 20px; }	
.sire {background: rgba(18, 20, 21, 0.2);}

.perustiedot {font: 12px/14px 'Merriweather', serif; font-weight: 400; color: #e8e8e8; text-shadow: -2px 1px 0px #121314; margin: 25px 0px; border-collapse:collapse; vertical-align: middle; }
.perustiedot td {padding: 0px 8px;}
.break {height: 10px;}
.perustiedot tr td:nth-child(2):before {content: '::'; font: 11px/25px 'Merriweather', serif; padding: 0px 25px 0px 10px;}

.os-roll { text-align: left; color: #6c767e; font: 11px/1.5em 'Merriweather', serif; font-weight: 400;  margin: 30px 5% 15px 5%;  width: 90%; border-collapse: collapse; empty-cells: show; border: 1px solid #111619; font-style: italic;}
.os-roll td { vertical-align: middle; padding: 7px 5px; text-indent: 15px; border: 2px solid #111619;}
.os-roll tr:nth-child(even) {background: rgba(18, 20, 21, 0.25);}
.os-roll tr:nth-child(odd) {background: rgba(18, 20, 21, 0.45);}

/* Navigation */

footer a:link, footer a:active, footer a:visited  {color: #fff; text-decoration: none;  -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
footer a:hover   {color: #fff; text-decoration: none; }

.pedigree a:link, .pedigree a:active, .pedigree a:visited, .os-roll a:link, .os-roll a:active, .os-roll a:visited {color: #ebf0f3; text-decoration: none;  -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
.pedigree a:hover, .os-roll a:hover   {color: #fff; text-decoration: none; text-shadow: 0px 0px 12px rgba(255, 255, 255, 0.7);}
.pedigree td:hover a {text-shadow: 0px 0px 12px rgba(255, 255, 255, 0.7);}
.os-roll tr:hover a {text-shadow: 0px 0px 12px rgba(255, 255, 255, 0.7);}

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

div.simpleTabs { padding:0px; margin-top: 30px;}
ul.simpleTabsNavigation { margin:0px; padding:0; text-align:center; }
ul.simpleTabsNavigation li { list-style:none; display:inline; margin:0; padding:0; }
ul.simpleTabsNavigation li a { font: 12px/45px 'Merriweather', sans-serif; font-style: italic; font-weight: 400; margin: 0px 5px; padding:6px 12px;text-decoration:none; background: rgba(18, 20, 21, 0.25) }
ul.simpleTabsNavigation li a:hover { background-color: rgba(18, 20, 21, 0.25); }
ul.simpleTabsNavigation li a.current { background:#eff3f3; color:#222; }
div.simpleTabsContent { padding:0px 0px; margin-top:3px; display:none; }
div.simpleTabsContent.currentTab { display:block; }
div.simpleTabs article {padding: 10px 60px 30px 60px;}