/* Manager */

body {
  /* make sure that this matches invoice.css */
  /*background: #f5f4ed;*/
  background: #efeee6;
  margin: 0;
  padding: 0;
}

body, h1, h2, h3, h4, h5, h6, p, li, label { 

  font-family: -apple-system, BlinkMacSystemFont, 
  "Segoe UI", "Roboto", "Oxygen", 
  "Ubuntu", "Cantarell", "Fira Sans", 
  "Droid Sans", "Helvetica Neue", sans-serif !important; 
}
/*body, h1, h2, h3, p, label { font-family: 'Open Sans', Arial, Helvetica, sans-serif; }*/

h1, h2, h3, h4, h5, h6 { 
  font-weight:400; 
  line-height: 150%; 
}

h3 { 
  color: #333; 
  margin: 0 0 10px 0;
}

h4 { 
  color: #333; 
  margin: 0 0 10px 0;
}

h5 { 
  color: #777; 
  margin: 0 0 10px 0;
}

hr {
  border:0;
  border-bottom: 1px solid rgba(0,0,0,.1);
  height:0;
}

a:focus { text-decoration:none; }

p, label, .control-label { font-size:16px; }

p.help-block { font-size:14px; color:#999; }
p.help-text { margin: 8px 0; font-size:14px; color:#999; }
small.help-block { margin: 8px 0; font-size:13px; color:#999; }

.card-header { 
  background: #fff;
}

.admin-home-hero {

  background: rgba(0,0,0,.0);

  background: #11292B url('/img/photos/forest-swampy-1-small.jpg');
  /*background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/topography.png');*/
  /*background-repeat: */

  background-size: cover;

  background-position: top center;

  padding: 50px 0 10px 0;

  margin: -20px 0 10px 0;

}
.admin-home-hero h1 {
  font: 50px 'Arvo', Times, serif !important;
  font-style: italic !important;
  color: #fff;
  text-shadow: -5px 5px 0 rgba(0,0,0,.7);
  /*text-shadow: -5px 5px 0 rgba(255,255,255,.4);*/
  padding: 20px 30px;
}

.nowrap { white-space: nowrap }
.clearfix { overflow:auto; }

.well { padding: 20px; background:rgba(0,0,0,.1); box-shadow: 0 0 4px rgba(0,0,0,.16) inset; margin-bottom: 20px; }

.white-box { background:#fff; box-shadow: 0 2px 8px rgba(0,0,0,.1); padding:20px 30px; }

.button-large { display:inline-block; padding: 10px 20px; border:2px solid #55acee; color:#55acee; background:#fff; border-radius: 8px; font-size: 18px; }

#main-content .alert-container {margin: 30px 0 0 0; text-align: left; padding: 0 0px}

.alert-container {margin: 30px 0 0 0; text-align: left; padding: 0 0px}
.alert { font-size: 16px; text-align:center; font-weight:400; border-radius:10px; padding:16px 30px; color:#777; }
.alert a { text-decoration: underline; color:#09e; }
.alert a:hover { text-decoration: underline; color:#000 }
.alert-info { background:#fff; color:#777; border:1px solid #d5d5d5; box-shadow: 0 1px 9px rgba(0,0,0,.06); display:inline-block; }

.ui.button { background: #fff; } 
.ui.button.depth, .ui.button.raised { border-bottom: 2px solid rgba(0,0,0,.2); } 
.ui.button.green, .ui.button.green:focus, .ui.button.green:active { background: #00c183; } 
 { background: #00c183; } 
.ui.button.white { background: #fff; } 
.ui.green.segment { border-top-color: #00c183; } 
.ui.button.green:hover { background: #00af77; } 

.ui.slider.checkbox .box, .ui.slider.checkbox label {
  color: rgba(0,0,0,.7);
}

div.ui.segments.no-border {
  border: 0;
}

div.ui.segment h2 { text-align:left; font-weight: bold; }
div.ui.segment h3 { text-align:left; font-weight: bold; }

div.ui.segments.white-background {
  background: #fff
}

.grecaptcha-badge {
  display: none !important;
}

.rotate-45-right {
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

table.table td, table.table th { font-size: 15px; }

#notifications { position:fixed; top:10px; left:0; width:100%; z-index:1001; text-align: center; }
#notifications .notification {
  margin: 0px 0 20px 0px;
}
#notifications .notification-inner {
  background: #fff;
  /*box-shadow: 0 1px 12px rgba(0,0,0,.1);*/
  box-shadow: 0 3px 12px rgba(0, 204, 153, 0.1);;
  display:inline-block;
  padding: 8px 20px;
  font-size: 18px;
  border: 1px solid #0c9;
  /*border-bottom: 2px solid #0c9;*/
  color: #0c9;
  /*border: 2px solid #fff; */
  /*background-color: #0c9; */
  /*color:#fff;*/
  border-radius: 6px;
}


.basic-page-content { background:#fff; padding:20px 30px; margin-bottom:50px; }
.basic-page-content h3 { font-weight: 600; font-size:20px; }
.basic-page-content h1 { font-weight: 600; font-size:26px; }
.basic-page-content p { font-weight: 400; font-size:18px; }
.basic-page-content section { padding: 20px; }

.basic-page-content .content-contact { max-width:600px; }

div.price { border-radius:20px; border:1px solid #ddd; display:inline-block; padding:5px 13px;margin:0 0 20px 0; }


ul.form-errors { list-style: none; padding:0; margin:20px 0 30px 0; }
ul.form-errors li { list-style: none; margin:0 0 8px 0; padding:6px 12px; color: #fff; display:block; background:#f90 }

a.greylink { color:#999; text-decoration:underline; }
a.greylink:hover { color:#000; text-decoration:underline; }


.btn { border-radius:4px; }
.btn:hover { cursor: pointer }

.btn-large, .btn-lg { padding: 11px 18px; }
.btn-md { padding: 11px 18px; }

.btn-success {background: #00c183; border:none; font-weight:600; }
.btn-success {border-bottom:2px solid rgba(0,0,0,.2);}
.btn-success {}
.btn-success.active { background: #00c183;  }
.btn-success:hover { background: #00c183; box-shadow: inset 0 0 10px rgba(255,255,255,.5), inset 0 -1px 5px rgba(0,0,0,.4);  }
.btn-success:active, .btn-success:focus {color: #fff; background: #00c183 !important; }
.btn-primary {background: #2b95e3; border:none; font-weight:600; }
.btn-primary {border-bottom:2px solid #1a78bd;}
.btn-primary.active {background: #1e8cdd; }
.btn-primary:hover {border-bottom:2px solid #1a78bd;background: #1e8cdd; }
.btn-primary:active, .btn-primary:focus { color: #fff; border-bottom:2px solid #1a78bd;background: #1e8cdd; }

.modal { }
.modal .modal-content { border-radius:6px; }
.modal .modal-header {background:transparent;}
.modal .modal-header h4.modal-title {color:#000; font-weight: 600; font-size:18px; }
.modal .modal-body p {margin: 0 0 10px 0;}

a {color:#09f}
a:hover {text-decoration:none;color:#000}

h2 {text-align:center; margin:20px 0 30px 0}


.box { 
  background: #fff; 
  border: 1px solid #ddd; 
  border-bottom: 2px solid #ddd; 
  border-radius: 4px; 
  padding: 20px 24px; 
  margin: 30px auto; 
  line-height: 180%;
  text-align: center; 
}



/*nav {position: relative; z-index: 10; top: 0; width:100%; padding:0px 0 0px 0; background: #fff; border-radius:0; box-shadow: 0 2px 11px rgba(0, 0, 0, 0.15);  }*/
nav {
  position: fixed; 
  z-index: 1000; 
  top: 0; 
  width:100%; padding:0px 0 4px 0; 
  /*border-bottom: 1px solid #ddd; */
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  overflow:auto;  color:#999; background:#fff; 
}
nav .main-container { padding: 7px 10px 3px 18px; max-width: none; }
/*nav .main-container { padding: 7px 10px 3px 10px; max-width: 980px; }*/
nav .logo { float:left;padding:8px 10px 8px 0; margin-right: 10px; }
nav .logo img { height: 40px; width:auto; opacity:0.8; }
nav .logo:hover img { opacity:1;}
nav a.hq { float:left; padding:9px 10px; margin: 10px 10px 0 0px; border:1px solid #aaa; color: #999; font-size: 20px; font-weight: 600; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
nav a.admin i { 
  margin-right: 6px;
}
nav .admin-container { 
  float:right; 
}
nav a.admin { 
  float:right; 
  padding:7px 10px; 
  margin: 10px 10px 0 0px; 
  border:1px solid #ccc; 
  color: #999; 
  font-size: 16px; 
  /*font-weight: 600; */
  border-radius: 3px; 
  /*box-shadow: 0 2px 6px rgba(0,0,0,.1); */
}
nav a.admin:hover { 
  color: #000;
}
/*nav a.hq { font-family: "Slabo 13px", "Courier New", Courier, serif; float:left; padding:4px 10px 4px 10px; margin: 10px 10px 0 0px; border:1px solid #aaa; color: #999; font-size: 20px; font-weight: 600; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.1); }*/
nav a.hq:hover { color: #000; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
nav .title { float:left; text-transform:uppercase;  padding:2px 9px 2px 10px; color:#999; border:2px solid #ccc; margin: 4px 20px 4px 10px; font-size: 20px; }
/*nav .title { font-family: "Arbutus Slab", "Courier New", Courier, serif; }*/
nav .title { font-family: "Slabo 13px", "Courier New", Courier, serif; font-weight: 700 }
nav .title:hover { border-color: #bbb; background:#fff; }
nav .links { float:left; }
nav .links a { color:#aaa; font-weight:400; display:inline-block; padding:12px 20px; }
nav .links a:hover { color:#000; }
nav .links a.active { color: #000; font-weight: 600; }
nav .status { float:right; padding:16px 20px 12px 20px; }
nav .status .email {margin-right:10px;}
nav .status a.settings { color: #555; text-decoration:underline; margin-right:10px; }
nav .status a.sign-out { padding:6px 12px; border:1px solid #eee; border-radius:20px; color: #888; }
nav .status a.sign-out:hover { color:#000; }
nav .status a.sign-in { padding:6px 12px; text-decoration: none; color: #09f; font-size: 15px; }
nav .status a.sign-in:hover { color:#000; }
nav .status a.create-account { padding:5px 12px; font-size: 15px; color: #fff; text-decoration: none; font-weight: 400; }


.page-station-index { }
.page-station-index h1 { font-size: 32px; text-align:center; font-weight: 600; margin: 0 0 60px 0; }
.page-station-index .station-icon { font-size: 50px; text-align:center; font-weight: 600; margin: 60px 0 30px 0; color: rgba(0,0,0,.1); }
/*.page-station-index .station-icon { font-size: 32px; text-align:center; font-weight: 600; margin: 60px 0 30px 0; color: #ddd; text-shadow: 0 2px 4px rgba(0,0,0,.3) inset; }*/

.places-container { max-width: 860px; margin: 40px auto 40px auto; }
.places-outer { text-align:center; }
.place-block { text-align:center; background:#fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  /*border: 1px solid #ddd;*/
   border-radius: 4px; max-width: 370px; margin: 0 auto 30px auto; }
.place-block h4.header { border-bottom: 1px solid #ddd; padding: 14px 20px; font-size: 22px; font-weight: 600; margin: 0 0 14px 0; }
.place-block .body { padding: 16px 22px 28px 22px; }
.place-block .body a.main { padding: 8px 17px; border:2px solid #ccc; border-radius: 8px; display:inline-block; color: #888; margin: 0 0 18px 0; font-size:18px; }
.place-block .body a.main:hover { border-color: #aaa; color: #555; }
.place-block .body a.main.website { border:2px solid #2bcf7b; color: #2bcf7b;  }
.place-block .body a.main.website:hover { border-color: #23a874; color: #23a874; }
.place-block .body p.what { border-bottom: 0px solid #ddd; padding: 0 0 0px 0; margin: 0 0 30px 0; color: #888; font-size: 16px; }
.place-block .body a.action { display: block; margin: 0 0 12px 0; font-size: 16px; }




.main-container { margin: 0 auto; padding: 0 0px; max-width:1000px ;}




#page-home .stations {  padding:30px;  }

#page-home .station-in-progress { max-width: 400px; margin: 0 auto; }

#page-home .station { margin:0 auto 40px auto; max-width:700px;  }
#page-home .station .top { margin:0 0 0px 0; padding:10px; border-radius:6px 6px 0 0; background:#fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); z-index:3; position:relative;}
#page-home .station .top h4 { float:left; margin:0; padding: 8px 12px; font-size:24px; font-weight:600 }
#page-home .station .top h4 a {color:#000}
#page-home .station .top .address_and_info { float:left; clear:left; margin: 4px 0 10px 12px }
#page-home .station .top .address_and_info a { color:#000; }
#page-home .station .top .address_and_info a.edit{ color: #bbb; font-size:14px; margin:0 0 0 20px; }
#page-home .station .top .address_and_info a.edit:hover { color: #000; text-decoration:none; }
#page-home .station .top .edit:hover { color: #000; text-decoration:underline; }
#page-home .station .top .go-to { float:right; border-radius:20px; padding: 8px 12px; color: #fff; background:#999; margin: 0 0 0 10px; transition: all .5s}
#page-home .station .top .go-to:hover { background:#555; }
/*#page-home .station .top .go-to { float:right; border-radius:20px; border:1px solid #ddd; padding: 8px 12px; color: #888; margin: 0 0 0 10px}*/
/*#page-home .station .top .go-to:hover { color: #000; }*/


#page-home .station .details { margin:0 0px 10px 0; padding:50px; border:2px solid #ddd; border-radius:0 0 6px 6px; text-align:center; background:#eaeaea}

#page-home .station .detail { color:#000; display:block; border-radius:6px; border:1px solid #d7d7d7; max-width:500px; margin:0 auto 10px auto; text-align:left; padding:10px 20px; font-size:18px; }
#page-home .station .detail:hover {border-color:#bbb}
#page-home .station .detail:hover .title {color:#000 !important;}
#page-home .station .detail.open {border:2px solid #ddd; border-bottom-width:1px; border-radius:6px 6px 0 0; background:#fff; }
#page-home .station .detail.open .top {padding:9px;}

#page-home .station .detail .arrow { color: #999; display:block; float:right; font-size:18px; padding:5px}
#page-home .station .detail .arrow.expand {display:none}
#page-home .station .detail:hover .arrow.expand {display:block}
#page-home .station .detail .arrow.expanded {display:none}
#page-home .station .detail.open .arrow.expand {display:none}
#page-home .station .detail.open .arrow.expanded {display:block}

#page-home .station .starter-files {margin:14px 0 0 0; text-align:center; font-size:13px;}

#page-home .station .instructions { background:#fff; border-radius: 0 0 6px 6px; border:2px solid #ddd; border-top:0; max-width:500px; margin:-10px auto 10px auto; text-align:left; padding:20px 20px 20px 20px; font-size:18px;
  display:none;
}
#page-home .station .instructions h4 { font-weight: 600; font-size: 18px}
#page-home .station .instructions li { font-size:14px; }


#page-home .station .instructions p.stripe-webhook { margin: 0 0 0px 0 }
#page-home .station .instructions form { margin: 30px 0 0 0 }
#page-home .station .instructions .submit { margin-top: 20px }
#page-home .station .instructions .form-group label {color:#999}
#page-home .station .instructions .question { margin:20px 0; text-align:center; font-size:14px; display:none; }
#page-home .station .instructions .invisible-spacer {height:14px}
#page-home .station .instructions .test-message { display:none; margin:0px 0 20px 0; padding:6px 20px; text-align:center;  border:1px solid #ddd; background:#eee; border-radius:4px; font-size:14px; line-height:180%}
#page-home .station .instructions .test-message .success {font: 34px 'Yellowtail'; color: #0a4;}

body.cfm-stream-playing #page-home .station .instructions .question { display:block; }


#page-home .station #settings_design {text-align: center;}
#page-home .station #settings_design p {margin:20px 0 20px 0;}


#page-home .station .detail { background:none; }
#page-home .station .detail .title { color:#555; }
#page-home .station .detail.done {  }
#page-home .station .detail.done .title { color: #0a3; }
#page-home .station .detail.needed { background:#fff; }
#page-home .station .detail.needed .title { color: #f80 }

#page-home .station .detail.done .title_no { display:none; }
#page-home .station .detail.done .title_yes { display:inline; }
#page-home .station .detail.needed .title_no { display:inline; }
#page-home .station .detail.needed .title_yes { display:none; }

#page-home .station .detail h4 { font-size:22px; display:inline-block; margin:0 20px 0 0; font-weight:600; }
#page-home .station .details .icon {margin:-0px 18px 0px 0; font-size:28px; display:inline-block; vertical-align: middle;}
#page-home .station .details .more { margin:30px 0 0 0; font-size:14px; color:#999; }
#page-home .station .details .more a { color:#999; text-decoration:underline; }
#page-home .station .details .more a:hover { color:#000; }


#page-home .station .detail-s3 .icon {/*color:#987;color:#cb9;color:#07d*/color:#37d}
#page-home .station .detail-stream .icon {color:#0dd}
#page-home .station .detail-stripe .icon {color:#0c0}
#page-home .station .detail-invite .icon {color:#1b8; margin-top:-6px}
#page-home .station .detail-design {padding-bottom:7px;}
#page-home .station .detail-design .icon {color:#3ac; margin-top:-5px}


#page-home .create { margin: 0 auto 30px auto; text-align:center; max-width:300px;}




#page-create-station form {margin:20px auto 50px auto; }
#page-create-station h3 { margin:0 0 40px 0; text-align:left; }
#page-create-station .domain-help { text-align:left; }
#page-create-station .submit { text-align:left; margin:30px auto 60px auto; }

#create-station-button {padding:5px 12px; font: 32px 'Damion'; color:#333; display:inline-block; background: #fff; width:auto; border:3px solid #fff; border-radius: 6px; box-shadow: 0 0 20px rgba(0,0,0,.2), 0 3px 0px #0ba; transition: background 0.4s;}
#create-station-button:hover { background:#fff; transition: background 1s; box-shadow: 0 0 20px rgba(0,0,0,.2), 0 2px 0px #0ba; margin-top:1px; cursor:pointer; }
#create-station-button:active {background:#fff; transition: background 1s; box-shadow: 0 0 20px rgba(0,0,0,.2); margin-top:3px; outline:none}
#create-station-button.disabled {background:#ddd; border-color:#fff; box-shadow: 0 0 20px rgba(0,0,0,.2), 0 3px 0px #aaa;}



#page-creating-station .creating-station { background:#fff; padding:30px; margin:50px auto 0px auto; max-width:600px; text-align:center; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);}
#page-creating-station .creating-station .title { font: 40px 'Damion'; }
#page-creating-station .creating-station .fa { font-size: 42px; margin:10px 0 0 0; }

#page-creating-station .explain { font: 14px 'Open Sans'; color: #999; margin:10px 0 0 0; }


#page-creating-station #done { display:block; padding:20px; margin:0px auto 50px auto; line-height:240%; max-width:600px; text-align:center; border:1px solid #ddd; background:#e5e5e5; }
#page-creating-station #done .title { font: 34px 'Damion'; }
#page-creating-station #done .fa { font-size: 42px; margin:10px 0 0 0; }


#page-card-edit {  }
#page-card-edit .box { max-width: 400px; }


#page-billing { margin:0px 0 0 0; }
#page-billing a.other-methods { font-size:14px; color:#bbb; }
#page-billing .other-methods-box { font-size:14px; padding:10px 20px; border:1px solid rgba(0,0,0,.16); margin: 20px 0 0 0;}
#page-billing .other-methods-box p { margin: 5px 0;}


#page-billing .invoices-container { font-size:16px; margin: 0 0 40px 0; }
#page-billing table.invoices { font-size:16px;  }
#page-billing table.invoices td { }
#page-billing table.invoices th {  }

#page-billing .message { padding:20px 20px 30px 20px; font-size:18px; text-align: center; }
#page-billing .message h4 { margin: 0 0 15px 0; }
#page-billing .message h4.good { color: #0c9; font-weight:600 }
#page-billing .message p.note { color: #888; }
#page-billing .trial { margin:0 0 30px 0; padding:8px 12px; text-align:center; max-width:none; }
#page-billing #select-payment { font-size: 14px; color: #777; padding: 5px; text-align: center; }


/*.card-box .inner { background:#fff; border:1px solid #ccc; border-bottom:3px solid rgba(0,0,0,.25); box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius:6px; padding:26px 34px; float:left; margin:0 20px 20px 20px; line-height:200%}*/
.card-box { overflow: auto; float:left; margin:0 20px 40px 0px; line-height:150%; width: 340px; max-width:100%;}
/*.card-box .inner { float:left; margin:0 20px 20px 20px; line-height:200%}*/
.card-box h3 { font-size: 18px; margin:0 0 20px 0 }
.card-box h3 button { float:right; }
.card-box .number { color: #333; font-size:18px; margin: 0 0 20px 0px; }
.card-box .modify { color: #999; font-size:14px; margin-bottom: 20px; }
.card-box .modify a { color: #999; text-decoration:underline; }
.card-box .modify a:hover { color: #000; }
.card-box .stripe { color: #999; font-size:14px; white-space: nowrap; margin: 0; }

#card-added { margin: 30px; text-align:center; padding: 20px 20px 30px 20px; }
/*#card-added { margin: 30px; text-align:center; background: #fff; padding: 20px 20px 30px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 4px; }*/
#card-added h4 { padding: 10px 0; font-size: 32px; }
#card-added p { font-size: 22px; margin-bottom: 40px; }
#card-added .amount { margin: 0 0 20px 0;}
#card-added .cancel-container { margin:10px 0 0 0; }
#card-added .cancel { color:#999; text-decoration:underline; font-size: 14px; }
#card-added .cancel:hover { color:#000; }



#card-edited { margin: 0 auto; text-align:center;}
#card-edited .amount { margin: 0 0 20px 0;}

.box .cancel-container { margin:10px 0 0 0; }
.box .cancel { color:#999; text-decoration:underline; font-size: 14px; }
.box .cancel:hover { color:#000; }

.spacer { height: 80px; }

.ui.spacer { height: 50px; }


.page-padded {
  padding:20px;
}

.page-padded .admin-page-header {
  padding: 0 0 20px 0;
  overflow: auto;
}


#page-card-thanks .box { padding:24px 20px; max-width:250px;  }
#page-card-thanks h2 { margin: 0 0 16px 0; }
#page-card-thanks p.back {font-size: 20px; font-weight: 600; margin: 0}

#page-subscription-cancel .box { padding:20px 24px; max-width:450px;  }
#page-subscription-cancel h4 { font-weight: 600; margin: 0 0 20px 0}

#page-subscription-cancel .cancel-button { }
#page-subscription-cancel .submit { margin:20px 0 10px 0; }


#page-support .box { padding:40px 24px 60px 24px; max-width:800px; border:0; margin: 0 auto; }
#page-support .box h2 { margin: 0px 0 40px 0; padding: 0 0 20px 0; border-bottom: 1px solid #ddd; font-weight: 600 }
#page-support .box h3 { margin: 0px 0 30px 0; font-weight: bold }
#page-support .box .icon {font-size:28px; margin: 0 0 24px 0; }
#page-support .box .the-button { margin: 0 0 20px 0; }
#page-support .box .the-button a {font-size: 24px; font-weight:600; display:inline-block; padding:8px 14px; border:2px solid rgba(0,0,0,.1); border-radius:4px;}
#page-support .box h4 {padding: 0 0 10px 0;}
#page-support p.more { font-size:14px; color:#999; margin:40px 0 0px 0 }
#page-support p.more .arrow { margin:0 0 0 10px; }
#page-support p.more .fa { color: #bbb }

#page-sign-in { margin: 30px 0 0 0; }
#page-sign-in .forgot { font-size:14px; color:#999; }

#page-reset-password { margin: 30px 0 0 0; }


#page-register { margin: 30px 0 0 0; }
#page-register h3 { margin: 0px 0 10px 0; }
#page-register p.intro { color: #777; margin: 0 0 20px 0; font-size: 16px }
#page-register .help1 { color:#555; }
#page-register .help2 { color:#555; margin:0; }
#page-register .help2 span.grey { color:#999; }
#page-register .submit { margin: 30px 0 0 0; }


.hello-try h1 {font: 40px 'Damion'; color: #fff;}
.hello-try {
  background: url('https://unsplash.imgix.net/44/C3EWdWzT8imxs0fKeKoC_blackforrest.JPG?q=75&fm=jpg&s=871d9503e2cbec376305a97d64ff3b23') center center;
  padding: 20px 40px;
  text-align: center;
  margin: 0px 0px 30px;
  color: #FFF;
}
.hello-try a { color: #ffc; text-decoration: underline; }





#page-station-domain { padding: 30px 0 0 0; }
#page-station-domain .box {max-width:580px; padding:30px; margin:0 auto; text-align:left;}
#page-station-domain h1 {font-size:22px; margin: 0px 20px 30px 0px;}
#page-station-domain ul {padding:0;margin:0; list-style:none;}
#page-station-domain li {padding:0;margin:0;}
#page-station-domain form {margin:30px 0;}
#page-station-domain input {max-width:400px;}
#page-station-domain .submit {margin: 20px 0}
#page-station-domain .go_back {margin:30px 0 0 0;}
/*#page-station-domain .current { padding:6px 10px; margin:30px 10px 10px -10px; display:block; border:1px solid #ddd; }*/


#page-station-archiver {}
#page-station-archiver .box {max-width:580px; padding:30px; margin:0 auto; text-align:left;}
#page-station-archiver h1 {font-size:22px; margin: 10px 0 30px 0;}
#page-station-archiver form {margin:30px 0;}
#page-station-archiver input {max-width:400px;}
#page-station-archiver .submit {margin: 20px 0}
#page-station-archiver .go_back {margin:30px 0 0 0;}





/* admin */

table.main {background:#fff; font-size:16px;}
table.main tr:hover td {background:#f6f6f6;}



.admin-toolbar { margin:0 0 30px 0; border-bottom:1px solid #ddd; padding-bottom: 20px;}



#page-tools .tools-container { text-align:center; padding: 50px 0 40px 0;  }
#page-tools .tools-container h2 { font-size:38px; text-align:center; color: #555; padding: 0 0 16px 0; margin: 0 0 12px 0; border-bottom:0px solid #c5c5c5;  }
#page-tools .tools-container p.explain { font-size:16px; text-align:center; color: #888; padding: 0 20px 16px 20px; margin: 0 0 20px 0; }
#page-tools .tools-container .tools-spacer { height:1px; border-bottom: 1px solid rgba(0,0,0,.1); margin-bottom: 40px; }
#page-tools .tools-container .no-tools { padding:10px 20px; border:1px solid #ddd; border-radius:10px; display:inline-block; font-size: 16px; color: #999 }
#page-tools .tools-container h3 { font-size:28px; text-align:center; color: #555; padding: 0 0 20px 0; margin: 0 0 20px 0; }
#page-tools .tool { background:#fff; box-shadow: 0 3px 8px rgba(0,0,0,.1); display:inline-block; vertical-align:top; width:340px; padding: 30px 26px 0px 26px; border-radius:4px; margin: 0 15px 30px 15px; min-height:300px; }
#page-tools .tool h4 { font-size:20px; font-weight:600; margin: 0 0 14px 0; }
#page-tools .tool .short-description { color:#999; font-size:16px; margin: 0 0 18px 0; line-height: 150%; }
#page-tools .tool .price { display:inline-block; border:1px solid #ddd; padding:8px 18px; border-radius:30px; color: #777; margin: 0 0 10px 0; font-size: 16px; }
#page-tools .tool .price.free { font-weight: 600; color: #0b8; border-color: #4d9 }
#page-tools .tool .price-additional { color: #999; margin: 0 0 20px 0; font-size: 13px; }
#page-tools .tool .price-container { margin: 0 0 6px 0; }
#page-tools .tool .links-container { margin: 0 0 20px 0; }
#page-tools .tool .links { color:#ccc; }
#page-tools .tool .links a { margin:0 8px; color: #999; text-decoration: underline; font-size: 16px; }
#page-tools .tool .links a:hover { color: #555; }
#page-tools .tool .dependencies { margin: 20px 0 20px 0; line-height:150%; }
#page-tools .tool .dependencies span.needs { display:inline-block; margin: 0 10px 0 0; border:1px solid #ccc; padding:0 5px; text-transform: uppercase;  color:#999; font-size: 13px; }
#page-tools .tool .dependencies a.dependency { display:inline-block; margin: 0 10px 0 0; font-size: 13px; color: #777;  }
#page-tools .tool .dependencies a.dependency:hover { color: #444;  }
#page-tools .tool a.settings-needed { display:block; background: #ffc; padding: 5px 10px; border:1px solid #dd9; font-size: 13px; margin: 20px 0 20px 0; border-radius: 4px; color:#555; display:block; }
#page-tools .tool a.settings-needed:hover { border:1px solid #cc8; color: #000; }

#page-tools .tools-container .tools-enabled-container { margin: 0 0 50px 0; }
#page-tools .tool .button-enable { display:block; font-size: 17px; }
#page-tools .tool .button-disable { display:none;}
#page-tools .tools-container .tools-enabled-container .tool .button-enable { display:none;}
#page-tools .tools-container .tools-enabled-container .tool .button-disable { display:block; }

.welcome-box { background:#fff; border-bottom: 1px solid #e5e5e5; margin: 0 0 30px 0; }
.welcome-box .inner { max-width: 880px; padding: 70px 50px 50px 50px; margin: 0 auto 0px auto; }
.welcome-box h4 { color: #987; font-size: 22px; margin:0 0 20px 0; font-weight: 600; }
.welcome-box p { color: #987; font-size: 18px; margin:0 0 10px 0; }
.welcome-box .guides { margin: 10px 0 10px 0 }
.welcome-box .guides li { color: #0ad; margin: 0 20px 0 0; }
.welcome-box .guides li a { color: #0ad; font-size: 18px;  }
.welcome-box .guides li a:hover { color: #000;  }
.header-spacer { margin: 0 auto 40px auto; }

#tool-confirmation-modal.confirm-disable .message-enable { display:none }
#tool-confirmation-modal.confirm-enable .message-disable { display:none }

#tool-dependencies-modal.confirm-depended-on-by .depends-on { display:none !important }
#tool-dependencies-modal.confirm-depends-on .depended-on-by { display:none !important }

.tool-enable-container { background:#fff; box-shadow: 0 3px 8px rgba(0,0,0,.1); max-width:600px; padding:40px; text-align:center; margin: 30px auto 40px auto; }
.tool-enable-container h1 { margin: 0 0 30px 0 }
.tool-enable-container .the-tool { font-size: 24px; color: #555; border: 1px solid #ddd; padding: 10px 20px; margin: 0 0 30px 0; }
.tool-enable-container .price { font-size: 18px; color: #555; margin: 0 0 20px 0; }
.tool-enable-container .price-additional { font-size: 16px; color: #999; margin: 0 0 30px 0; }
.tool-enable-container .submit-container {text-align:center; margin: 40px 0 0 0; }
.tool-enable-container .cancel-container {text-align:center; margin: 20px 0 0 0; }
.tool-enable-container .cancel-container a { color: #999; text-decoration: underline; }
.tool-enable-container .cancel-container a:hover { color: #555; }

.all-enabled { font-size: 17px; color: #777; border: 1px solid #ccc; padding: 10px 20px; margin: 0 0 30px 0; border-radius: 20px; display:inline-block; }

.tool-settings-container { background:#fff; box-shadow: 0 3px 8px rgba(0,0,0,.1); max-width:600px; padding:40px; text-align:left; margin: 30px auto 40px auto; }
.tool-settings-container h1 { margin: 0 0 30px 0 }
.tool-settings-container .cancel-container { margin: 20px 0 0 0; color:#999;  }
.tool-settings-container .cancel-container a { color: #999; text-decoration: underline; }
.tool-settings-container .cancel-container a:hover { color: #555; }
.tool-settings-container form { margin:30px 0 30px 0; }
.tool-settings-container .submit-container { margin:20px 0 20px 0; }
.tool-settings-container .test-message { display:none; margin:0px 0 20px 0; padding:6px 20px; text-align:center;  border:1px solid #ddd; background:#eee; border-radius:4px; font-size:14px; line-height:180%}
.tool-settings-container .test-message .success {font: 34px 'Yellowtail'; color: #0a4;}
.tool-settings-container .question { margin: 20px 0 40px 0; text-align:left; font-size:14px; }




/* ------------------------------------------ */
/* ------------------------------------------ */
/* ------------------------------------------ */



.page-beta { text-align:center; }
.page-beta .center { padding: 70px 0; }
.page-beta .confirmation { padding: 0 10px; }
.page-beta p.large { font-size: 24px; color: #555; margin: 0 0 20px 0; max-width:450px; margin: 0 auto 20px auto; }
.page-beta h1 { color: #20C791; font-weight: 400; margin: 0 0 20px 0; font-size: 3em }
.page-beta .center2 h1 { color: #20C791; font-weight: 400; margin: 0 0 20px 0; font-size: 32px; }
.page-beta h3 { margin: 0 0 30px 0; }
.page-beta .email { font-size: 22px; color: #777; border:1px solid #ccc; padding: 10px 20px; display:inline-block; margin:0 0 20px 0; border-radius: 10px; background: #fff; }
.page-beta p.check { font-size: 18px; color: #777; margin: 0 0 30px 0; }
.page-beta p.check { max-width: 360px; margin: 0 auto 20px auto; line-height:180%; }
.page-beta p.small { font-size: 14px; color: #bbb; margin: 0 0 20px 0; }
.page-beta p.small a { color: #bbb; text-decoration: underline; }
.page-beta p.small a:hover { color: #000; }

.creek-survey { padding: 0 15px }

.page-beta .input { margin: 0 auto 10px auto; max-width:500px; }
.page-beta .update-station-info { margin: 0 0 30px 0; border-color:#ccc; color: #888 }
.page-beta #survey-container #survey { display:none; }
.page-beta #survey-container .update-station-info .open-text { display:none; }
.page-beta #survey-container .update-station-info .closed-text { display:block; }
.page-beta #survey-container.open #survey { display:block; }
.page-beta #survey-container.open .update-station-info .open-text { display:block; }
.page-beta #survey-container.open .update-station-info .closed-text { display:none; }
.page-beta #survey p { color:#999; font-size: 20px; margin: 0 auto 20px auto; max-width: 500px }
.page-beta #survey label { color:#999; font-size: 18px; margin: 10px auto 10px auto; max-width: 500px }
.page-beta #survey h3 { font-size: 28px; margin: 20px auto 30px auto; max-width: 500px }
.page-beta #survey h4 { font-size: 22px; margin: 20px auto 30px auto; max-width: 500px; color:#777 }

.page-beta input, .page-beta  textarea { width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    padding: 10px 20px; font-size: 18px; border:2px solid #ddd; margin: 0 0 20px 0;}
.page-beta textarea { height:150px; }
.page-beta .submit { margin: 30px 0 100px 0;  }
.page-beta .submit button { padding: 10px 20px; display:inline-block; border:2px solid #24CD90; color:#24CD90; background:#fff; border-radius: 8px; font-size: 18px; width:210px; font-weight:600; }
.page-beta .submit button:hover { border-width:3px; padding: 9px 19px; }
.page-beta .submit button:focus { outline:none; }


form .submit .saving-text { display:none; }
form .submit .saved-text { display:none; }
form.form-saving .submit .submit-text { display:none; }
form.form-saved .submit .submit-text { display:none; }
form.form-saving .submit .saving-text { display:inline; }
form.form-saved .submit .saved-text { display:inline;  }
form.form-saved .submit button { background: #24CD90; color:#fff; }


.page-activate { text-align:center; padding: 60px 20px }
.page-activate .center { padding: 70px 0; }
.page-activate p.large { font-size: 20px; color: #555; margin: 0 0 20px 0; max-width:600px; margin: 0 auto 30px auto; }
.page-activate p.small { font-size: 14px; color: #777; margin: 10px 0 20px 0; }
.page-activate h1 { color: #20C791; font-weight: 400; font-size: 30px; margin: 0 0 20px 0; }

.page-activate .input { margin: 0 auto 10px auto; max-width:500px; }

.page-activate input, .page-activate  textarea { width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    padding: 10px 20px; font-size: 18px; border:2px solid #ddd;
  text-align:center;
  }
.page-activate .submit { margin: 30px 0 100px 0;  }
.page-activate .submit button { display:inline-block; padding: 10px 20px; border:2px solid #24CD90; color:#24CD90; background:#fff; border-radius: 8px; font-size: 18px; }
.page-activate .submit button:hover { padding: 8px 18px; border-width:4px; }



.social-promote { background:#fff; border-radius: 10px; padding: 40px 20px; margin: 50px auto 0px auto;
/*.social-promote { background:#eee url('http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/ignasi_pattern_s.png'); border-radius: 10px; padding: 40px 20px; margin: 50px auto 0px auto;*/
  /*max-width: 800px; */
}
.social-promote p { color:#555; font-size:18px; margin: 0 auto; max-width:590px; line-height: 180%; }
.social-promote h2 { font-weight: 600; color:#444; margin: 0 0 20px 0; font-size: 32px; }
.social-promote .twitter-button-container { margin: 0 0 20px 0; }
.social-promote .twitter-button { border:4px solid #55acee; padding: 16px 30px; font-size: 24px; color:#55acee; border-radius:14px; }


#main-menu-button { font-size: 18px; border: 1px solid rgba(0,0,0,.1); padding:10px 16px; border-radius: 4px; margin: 4px 0 0 0; float:left; color:#777; }
#main-menu-button:hover { border-color: rgba(0,0,0,.2); color: #444; }
#main-menu-button .fa { margin-right: 4px; }

#main-menu { position:fixed; z-index: 99; max-width: 100%; width: 250px; 
  /*background: #fafafa;*/
  background: rgba(255,255,255,.76);
  /*box-shadow: 0 3px 7px rgba(0,0,0,.1); */
  box-shadow: 0 0 7px rgba(0,0,0,.1); 
  top:0; left: 0; height: 100%;
  /*border-right: 1px solid rgba(0,0,0,.2); */
  /*border-radius: 0 5px 5px 5px;*/
  /*border-right: 1px solid #e3e3e3;*/
  /*border-right: 1px solid #e3e3e3;*/
  overflow: auto;
}
#main-menu .inner { padding-top:80px; }
#main-menu a { display:block; padding:13px 25px 13px 18px; font-size: 16px; color: #333; }
/*#main-menu a { display:block; padding:15px 25px 15px 18px; border-bottom: 1px solid #eee; font-size: 18px; color: #000; }*/
#main-menu a .fa { margin-right: 8px; color:#999; display: inline-block; width: 30px; text-align:center; }
#main-menu a .count { margin-left: 8px; color:#999; display: inline-block; padding: 2px 8px; background: #eee; }
/*#main-menu a .count { margin-left: 8px; color:#999; display: inline-block; border-left: 1px solid #ccc; padding-left: 8px }*/
#main-menu a:hover { color: #444; }
#main-menu a:hover .fa { color: #444; }
#main-menu a:last-child { border:0; }

#main-menu .station { font-weight: 600; font-size: 20px; }
#main-menu .tools { font-weight: 600; font-size: 20px; }

#main-content { padding: 0px 0px 0px 250px; }

#main-content h1 { font-size: 30px; font-weight: 600; margin: 0; }
/*#main-content h1 { padding: 20px 0; font-size: 30px; font-weight: 600; margin: 0; }*/



@media screen and (max-width:768px) {
  div#main-menu { display: none; }
  div#main-menu-opener { display:block; }
  div#main-content { padding: 0; }

}