/*
Theme Name: Hippo Three
Theme URI: http://normalcy.net/
Description: Custom Theme for Hippo Brigade
Version: 3.0
Author: Patrick Brumfield / Normalcy Inc
Author URI: http://normalcy.net/

*/

/* ----- Resets ----- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, 
menu, nav, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

body { font:13px/1.231 sans-serif; *font-size:small; } 
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

body, select, input, textarea {   color: #444; }
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
html { /*overflow-y: scroll;*/ }

a:hover, a:active { outline: none; }
a, a:active, a:visited { color: #ebbd06; }
a:hover { color: #eba806; }

ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }

nav ul, nav li { margin: 0; } 
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; } 
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {  padding: 15px;  white-space: pre;  white-space: pre-wrap;  white-space: pre-line;  word-wrap: break-word; }
textarea { overflow: auto; } 
.ie6 legend, .ie7 legend { margin-left: -7px; } 
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px;  -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red;  box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: #000; color:#fff; text-shadow: none; }
::selection { background:#000; color:#fff; text-shadow: none; } 
a:link { -webkit-tap-highlight-color: #000; } 

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

/* ----- Main Styles ----- */

html{ font-size:62.5%; background:#fff url(images/bg.jpg) repeat 0 0; color:#000; position:relative; }
body{ font-family: 'chaparral-pro',Georgia,'Times New Roman',Times,serif; font-size:14px; color:#000; position:relative; width:100%; }

#container{ position:relative; width:70%; margin:0 auto; }

/* ----- Header ----- */

#header{ padding:3em 0 0; }
#header h1{ font: 2em/0.9em 'hellenic-wide'; margin-bottom:0.5em; text-transform:uppercase; text-align:center; }
#header h1 a{ text-decoration:none; color:#000; display:block; text-align:center; }
#header h1 a span#hippo{ float:left; text-align:right; width:45%; padding-top:20px; }
#header h1 a span#hippo span{ font: 300 0.4em/1em 'adrianna-extended',sans-serif; font-style:normal; text-transform:uppercase; letter-spacing:0.3em; }
#header h1 a span#brigade{ float:left; text-align:left; width:45%; padding-top:20px; }
#header h1 a span#logo{ display:block; float:left; width:10%; height:71px; background: url(images/hippo-coin.png) no-repeat 50% 50%; }
#header h2{ font: 300 0.8em/1em 'adrianna-extended',sans-serif; font-style:normal; text-transform:uppercase; text-align:center; letter-spacing:0.3em; margin-bottom:0.75em; }

/* ----- Entries ----- */

.entry{ background:#fff url(images/entry-bg.jpg) repeat top right; padding:2em 3em; position:relative; 
	-moz-box-shadow: 0 0 10px #ccc;
	-webkit-box-shadow: 0 0 10px #ccc;
	box-shadow: 0 0 10px #ccc;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#cccccc')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#cccccc');
	z-index:50;
	margin-top:5em;
}
.entry h3,
.entry h4,
.entry h5{ text-align:center; text-transform:uppercase; font-size:1em; letter-spacing:1px; margin-bottom:0.5em; position:relative; color:#aaa; }
.entry h3{ width:60%; margin:0 auto 0.5em; }
.entry h3 a{ text-decoration:none; color:#000; }
.entry h5{ font-size:0.9em; padding-bottom:3.5em; background: url(images/horizontal-divider.png) no-repeat 50% bottom; margin-bottom:1.5em; }

.entry p, .entry li{ font-size:1.2em; line-height:1.6em; margin-bottom:1em; }
.entry div.wp-caption{ margin:0 auto; text-align:center; }
.entry img.aligncenter,
.entry img.alignnone,
.entry .aligncenter img,
.entry .alignnone img,
.entry .attachment img{ border:10px solid #fff !important;
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#cccccc')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#cccccc');
}
.entry img.aligncenter,
.entry img.alignnone,
.entry p a img{ margin:0 auto; display:block; } 
.entry .wp-caption-text{ font-size:0.9em; color:#666; }
.entry .attachment{ text-align:center;}

.entry .share{ width:70px; position:absolute; top:-12px; right:5%; background: url(images/bookmark-top.png) no-repeat 0 0; text-align:center; }
.entry .share .share-btn{ text-transform:uppercase; font-size:12px; letter-spacing:0.1em; font-weight:bold; color:#000; text-decoration:none; padding-top:10px; display:block; }
.entry .share .mid{ width:70px; background: url(images/bookmark-mid.png) repeat-y 0 0; }
.entry .share .mid a{ display:block; font-size:16px; font-weight:bold; color:#000; text-decoration:none; position:relative; height:0 !important; overflow:hidden; width:35px; padding:35px 0 0 0; margin:5px auto 0; opacity:0.5; }
.entry .share .mid a.twitter{ background: url(images/icon-twitter.png) no-repeat 0 0; }
.entry .share .mid a.facebook{ background: url(images/icon-facebook.png) no-repeat 0 0; }
.entry .share .mid a.email{ background: url(images/icon-email.png) no-repeat 0 0; }
.entry .share .mid a:hover{ opacity:1; }
.entry .share .bot{ display:block; width:70px; height:60px; background: url(images/bookmark-bot.png) no-repeat 0 0; }

/* ----- Comments ----- */

h3.comments-title{ text-transform:uppercase; font-size:1em; letter-spacing:0.1em; color:#000; background: url(images/comment-plaque.png) no-repeat 50% 0; text-align:center; margin-top:-27px;  z-index:100; position:relative; height:42px; }

h3.comments-title a{ display:block; padding:11px 14px 9px; color:#000; text-decoration: none; }

.comments{ position:relative; z-index:10; }

.comment{ margin:1em 1em 2em; position:relative; }
.comment .comment-content{ font-size:1.1em; line-height:1.4em; margin-bottom:0.3em; z-index:9; position:relative; background:#fff; padding:1em 1em 0.3em;
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#cccccc')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#cccccc');
}
.comment .comment-content p{ margin-bottom:0.7em; }
.comment .author{ font-size:0.9em; color:#666; z-index:8; position:relative; padding:0.2em 0 0 1.5em; }

.comment .comment-bg{ display:block; position:absolute; z-index:7; left:0; bottom:0.1em; width:100%; }

h3.post-comment{ text-transform:uppercase; font-size:1em; letter-spacing:0.1em; color:#000; text-align:center; margin:1em 0; }

form.comment-form{ text-align:center; }
form.comment-form textarea{ width:90%; border:0; background:#fff url(images/entry-bg.jpg) repeat top right; padding:1em; position:relative; 
	-moz-box-shadow: 0 0 10px #ccc;
	-webkit-box-shadow: 0 0 10px #ccc;
	box-shadow: 0 0 10px #ccc;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#cccccc')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color='#cccccc');  
}
form.comment-form p.input-author,
form.comment-form p.input-email,
form.comment-form p.input-url{ width:29%; margin: 0 0 0.3em 3%; float:left; }

form.comment-form p input{ padding:0.2em; width:100%; margin:0.3em 0; }

form.comment-form input,
form.comment-form textarea{ font-family: 'chaparral-pro',Georgia,'Times New Roman',Times,serif; font-size:14px; color:#000; }

form.comment-form p span{font-size:0.8em; color:#666; }

form.comment-form .submit-btn{ margin-top:1em; clear:both; }

.fb-like{ width:100%; border-top:1px solid #ccc; padding:15px 0;}
.fb-like iframe{ height:73px !important; position:relative; z-index:500; }


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

#footer{ padding:5em 0 1em; text-align: center; }

/* ----- Utilities ----- */

:focus { outline-color:-moz-use-text-color; outline-style:none; outline-width:0; }
a img{ border:0; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; }

/* ----- Media Queries ----- */

@media only screen and (min-width: 1024px) {
	#header #social{ padding-left:15% !important; }
}
@media only screen and (max-width: 1024px) {
	#container{ width:80%; }
}

@media only screen and (min-width: 801px) {
	#header #social{ padding-left:10%; margin-top:30px; }
	#header #social .fb-like-box{ width:292px; display:block; float:left; }
	#header #social .twitter-follow-button{ float:left; margin:10px 0 0 -40px; }
	#header #social .pinterest-follow-button{ float:left; margin:10px 0 0 10px; }
}

@media only screen and (max-width: 800px) {
	
	#container{ width:95%; }
	#header{ padding:1em 0 0; margin-bottom:-2.5em; }
	#header h1 a span#hippo{ float:none; text-align:center; width:100%; padding:0 0 0.2em; display:block; }
	#header h1 a span#hippo span{ display:none; }
	#header h1 a span#brigade{ float:none; text-align:center; width:100%; padding:0.2em 0 0.2em; display:block; }
	#header h1 a span#logo{ display:block; float:none; margin:0 auto; width:64px; height:71px; background: url(images/hippo-coin.png) no-repeat 50% 50%; }
	.entry{padding:2em;}
	.entry img{ max-width:80%; }
	
	#header #social{ margin-top:20px }
	#header #social .fb-like-box{ width:292px; display:block; margin:0 auto 10px; padding-left:45px; }
	#header #social .twitter-follow-button{ display:block; margin:0 auto 10px; }
	#header #social .pinterest-follow-button{ display:block; margin:0 auto 10px; width:169px; }

}/*/mediaquery*/

/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

	#container{ width:95%; }

}