@font-face {font-family: 'TeeFranklin-Light';src: url('../fonts/TeeFranklinLight/1A6E1C_0_0.eot');src: url('../fonts/TeeFranklinLight/1A6E1C_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/TeeFranklinLight/1A6E1C_0_0.woff') format('woff'),url('../fonts/TeeFranklinLight/1A6E1C_0_0.ttf') format('truetype');}
 
@font-face {font-family: 'HurmeGeometricSans3-Bold';src: url('../fonts/HurmeGeometricSans/27BC69_0_0.eot');src: url('../fonts/HurmeGeometricSans/27BC69_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/HurmeGeometricSans/27BC69_0_0.woff') format('woff'),url('../fonts/HurmeGeometricSans/27BC69_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'HurmeGeometricSans3-Regular';src: url('../fonts/HurmeGeometricSans/27BC69_1_0.eot');src: url('../fonts/HurmeGeometricSans/27BC69_1_0.eot?#iefix') format('embedded-opentype'),url('../fonts/HurmeGeometricSans/27BC69_1_0.woff') format('woff'),url('../fonts/HurmeGeometricSans/27BC69_1_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'HurmeGeometricSans3-SemiBold';src: url('../fonts/HurmeGeometricSans/27BC69_2_0.eot');src: url('../fonts/HurmeGeometricSans/27BC69_2_0.eot?#iefix') format('embedded-opentype'),url('../fonts/HurmeGeometricSans/27BC69_2_0.woff') format('woff'),url('../fonts/HurmeGeometricSans/27BC69_2_0.ttf') format('truetype');}

/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */
html {
    overflow-y: scroll;
}
   
html,
button,
input,
select,
textarea {
    color: #222;
}

body {
	font-family: 'HurmeGeometricSans3-Regular', arial, sans-serif, helvetica, verdana;
    font-size: 0.9em;
    line-height: 1.6;
	letter-spacing: 1px;
	background-color: #fcfcfc;
	overflow-x: hidden;
}

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

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

a{
	text-decoration: none;
	color: #222;
}

h1, h2, h3{
	text-decoration: none;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

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

ul, li{
	margin: 0;
	padding: 0;
}

#content_container li{
list-style-type: circle;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.hide{
	display: none;
}

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

.active{
	background-color: #947bc6 !important;
}

.capitals{
	text-transform: uppercase;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

#page_wrapper{
	width: 1010px;
	margin: 0 auto;
	display: table;
}

/* TOP BAR */
#top_bar_wrapper{
position: relative;
color: #f1f1f1;
font-size: 0.7em;
font-family: HurmeGeometricSans3-SemiBold;
text-transform: uppercase;
width: 100%;
height: 40px;
background: #393939;
outline-style: groove;
outline-color: #947bc6;
clear: both;
}

#top_bar_wrapper a{
color: #F1f1f1;
}

#top_bar_wrapper a:hover{
text-decoration: underline;
}

#top_bar{
display:table;
width: 1010px;
margin: 0 auto;
}
#top_bar_left{
margin: 5px 0;
float: left;
}
#top_bar_right{
margin: 7px 0;
float: right;
}

.top_button{
padding: 6px 6px 6px 6px;
font-family: HurmeGeometricSans3-SemiBold;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
background-color: #947bc6;
text-align: center;
vertical-align: middle;
border-radius: 2px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; 
}

.top_button:hover{
color: #222;
background-color: #d0c3ea;
}

.top_button:active{
margin-top:2px;
}

.ui-dialog {
z-index: 1000 !important;
font-size: 1em !important;
}

#dialog{
display: none;
}

#reseller_iframe{
margin: 0;
padding: 0;
border: none;
width: 450px;
height: 1000px;
overflow-y: hidden;
}


/* HEADER */
#header_container{
margin: 50px 0 0 0;
text-align: right;
position: relative;
height: 80px;
}

#circlum_logo{
display: block;
float: left;
position: absolute;
bottom: 0;
margin: 0 0 5px 0;
width: 27%;
}

/* Main navigation */
#main_navigation{
margin: 40px 0 0 0;
letter-spacing: 1px;
position: absolute;
bottom: 0;
right: 0;
width: 68%;
}

#main_navigation ul{
font-family: HurmeGeometricSans3-Bold;
}

#main_navigation li{
text-transform: uppercase;
padding: 3px 0px 3px 15px;
display: inline-block;
}

#main_navigation li.selected a:before{
color: #947bc6;
content:"-";
}

#main_navigation li.selected a:after{
color: #947bc6;
content:"-";
}

#main_navigation li:hover{
text-decoration: underline;
}

/* Search container */
#search_container{
}

.search_fixed{
width: 685px;
position: fixed;
top: 0;
padding: 30px 0 0 0;
background-color: #fcfcfc;
min-width: 300px;
}

#search_input_container{
width: 100%;
height: 28px;
}

#search_input{
font-family: HurmeGeometricSans3-Bold;
width: calc(100% - 4px);
height: 28px;
text-align: center;
border: 2px solid #b8b8b8;
color: #b8b8b8;
outline: none;
border-radius: 2px;
letter-spacing: 1px;
}

#search_input_reseller{
font-family: HurmeGeometricSans3-Bold;
width: calc(100% - 4px);
height: 28px;
text-align: center;
border: 2px solid #b8b8b8;
color: #b8b8b8;
outline: none;
border-radius: 2px;
letter-spacing: 1px;
}

#search_button_list{
vertical-align: middle;
background: #f1f1f1;
padding: 0px 15px 10px 15px;
margin: 15px 0 0 0;
text-align: center;
}

#search_button_list li{
height: 22px;
padding: 8px 6px 0 6px;
margin: 10px 5px 0 0;
font-family: HurmeGeometricSans3-SemiBold;
letter-spacing: 1px;
display: inline-block;
text-transform: uppercase;
font-size: 0.7em;
color: #696969;
background-color: #fff;
text-align: center;
vertical-align: middle;
border-radius: 2px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

#search_button_list li:hover{
background-color: #d0c3ea;
}

#search_button_list li.active{
color: #fff;
}

/* Main content */
#main_container{
margin: 50px 0 0 0;
width: 100%;
}

#content_container_centered{
margin: 50px auto;
width: 80%;
padding: 40px;
background-color: white;
border: 1px solid #d5d0df;
border-radius: 4px;
}

#content_container{
float: right;
width: 68%;
min-width: 300px;
}

/* Front page */
#frontpage_blocks{
list-style: none;
margin: 0 auto;
padding: 0;
text-align: center;
border-width: 1px;
border-style: solid;
-webkit-border-image: 
  -webkit-gradient(linear, 0 0, 0 100%, from(#d5d0df), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: 
  -webkit-linear-gradient(#d5d0df, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
  -moz-linear-gradient(#d5d0df, rgba(0, 0, 0, 0)) 1 100%;    
-o-border-image:
  -o-linear-gradient(#d5d0df, rgba(0, 0, 0, 0)) 1 100%;
border-image:
  linear-gradient(to bottom, #d5d0df, rgba(0, 0, 0, 0)) 1 100%;
}

#frontpage_blocks a{
color: #947bc6;
}

#frontpage_blocks a:hover{
text-decoration: underline;
}

.frontpage_block_item{
position: relative;
list-style: none;
margin: 0 10px 20px 10px;
padding: 5px 10px 5px 10px;
width: 296px;
max-height: 415px;
overflow: hidden;
min-height: 200px;
background-color: #f1f1f1;
text-align: left;

-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;

-webkit-box-shadow:0 1px 1px rgba(80, 58, 125, 0.3);
-moz-box-shadow:0 1px 1px rgba(80, 58, 125, 0.3);
box-shadow:0 1px 1px rgba(80, 58, 125, 0.3);
}

.frontpage_slider_block{
width: 293px !important;
}

.expand_frontpage_block{
color: #947bc6;
position: absolute;
bottom: 0;
width: 100%;
margin: 0 0 0 -10px;
padding: 10px 0 10px 0;
text-align: center;
cursor: pointer;
background: #f1f1f1;
border-top: 4px solid white;

-o-transition: background .3s;
-ms-transition: background .3s;
-moz-transition: background .3s;
-webkit-transition: background .3s;
transition: background .3s;
}

.expand_frontpage_block:hover{
text-decoration: underline;
background-color: white;
}

#block_slider{
margin: 20px 0 15px 0;
}

#frontpage_blocks img{
min-height: 250px;
}




/* Main Lists */

.reseller_list_container{
margin-top: -30px;
}

.list_section_header{
text-decoration: none;
font-family: HurmeGeometricSans3-Bold;
padding: 40px 0 10px 0;
text-align: center;
clear: both;
}

#list_container{padding: 40px 0 10px 0;
clear: both;
}

.list_item{
width: 31%;
background: #f1f1f1;
margin: 0 6px 10px 0;
height: 150px;
font-size: 0.8em;
letter-spacing: 1px;
padding: 5px;
border-radius: 1px;
float: left;

-o-transition: background .3s;
-ms-transition: background .3s;
-moz-transition: background .3s;
-webkit-transition: background .3s;
transition: background .3s;

-webkit-box-shadow:0 1px 1px rgba(80, 58, 125, 0.3);
-moz-box-shadow:0 1px 1px rgba(80, 58, 125, 0.3);
box-shadow:0 1px 1px rgba(80, 58, 125, 0.3);
}

.list_item:hover{
background: #fff;
}

.list_item:active{
-webkit-box-shadow:0 -1px 2px rgba(80, 58, 125, 0.3);
-moz-box-shadow:0 -1px 2px rgba(80, 58, 125, 0.3);
box-shadow:0 -1px 2px rgba(80, 58, 125, 0.3);
}

.list_item_reseller{
width: 47.6%;
background: #f1f1f1;
margin: 0 6px 10px 0;
min-height: 180px;
font-size: 0.8em;
letter-spacing: 1px;
padding: 5px;
border-radius: 1px;
float: left;

-o-transition: background .3s;
-ms-transition: background .3s;
-moz-transition: background .3s;
-webkit-transition: background .3s;
transition: background .3s;

-webkit-box-shadow:0 1px 1px rgba(80, 58, 125, 0.3);
-moz-box-shadow:0 1px 1px rgba(80, 58, 125, 0.3);
box-shadow:0 1px 1px rgba(80, 58, 125, 0.3);
}

.list_item_reseller:hover{
background: #fff;
}

.list_item_reseller:active{
-webkit-box-shadow:0 -1px 1px rgba(80, 58, 125, 0.3);
-moz-box-shadow:0 -1px 1px rgba(80, 58, 125, 0.3);
box-shadow:0 -1px 1px 1rgba(80, 58, 125, 0.3);
}

.list_header{
text-transform: uppercase;
}

.list_item_image{
display: block;
float: right;
width: 30%;
height: auto;
margin: 0 0 0 5px;
}

.list_item_description{
}

/* Side Navigation */

aside{
float: left;
width: 27%;
color: #947bc6;
min-width: 150px;
}

.side_fixed{
position: fixed;
top: 0;
padding: 30px 0 0 0;
min-width: 150px;
max-width: 280px;
}

aside a{
color: #947bc6;
}

aside a:hover{
text-decoration: underline;
}

#back_up{
display: none;
text-align: center;
margin: 40px 0 0 0;
padding: 20px 10px 20px 10px;
background-color: #f1f1f1;
cursor: pointer;

-o-transition: background .3s;
-ms-transition: background .3s;
-moz-transition: background .3s;
-webkit-transition: background .3s;
transition: background .3s;

-webkit-box-shadow:0 1px 1px rgba(80, 58, 125, 0.3);
-moz-box-shadow:0 1px 1px rgba(80, 58, 125, 0.3);
box-shadow:0 1px 1px rgba(80, 58, 125, 0.3);
}

#back_up:hover{
background-color: #fff;
}

#back_up:active{
-webkit-box-shadow:0 -1px 1px rgba(80, 58, 125, 0.3);
-moz-box-shadow:0 -1px 1px rgba(80, 58, 125, 0.3);
box-shadow:0 -1px 1px rgba(80, 58, 125, 0.3);
}

#product_side{
margin-top: -15px;
}

#side_navigation{
min-width: 150px;
max-width: 280px;
}

.reseller_city_header h2{
clear: both;
text-align: center;
padding: 30px 0 10px 0;
font-family: HurmeGeometricSans3-SemiBold;
letter-spacing: 2px;
}

#reseller_search_list{
height: 500px;
overflow: auto;
}

#reseller_search_list:focus{
outline: none;
}

#reseller_search_list li{
clear: both;
}


.product_sidelist_category{
color: #696969;
margin-top: 15px;
text-transform: uppercase;
font-family: HurmeGeometricSans3-SemiBold;
}

/* Main content styles */

.content_mobile{
display: none;
}

#content_main_column{
float:left;
width: 73%;
}

#content_main_column a{
color: #947bc6;
}

#content_main_column a:hover{
text-decoration: underline;
}

#content_main_column h1{
margin-top: -8px;
}

#content_main_column img{
width: 100%;
height: auto;

}

.content_main_block{
margin: 0px 0 30px 0;
clear: both;
}

.content_main_block_left{
float: left;
width: 50%;
margin: 0px 0 30px 0;
}

.content_main_block_right{
float: right;
width: 50%;
margin: 0px 0 30px 0;
}

.cmsmap{
	width: 100% !important;
}

.cmsmap img {
    max-width: none;
}

#content_main_column.cmsmap{
width: 100% !important;
height: auto;
}

#keywords_block{
background: #f1f1f1;
padding: 5px 10px 5px 10px;
}

#keywords_block p{
margin: 5px 0 0 0;
}

/* Products detail */
#product_content{
float: left;
width: 65%;
}

#product_content ul{
margin-left: 18px;
}

#product_image{
float: right;
width: 30%;
}

#product_image img{
width: 100%;
		height: auto;
margin: 0 0 20px 0;
}

#product_attachment{
background: #f1f1f1;
padding: 5px 15px 5px 15px;
margin-top: 20px;
}

#product_attachment img{
margin: -4px 0 0 0;
}

#product_attachment a{
color: red;
}

/* reseller pages */

.content_container_reseller{

}

/* Content sidebar */

#content_right_column{
float: right;
width: 20%;text-align: center;
}

#content_right_column img{
text-align: center;
margin: 0 0 17px 0;
height: 70px;
width: auto;
}

.right_column_block{
margin: 0 0 30px 0;
background: #f1f1f1;
padding: 5px 10px 5px 10px;
text-align: left;
}

.right_column_block p{
margin: 5px 0 0 0;
}

/* Contact page */

#contact_side{
float: left;
width: 27%;
color: #947bc6;
min-width: 150px;
color: #222;
word-wrap:break-word;
}

#contact_side a{
color: #947bc6;
}

#contact_side a:hover{
text-decoration: underline;
}

.contact_sideblock{
margin: 0 0 30px 0;
background: #f1f1f1;
padding: 5px 10px 5px 10px;
text-align: left;
}

/* Contact form */

.contact_required{
color: red;
}

#contact_form_wrapper{
width: 80%;
margin: 0 auto;

}

#contact_form_wrapper div{
margin: 0 0 10px 0;

}

#contact_form_wrapper label{
margin: 0 0 7px 0;
float: left;
display: inline-block;
width: 180px;
}

#contact_form_wrapper input{
border: 1px solid #c1c1c1;
border-radius: 2px;
background-color: #fff;
padding: 5px 10px 5px 10px;
width: 300px;
}

#contact_form_wrapper textarea{
width: 100%;
height: 200px;
border: 1px solid #c1c1c1;
border-radius: 2px;
background-color: #fff;
padding: 5px 10px 5px 10px;
}

#submit_contact input{

}

#kultakerho{
visibility: hidden;
}

/* FOOTER */

#footer_container{
	margin: 150px 0 60px 0;
	text-align: center;
}

#oleva{
font-size: 9px;
}

#oleva:hover{
text-decoration: underline;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1040px) {
	#page_wrapper{
	width: 96%;
	}
	
	#top_bar{
	width: 96%;
	}
	
	#content_main_column{
		width: 100%;
	}
	
	.content_mobile{
		display: block;
	}
	

	#content_right_column{
		display: none;
	}

	#product_content{
		width: 100%;
	}

	
	#product_image{
		width: 100%;
		height: auto;
		display: block;
	}

	#product_image img{

	}

			
	.list_item{
		width: 46%;
		background: #f1f1f1;
		float: left;
		margin: 0 7px 10px 0;
		height: 150px;
		font-size: 0.8em;
		letter-spacing: 1px;
		padding: 5px;
		border-radius: 2px;
	}
	
	.list_item_reseller{
		width: 46.3%;
		background: #f1f1f1;
		margin: 0 6px 10px 0;
		height: 150px;
		font-size: 0.8em;
		letter-spacing: 1px;
		padding: 5px;
		border-radius: 2px;
		float: left;
		}
		
		.search_fixed{
			width: 64%;
		}
}

@media only screen and (max-width: 680px) {
		
	#page_wrapper{
	width: 90%;
	}
	
	#top_bar{
	width: 96%;
	}
		
	#circlum_logo{
	display: block;
	width: auto;
	max-height: 50px;
	clear: both;
	float: none;
	position: static;
	margin: -20px auto;
	}

	/* Main navigation */
	#main_navigation{
	clear: both;
	display: block;
	margin: 35px 0 0 0;
	letter-spacing: 1px;
	bottom: 0;
	right: 0;
	width: 100%;
	position: static;
	text-align: center;
	}

	#content_main_column{
		width: 100%;
	}
	
	#content_container{
		width: 100%;
	}
	
	aside{
	display:none;
	}
	
	.content_mobile{
		display: block;
	}
	
	#product_content{
		width: 100%;
	}

	#product_image{
		width: 100%;
		height: auto;
		display: block;
	}

	#product_image img{

	}
	
	#contact_side{
	width: 100%;
	}
	
	.list_item{
		width: 97%;
		background: #f1f1f1;
		display: inline-block;
		margin: 0 0px 10px 0;
		height: 150px;
		font-size: 0.8em;
		letter-spacing: 1px;
		padding: 5px;
		border-radius: 2px;
	}
	
		.list_item_reseller{
		width: 97%;
		background: #f1f1f1;
		margin: 0 6px 10px 0;
		height: 150px;
		font-size: 0.8em;
		letter-spacing: 1px;
		padding: 5px;
		border-radius: 2px;
		float: left;
		}
		
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dppx) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 5px;
	height: 100%;
	background: red;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: red;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #d0c3ea;
	position: relative;
}

.jspDrag
{
	background: #947bc6;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
	padding: 0;
	margin: 0;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}