/*
Base Stylesheet
Defines the base styles that must be present in every theme, along
with shortcodes and widgets included with the CPO Core.
*/

/* --------------------------------------------------------------
GENERAL ELEMENTS
-------------------------------------------------------------- */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Exo:400,400italic,700,700italic,200,200italic);
@import url(http://fonts.googleapis.com/css?family=Muli:400,400italic,300italic,300);


/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { background:transparent; border:0; margin:0; padding:0; vertical-align:baseline; }
header, nav, section, article, aside, footer, hgroup { display:block; }
body { line-height:1; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; }
ol, ul, li { list-style:none; }
blockquote { quotes:none; }
blockquote:before, blockquote:after { content:''; content:none; }
del { text-decoration:line-through; }
table { 	border-collapse:collapse; border-spacing:0; }
a img { border:none; }

/* GENERAL TYPOGRAPHY */
p, address { margin-bottom:1.6em; }
span, div, p, dl, td, th, ul, ol, blockquote { }

/* LISTS */
ul li { list-style:disc; margin:0 0 5px 25px; list-style-position:outside; }
ol li { list-style:decimal; margin:0 0 5px 25px; list-style-position:outside; }
ol ol li { list-style:upper-alpha; }
ol ol ol li { list-style:lower-roman; }
ol ol ol ol li { list-style:lower-alpha; }
ul ul, ol ol, ul ol, ol ul { margin-bottom:0; }
ul, ol, dd, pre, hr { margin-bottom:25px; }
ul ul, ol ol, ul ol, ol ul { margin-bottom:0; }

dl { margin:0 0 24px 0; }
dt { font-weight:bold; }
dd { margin-bottom:18px; }
strong, b { font-weight:bold; }
cite, em, i { border:none; font-style:italic; }
big { font-size:131.25%; }
ins { background:#ffc; border:none; }
del { text-decoration:line-through; }

/* ADDRESSES */
address { font-size:0.9em; line-height:1.2em; }

/* CITATIONS */
blockquote { display:block; font-style:italic; padding:0 5%; margin:25px 0; }
blockquote cite, blockquote em, blockquote i { font-style:normal; }

/* PREDEFINED TEXT */
pre { display:block; overflow:auto; font-family:Courier, monospace; background:url(data:image/gif;base64,R0lGODlhAQAyAIAAAP////f39yH5BAAAAAAALAAAAAABADIAAAIIhI+pGO0P4ysAOw==); border:1px solid #eee; color:#555; line-height:25px; padding:25px 20px; font-size:14px; margin:25px 0; }

/* TEXT VARIATIONS */
abbr, acronym { border-bottom:1px dotted #666; cursor:help; }
ins { text-decoration:none; }
sup, sub { font-size:0.7em; height:0; line-height:1; position:relative; vertical-align:baseline; }
sup { bottom:1ex; }
sub { top:.5ex; }
kbd, tt, var { line-height:21px; }
code { font-size:1.05em; }

/* CODE */
code, code var { font-family:Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; }

/* IFRAMES */
iframe { max-width:100%; }

/* TABLES */
table { border-collapse:collapse; border-spacing:0; margin:0 0 24px; text-align:left; width:100%; page-break-inside:avoid; }
tr th, thead th { border:none; color:#888; font-weight:bold; line-height:1.2em; padding:6px 10px; border-bottom:1px solid #ddd; }
tr td { border:none; padding:6px 10px; border-bottom:1px solid #ddd; }
tfoot tr td { border-bottom:none; }
tr td, tr th, thead th, tr th, thead th { }
.dark tr th, .dark thead th { border-bottom:1px solid #ddd; }
.dark tr td { border-bottom:1px solid #ddd; }

/* FORM FIELDS */
fieldset { margin:0 0 30px; }
legend { font-size:1.3em; display:block; margin:0 0 20px; }

/* FORMS */
label { display:block; padding:0; margin:0 0 5px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
input, textarea { font-size:1em; }
input[type=text], input[type=password], input[type=input], 
input[type=tel], input[type=url], input[type=email], 
input[type=number], input[type=range], input[type=search], input[type=color], 
input[type=time], input[type=week], input[type=month], input[type=date], input[type=datetime], 
textarea, select { font-family:inherit; border:1px solid #ddd; padding:6px; margin:0; width:100%; background:#fff; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
input[type=number] { -webkit-appearance:none; -moz-appearance:textfield; }
input[type=submit] { width:auto; -webkit-appearance:none; transition:0.3s all; }
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

/* HEADING LINE */
hr { background-color:#fff; border:0; border-top:1px solid #bbb; border-bottom:1px solid #fff; clear:both; height:0; margin:40px 0; }

/* INLINE IMAGES */
img { margin:0; max-width:100%; line-height:0; height:auto; }
.alignleft, img.alignleft { display:inline; float:left; margin-right:30px; margin-top:4px; }
.alignright, img.alignright { display:inline; float:right; margin-left:30px; margin-top:4px; }
.aligncenter, img.aligncenter { display:block; margin-left:auto; margin-right:auto; }
img.alignleft, img.alignright, img.aligncenter { margin-bottom:12px; }

/* INLINE IMAGE CAPTIONS */
.wp-caption { margin-bottom:15px; padding:0; max-width:100%; line-height:0em; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.wp-caption img { margin:0; padding:0; max-width:100%; line-height:0em; }
.wp-caption .wp-caption-text { margin:10px 0 0; padding:0 10px 0; text-align:left; color:#888; line-height:1.4em; font-size:12px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.wp-smiley { margin:0; }

/* STICKY POSTS */
.sticky { }
.clear { clear:both; width:100%; height:0; margin:0; padding:0; }
html body .outer .hidden { display:none; }


/* --------------------------------------------------------------
LAYOUT
-------------------------------------------------------------- */


/* WRAPPERS */
body { font-family:Muli,Open Sans, Arial, sans-serif; background:#fff; }
.outer { overflow:hidden; width:1010px; max-width:100%; margin:0 auto; background:#fff; }
.container { width:970px; max-width:100%; padding:0 20px; margin:0 auto; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
.main { margin:30px 0; }

.map { width:100%; height:400px; margin-bottom:-400px; position:relative; background-color:#eee; overflow:hidden; }
.map-overlay { width:100%; max-width:100%; height:450px; position:relative; left:209px; top:144px; pointer-events:none; }
.map { position: relative; padding-top:0; height:500px; overflow: hidden; }
.map iframe { position:absolute; top:0; left:0; width:100% !important; height:100% !important; }
.map img { max-width:none; }
/* Small */
.map-small { height:320px; margin-bottom:-320px; }
.map-overlay-small { height:350px;  }



/* --------------------------------------------------------------
NAVIGATION
-------------------------------------------------------------- */



/* NEXT/PREV POST NAVIGATION */
.navigation { overflow:hidden; margin:0 0 30px; }
.navigation a { display:block; }
.navigation .nav-prev,
.navigation .nav-next { position:relative; padding:0;  }
.navigation .nav-prev { float:left; text-align:left; }
.navigation .nav-next { float:right; text-align:right; }


/* NUMBERED POST NAVIGATION */
.pagination { overflow:hidden; margin:0 0 30px; text-align:center; }
.pagination ul { display:block; }
.pagination ul li { display:inline-block; list-style:none; margin:0; padding:0; }
.pagination span, 
.pagination a { display:block; margin:0 1px; padding:5px 15px; border-radius:3px; }
.pagination .current { color:#fff; background:#666; }
.pagination a:hover { background:#eee; text-decoration:none; }


/* NUMBERED PAGINATION FOR SINGLE POSTS */
.postpagination { overflow:hidden; margin:0 0 30px;  }
.postpagination span { display:inline-block; padding:5px 15px; border-radius:3px; margin:0 5px 0 0; }
.postpagination a { display:inline-block; }
.postpagination a span { display:block; }
.postpagination > span { color:#fff; background:#666; }


/* --------------------------------------------------------------
DESIGN ELEMENTS
-------------------------------------------------------------- */


/* HEADINGS */
h1, h2, h3, h4, h5, h6 { font-weight:300; margin:0 0 25px; }
h4 { text-transform:uppercase; border-bottom:1px solid #eee; padding:0 0 10px; margin:0 0 20px;1 font-size:0.9em; }


/* BUTTONS */
.button, .button:visited, input[type=submit] { display:inline-block; width:auto; border:2px solid #74af27; margin:5px 0; padding:5px 35px; color:#333; text-transform:uppercase; border-radius:2px; cursor:pointer; background:#fff; }
.button:link { color:#fff; text-decoration:none; }
.button:hover, input[type=submit]:hover { background:#74af27; color:#fff; text-decoration:none; }
.button-secondary, .button-secondary:link, .button-secondary:visited, input[type=submit].button-secondary { color:#6b2; background:#fff; }
body .button-small { font-size:0.9em; padding:5px 10px; margin:5px 0; }
body .button-medium { font-size:1.2em; padding:15px 20px; margin:5px 0; }
body .button-large { font-size:1.8em; padding:20px 30px; margin:10px 0; }
body .button-left { float:left; margin:0 30px 10px 0; }
body .button-right { float:right; margin:0 0 10px 30px; }
body .button-center { display:block; clear:both; float:none; margin:0 0 30px; }


/* COLUMNS */
.column { display:block; float:left; margin-right:5%; }
.col1 { width:100%; }
.col2 { width:47.5%; }
.col3 { width:30%; }
.col3x2 { width:65%; }
.col4 { width:21.25%; }
.col4x2 { width:47.5%; }
.col4x3 { width:73.5%; }
.col5 { width:16%; }
.col5x2 { width:37%; }
.col5x3 { width:58%; }
.col5x4 { width:79%; }
.col6 { width:12.5%; }
.col6x2 { width:30%; }
.col6x3 { width:47.5%; }
.col6x4 { width:65%; }
.col6x5 { width:82.5%; }
.column.col-last { margin-right:0; }
.col-divide { display:block; clear:both; width:100%; }
.columns { width:auto; margin:0; }
/* Columns with half padding */
.column-narrow { display:block; float:left; margin-right:2%; }
.column-narrow.col2 { width:49%; }
.column-narrow.col3 { width:32%; }
.column-narrow.col3x2 { width:66%; }
.column-narrow.col4 { width:23.5%; }
.column-narrow.col4x2 { width:49%; }
.column-narrow.col4x3 { width:74.5%; }
.column-narrow.col5 { width:18.4%; }
.column-narrow.col5x2 { width:38.8%; }
.column-narrow.col5x3 { width:60%; }
.column-narrow.col5x4 { width:80%; }
.column-narrow.col6 { width:15%; }
.column-narrow.col6x2 { width:32%; }
.column-narrow.col6x3 { width:49%; }
.column-narrow.col6x4 { width:66%; }
.column-narrow.col6x5 { width:83%; }
.column-narrow.col7 { width:12.57142%; }
/* Columns with no padding */
.column-fit { display:block; float:left; margin-right:0; }
.column-fit.col2 { width:50%; }
.column-fit.col3 { width:33.3333%; }
.column-fit.col3x2 { width:66.6666%; }
.column-fit.col4 { width:25%; }
.column-fit.col4x2 { width:50%; }
.column-fit.col4x3 { width:75%; }
.column-fit.col5 { width:20%; }
.column-fit.col5x2 { width:40%; }
.column-fit.col5x3 { width:60%; }
.column-fit.col5x4 { width:80%; }
.column-fit.col6 { width:16.66666%; }
.column-fit.col6x2 { width:33.3333%%; }
.column-fit.col6x3 { width:50%; }
.column-fit.col6x4 { width:66.666666%; }
.column-fit.col6x5 { width:83.333333%; }
.column-fit.col7 { width:14.2857%; }



/* DARK CONTENT */
body .dark { color:#eee; }
body .dark h1, body .dark h2, body .dark h3, body .dark h4, body .dark h5, body .dark h6, 
body .dark .heading,
body .dark a:link, body .dark a:visited,
body .dark a:hover { color:#fff; }


.navigation { text-align:right; }

/* FIND ADDRESS */
.locate .locate-address { display:inline-block; width:68%; box-sizing:border-box; margin:0; padding:10px; }
.locate .locate-submit { display:inline-block; width:30%; box-sizing:border-box; margin:0; padding:11px; text-align:center; }

/* POLYGONS */
.plot-size { color:#6b2; font-size:30px; text-align:right; margin:10px 0; }
.plot-size span { font-size:0.7em; }
.erase-area { display:block; cursor:pointer; color:#777; text-align:right; text-transform:uppercase; }

/* OBSTACLES */
.obstacles { float:right; margin:0 0 20px; }
.obstacle,
.remove-obstacles { float:left; text-align:center; padding:10px; width:70px; border-radius:5px; cursor:pointer; }
.obstacle-active { background:#eee; }
.obstacle-image { display:block; margin:0 auto 5px; }
.obstacle-title { text-align:center; font-size:0.8em; }

/* HOUSES */
.houses { overflow:hidden; margin:30px 0; }
.house { float:left; position:relative; overflow:hidden; margin-left:3%; width:14%; cursor:pointer; }
.house:first-child { margin-left:0; }
.house-image { display:block; width:100%; margin:0 auto 10px; opacity:0.6; border:4px solid #eee; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; transition:0.3s all; }
.house-active .house-image { border:4px solid #333; opacity:1; }
.house-name { text-align:center; font-size:0.8em; }

/* HOUSES */
.appliances { overflow:hidden; margin:30px 0; }
.appliance { margin:0 4% 30px 0; float:left; padding:0 0 30px; border-bottom:1px solid #6b2; width:48%; }
.appliance:nth-child(even) { margin-right:0; }
.appliance-model { display:none; }
.appliance-image { display:block; float:left; display:block; height:auto; width:80px; }
.appliance-name { margin:0 0 10px; padding:0 0 10px; border-bottom:1px solid #eee; }
.appliance-body { margin-left:100px; overflow:hidden; }
.appliance-fields { font-size:1.2em; }
.appliance-field { position:relative; display:block; float:left; width:30%; color:#999; }
.appliance-field-body { margin-left:24px; }
.appliance-power { color:#999; width:40%; font-size:20px; }
.appliance-field input { display:block; border:1px solid #fff; color:#6b3; font-size:1.1em; font-weight:bold; width:40px; margin:0; padding:0; line-height:1; border-radius:3px; }
.appliance-power .appliance-power-value { display:inline-block; color:#333; font-weight:bold; width:80px; text-align:right; font-size:30px; }
.appliance-field label { font-size:0.6em; margin:0; }
.appliance-buttons { float:left; width:24px; margin:5px 0 0; }
.appliance-button { font-family:monospace; opacity:0.4; display:block; width:16px; height:16px; line-height:14px; background:#ccc; margin:0 0 3px; text-align:center; color:#fff; border-radius:50px; cursor:pointer; }
.appliance-field:hover input { border:1px dashed #ccc; }
.appliance-field:hover .appliance-button { opacity:1; }
.appliance-button:hover { background:#6b2; }

.product { transition:0.3s all; }
.ajax-loading .product { opacity:0.4; }
.ajax-loading input[type=submit] { opacity:0; }

.text-center{text-align:center}
.text-right{text-align:right}
.type-content{margin-bottom:30px; width:80%; margin:0 10%;}
.type-content{margin-bottom:60px;}



    

/* --------------------------------------------------------------
REPORTS
-------------------------------------------------------------- */

.report-outer { overflow:hidden; font-size:12px; width:1110px; max-width:100%; margin:0 auto; background:#fff; }
.report-container { width:1070px; max-width:100%; padding:0 20px; margin:0 auto; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }

.cover-logo { display:block; float:right; margin:0; }
.cover-image { display:block; margin:50px auto; }
.cover-title { text-align:center; font-size:40px; border-bottom:1px solid #ddd; padding:0 0 20px; margin:0 0 20px;  }
.cover-subtitle { margin:0 0 0px; font-size:22px; }
.cover-date { text-transform:uppercase; letter-spacing:2px; color:#77777f; }
.cover-location { float:right; }

.report-break { page-break-after:always; }
.page { padding:20px 0; border-bottom:1px solid #fff; line-height:1.7; font-size:12px; page-break-inside:avoid; page-break-after:always; }
.page-title { color:#6b2; margin:0 0 10px; font-size:24px; }
.page-subtitle { color:#6b2; margin:0 0 10px; font-size:24px;}
.page-body { margin-left:150px; }
.page-image { float:left; display:block; width:120px; height:auto; }

.feature { margin:0 0 40px; page-break-inside:avoid; }
.feature-image { float:left; display:block; width:80px; height:auto; }
.feature-title { color:#6b2; margin:0 0 10px 100px; font-size:20px; text-transform:uppercase; }
.feature-content { margin:0 0 0 100px; }

.counter { margin:0 0 15px; line-height:1.2; page-break-inside:avoid; }
.counter-title { color:#999; text-transform:uppercase; }
.counter-content { font-size:20px; font-weight:bold; color:#333; }

.graph-wrapper { margin:40px 0; page-break-inside:avoid; }
.graph { position:relative; height:250px; border-bottom:5px solid #ccc; margin:0 0 30px; padding:0 0 2px 0; }
.graph-usage { position:absolute; background:#f62; bottom:2px; height:4px; left:0; width:100%; z-index:200; }
.graph-item { position:relative; float:left; width:50px; margin:0; height:250px; }
.graph-bar { background:#6b2; position:absolute; bottom:2px; left:50%; margin-left:-12px; width:24px; }
.graph-bar-solar { background:#6b2; width:100%; }
.graph-bar-wind { background:#2ac; width:100%; }
.graph-tag { position:absolute; top:100%; width:100px; text-align:center; left:50%; margin:10px 0 0 -50px; font-size:12px; }
.graph-legend { font-size:12px; padding-left:34px; position:relative; float:left; margin-right:30px; }
.graph-legend-solar:before,
.graph-legend-wind:before,
.graph-legend-usage:before { position:absolute; left:0; display:block; content:' '; width:24px; height:20px; background:#6b2; margin-right:10px; }
.graph-legend-wind:before { background:#2ac; }
.graph-legend-usage:before { background:#f62; }


.diagram { position:relative; width:100%; padding:77% 0 0; margin:0 0 40px; background-size:cover; }
.diagram-wind { background:url(../images/diagram-wind.jpg) no-repeat; }
.diagram-solar { background:url(../images/diagram-solar.jpg) no-repeat; }
.diagram-hybrid { background:url(../images/diagram-hybrid.jpg) no-repeat; }
.diagram-label { position:absolute; }
.diagram-label span { display:block; color:#6b2; }
.diagram-label-panel { left:28%; top:11%; }
.diagram-label-windmill { left:76%; top:11%; }
.diagram-wind .diagram-label-windmill { left:24%; top:11%; }
.diagram-label-regulator { left:20%; top:46%; }
.diagram-label-inverter { left:78%; top:50%; text-align:right; }
.diagram-label-battery { left:75%; top:87%; }


.print { position:fixed; bottom:20px; right:20px; background:#6b2; border-radius:500px; color:#fff; padding:0 20px; line-height:60px; height:60px; font-size:18px; font-weight:bold; text-decoration:none; }
@media print{
	.print { display:none; }
}

/* --------------------------------------------------------------
RESPONSIVE STYLES
-------------------------------------------------------------- */


/* TABLET SCREENS (PORTRAIT) */
@media screen and (max-width: 800px){
    
	/* COLUMNS */
	.col4 { width:47.5%; }
	.col4:nth-of-type(2) { margin-right:0; }
	.col4:nth-of-type(3) { clear:left; }
	.col5 { width:47.5%; }
	.col5:nth-child(n+3) { width:30%; }
	.col5:nth-child(2) { margin-right:0; }
	.col6 { width:30%; }
	.col6:nth-child(3n) { margin-right:0; }
	/* Narrow */
	.column-narrow.col4 { width:49%; }
	.column-narrow.col5 { width:49%; }
	.column-narrow.col5:nth-child(n+3) { width:32%; }
	.column-narrow.col6 { width:32%; }
	/* Fit */
	.column-fit.col4 { width:50%; }
	.column-fit.col5 { width:50%; }
	.column-fit.col5:nth-child(n+3) { width:33.3333%; }
	.column-fit.col6 { width:33.3333%; }
	/* Break Early */
	body .column.column-early { float:none; width:auto; margin:0; }
	
	
	/* WRAPPERS */	
	.container { padding:0 20px; }
	
	.appliance { float:none; margin:0 0 30px; width:auto; }
	.house { width:31%; margin-bottom:30px; }
	.house:nth-child(3n + 1) { margin-left:0; }
	
	.obstacle, .remove-obstacles { width:31%; margin:0 0 10px 3%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
	.obstacle:first-child { margin-left:0; }
	.obstacle:nth-child(3n + 1) { margin-left:0; clear:both; }

}


/* SMARTPHONE SCREENS */
@media only screen and (max-width: 600px){
	
	/* HEADINGS */
	h1 { font-size:2em; } 
	h2 { font-size:1.8em; } 
	h3 { font-size:1.4em; } 
	h4 { font-size:1.2em; } 
	h5 { font-size:1.1em; } 
	h6 { font-size:1.0em; }
	
	
	/* LAYOUT */
	.container { padding:0 10px; }
	.main { margin:10px 0 60px; }

	
	/* COLUMNS */
	body .column.col2,
	body .column.col3,
	body .column.col4,
	body .column.col3x2,
	body .column.col4x2,
	body .column.col4x3,
	body .column.col5x2,
	body .column.col5x3,
	body .column.col5x4,
	body .column.col6x2,
	body .column.col6x3,
	body .column.col6x4,
	body .column.col6x5 { float:none; width:auto; margin:0; }
	body .col6:nth-child(3n) { margin-right:5%; }
	body .col6:nth-child(2n) { margin-right:0; }
	body .col6 { width:47.5%; }
	/* Narrow */
	body .column-narrow.col6:nth-child(3n) { margin-right:2%; }
	body .column-narrow.col6 { width:49%; }
	/* Fit */
	body .column-fit.col6:nth-child(3n) { margin-right:0%; }
	body .column-fit.col6 { width:50%; }

	.navigation { position:fixed; bottom:0; left:0; right:0; background:#fff; box-shadow:0 -5px 5px 0 rgba(0,0,0,0.1); overflow:hidden; margin:0; }
	.navigation input[type=submit]{ display:block; float:left; width:50%; margin:0; font-size:14px; padding:10px 0; border-radius:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
	.navigation input.submit-large { float:none; width:100%; }
	
	.map { height:400px; margin-bottom:-400px;}
	.map-overlay { height:430px; }
	
	.plot { margin:0 0 20px; }
	.plot-size { text-align:left; }
	.erase-area { text-align:left; }
	
}