/* Copyright www.SurfDose.com 2017 (c) */


/************************************** BEGIN RESPONSIVE CSS MENU *********************************/
/* 
 * Thanks: https://codepen.io/andornagy/pen/RNeydj
 */
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

body {
	/*background: #B5C5DB;*/
/* 	font-size:22px; */
/* 	line-height: 32px; */
/*	color: #ffffff;*/
	margin: 0;
	padding: 0;
	word-wrap:break-word !important;
	font-family: 'Open Sans', sans-serif;
	}

#topimage h3 {
	font-size: 30px;
	line-height: 34px;
	text-align: center;
	color: #FFF;
}

#topimage h3 a {
	color: #FFF;
}

#topimage a {
	color: #FFF;
}

#topimage h1 {
        color: #FFF;
	margin-top: 60px;
/* 	text-align:center; */
	font-size:4em;
	line-height: 70px;
	font-family: 'Bree Serif', 'serif';
	font-size : 4em; 
        line-height : 0.8;
        font-weight:800;
	}
	
p.introtext {
        font-family:  'Roboto Slab', serif;
        font-size : 2.4em; 
        color: #FFF;
        line-height: 1.0;
/*                 margin-bottom: 1em; */
        text-shadow: 2px 2px 5px rgba(255,255,255,.2);
    }
	
/*#topimage p {
        font-size:1em;
        color:black;
}*/

nav p {
	text-align: center;font-size:2em;
}

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav { 
    margin:0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.5);
    top:0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    width:100%;
    z-index:10000;
    
    line-height: 32px;
    
    color: #ffffff;
}

#logo {
	display: block;
	/*padding: 0px 30px;*/
	float: left;
	font-size:1.8em;
	font-weight:bold;
	/*line-height: 60px;*/
	font-style:italic;
}

#img-logo {
	padding:auto;
	margin:auto;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color: rgba(0, 0, 0, 0.5);
	}

/* Styling the links */
nav a {
	display:block;
	padding:14px 20px;	
	color:#FFF;
	font-size:17px;
	text-decoration:none;
}


nav ul li ul li:hover { background: #000000; }

/* Background color change on Hover */
nav a:hover { 
	background-color: #000000; 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 60px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* First Tier Dropdown */
nav ul ul li {
/* 	width:170px; */
	width:100%;
/*         padding-left:15px; */
	float:none;
	display:list-item;
	position: relative;
}

nav ul ul li a {
    padding-left:50px;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


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

@media all and (max-width : 768px) {

	#logo {
		display: block;
		padding: 0 0 5px 0;
		/*width: 100%;*/
		text-align: left;
		float: left;
	}

	nav {
		margin: 0;
		
		background-color:black;
		position: static;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: black; /*#FFA425;*/ /*#254441;*/
		padding:7px 20px;	
		color:#FFF;
		font-size:17px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #000000;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #000000;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
        nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #212121; 
		width:100%;
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}
	
	.menu  {
                width:100%;
	}
	
	
	.form-style-10{
      width:100%;
      padding:0;
      margin:0;
	}

    }

    @media all and (max-width : 330px) {

            nav ul li {
                    display:block;
                    width: 94%;
            }

    }

/* *********************** END responsive css menu ***************/  
    
 
/************************************** BEGIN RESPONSIVE GRID *********************************/
    /*  SECTIONS  */
    .section {
            clear: both;
            padding: 0px;
            margin: 0px;
    }

    /*  COLUMN SETUP  */
    .col {
            display: block;
            float:left;
            margin: 1% 0 1% 1.6%;
            /*max-width:600px;            */
            background-color: 	#F5F5F5; 
    }
    .col:first-child { margin-left: 0; }

    /*  GROUPING  */
    .group:before,
    .group:after { content:""; display:table; }
    .group:after { clear:both;}
    .group { zoom:1; /* For IE 6/7 */ }


    /*  GRID OF TWO  */
    .span_2_of_2 {
            width: 100%;
    }
    .span_1_of_2 {
            width: 49.2%;
    }

    /*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

    @media only screen and (max-width: 760px) {
            .col { 
                    margin: 1% 0 1% 0%;
            }
    }

    @media only screen and (max-width: 768px) {
            .span_2_of_2, .span_1_of_2 { width: 100%; }
    }
    
/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}

/************************ END responsive grid ***************/  


/************************************** BEGIN GOOGLE CHART *********************************/
.google-visualization-tooltip {
    border:none !important;
    padding: 0 10px !important;
    font-size: 15px !important;
    text-align: left !important;
    font-family: Verdana !important;
    color: black !important;
}
/************************ END google chart ***************/  
 

/************************************** BEGIN IMAGE/HEADER/FOOTER *********************************/
/* nav */
img.navlogo { 
  text-align: left; 
  /*padding:0 0  0.5em 0;*/
  /*max-width:100%;
  max-height:100%;*/
  /*display:inline;*/
  height:50px;
  vertical-align:middle;
  padding:5px 10px;*/
}	

#burger-icon{
    text-align:right;
    font-size:1.5em;
    font-weight:bold;
    float:right;
    padding-top:5px;
    color:white;
}
/* big image */
#topimage{
  clear: both;
  position: relative;
  width: 100%; 
  color: #ffffff;
}

.heroimage {
    width:100%;
}
#page-intro-text {display: block;
    position: absolute;
    top: 20%;
    left: 10%;
    width:30%; 
    margin:2em 0 2em 0;
    padding: 0;
    line-height:1.1;  text-shadow: 2px 2px 5px rgba(0,0,0,.2);
    color: #FFF;
}

/* footer */
#footer {
  width:100%;
  text-align: right;
  padding:0.5em 0;
  color: #FFF;
  background-color:black;
  font-family: 'Open Sans', sans-serif;
/*   font-style:italic; */
  font-weight:bold;
  font-size:0.8em;
}	


#footer a {
  color: #FFF;
}


/* content */
#maincontainer{
  max-width:1200px;
  margin: 0 auto;
  padding:5px 10px 40px 10px;
}		

/*
Keep footer down even with small content!
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
*/
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#wholecontainer {
   min-height:100%;
   position:relative;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
}

/************************ END image/header/footer ***************/  
#cookie-bar p {
    margin: 0;
    padding: 0;
    font-size: 1em;
}

#loadingDiv {
  /*font-family: 'Open Sans', sans-serif;*/
  font-family: initial !important;
  display:none;
  font-weight:bold;
  padding: 2px;
}


/*************************** Form layout stuff *************************/
/*<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>*/
.form-style-10{
    width:450px;
    padding:30px;
    margin:40px auto;
    background: #FFF;
    border-radius: 10px;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
.form-style-10 .inner-wrap{
    padding: 30px;
    background: #F8F8F8;
    border-radius: 6px;
    margin-bottom: 15px;
}
.form-style-10 h1{
    background: #2A88AD;
    padding: 20px 30px 15px 30px;
    margin: -30px -30px 30px -30px;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
    font: normal 30px 'Bitter', serif;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    border: 1px solid #257C9E;
}
.form-style-10 h1 > span{
    display: block;
    margin-top: 2px;
    font: 13px Arial, Helvetica, sans-serif;
}
.form-style-10 label{
    display: block;
    font: 13px Arial, Helvetica, sans-serif;
    color: #888;
    margin-bottom: 15px;
}
.form-style-10 input[type="text"],
.form-style-10 input[type="date"],
.form-style-10 input[type="datetime"],
.form-style-10 input[type="email"],
.form-style-10 input[type="number"],
.form-style-10 input[type="search"],
.form-style-10 input[type="time"],
.form-style-10 input[type="url"],
.form-style-10 input[type="password"],
.form-style-10 textarea,
.form-style-10 select {
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border: 2px solid #fff;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}

.form-style-10 .section{
    font: normal 20px 'Bitter', serif;
    color: #2A88AD;
    margin-bottom: 5px;
}
.form-style-10 .section span {
    background: #2A88AD;
    padding: 5px 10px 5px 10px;
    position: absolute;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 4px solid #fff;
    font-size: 14px;
    margin-left: -45px;
    color: #fff;
    margin-top: -3px;
}
.form-style-10 input[type="button"],
.form-style-10 input[type="submit"]{
    background: #2A88AD;
    padding: 8px 20px 8px 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
    font: normal 30px 'Bitter', serif;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    border: 1px solid #257C9E;
    font-size: 15px;
}
.form-style-10 input[type="button"]:hover,
.form-style-10 input[type="submit"]:hover{
    background: #2A6881;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}
.form-style-10 .privacy-policy{
    float: right;
    width: 250px;
    font: 12px Arial, Helvetica, sans-serif;
    color: #4D4D4D;
    margin-top: 10px;
    text-align: right;
}


@media all and (max-width : 768px) {
    .form-style-10{
      width:100%;
      padding:0;
      margin:0;
    }
}
/**************end form layout stuff ********************/


/************************************** SPECIFIC PAGES CSS STYLE *********************************/
/************************************** BEGIN METER.PHP *********************************/
#sessiongraphcontainer {
    min-height:768px;
    height: 100%;
    width: 100%;
    margin:auto;
    text-align:center;
    margin:0px;
    padding:0px;
}

#visualization {
    min-height:768px;
    height: 100%;
    width: 100%;
    margin:auto;
    text-align:center;
    font-family: "Times New Roman", Times, serif;
    padding-bottom:20px;
}

.commentsdiv {     
    font-family: initial !important;
    font-size: initial !important;  
}
#cmtx_container {
  padding: 0 10px; 
}

#selectDiv, #loadingDiv {
  padding-top:10px;
  /*padding-bottom:10px;*/
  width: 100%;
  display: flex;
    justify-content: center;
}

#selectDiv {
  display:none;
}

#loadingDiv{
  padding-bottom:29px;
}

.innerSelect{
     display: inline-block;  
}

.cmtx_comment_box {
    border: 1px solid lightgray;
    border-radius: 10px;
}

/************************ END meter.php ***************/  



table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin-left:auto;
    margin-right:auto;
}

table.comparison {
    font-size:0.8em;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

table tr:nth-child(even) {
    background-color: #dddddd;
	/*opacity: .7;*/
}

th {
	background-color: black;
	color:white;
	text-align:center;
	font-weight:bold;
}

.off {
	background-color: red;
	color:white;
	text-align:center;
	font-weight:bold;	
}

.on {
	background-color: green;
	color:white;
	text-align:center;
	font-weight:bold;
}

.partial {
	background-color: yellow;
	color:black;
	text-align:center;
	font-weight:bold;
}

.imp {
	font-weight:bold;
}

.title {
	/*background-color: black;
	color:white;*/
}

.spotList, #addYours {
    font-weight: bold;
    //border: 1px solid #dddddd;
    padding: 5px;
    box-sizing: border-box;
}

.lpLinks {
	display:block;
	padding:0px 0px;
	font-size:17px;
	text-decoration:none;
}

.lpLinks a {
	text-decoration: none;
	width:100%;
	height:100%;
}

.lpLinks a, .lpLinks:hover { background: #000000; color:white }

#addYours, .centerText, .myTitle {
	text-align:center;
}

.centerText, .writings {
    font-size:1em;
	padding:10px;
	/*font-weight:bold;*/
	box-sizing: border-box;
}

.screenshot  {
        max-width:90%;
/*         width:100%; */
/*         box-sizing: border-box; */
}

.screenShotDiv {
	font-weight:bold;
}


.disabled a:link { color: gray; text-decoration: line-through}