/*
 * File: hud.css
 * Date: 10-27-2015
 * Author: Rachel Simanjuntak, Jesus Noland
 */

html * {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 16px;
	border: none;
	text-decoration: none;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
}

#mobile-view-check {
  display: none;
  color: #000;
}

#hud-toggle {
	margin: 0 auto;
	background: #fff;
	text-align: center;
	display: block;
	padding: 1em 0;
	z-index: 100000;
}

 .blur {
 	filter: blur(10px);
 	-webkit-filter: blur(10px);
 	-moz-filter: blur(10px);
 	-o-filter: blur(10px);
 	-ms-filter: blur(10px);
 	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');

 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
 }

 #content {
 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
 }

 #positioner {
 	position: absolute;
 	width: 100%;
 	top: 50%;
 	transform: translate(0, -50%);
 	-webkit-transform: translate(0, -50%);
 	-moz-transform: translate(0, -50%);
 }

 .build-centered {
 	position: absolute;
 	left: 50%;
 	top: 25%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
 }

 .centered {
 	position: absolute;
 	width: 100%;
 	height: auto;
 	display: inline-block;
 	left: 50%;
 	top: 47%;
 	transform: translate(-50%, -50%);
 	-webkit-transform: translate(-50%, -50%);
 	-moz-transform: translate(-50%, -50%);
 }

 #litpen-logo {
 	width: 50px;
 	height: 50px;
 	position: fixed;
 	top: 25px;
 	left: 25px;
 	z-index: 9;
 	background-color: #00d2bd;
 	transition: all .15s ease;
 	-webkit-transition: all .15s ease;
 	-moz-transition: all .15s ease;
 	-ms-transition: all .15s ease;
 }

 #litpen-logo:hover {
 	background-color: #1eb4d2;
 	transition: all .15s ease;
 	-webkit-transition: all .15s ease;
 	-moz-transition: all .15s ease;
 	-ms-transition: all .15s ease;
 }

 #litpen-logo img {
 	width: 100%;
 }

#hud-litpen-logo {
	width: 50px;
	height: 50px;
	position: fixed;
	top: 25px;
	left: 25px;
	z-index: 9;
	background-color: #00d2bd;
	transition: all .15s ease;
	-webkit-transition: all .15s ease;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
}

 #hud-litpen-logo:hover {
 	background-color: #1eb4d2;
 	transition: all .15s ease;
 	-webkit-transition: all .15s ease;
 	-moz-transition: all .15s ease;
 	-ms-transition: all .15s ease;
 }

 #hud-litpen-logo img {
 	width: 100%;
 }

 #build_brainstorm_title {
 	text-align: center;
 	font-size: 1.25em;
 	margin-top: 40px;
 }
 
 #build_brainstorm_title_extra {
   display: none;
 }

 .brainstorm_title_editable {
 	cursor: text;
 }
 
 .brainstorm_title_editable:hover {
     border: 0;
     outline: dashed 1px;
 }

 #close-button {
 	color: #fff;
 	position: fixed;
 	z-index: 100000;
 	top: 25px;
 	right: 25px;
 	width: 50px;
 	height: 50px;
 	cursor: pointer;
 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
 }

 #close-button span {
 	top: 45%;
 	font-size: 1.2em;
 }

 #close-button:hover {
 	background-color: #00d2bd;
 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
 }

 #hud {
 	position: fixed;
 	z-index: 100000;
 	text-align: center;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background-color: rgba(0, 28, 33, .8);
 	display:none;

 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
 }

 #hud.open {
 	display: block;

 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
 }

ul {
    list-style-type: none;
}
 
.hud_new_brainstorm {
    cursor: pointer;
}

#hud_new_brainstorm {
 	position: fixed;
    top: 25px;
    right: 25px;
    font-size: .75em;
    color: #fff;
    z-index: 9;
    padding: .5em 1em;
    border: solid 2px #fff;
    background-color: rgba(255, 255, 255, .2);
    
    transition: all .15s ease;
	-webkit-transition: all .15s ease;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
}

#hud_new_brainstorm:hover {
    cursor: pointer;
    
    transition: all .15s ease;
	-webkit-transition: all .15s ease;
	-moz-transition: all .15s ease;
	-ms-transition: all .15s ease;
}

li#new_brainstorm:hover {
 	background-color: #00d2bd;
 	border-color: #00d2bd;

 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
 }

 ul.rows {
 	max-height: 200px;
 	overflow-y: auto;
 }

 #analytics, #search {
 	position: relative;
 	width: 48%;
 	text-align: center;
 	display: inline-block;
 	vertical-align: top;
 	height: 100%;
 	color: #fff;
 }

 #analytics li {
 	width: 200px;
 	height: 200px;
 	position: relative;
 	margin: 1em;
 	font-size: 1em;
 	display: inline-block;
 	vertical-align: top;
 	background-color: rgba(223, 244, 249, .1);
 	border: solid 10px white;
 	border-radius: 50%;
 	-webkit-border-radius: 50%;
 	-moz-border-radius: 50%;
 	-ms-border-radius: 50%;
 }

 #analytics li .value {
 	font-size: 3.5em;
 	display: block;
 	width: 100%;
 	line-height: 1em;
 }

 #search-field {
 	background: transparent;
 	outline: 0;
 	border: 0;
 	font-size: 1.4em;
 	display: inline-block;
 	vertical-align: top;
 	border-bottom: solid 1px #fff;
 	padding-bottom: .25em;
 	margin: 1em 0;
 }

 #go-button {
 	background: rgba();
 	color: #fff;
 }

 #search-bar,
 #search ul {
 	width: 87%;
 }

 #search-bar {
 	display: inline-block;
 	position: relative;
 }

 #search input {
 	width: 100%;
 	color: #fff;
 }

 #search input[type="submit"] {
 	background-color: #00d2bd;
 	padding: .5em 0 .75em;
 	width: 15%;
 	cursor: pointer;
 	position: absolute;
 	top: .5em;
 	right: 0;

 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
 }

 #search input[type="submit"]:hover {
 	width: 17%;

 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
 }

 ::-webkit-input-placeholder {
 	color: #fff;
 }

 :-moz-placeholder { /* Firefox 18- */
 	color: #fff;
 }

 ::-moz-placeholder {  /* Firefox 19+ */
 	color: #fff;
 }

 :-ms-input-placeholder {
 	color: #fff;
 }

 #search {
 	text-align: left;
 }

 #search ul {
 	font-weight: 100;
 	margin-bottom: 2em;
 	text-align: left;
 	display: inline-block;
 }

 #search li {
 	margin: .75em 0;
 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
 }

 #search li:hover {
 	color: #00d2bd;
 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
 }

 #search li a {
 	font-size: inherit;
 	color: inherit;
 	display: inline;
 }

 #current_brainstorm_data {
 	display: none;
 }

 li.planet {
 	background-color: #1eb4d2;
 	font-size: 3em;
 	color: #fff;
 	padding: 10px 20px;
 	margin: 5px 5px;
 	display: inline;
 }

 li.planet a {
 	color: #fff;
 }

 #map-output{
 	width: 90%;
 	max-width: 800px;
 }

 #map-output #back {
 	border: solid 2px #1eb4d2;
 	padding: .5em 1.5em;
 	margin-bottom: 2em;
 	display: inline-block;
 	text-decoration: none;
 	color: #1eb4d2;
 	background-color: #fff;
 }

 #map-output #back:hover {
 	background-color: #1eb4d2;
 	color: #fff;
 }

 #map-output .body, #map-output .subject {
 	position: relative;
 	display: block;
 	width: 100%;
 	color: #010708;
 }

 #map-output .subject {
 	font-size: 2em;
 	font-weight: 400;
 	line-height: 1.5em;
 }

 #map-output .body {
 	margin-bottom: 2em;
 	line-height: 2em;
 }

 #build-back {
 	color: #00d2bd;
 	font-size: 0.9em;
 	position: fixed;
 	left: 100px;
 	top: 40px;

 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
 }

 #build-back:hover {
 	color: #1eb4d2;

 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
 }

#hud-logout {
 	color: #fff;
 	font-size: 0.9em;
 	position: absolute;
    top: 40px;
    left: 100px;
    z-index: 9;

 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
}

#hud-logout:hover {
	color: #00d2bd;

	transition: all .25s ease;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
}

#hud-logout-first {
 	color: #fff;
 	font-size: 0.9em;
 	position: fixed;
    top: 25px;
    left: 25px;
    z-index: 9;

 	transition: all .25s ease;
 	-webkit-transition: all .25s ease;
 	-moz-transition: all .25s ease;
 	-ms-transition: all .25s ease;
}

#hud-logout-first:hover {
	color: #00d2bd;

	transition: all .25s ease;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
}

#autosave {
	color: #00d2bd;
	position: fixed;
	width: 250px;
	height: 25px;
	font-size: 1.5em;
	padding: .25em .35em;
	left: 5px;
	bottom: 15px;
	z-index: 9;
}

#autosave_datetime {
	color: #00d2bd;
	padding: 0 .25em;
}

#autoload {
	color: #00d2bd;
	position: fixed;
	width: 250px;
	height: 25px;
	font-size: 4.5em;
	padding: .25em .35em;
	left: 40%;
	bottom: 200px;
}

.hidelement {
  visibility: hidden;
}

 @media only screen and (max-width: 960px) {

 	#analytics {
 		display: none;
 	}

 	#search {
 		width: 100%;
 		text-align: center;
 	}
 }

 @media only screen and (max-width: 400px) {
 	#positioner {
 		position: relative;
 		top: initial;
 		left: initial;
 		margin-top: 75px;
 		transform: translate(0, 0);
 	}

 	#search input[type="submit"] {
 		width: 100%;
 		position: relative;
 		margin-bottom: 2em;
 	}

 	#search-field {
 		margin-bottom: 0;
 	}
  
  #build_brainstorm_title {
    display: none;
  }
  
  #build_brainstorm_title_extra {
    display: block;
    font-size: 2.5em;
    padding: 0 0 10% 0;
  }
  
  #mobile-view-check {
    display: none;
    color: #fff;
  }
  
  #autoload {
  	color: #00d2bd;
  	position: fixed;
  	width: 0%;
  	height: 25px;
  	font-size: 4.5em;
  	padding: 0;
  	left: 40%;
  	bottom: 200px;
  }
 }