/*
Theme Name: Fresh And Clean
Theme URI: http://wpexplorer.com
Description: A clean and minimal WordPress theme by AJ Clarke. Download more <a href="http://www.wpexplorer.com">WordPress Themes</a>.
Author: AJ Clarke
Author URI: http://www.wpexplorer.com
Version: 1.3
Tags: mimal, two-columns, fixed-width, threaded-comments, custom-menu, post thumbnails, featured slider
License: GPL
*/

/*get google fonts*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic&subset=latin&v2);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700&subset=latin&v2);
@import url(http://fonts.googleapis.com/css?family=Pacifico&subset=latin&v2);

/*** Reset Browser Settings ***/
*{margin:0; padding:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}
a img{border:0}
caption, th, td{text-align:left; font-weight:normal}
blockquote:before, 
blockquote:after, 
q:before, 
q:after{content:""}
blockquote, 
q{quotes:""""}

/*** Main Body ***/
body{font-size:14px; font-family: 'Droid Sans', arial, serif; line-height:1.5em; color:#707070; background: url('images/bg.png') repeat-x;}

/*** Clearfix **/
.clear{clear:both}

/*** Links ***/
a{text-decoration:none; color:#DD6D06}
a:hover{text-decoration:underline}
a:visited{color:#DD6D06;}

/*** Styles ***/
p{margin:0 0 1em}
textarea, input{font-size:13px}
strong{font-weight:bold; color:#000}
em{font-style:italic}
b{font-weight: bold; color: #000;}

small{font-size:12px; color:#666}

/*** Headings ***/
h1, h2, h3, h4, h5, h6{font-family: 'Alegreya SC', Segoe UI, sans-serif;line-height:34px; color:#333; font-weight: 900; font-style: italic; letter-spacing: 0px; text-transform: uppercase;}
h1{font-size:30px}
h3{font-size:1.3em}
h4{font-size:1em}
.postcontent h2{font-size:1.5em; margin-top:30px; margin-bottom:10px}
h1{margin-bottom:20px; border-bottom:0px solid #CCC; color: #333; line-height: 30px !important; display: block; border-left: 10px solid #ccc; padding-left: 10px;}
h1#category-title{padding-bottom: 5px;margin:0 0 40px 0}
h1#single-title{padding-bottom:5px;margin-bottom:0 !important}
.postcontent h3{font-size:20px; font-weight:normal; margin:0; font-style:normal}
#respond h3{font-size:1.43em; padding:10px 0}
h2.posttitlehome{font-size:1.57em; margin-bottom:10px}
h1.category-title{font-style:italic; margin-bottom:20px; border-bottom:1px solid #CCC}

/*** Main Layout ***/
#wrap{width:960px; padding:20px 0px 0px 0px; background: none; margin:0 auto 0 auto; border-left:0px solid #CCC; border-right:0px solid #CCC;border-bottom:0px solid #CCC;}
#main{float:left; width:670px; padding:15px 25px 0px 25px; font-size:0.93em}
.full-width{width:900px !important}
.static-image{border:10px solid #ECECEC; margin-top:20px}
#ffgwrap{background: url('images/bgiso.jpg') no-repeat top center !important; width: 100%;}

/*** Header ***/
#header{background: none; margin:0 auto 0 auto; width:960px; padding: 0; border-top: 0px solid #CCC; border-left:0px solid #CCC; border-right:0px solid #CCC; height: 308px; position:relative;}
#header-logo{width:960px; text-align:right; background-color: none; height: 66px; position: absolute; z-index: 10; top: 212px;}
#headeroverhead {text-align: right; background: none; height: 308px; position: absolute; z-index: 2; width: 960px;}
#header-description{text-transform:capitalize; font-size:12px; margin:0 0 0 5px; display: none;}

#header-logo h1, #header-logo h2{font-family: 'Myriad Pro', arial, serif; font-size:40px; margin:0; border:none; line-height: 50px; padding-left: 10px; font-weight: bold; text-transform: uppercase; text-shadow: 0 0 15px red;}
#header-logo a{color:#fff;}
#header-logo a:hover{text-decoration: none;}

#header-banner{width:468px; height:60px; position:absolute; right:20px; top:20px}

/*** Post  ***/
.post{float:left; width:670px; margin:0 0 20px; padding: 0 0 20px; border-bottom: 1px solid #EEE}
.thumbnail-wrap img, #related-posts img{float:left; margin:0 20px 10px 0 !important; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px;  border-radius:5px; -moz-box-shadow:0px 1px 2px #ababab; -khtml-box-shadow:0px 1px 2px #ababab; -webkit-box-shadow:0px 1px 2px #ababab; box-shadow:0px 1px 2px #ababab}
.thumbnail-wrap a:hover img{filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8; -moz-box-shadow:0px 5px 5px #ababab; -khtml-box-shadow:0px 5px 5px #ababab; -webkit-box-shadow:0px 5px 5px #ababab; box-shadow:0px 5px 5px #ababab}
img.single{float:left; border:5px solid #ECECEC; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px;  border-radius:5px; -moz-box-shadow:0px 1px 2px #ababab; -khtml-box-shadow:0px 1px 2px #ababab; -webkit-box-shadow:0px 1px 2px #ababab; box-shadow:0px 1px 2px #ababab; margin:0 20px 0 0;}
.noborder{border-bottom:none}

/*** Post Content ***/
.postcontentt h1{font-weight:bold; color:#FF7600}
.postcontent{color:#333; margin-bottom:20px}
h2.entry-title{font-size:30px; margin-top:0 !important}
h2.entry-title a{color:#333; font-weight: 900;}
h2.entry-title a:hover{text-decoration:none; color:#DD6D06}
.postcontent ul{margin:10px 40px}
.postcontent ol{margin:10px 40px}
.postcontent .alignleft{float:left; margin:0 10px 10px 0}
.postcontent .alignright{float:right; margin:0 0 10px 10px}
.postcontent .aligncenter, 
.postcontent .center{text-align:center; margin:0 auto; display:block}
.postcontent blockquote{padding: 20px; margin: 20px 0px; border: 1px solid #CCC; background: #EEE; }
a.read-more{position:absolute; right:0; bottom:0; font-size:0.93em; color:#09F}

/*** harjoituskalenteri ***/
#harjoitusajat {border-left: 0px solid #aaa; border-top: 0px solid #aaa;}
#harjoitusajat td {border-right: 0px solid #aaa; border-bottom: 0px solid #aaa; padding: 6px; text-align: center;}
#pvmsel td {background-color: none; text-transform: lowercase; color: #666; font-size: 18px; line-height: 18px; font-family: Segoe UI, Arial, Verdana, sans-serif; font-weight: light; text-align: left; letter-spacing: 1px;}
#caltime td {background-color: none; text-transform: lowercase; color: #555; font-size: 14px; line-height: 16px; font-family: Segoe UI, Arial, Verdana, sans-serif; font-weight: bold; text-align: left; letter-spacing: 0px; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
#calprog td {color: #666; font-size: 14px; line-height: 18px; font-family: Segoe UI, Arial, Verdana, sans-serif; font-weight: light; text-align: center; letter-spacing: 0px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; padding-bottom: 5px !important;}
#calnotes td {color: #333; font-size: 13px; text-align: left; padding-bottom: 10px;}

/*** ottelijalistaus ***/
#ottelijat {border-left: 0px solid #aaa; border-top: 0px solid #aaa; width: 650px;}
#ottelijat td {border: 0px solid #aaa; padding: 5px; text-align: center; margin-right: 10px; box-shadow: #ddd 0px 0px 5px 5px; background-color: #fff;}
#ottelijat a {display: block; background: #555; line-height: 26px; color: #fff; font-family: Segoe UI, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; text-align:center;}
#ottelijat a:hover {display: block; text-decoration: none; background: #333;}
/*
#ottelijat p {margin-bottom: 5px;}
#ottelijat img {margin-bottom: 5px;}
*/

/*** Pagination ***/
#pagination{clear:both;position:relative; font-size:11px; line-height:13px; text-shadow:1px 1px 1px #FFF}
#pagination span, #pagination a{display:block; float:left; margin:2px 2px 2px 0; padding:6px 9px 5px 9px; text-decoration:none; width:auto; color:#666; background:#EEE}
#pagination a:hover{background:#D7D7D7}
#pagination .current{padding:6px 9px 5px 9px; background:#D7D7D7}

/*** Byline ***/
#byline{font-family: Arial, Helvetica, sans-serif; font-size:11px; margin-top: 5px;margin-bottom:20px; color:#999}
#byline a{color:#DD6D06; text-decoration:none}
#byline a:hover{text-decoration:underline}

/* ----------------------  Related Posts -------------------------- */
#related-posts{margin:15px 0 0;padding:15px 0 0;border-top:1px solid #EEE}
#related-posts img{float:left; margin:0 15px 10px 0}
#related-posts a:hover img{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7}
#related-posts ul{list-style:none}
#related-posts li{margin:0 0 20px 0}

#related-posts h3{font-size:18px; margin:0 0 5px}
#related-posts h3 a{color: #333; text-decoration: none; font-weight: 400;}
#related-posts h3 a:hover{color: #DD6D06; text-decoration: none;}
#related-posts h4{font-size:18px; margin:0 0 20px; font-weight: 400;}

/*** Comments ***/
#commentsbox{margin:15px 0 0}
h3#comments{font-size:18px;margin:0 0 10px; font-weight: 400;}
ol.commentlist{margin:0px 0 0; clear:both; overflow:hidden; list-style:none}
ol.commentlist li{margin:10px 0; line-height:18px; padding:10px; border:1px solid #EEE}
.bypostauthor{}
.comment-author{}
.comment-author a:link, 
.comment-author a:visited{font-weight:bold; text-decoration:none !important}
.comment-author .fn{}
cite.fn{font-weight:700; font-size:12px}
.comment-author .avatar{float:left; margin:0 10px 0 0}
.comment-meta{font-size:11px}
.comment-meta .commentmetadata{color:#000}
.comment-meta a{color:#999;border-bottom:1px solid #EEE; text-decoration:none !important}
ol.commentlist li p{line-height:22px; margin:5px 0 0}
.reply{text-align:right; margin-top:10px; font-size:10px}
li.odd{}
li.even{}
.children{list-style:none; margin:1em 0 0; text-indent:0}
.children li.depth-2{margin:0 0 0px 50px}
.children li.depth-3{margin:0 0 0px 50px}
.children li.depth-4{margin:0 0 0px 50px}
.children li.depth-5{margin:0 0 0px 50px}
.comment-nav{padding:5px; height:20px}
.comment-nav a:link, .comment-nav a:visited{}
.cancel-comment-reply a{color:#F00; font-weight:700}
#respond{margin:20px 0px}
#respond h3{font-size:18px; margin:0 0 20px}
#commentform{}
#commentform p{margin:5px 0px}
#respond label{display:block; padding:5px 0}
#respond label small{font-size:10px}
#respond input{margin-bottom:10px; padding:5px 5px; margin:0 10px 10px 0; background:#fff; border:1px solid #ddd}
#commentform input{width:50%}
input#commentSubmit{font-size:14px;background:#EFEFEF;color:#999;text-decoration:none;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:3px 10px; width:100px; margin:10px 0px; cursor:pointer; border:1px solid #CCC; outline:none;text-shadow:1px 1px 1px #FFF}
input#commentSubmit:focus, #comment:focus{border:1px solid #C3C3C3;}
#commentSubmit:hover{border:1px solid #B7B7B7 !important;}
textarea#comment{border:none; background:#fff; border:1px solid #ddd; width:70%; margin:10px 0px 0px 0px; padding:5px 5px}

/*** Footer ***/
#footer{color:#a7a7a7; font-size:.85em; border-top:0px solid #CCC; padding:0 0 40px;margin: 10px 0 0; background: url('images/footerbg3.jpg') repeat-x top; width: 100%;}
#footer a{color:#555 !important; font-weight: 400; font-size: 14px !important;}
#footer a:hover{color:#222 !important}
#footer-left{width: 960px; margin-left: auto; margin-right: auto; padding-bottom: 40px; background: none; height: 170px; border-top: 1px solid #ddd;}
#footer-left img {margin: 10px 0 0 10px;}
.footermainlinks{float:left; width: 460px; text-align: center;}
.footerlinks{float:right; font-size:0.79em; position: relative; top: 20px; right: 60px; text-align: center;}
.footerlinks img {margin-left: 20px !important;}

/*** Sidebar ***/
#sidebar{float:right; width:220px; padding:10px 15px 10px 0px; font-size:0.93em}
#sidebar ul{background:#FFF; list-style:none; margin:0}
#sidebar li{margin:5px 0}
#sidebar li a{color: #333; text-decoration: none;}
#sidebar li a:hover{color: #000; text-decoration: underline;}
.box{margin:0 0 20px}
.textwidget{padding:10px 0}
.textwidget b{color: #555;}
.textwidget strong{color: #555}
#sidebar h4{font-size:1.43em; font-weight:normal; padding: 0 0 5px; margin: 0 0 5px; border-bottom:1px solid #CCC}

/*** WordPress Styles ***/
.wp-caption{border:0px solid #ddd; text-align:center; background-color: none; padding-top:4px; margin: 0 0 15px 0 !important; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
.wp-caption img{margin:0; padding:0; border:1 px solid #555;}
.wp-caption p.wp-caption-text{font-size:11px; line-height:17px; padding:0; margin:0;}
.wp-caption-text span{padding: 5px 10px; display: block; background: #555; margin-left: 5px; margin-right: 5px; color: #fff !important; text-align: left;}

/* calendar widget */
.widget_calendar {float: left;}
#wp-calendar {width: 100%; }
#wp-calendar caption {
	text-align: right;
	color: #333;
	font-size: 12px;
	margin-top: 10px;
	margin-bottom: 15px;
}
#wp-calendar thead { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }

/***Search***/
#searchbar{margin-top:15px; position:relative;width:200px;}
#search{background:#FFF url(images/searchbg.png) top repeat-x; padding:5px 5px 5px 5px; font-size:14px; width:200px; border:1px solid #CCC; moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; color:#999}
#searchsubmit{position:absolute; right:5px; top:8px; display:block; background:url(images/searchsubmit.png) no-repeat; height:15px; width:15px; border:0; text-indent:-9999px}

/*** Navigation Bar ***/
#primary-nav{background: none; width:960px; position:absolute; z-index:99; margin:0 auto; border:0px solid #CCC; height: 30px; top: 278px;}
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu *{margin:0; padding:0; list-style:none}
.sf-menu{line-height:1.0}
.sf-menu ul{position:absolute; top:-999em; width:15em; /* left offset of submenus need to match (see below) */}
.sf-menu ul li{width:100%}
.sf-menu li:hover{visibility:inherit; /* fixes IE7 'sticky bug' */}
.sf-menu li{float:left; position:relative}
.sf-menu a{display:block; position:relative}
.sf-menu li:hover ul, 
.sf-menu li.sfHover ul{left:0; top:30px; /* match top ul list item height */z-index:99}
ul.sf-menu li:hover li ul, 
ul.sf-menu li.sfHover li ul{top:-999em}
ul.sf-menu li li:hover ul, 
ul.sf-menu li li.sfHover ul{left:18em; /* match ul width */top:0}
ul.sf-menu li li:hover li ul, 
ul.sf-menu li li.sfHover li ul{top:-999em}
ul.sf-menu li li li:hover ul, 
ul.sf-menu li li li.sfHover ul{left:18em; /* match ul width */top:0}

/*Style From Here On */
.sf-menu{float:right}
.sf-menu a{font-size:12px; padding: 0 12px 0 12px; text-decoration:none; text-transform:uppercase; letter-spacing: 0px; font-family: Helvetica, Arial, Verdana, sans-serif; font-weight: 700; line-height: 30px;}
.sf-menu a, .sf-menu a:visited{/* visited pseudo selector so IE6 applies text colour*/color:#fff}
.sf-menu li{background:#dd6d06;}
.sf-menu li li{background:#dd6d06; border-bottom:1px solid #c96000; border-top:0px solid #FFF; color: #fff;}
.sf-menu li ul{border-top:0px solid #CCC; color: #000;}
.current_page_item a, 
.current-menu-item a{color:#fff !important; background:#dd6d06; outline:0}
.current-menu-item a:hover{color: #fff !important; background: #333 !important; outline:0}
.sf-menu li li a:hover{color: #fff; background: #333;}
.sf-with-ul a, 
.sf-menu li a:hover{color: #fff; background: #333;}

/*** shadows for all but IE6 ***/
.sf-shadow ul{background:url('images/shadow.png') no-repeat bottom right; padding:0 8px 9px 0; -moz-border-radius-bottomleft:17px; -moz-border-radius-topright:17px; -webkit-border-top-right-radius:17px; -webkit-border-bottom-left-radius:17px}
.sf-shadow ul.sf-shadow-off{background:transparent}

#slider{z-index:1; width:820px; border:0px solid #ECECEC; height:308px; margin:0 0 0 0; position:absolute !important;}
#slider img{position:absolute; top:0; left:0; display:none}
#slider a{border:0}

/* The Nivo Slider styles */
.nivoSlider{position:relative}
.nivoSlider img{position:absolute; top:0px; left:0px}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    z-index: 6;
    display: none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display: block;
    position: absolute;
    z-index: 5;
    height: 100%;
}
.nivo-box {
    display: block;
    position: absolute;
    z-index: 5;
}

/* Caption styles */
.nivo-caption{position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */width:100%; z-index:89; display: none !important;}
.nivo-caption p{padding:5px; margin:0}

/* Control nav styles (e.g. 1, 2, 3...) */
.nivo-controlNav a{position:relative; z-index:99; cursor:pointer}
.nivo-controlNav a.active{font-weight:bold}
.nivo-controlNav{position:absolute; left:47%; bottom:-30px; display: none !important;}

/* Slider Directional Arrows */
.nivo-directionNav a{position:absolute; top:43%; z-index:99; display:none !important; width:47px; height:60px; text-indent:-9999px; border:0; cursor:pointer}
.nivo-prevNav,.nivo-nextNav{background:url('images/arrows.png') no-repeat; }
.nivo-nextNav{background-position:0 -120px; right:15px}
.nivo-nextNav:hover{background-position:0 -180px}
.nivo-prevNav{background-position:0 0; left: 15px}
.nivo-prevNav:hover{background-position:0 -60px}