/*
Theme Name: Hydrophonics 4.0
Theme URI: http://dev.brandyourheart.com
Description: Add a description.
Version: 0.09 Beta
Author: Cucumber Markeeting Inc.
Author URI: http://www.cucumbermarketing.com
*/

@import "css/reset.css";
@import "css/typography.css";
@import "css/layout.css";

@import url(http://fonts.googleapis.com/css?family=Codystar);
@font-face {
    font-family: 'Listicons';
    src: url('fonts/listicons-webfont.eot');
    src: url('fonts/listicons-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/listicons-webfont.woff') format('woff'),
         url('fonts/listicons-webfont.ttf') format('truetype'),
         url('fonts/listicons-webfont.svg#ListiconsGlyphsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

::selection {color: white;  background-color: #ff0000;  text-shadow: none;}
html, body { height: 100%; width:100%}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
 
.clearfix:after {
    clear: both;
}
 
/* IE6/7 support */
.clearfix {
    *zoom: 1;
}
body{
	font:300 1em/1.1em Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #525252;
 	overflow:auto;
	background:#eee url(images/pattern_008.png)
}
#home h1 {font:900 60px/100% Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;color:#fff; text-transform: capitalize}
#home small {font:900 19px/200% Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;color:#ccc; text-transform:uppercase}
#home {color:#eee; position:relative}
h1 {font:600 2em "Helvetica Neue", Arial, sans-serif;color:#000; text-transform:uppercase}
h2 {font:400 1.6em "Helvetica Neue", Arial, sans-serif;color:#000}
h3 {font:400 1.4em "Helvetica Neue", Arial, sans-serif;color:#000}
h4 {font:400 1.2em "Helvetica Neue", Arial, sans-serif;color:#000}
h5 {font:400 1.0em "Helvetica Neue", Arial, sans-serif;color:#000}
h6 {font:400 0.8em "Helvetica Neue", Arial, sans-serif;color:#000}
blockquote {
	padding: 20px 40px;
	overflow: hidden; /* clearfix alternative */
	line-height: 150%;
	color: #454545;
	font-family:"Times New Roman", Times, serif !important;
	font-style:italic;
}
blockquote:before {
	display: block;
	float: left;
	margin: 0px 20px 0 0;
	position:relative;
	font-size: 100px; /* let's make it a big quote! */
	content: open-quote; /* here we define our :before as a smart quote. It could be any content, even the HTML entity alternative to this opening quote, that is “ */
	color: #bababa;
	text-shadow: 0 1px 1px #909090;
	
}
blockquote:after {
content:close-quote;
font-size: 100px;
display: block;
	float: right;
	margin: 40px 0 0 15px;
	color: #bababa;
	position:relative;
	bottom:40px}

a {
    text-decoration: none;
    color: #28226e;
    transition: all 0.3s ease-out;
    padding: .5em;
    margin: -.5em;
}
 
a:hover { color: #404040; }
.inline{display:inline-block; vertical-align:middle}
.wrap {margin:0 auto; position:relative; display:table-cell; vertical-align:middle; width:100%; text-align:justify}
ul {margin:0 auto}
.social ul {list-style:none; padding:0}
.social ul li {list-style:none; display:inline-block; margin-right:1em; background:url(images/social.png) no-repeat;width:30px; height:30px}
.social ul li a{width:30px; height:30px}
.facebook {background-position:left 0px}
.facebook:hover {background-position:right 0px}
.twitter	{background-position:left -30px !important}
.twitter:hover {background-position:right -30px !important}
.pinterest{margin-right:0;background-position:left -60px !important}
.pinterest:hover {background-position:right -60px !important}

.newsletter {padding-left:36px;border-left: 1px #222 solid;margin-left: 30px;}
section#home input[type=text], section#home input[type=email] {margin:5px auto;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;background-color:#222; border:none; padding:5px 10px; color:#444; font-weight:100; font-size:15px; width:235px}
section#home input[type=text]:hover, section#home input[type=email]:hover {background:#333;color:#666}
section#home input[type=text]:focus, section#home input[type=email]:focus {color:#999}
section#home input[type=submit] {
	-moz-box-shadow:inset 0px 1px 0px 0px #575757;
	-webkit-box-shadow:inset 0px 1px 0px 0px #575757;
	box-shadow:inset 0px 1px 0px 0px #575757;
	background-color:#292929;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #2e2e2e;
	display:inline-block;
	color:#444;
	font-size:11px;
	font-weight:normal;
	padding:5px 20px;
	text-decoration:none;
	text-shadow:1px 1px 0px #222;
}section#home input[type=submit]:hover {
	color:#e0e0e0;
	background-color:#cf0000;
}section#home input[type=submit]:active {
	position:relative;
	top:1px;
}
#home aside {padding:20px 0}
.mc_embed_signup p {text-align:left}
.clear{text-align:right}

header span.big {font:900 20px/20px Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;color:#fff;  vertical-align:top}
header span.small {font:900 10px/10px Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;color:#222; text-transform:uppercase; vertical-align:top}

header { width:100%; text-align:center;position:fixed;top:0; z-index:1}

.shadow-horizontal {
			background-image: -webkit-radial-gradient(50% 0,ellipse farthest-side,rgba(0, 0, 0, .25) 0,transparent 80%);
			background-image: -moz-radial-gradient(50% 0,ellipse farthest-side,rgba(0, 0, 0, .25) 0,transparent 80%);
			background-image: -ms-radial-gradient(50% 0,ellipse farthest-side,rgba(0, 0, 0, .25) 0,transparent 80%);
			background-image: -o-radial-gradient(50% 0,ellipse farthest-side,rgba(0, 0, 0, .25) 0,transparent 80%);
			background-image: radial-gradient(50% 0,ellipse farthest-side,rgba(0, 0, 0, .25) 0,transparent 80%);
			width: 100%;
			height: 12px;
			display: block;
			float: center;
			margin: 0;
			position: relative;
			z-index: 0;
			}
			.shadow-vertical {
			border-image: url('images/v-shadow.png') 0 0 0 10 stretch;
			-moz-border-image: url('images/v-shadow.png') 0 0 0 10 stretch;
			-webkit-border-image: url('images/v-shadow.png') 0 0 0 10 stretch;
			-o-border-image: url('images/v-shadow.png') 0 0 0 10 stretch;
			border-left-width: 5px;
			border-top: 0;
			border-right: 0;
			border-bottom: 0;
			}
#navigation {background:#ddd; background:rgba(204,204,204,0.7); width:100%;position:relative;z-index:100;}
nav .show {display:inline-block}
nav .menu-header {display:inline-block; margin-left:28px; padding-left:28px; border-left: 1px #ccc dashed;}
nav .hide {display:none}
nav .menu li {display:inline-block}
nav .menu li {padding: 0 10px}
nav .menu a {font-size:18px; color: #888; font-weight:600; text-transform:uppercase}
nav .menu a:hover {color: #aaa}
nav .current-menu-item a {color: #28226e; font-weight:900;}
nav .menu li ul {display:none}
nav {line-height:50px}

section.full {min-height:100%;}
section#home {background:#999; width:100%; height: 100%;display:table;  background:url(images/slide-2.jpg) center; }
section#home #quote {display:none}
section#home .gradient p {background:rgba(40,34,110,0.6); display: initial;line-height: 28px; vertical-align:middle; padding:2px 4px}
hhhh{background: -moz-linear-gradient(top, rgba(40,34,110,0.4) 0%, rgba(40,34,110,0.4) 65%, rgba(40,34,110,0.1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(40,34,110,0.4)), color-stop(65%,rgba(40,34,110,0.4)), color-stop(100%,rgba(40,34,110,0.1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, rgba(40,34,110,0.4) 0%,rgba(40,34,110,0.4) 65%,rgba(40,34,110,0.1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, rgba(40,34,110,0.4) 0%,rgba(40,34,110,0.4) 65%,rgba(40,34,110,0.1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, rgba(40,34,110,0.4) 0%,rgba(40,34,110,0.4) 65%,rgba(40,34,110,0.1) 100%); /* IE10+ */

background: linear-gradient(to bottom, rgba(40,34,110,0.4) 0%,rgba(40,34,110,0.4) 65%,rgba(40,34,110,0.1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28226e', endColorstr='#6b28226e',GradientType=0 ); /* IE6-9 */}
article {width:970px; margin:0 auto; padding-bottom:40px; text-align:justify}
.latest article:first-child {padding-top:0}
article h1 { padding-bottom:25px}
article p {line-height:150%; padding-bottom:1.5em}
article aside.footer span {font-weight:600}
article aside.footer .right {float:right}
article img {max-width:100%; height:auto; border: 1px solid #ddd; padding:6px; background:#efefef}
article ul, article ol {padding-bottom:1.5em;padding-left:4%}
article ol { counter-reset: item }

article ul li { 
    text-indent: -.7em;
}

article ul li:before {
    content: "b";
	font: 22px 'Listicons';
    color: red; /* or whatever color you prefer */
}
article ol li{ display: block; text-indent: -.7em;}
article ol li:before {content: counter(item) ". "; counter-increment: item; color: red; }
aside.info {padding-top:5%; width:970px; margin:0 auto;}
article img.alignleft {margin: 10px 15px 10px 0}
article img.alignright {margin: 10px 0 10px 15px}
article .l, article .r{display:inline-block; vertical-align:top; width:48%}
article .wpcf7-form {background:#dfdfdf; text-align:center; padding-top:15px}
article .wpcf7-form div {text-align:left}

article input[type=text], article input[type=email] ,article input[type=tel], article textarea { width:98%; background:#fff; color:#333 !important; padding:3px 4px; font-size:1em; font-weight:100; border:#ccc 1px solid; margin:5px 0}
article .wpcf7-captchar {width:20% !important}
article .wpcf7-captchac {vertical-align:middle}
article input[type=submit] { padding:4px 8px; background:#28226e; color:#eee; border:1px solid #003}
article input[type=submit]:hover {background:#59538f; color:#fff}
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #666;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #666;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #666;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #666;
}
.resolution {width:970px; margin:0 auto}
footer {background:#000; width:100%; text-align:center; padding:5px 0; line-height:30px; overflow:hidden}
footer .right, footer .mid, footer .left {display:inline-block; text-align:left}
footer .left {float:left}
footer .right {float:right}
.cf:before, .cf:after{
    content:"";
    display:table;
}
.cf:after{
    clear:both;
}
.cf{
    zoom:1;
}    
/* Form wrapper styling */
 
/* Form text input */
 
.form-wrapper input {
    height: 25px;
    padding: 10px 5px;
    float: left;
    border: 0;
    background: #eee;
    border-radius: 3px 0 0 3px;      
}
 
.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
 
.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
 
.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
 
.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}    
 
/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 25px;
    width: 90px;
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    border-radius: 0 3px 3px 0;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}   
   
.form-wrapper button:hover{     
    background: #e54040;
}   
   
.form-wrapper button:active,
.form-wrapper button:focus{   
    background: #c42f2f;
    outline: 0;   
}
 
.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 6px;
    left: -6px;
}
 
.form-wrapper button:hover:before{
    border-right-color: #e54040;
}
 
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #c42f2f;
}      
 
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}
#info {top: 40%;
right: 80px;
position: fixed;
z-index: 1001;
background: #111;
background: rgba(0,0,0,0.9);
width: 100%;
text-align: center;
padding:22px 0;
left: -100%;}
#info p {color:red; font:40px lighter Arial, Helvetica, sans-serif; padding:15px 10px 20px 140px}
#info small {color:#aaa}
#info .arrow-toggle { width:80px; height:80px; position:absolute; right:-80px; top:0}
.aleft {background:url(images/arrow_left.png);}
.aright {background:url(images/arrow_right.png);}
.down {background:url(images/arrow_down.png) center; width:40px; height:30px; display:inline-block; vertical-align:middle}
.up {background:url(images/arrow_up.png) center; width:40px; height:30px; display:inline-block; vertical-align:middle}
.blog-wrap, .sidebar {display:inline-block; vertical-align:top}
.blog-wrap article {width:auto}
.blog-wrap article .header{padding-bottom:5%}
.blog-wrap {width:70%; padding:40px 0}
.full, .sidebar {padding:40px 0 }
.sidebar {width:29%}
.sidebar .xoxo {padding-left:60px}
.sidebar .xoxo h3{margin-bottom:20px; border-bottom:2px solid #CCC}
.sidebar .xoxo > li {margin-bottom:60px}
.sidebar .xoxo li > ul {padding-left:25px}
.sidebar .xoxo li ul > li {padding-bottom:15px; list-style-type:square}
article .read-more a {display:inline-block; padding:2px 5px; background:#28226e; color:#eee}
article .read-more a:hover {background:#59538f; color:#fff}
.divisor {background:url(images/divisor_055.png) repeat-x center; height:7px; width:100%; margin:15px 0}
#disqus_thread {margin:15px 0; padding-top:15px; border-top:solid 1px #ccc}

section, .sidebar {padding-top:100px !important}