/*
Theme Name: Elfquest
Description: For Elfquest.com
Author: Rob Beschizza 
License: ©2013 Warp Graphics, All Rights Reserved
License URI: http://www.copyright.gov/title17/circ92.pdf
Version: 0.2013
*/


body {margin:0px;font-size:12px;font-family: 'cronos-pro', 'helvetica neue', helvetica, arial, sans-serif;}

h1, h2, h3, h4 {text-align:center;font-family:'cronos-pro'; margin:0px 0px .5em 0px;font-size:22px;text-transform:uppercase;font-weight:normal;}

p {line-height:1.4;margin:0px 0px 1em 0px;font-weight:300;font-size:16px;}


a {text-decoration:none;color:#004bff}

h1 a, h2 a {color:black;}

h3 {color:black;
font-size:18px;
text-transform:uppercase;
}

div#navmenu {float:right;height:20px;margin-bottom:20px;}
div#dropmenu {clear:both;float:right;display:none;}

.show {display:block!important;}

h3 a, div.masthead h3  {color:white;margin-left:.5em;}
h3#navigation {text-align:center;float:right;line-height:40px;}

#dropmenu h3 a {display:block;line-height:30px;}

h4 {font-size:16px}
#bannerbox {border:1px solid #aaa; padding:15px;background-color:white;color:black;font-size:16px;position:relative;width:50%;margin:-30px auto 0 auto;box-shadow: 0 0 0 6px #fff, 0 0 0 8px #000;text-align:center;
}
	#bannerbox p {font-size:18px;margin:.5em}
	
img.contain {max-width:100%}


  td {padding:0px;background-color:#fff;width:23%;}
  td img {width:100%;max-width:200px;margin-top:20px}

#bigimage {background-image:url('images/default.jpg');background-size:cover;background-position:center center;width:100%;position:relative;height:240px;}
img#logo {width:200px;}
img#hamburger {height:16px;margin-bottom:-1px;}

.masthead {box-sizing:border-box;text-align:left;margin:0px auto;padding:20px 20px 10px 20px;position:absolute;height:auto;background-color:rgba(0,0,0, .7);width:100%; z-index:2;}

.photocaption {max-width:990px;margin:0px auto;padding:0px 40px;position:relative;}
.photocaption p {text-align:center;color:white;font-size:10px}

h1.headline {color:white;font-size:30px;}

#followbox {background-color:#fff;margin-bottom:2em;width:280px;max-width:100%;height:56px;color:#666;padding:10px;overflow:hidden; text-align:center;}
#main {max-width:990px;margin:0px auto;padding:40px;position:relative;}

.teaser, .post {padding-bottom:0em;clear:both;overflow:auto;margin-bottom:2em;max-width:680px;position:relative;margin:0 auto 2em auto;}

.post iframe {width:100%;max-width:100%;}
.post h2 {font-size:160%;margin-bottom:1em;}
.note {
position:relative;
border: 2px solid #aaa;
padding: 0.5em 2em 0.5em 2em;
margin: 2em 0px 3em 0px;
box-shadow: 10px 10px #ddd;
overflow:hidden;}


.notelogo {position:absolute;top:10px;right:10px;z-index:-1;opacity:.4;}

.comments, .nocomments {display:none;}



p.byline,p.readtherest {text-align:center;margin:-.5em 0 0.5em 0;font-size:16px;letter-spacing:2px;text-transform:uppercase;}
.note p.byline {display:none;}
p.byline a {color:black;font-style:italic;}
p.readtherest {margin-bottom:2em}
p.smallbyline {font-size:16px;color:#666;margin:1em 0 1em 0}

img.attachment-post-thumbnail, img.attachment-thumbnail, img.size-full, img.size-medium, img.attachment-large {max-width:100%;width:auto;height:auto; -moz-box-sizing: border-box; box-sizing: border-box; border:2px solid black;}

img.attachment-large,img.attachment-medium {max-height:400px;max-width:100%;width:auto;height:auto; -moz-box-sizing: border-box; box-sizing: border-box; border:2px solid black;}



div.featuredimage {text-align:center;}
#mainright p {font-size:.9em}

#footer {text-align:center;clear:both;width:100%;height:50px;padding-top:2em;}

.editlink {color:gray;}


/*COMMENTS*/

.comment h3 a {color:black;margin-left:0}
.comment h3 a.comment-date {color:gray;margin-left:0}
h3.comment-meta {text-align:left;}
.comment-awaiting-moderation {display:block;color:red;}

#respond {text-align:center;}

ul{
    list-style-type: none;
}


.avatar {float:left;margin:0px 2em 2em 0px;height:100px;width:100px;border:2px solid black;
border-radius:50px;}
ol.commentlist {margin:0px;padding:0px;list-style-type:none;max-width:680px;margin:0 auto;position:relative;}
.comment-meta {}
li.comment {clear:both;margin:2em 0px 2em 0px}
div.reply {display:none;text-transform:uppercase;margin:0 0 0 135px;
font-size:12px;}

.comment-form-comment label, p.form-allowed-tags {display:none;}
.children {margin-left:50px;}
.children .avatar {
border-radius:50px;border-top-left-radius:1px;}

textarea#comment {max-width:700px;width:100%;box-sizing:border-box;border:1px solid gray;    resize: none;
padding:10px;font-size:20px;font-family: 'cronos-pro', 'helvetica neue', helvetica, arial, sans-serif;font-weight:300;}
input#submit {border:none;background-color:green;padding:5px 10px 5px 10px;font-family: 'cronos-pro', 'helvetica neue', helvetica, arial, sans-serif;text-transform:uppercase;font-weight:bold;font-size:18px;color:white;}

.alignright,.alignleft {width:40%;max-width:225px;height:auto;}
.alignright {float:right;margin:0px 0px 1em 2em;}
.alignleft {float:left;margin:0px 2em 1em 0px;}
.aligncenter {margin:0px auto;position:relative;max-width:100%;}

.wp-caption, .wp-caption-text, .sticky, .gallery-caption, .bypostauthor {}
#smileydropdown {float:right;margin:0 0px -5px 0}

.toprow {padding:10px;width:70%;margin:0px auto 2em auto;clear:both;}
.row {width:100%;height:auto;padding:5px;clear:both;vertical-align:middle;}
.row h4 {margin-top:0em;}
.row img.left {float:left;max-width:40%;padding-right:2em;}
.row img.right {float:right;max-width:40%;padding-left:2em;}

.gallery-icon img {width:95%;height:auto;}

.hideMobile {display:none;}
.hideTablet {display:none;}

div#bottomnav h3 a {color:black;}

div#archive div.post {margin:0em;}
div#archive span.byline {font-size:14px;color:gray;}
div#exhort {text-transform:uppercase;padding:5px;background-color:rgba(0,0,0,.5);font-family: 'cronos-pro', 'helvetica neue', helvetica, arial, sans-serif;color:gold;font-size:20px;position:absolute;bottom:10px;right:10px}

sup {  font-size: 66%;  line-height: 0;  position: relative;  vertical-align: baseline;  top: -0.5em;
}

aside {width:34%;float:right;margin:.25em 0 1em 2em;border:1px solid gray;padding:1em;text-align:center;}
aside p {font-size:13px;}
aside h3 {font-weight:normal;font-size:16px;display:block;}

#sharea {

text-align:center;margin:1em 0 0 0;position:relative;clear:both;
}

.wp-smiley{
line-height:0;
margin-bottom:-8px;
height:auto;
}

.sharebutton {padding:5px;color:white;width:75px;display:inline-block;text-align:center;font-weight:bold;margin-right:1em;}
#tweet {background-color:#abf;}
#share {background-color:#449;}
#forums {background-color:#00f;}

}
/* Special stuff for the shop page */
div.product  	{display:inline-block;vertical-align:top;}
div.product  	{display:inline-block;vertical-align:top;}
div.eight		{width:9%;margin-right:2%;}
div.six			{width:13%;margin-right:3%;}
div.four		{width:20%;margin-right:4%;}
div.two			{width:40%;margin-right:8%;}
div.product img {width:100%;border:1px solid black;}
div.last 		{margin-right:4%;}
div.soldout 	{opacity:.3}
div#shop h1 	{margin:2em 0px 1em 0px;;font-size:25px;}




/**********************
anything bigger than cellphones
**********************/

@media screen and (min-width:540px) {

body {font-size:16px;}
.hideMobile {display:inline;}
p {font-size:18px;}


h1.inkivy {font-size:80px;}
h1.headline {font-size:40px;}

.photocaption p {font-size:14px;text-align:left;}

/* when sidebars are on
h1, h2 {text-align:left;}
p.byline {text-align:left;}

*/

h1 {font-size:33px;}
#bigimage {height:360px;}

.row h4 {text-align:left;}

.comment-body  {margin-left:130px;}
.comment-body, div.reply {overflow:auto}
textarea#comment, p.form-submit {}
div.reply  {}


}



/**********************
large tablets 
**********************/

@media screen and (min-width:767px) {
p,aside p {font-size:20px;}


.hideTablet {display:inline;}

/* img#hamburger {display:none;} */

body {font-size:16px;}
img#logo {width:200px;}
h1.headline {font-size:65px;}
h3 {display:inline;}
h3#navigation {}

h4 {font-size:22px}


/* when sidebars are on 
#mainleft {max-width:650px; float:left;margin-right:350px;}
*/

#mainleft {max-width:680px;  margin: 0 auto;}


#mainright {display:block; max-width:300px; right:40px;position:absolute;font-size:16px;}

#bigimage {height:420px;}
h3 a, div.masthead h3  {display:inline;}

.row h4 {margin-top:2em;}


/**********************
desktops
**********************/

@media screen and (min-width:930px) {

body, #mainright {font-size:16px;}
.avatar {display:block;}