/*
Theme Name: CKA Responsive Theme
Theme URI: http://www.knownzeros.com
Description: A responsive theme
Author: Damien Hampton
Author URI: http://www.knownzeros.com
Version: 0.1
Tags: mimal, two-columns, fluid, 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: 87.5%; font-family: 'Droid Sans', arial, serif; line-height:1.5em; colour:#707070; background:#333}

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

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

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

small{font-size:75%; colour:#0010}

/*** Headings ***/
h1, h2, h3, h4, h5, h6{font-family: 'Droid Serif';line-height:140%; color:#545454; font-weight:normal}
h1{font-size:1.86em}
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:1px solid #CCC; line-height:1}
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:1.3em; font-weight:normal; margin:2em 0em 0.63em 0em; font-style:italic}
#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}

#primary-nav, #header, #wrap{
  width: 90%;
  padding-left: 3%;
  padding-right: 3%;
}

/*** Main Layout ***/
#wrap{padding-top:20px; background:#FFF; margin:0 auto 25px auto; border-left:1px solid #CCC; border-right:1px solid #CCC;border-bottom:1px solid #CCC}
#main{float:left; width:64%; padding:10px 0; font-size:0.93em}
.full-width{width:90% !important}
.static-image{border:10px solid #ECECEC; margin-top:20px}

/*** Header ***/
#header{background:#FFF; margin:25px auto 0 auto; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid #CCC; border-left:1px solid #CCC; border-right:1px solid #CCC; min-height:60px; position:relative}
#header-logo{width:100%; text-align:left}
#header-logo img{
  max-width: 100%;
}
#header-description{text-transform:capitalize; font-size:75%; margin:0 0 0 5px}

#header-logo h1, #header-logo h2{font-family: 'Pacifico', arial, serif; font-size:187.5%; margin:0; border:none; line-height: 1.2em; padding: 0;}
#header-logo a{color:#2C2C2C}

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

/*** Post  ***/
.post{float:left; width:100%; 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{colour:#333; margin-bottom:20px}
h2.entry-title{font-size:1.5em; margin-top:0 !important}
h2.entry-title a{color:#726763; font-weight:100}
h2.entry-title a:hover{text-decoration:none; color:#09F}
.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}

/*** 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:68.75%; margin-top: 5px;margin-bottom:20px; color:#999}
#byline a{color:#09F; 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:75%; margin:0 0 5px}
#related-posts h4{font-size:112.5%; margin:0 0 20px}

/*** Comments ***/
#commentsbox{margin:15px 0 0}
h3#comments{font-size:112.5%;margin:0 0 10px}
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:75%}
.comment-author .avatar{float:left; margin:0 10px 0 0}
.comment-meta{font-size:68.75%}
.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:62.5%}
#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:87.5%;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:0.5%;}

/*** Footer ***/
#footer{colour:#333; font-size:0.85em; border-top:1px solid #CCC; padding:10px 0 0;margin: 10px 0 0}
#footer a{color:#a7a7a7 !important}
#footer-left{float:left}
#footer-right{float:right; font-size:0.79em}

/*** Sidebar ***/
#sidebar{float:right; width:27.8%; padding:10px 0; font-size:0.93em}
#sidebar ul{background:#FFF; list-style:none; margin:0}
#sidebar li{margin:5px 0}
.box{margin:0 0 20px; width: 100%;}
.textwidget{padding:0;}
#sidebar h4{font-size:1.43em; font-weight:normal; padding: 0 0 5px; margin: 0 0 15px; border-bottom:1px solid #CCC}
#siderbar dl{margin:0;padding:0;}
#sidebar dt{font-weight: bold;color:#333;margin-top: 0.5em;}
#sidebar dd{display: list-item;list-style-type: disc;margin-left:1.25em;}
/*** Footer bar ***/
#footerbar .box{
  float: left;
  width: 15em;
}
/*** WordPress Styles ***/
.wp-caption{border:1px solid #ddd; text-align:center; background-color:#f3f3f3; padding-top:4px; margin:10px; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
.wp-caption img{margin:0; padding:0; border:0 none}
.wp-caption p.wp-caption-text{font-size:11px; line-height:17px; padding:0 4px 5px; margin:0}

/* 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{width:100%;}
#search{background:#FFF url(images/searchbg.png) top repeat-x; padding:5px 10% 5px 2%; font-size:87.5%; width:87.2%; 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:#EFEFEF; width:90%; position:relative; z-index:99; margin:0 auto; border:1px solid #CCC}
/*** 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:18em; /* 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:3em; /* 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}

.addthis_toolbox{
  margin-bottom: 0.5em;
}

/*Style From Here On */
.sf-menu{float:left}
.sf-menu a{font-size:1em; padding:1em; text-decoration:none; text-transform:uppercase; text-shadow:1px 1px 1px #FFF}
.sf-menu a, .sf-menu a:visited{/* visited pseudo selector so IE6 applies text colour*/color:#666}
.sf-menu li{background:#EFEFEF}
.sf-menu li li{background:#EFEFEF; border-bottom:1px solid #CCC; border-top:1px solid #FFF}
.sf-menu li ul{border-top:1px solid #CCC}
.sf-with-ul a, 
.sf-menu li a:hover, 
.current_page_item a, 
.current-menu-item a{color:#09F !important; background:#E6E6E6; outline:0}
.sf-menu li li a:hover{color:#09F; background:#E6E6E6}

/*** 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{width:97.777%; border:10px solid #ECECEC; margin:0;}
#slider a{border:0}
#slider img{ width: 100%; }

#jump-menu{
  display: none;
}
#results{
  border: none;
}
#results tr.odd{
  background-color: #ccc;
}
#results tr th{
  font-weight: bold;
  padding: 2px;
}
#results tr td{
  padding: 2px;
}
/*.button {
  display:block;
  width:100%;
  height:50px;
  text-indent:-9999px;
}
.button a { 
  display:block;
  width:100%;
  height:100%;
  outline:none;
}
.button a:hover {
  background-position:0 -50px;
}
.join-button a{
  background:transparent url(images/joinup.png) no-repeat top left;
   background-size: 100%;
}*/

.join-button a img{
  width: 100%;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16/9 ratio */
  padding-top: 30px; /* IE6 workaround*/
  height: 0;
  overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px){
div#main, div#sidebar{
  width: 100%;
}
textarea, input, textarea#comment{
  width: 100%;
}
#jump-menu{
  display: block;
}
.menu-primary-links-container{
  display: none;
}
}

@media screen and (min-width: 1280px){
  #primary-nav, #header, #wrap{
    width: 90%;
  }
  #slider{
    width: 55%;
    float: right;
  }
  #main{
    width: 40%;
  }
  #sidebar{
    width: 55%;
  }
  #sidebar1, #sidebar2{
    float: left;
    width: 48%;
  }
  #sidebar1{
    margin-right: 4%;
  }
}