@charset "UTF-8";

@import url(http://fonts.googleapis.com/css?family=Montserrat);
@import url(http://fonts.googleapis.com/css?family=Vast+Shadow);

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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, font, img, 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 {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html{
		background-image: url(../images/stalac_bg.jpg);
		width:100%;
		height:100%;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center center;
}

/*
	Variable Grid System.
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/

	Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/
body {
		font: 16px Georgia, serif,;
		color:#fff;
}
a:link {color:#fa002c;}      /* unvisited link */
a:visited {color:#93001a;}  /* visited link */
a:hover {color:#25b8e2;}  /* mouse over link */
a:active {color:#25b8e2;}  /* selected link */



/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { 
	font-weight:400;
	font-family: 'Montserrat', sans-serif;
	clear:both;
}




h1 {
	font-style:normal;
	font-size: 44px;
	line-height: 40px;
	text-transform: uppercase;
}

h2 { 
	font-style:normal;
	font-size: 32px;
	line-height: 32px;
	text-transform: uppercase;
}

h3 {
	font-style:normal;
	font-size: 18px;
	line-height: 15px;
	text-transform: uppercase;
}

h4 { 
	 
	font-style:normal;
	font-size: 19px;
	text-transform: uppercase;
}

.navi h4 { 
	 
	font-style:normal;
	font-size: 19px;
	text-transform: uppercase;
}


h5 {
	font-size-adjust:0.488;  
	font-style:normal;
	font-size: 15px;
	text-transform: uppercase;
}
#pepedeluxe h5 {
	line-height: 24px;
	
}
#pepedeluxe h1 {
	
}
#pepedeluxe h3 {
	line-height: 26px;
	font-size-adjust:0.488;
	margin-top:4px;
	width:250px;
	float:left;
	clear:none;
	
}
.is{
	float:left;
	font-size: 57px;
	text-transform: uppercase;
	font-family: 'Vast Shadow', cursive;
	width:85px;
	
}
.iv{
	font-size: 57px;
	text-transform: uppercase;
	font-family: 'Vast Shadow', cursive;
	
}


h6 {
	font-size-adjust:0.488; 
	font-style:normal;
	font-size: 15px;
}	

/* Text elements
-------------------------------------------------------------- */

p {
    margin-bottom:10px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	color:#fff;
	line-height: 21px;
	
}
ol {
	margin: 0 0 18px 2.5em;
}
ul {
	list-style:none;
}
ol {
	list-style-type: decimal;
}
ol ol {
	list-style:upper-alpha;
}
ol ol ol {
	list-style:lower-roman;
}
ol ol ol ol {
	list-style:lower-alpha;
}
ul ul, ol ol, ul ol, ol ul {
	margin-bottom:0;
}
dl	{
    margin:0 1.5em;
}
dt {
    font-weight:bold;
}
dd {
	margin-bottom:18px;
}
strong {
	font-weight: bold;
}
cite, em, i {
	font-style: italic;
}
blockquote {
	margin: 0 3em;
}
blockquote em, blockquote i, blockquote cite {
	font-style:normal;
}
pre {
	font:11px Monaco, monospace;
	line-height:18px;
	margin-bottom:18px;
}
code {
	font:11px Monaco, monospace;
}
abbr, acronym {
  border-bottom:1px dotted #333;
  cursor: help;
}
ins {
	text-decoration:none;
}
sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	position: relative;
	
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}

/* Pullquotes
-------------------------------------------------------------- */

blockquote.left {
	float: left;
	margin-left:0;
	margin-right:20px;
	text-align: right;
	width: 33%;
}
blockquote.right {
	float: right;
	margin-left:20px;
	margin-right:0;
	text-align: left;
	width: 33%;
}

/* Containers
----------------------------------------------------------------------------------------------------*/
#wrapper {
	margin-left: auto;
	margin-right: auto;
	padding-top:20px;
	width: 970px;
	height:3500px;
	background-image: url(../images/uusipepe_bg.jpg);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
}
#pepedeluxe {
	padding-top:85px;
	padding-left:25px;
	width:340px;
	height:300px;
	color:#000;
}
.hand1 {
	margin-left:45px;
	margin-top:20px;
}
#queen {
	margin-left:90px;
	padding-top:125px;
	height:450px;
	width:505px;
	float:left;
	
}
#queen p {
word-spacing: -1%;
	line-height: 20px;
	
}

a.john_nurminen {
   font-weight: 600;
	color:#fced00;
	text-decoration:none;
	font-style:bold;
}
a.john_nurminen:visited {
	color:#fff;
	text-decoration:none;
}
a.john_nurminen:hover{
	color:#25b8e2;
	text-decoration:none;
}
.link-to-store {
	margin-left:32px;
	padding-top:470px;
	width:322px;
	float:left;
}
.quotes {
	padding-top:0px;
	margin-bottom:20px;
	margin-left:22px;
	height:488px;
}
.quotes p {
	font-weight:200;
	font-style:normal;
	font-size: 22px;
	float:left;
	line-height: 28px;
	margin-top:10px;
}
.quote-first{
	font-size: 34px;
	font-weight:200;
	margin-top:-30px;
	font-style:italic;
	line-height: 51px;
	width:300px;
	height:488px;
	float:left;
}
.quote-second{
	height:488px;
	float:left;
	width:290px;
	margin-left:35px;
	margin-top:30px;
}
.quote-third{
	height:488px;
	width:290px;
	margin-left:25px;
	margin-top:30px;
	float:left;
}
#sound {
	padding-top:80px;
	padding-bottom:60px;
	height:488px;
}
#companions {
	margin-left:50px;
	padding-top:53px;
	text-align:center;
	height:450px;
	width:290px;
	float:left;
}
.companions-links {
	margin-left:70px;
	padding-top:93px;
	width:550px;
	float:left;
}

.hand {
	margin-bottom:20px;
}
#companions h3 {
	padding-top:20px;
	padding-bottom:20px;
	font-family: Georgia, "Times New Roman", Times, serif;
	border-top:1px;
	border-bottom:1px;
	border-style:solid;
	border-color:#FFF;
	font-size-adjust:0.488;  
	font-style:italic;
	font-size:29px;
	text-transform: none;
	line-height:42px;
}
#companions p {
	margin-top:20px;
	font-weight:200;
	font-style:normal;
	font-size: 21px;
	line-height: 42px;
	color:#FFF;
}
#store {
	padding-top:40px;
	height:320px;
}
#store h2 {
	color:#dd100d;
	margin-bottom:20px;
	
}
.catmerch {
	margin-left:30px;
	width:290px;
	float:left;
}
.catmerch a
{
	padding:2px 5px;
	color:#dd100d;
	text-decoration:none;
	font-size: 23px;
	line-height: 28px;
	font-weight:400;
	text-transform: none;
	font-family: 'Montserrat', sans-serif;
}
.catmerch a:hover {
	color:#2bb8e0;
}
.other {
	margin-left:50px;
	width:290px;
	float:left;
}
.other li a
{
	padding:2px 5px;
	color:#dd100d;
	text-decoration:none;
	font-size: 23px;
	line-height: 28px;
	font-weight:400;
	text-transform: none;
	font-family: 'Montserrat', sans-serif;
}
.other li a:hover {
	color:#2bb8e0;
}
.top {
	margin-left:420px;
}
.top2 {
	margin-left:420px;
	margin-top:27px;
}
#contact
{
	padding-left: 25px;
	float:left;
}
#contact a
	
{
	text-decoration:none;
	color:#FFF;
}
#contact h4
{
	padding:2px 5px;
	color:#FFF;
	text-decoration:none;
	font-size: 18px;
	line-height: 18px;
	font-weight:300;
	text-transform: none;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
}
.social2 h4 {
	padding:2px 5px;
	color:#FFF;
	text-decoration:none;
	font-size: 18px;
	line-height: 18px;
	font-weight:300;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
}
#contact a:hover {
	color:#2bb8e0;
}
#footer {
	padding-top:70px;
}
.mark{
	font-family: 'Montserrat', sans-serif;
	padding-top:35px;
	text-align:center;
	font-size: 15px;
	color:#000;
	text-transform: none;
	text-decoration:none;
	
}
.mark a {
	text-decoration:none;
	color:#999;
}
	
/* Navigational
----------------------------------------------------------------------------------------------------*/


.navi{
		z-index: 12;
		position:relative;
		width: 600px;
	padding-left:5px;
	float:left;

}

.navi ul {
	list-style:none;
	
}
.navi li {
	float:left;
	margin-bottom:8px;
	margin-top:3px;
	padding:0;
}


.navi-item a {
	display:block;
	padding:2px 10px;
	height:100%;
	color:#FFF;
	text-decoration:none;
	font-size: 18px;
	line-height: 14px;
	font-weight:400;
	border-right:#FFF solid 2px;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
}
.navi-last a {
	display:block;
	padding:2px 10px;
	height:100%;
	color:#FFF;
	text-decoration:none;
	font-size: 18px;
	line-height: 14px;
	font-weight:400;
	border-right:none;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
}
.navi li a:hover {
	color:#dd100d;
}
.big-link
{
	padding:2px 5px;
	color:#FFF;
	text-decoration:none;
	font-size: 18px;
	line-height: 16px;
	font-weight:400;
	border-right:#FFF solid 2px;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
}
.big-link a:hover {
	color:#dd100d;
}
.social {
	float:right;
	margin-right:15px;
	margin-top:-8px;
}
.social2 {
	float:right;
	margin-right:15px;
}
.social img {
	margin-right:14px;
}

.social2 img {
	margin-top:10px;
	margin-right:10px;
}

	

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
  zoom: 1;
}