/* Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html */

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, 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 { background: transparent; border: 0; margin: 0; padding: 0; /* vertical-align: baseline; */ }

h1, h2, h3, h4, h5, h6 { clear: both; font-weight: normal; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; } /* tables still need 'cellspacing="0"' in the markup */
a img {	border: none; }

a:link { color: #383838; }
a:visited {	color: #181818; }
a:active, a:hover { color: #181818; }

/* Layout
-------------------------------------------------------------- */

#wrapper { width: 980px; height: 100%; margin: 20px auto 0 auto; padding: 0; background-color: #ccc; margin-bottom: 40px; } /* background: transparent; */

#header, #banner-top, #navigation, #main, #footer { width: 840px; }
#banner-top, #navigation, #main { } /* padding: 0 5px 0 5px; */ /* 5px shadow frame */

#main { display: block; color: #383838; }
#banner-top, #navigation, #main, #footer { } /* background: transparent url('images/content-border-scale.png') repeat-y; */

#sidebar { width: 200px; display: block; float: left; color: #fff; margin: 0 10px 0 0; background-color: #ddd; }
#sidebar h1 { color: #383838; }

#banners { position: relative; width: 150px; height: 0px; left: 830px; top: 462px; padding: 0; } /* top: 115px; */
.banner-container { width: 142px; padding: 5px; background: transparent url('images/content-border-scale.png') repeat-y; }
.banner { width: 140px; border: solid 1px #888; }

.message-container { width: 302px; padding: 5px; background: transparent url('images/content-border-scale.png') repeat-y; }
.message { width: 300px; border: solid 1px #888; }
.message p { padding: 8px; }

.navigation-bg { width: 810px; height: 56px; background: transparent url('images/navigation-bg.png') no-repeat; }

.content-bg { width: 810px; display: block; padding: 0 10px 0 10px; background-color: #eee; } /* background: transparent url('images/content-bg-scale.png') repeat-y; */

#footer { /* padding: 5px 0 0 5px; */ }
#bottom-menu { letter-spacing: 1px; height: 36px; padding: 10px 0 0 0; text-align: center; background: transparent url('images/bottommenu-bg.gif') no-repeat; }
#bottom-menu a, #bottom-menu a:hover, #bottom-menu a:active { font-size: 11px; color: #fff; text-decoration: none; }
#bottom-menu a:hover { color: #b0b0b0; }

#dimlayer { display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity:.90; filter: alpha(opacity=90); }

.gamelayer-top-container { display: block; position: absolute; right: 0; top: 0; z-index: 1003; margin-top: -8px; margin-right: -58px; }
button.gamelayer-close { display: block; padding: 0; border: 0; cursor: pointer; width: 44px; height: 44px; line-height: 44px; text-align: center; color: white; font-style: normal; font-size: 28px; background-color: #666; font-family: Arial, Baskerville, monospace; }

/* Fonts
-------------------------------------------------------------- */

body, input, textarea { font: 12px Arial, Helvetica, Jamrul, sans-serif; color: #333; }

.content-title { color: #f77029; font-size: 24px; line-height: 50px; }
.gamearea-title { color: #383838; font-size: 24px; line-height: 36px; }
.content-tinyheader { color: #a00000; font-weight: bold; }
.tag-links, .tag-links a { color: #a00000; }

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

h3 { font-size: 14px; color: #a00000; font-weight: bold; }
h4 { font-size: 24px; color: #a00000; font-weight: bold; font-family: 'Lato', serif; } /* google webfont, used on special advert and pricing page */

/*
"Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif, "Courier 10 Pitch", Courier, monospace, Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono";
*/

/* Structure
-------------------------------------------------------------- */

/* The main theme structure */

/* Structure the footer area */

/* Global Elements
-------------------------------------------------------------- */

/* Main global 'theme' and typographic styles */
body { background: #fff url('images-karjalainen/bg.gif') repeat-x; height: 100%; }

img { background: transparent; display: block; border: 0; margin: 0; padding: 0; } /* no gaps when rendered as block */

iframe { display: block; overflow: auto; }

/* these are not in use at the moment */
.inline img { display: inline; vertical-align: -6px; } /* text must wrap around here, cannot be block then */
.inline p {  display: inline; }

.float-left img, .float-left div { float: left; }
.float-left p { /* float: left; */ margin: 0; }

.post-ratings-container { width: 790px; height: 30px; margin: 10px 0 20px 0; padding: 12px 10px 0px 10px; border: 1px dotted #aaa; }
.post-ratings { display: block; float: left; width: 200px; overflow: hidden; } /* overwrite some plugin styles */
.post-ratings img { float: left; }
.post-ratings-image { float: left; }
.post-ratings-loading { display: none; float: left; width: 200px; border: 1px solid #ff0000; overflow: hidden; } /* this has been removed from settings */

#gamedesc h2 { font-size: 12px; font-weight: bold; display: inline; }
#gamedesc p { display: inline; }
.portaldesc h2 { font-size: 12px; font-weight: bold; display: inline; }
.portaldesc p { display: inline; }

.hr { width: 100%; height: 1px; clear: both; margin: -4px 0 10px 0; display: block; background-color: #666; border: 0; }

/* Text elements */
p { margin-bottom: 18px; }
ul { list-style: square; margin: 0 0 18px 1.5em; }
ol { list-style: decimal; margin: 0 0 18px 1.5em; }
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 0 24px 0; }
dt { font-weight: bold; }
dd { margin-bottom: 18px; }
strong { font-weight: bold; }
cite, em, i { font-style: italic; }
big { font-size: 131.25%; }
ins { background: #ffc; text-decoration: none; }

/*
blockquote { font-style: italic; padding: 0 3em; }
blockquote cite, blockquote em, blockquote i { font-style: normal; }
*/

pre {
	background: #f7f7f7;
	color: #222;
	line-height: 18px;
	margin-bottom: 18px;
	padding: 1.5em;
}

abbr, acronym { border-bottom: 1px dotted #666; cursor: help; }

sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; }

sup { bottom: 1ex; }
sub { top: .5ex; }

#sidebar a { text-decoration: none; }
#gamelist a { text-decoration: none; }
#login-container a { color: #b0b0b0; }
#login-container a:hover { color: #fff; }

object, embed { display: block; margin: 0; padding: 0; border: 0; overflow: hidden; }

/* Text meant only for screen readers */

/* .screen-reader-text { position: absolute; left: -9000px; } */

/* Forms
-------------------------------------------------------------- */

.button {
	min-width: 75px; display: inline; margin: 5px 0; background-color: #666;
	border: 1px solid #888; font: bold 12px Arial, Helvetica, Jamrul, sans-serif;
	text-decoration: none; color: #fff; cursor: pointer; padding: 2px 10px 2px 7px;
	}

.button:hover { background-color: #777; }

.button-folder {
	min-width: 75px; display: inline; margin: 5px 0; background-color: #505050;
	border: 1px solid #707070; font: bold 12px Arial, Helvetica, Jamrul, sans-serif;
	text-decoration: none; color: #fff; cursor: pointer; padding: 2px 10px 2px 7px;
	}

.button-folder:hover { background-color: #404040; }

input[type="text"], input[type="password"], textarea {
	width: 97%;
	background: #f9f9f9;
	border: 1px solid #ccc;
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.2);
	-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.2);
	padding: 2px;
	}

.login-fields { margin-top: 4px; margin-bottom: 20px; }

textarea { resize: none; } 

/*
div#register-form { width: 400px; overflow: hidden; height: 230px; position: relative; background: #f9f9f9 url(images/secure.png) no-repeat 260px 40px; font-family: Helvetica Neue, Helvetica, Arial !important; }  
div#register-form input[type="text"] { display: block; border: 1px solid #ccc; margin: 5px 20px; padding: 9px 4px; -moz-border-radius: 4px; -webkit-border-radius:4px; width: 200px; font-family: Helvetica Neue, Helvetica, Arial !important; }  
div#register-form input[type="text"]:hover { border-color: #b1b1b1; }  
div#register-form input[type="text"]:focus { -moz-box-shadow: 0 0 3px #ccc; -webkit-box-shadow: 0 0 3px #ccc; }  
div#register-form input[type="submit"]#register { background: url(images/register.jpg) no-repeat; border: 0; clear: both; cursor: pointer; height: 31px; overflow: hidden; position: relative; left: 295px; text-indent: -9999px; top: 42px; width: 92px; }  
div#register-form input[type="submit"]#register:hover { background-position: 0 -32px; }  
div#register-form span { display: block; margin-bottom: 22px; }  
div#register-form div.title { margin-left: 15px; }  
div#register-form div.title h1, div#register-form div.title span { text-shadow: 1px 1px 0px #fff; }  
div#register-form div.title h1 { margin:7px 0; }  
p.statement { position: absolute; bottombottom: -2px; left: 10px; font-size: .9em; color: #6d6d6d; text-shadow: 1px 1px 0px #fff; }  
*/

/* Gallery listing
-------------------------------------------------------------- */

/*
.category-gallery .size-thumbnail img {	border: 10px solid #f1f1f1;	margin-bottom: 0; }
.category-gallery .gallery-thumb { float: left; margin-right: 20px; margin-top: -4px; }
.category-gallery { padding-top: 4px; }
*/

/* Navigation
-------------------------------------------------------------- */

.sortbutton-container, .pelikone-container { overflow: hidden; padding: 4px; border: 1px dotted #c5c5c5; margin: -6px 0 8px 0; background-color: #d5d5d5; }
.pelikone-container { width: 784px; padding: 8px 4px 8px 4px; margin: 0; margin-bottom: 2px; } /* remove margins */

.sortbutton-container .button {
	min-width: 75px; display: inline; margin: 0 4px 0 0; background-color: #666;
	border: 1px solid #888; font: bold 12px Arial, Helvetica, Jamrul, sans-serif;
	text-decoration: none; color: #fff; cursor: pointer; padding: 2px 10px 2px 7px;
	}

.sortbutton-container .button:hover { background-color: #404040; }


/* button div */
.navi-button-container { height: 56px; padding: 6px 20px 0 20px; color: #c84a08; }
.navi-button-container a { color: #e86a28; }
.navi-button-container a:hover { color: #c84a08; }

/* link text */
.navi-text { font: bold 16px Arial, Helvetica, Jamrul, sans-serif; text-decoration: none; letter-spacing: 0px; margin-right: 20px; }

.categories-button-container { height: 32px; clear: both; margin: 2px -10px; padding: 5px; background-color: #aaa; }

.categories-button { text-decoration: none; height: 32px; display: table-cell; vertical-align: middle; line-height: 14px; font-size: 14px; font-weight: bold; }
.categories-button a { color: #1a1a1a; }
.categories-button a:hover { color: #a00000; }

/* Footer
-------------------------------------------------------------- */

.copyright { display: none; letter-spacing: 1px; color: #856545; text-align: center; }
.copyright a { color: #856545; }
.copyright a:hover { color: #654525; }
.copyright a:active { color: #856545; }

/* Print Style
-------------------------------------------------------------- */

@media print {
	
	body { background: none !important; }
	
	#wrapper { clear: both !important; display: block !important; float: none !important; position: relative !important; }
	
	#header { border-bottom: 2pt solid #000; padding-bottom: 18pt; }

	.navigation { display: none !important; }
	
	#header, #footer { margin: 0; width: 100%; }
	#main { display: inline; }
	
	}