/*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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
sub {
    vertical-align: sub;
    font-size: smaller;
}
sup {
    vertical-align: super;
    font-size: smaller;
}

b, strong {
	font-weight:bold;
}

i {
	font-style: italic;
}

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

	GENERIC

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

html {
	overflow-y:none;
}

body, html {
	font-family:Arial;
	width:100%;
	height:100%;
	background-color:#EEF1F3;
	font-size:1vw;
}

hr {
	border:0;
	height:2px;
	background-image:linear-gradient(to right, #FFF, #888, #FFF);
	margin:2.8vh auto 1vh auto;
}

h1 {
	font-size:4vw;
}

h2 {
	font-size: 2.5vw;
}

h3 {
	font-size: 1.5vw;
}

smaller {
	font-size:60%;
}

a {
	color: #3094B4;
	font-weight:bold;
	text-decoration:none;
}

input {
	font-size:1vw;
	padding:.75vh 1%;
	width:98%;
}

input[type="radio"] {
	margin-right:1vw;
	width:1vw;
	height:1vw;
}

input[type="checkbox"] {
	width:1vw;
	height:1vw;
}

input[type="number"] {
	width:25%;
}

input.objectCB {
	margin-left:1vw;
	width:1.3vw;
	height: 1.3vw;
}

select {
	font-size: .9vw;
	padding:.75vh 1%;
	mex-width:98%;
}

div {
	display:inline-block;
}

label {
	font-size:110%;
	font-weight:bold;
}

.hamburger {
	height:1.5vh;
	margin-right:1.2vw !important;
}

.textList {
	width:98%;
	user-select:none;
}

.textList a {
	font-size:80%;
	cursor:pointer;
	
}

.textList input {
	margin:1vh 0 0 .5vw;
	width:90%;
}

.areaInput {
	width:100%;
	height:10vh;
}

.dateInput, .timeInput, .textList .timeInput {
	width:23%;
}

.sMediaPreview {
	margin-top:10px;
	max-width:50%;
}

.sMediaPreview img{
  max-width:10vw;
}

.flipArrow {
	margin-left:.5vw;
	height:1.5vh;
}

.imgFlipV {
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
	filter: FlipV;
	-ms-filter: "FlipV";
}

.client {
	background-color: #3094B4;
	color: white;
	padding: 4vh 4vw;
	border-radius: 1vw;
	margin: 2vw;
	font-size: 2vh;
	cursor:pointer;
}

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

	BUTTONS

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

.button {
	color:white;
	font-weight:bold;
	box-shadow:2px 3px 2px #AAA;
	margin:1.2vw;
	padding:1vh 1vw;
	border-radius:.2vw;
	cursor:pointer;
	background-color:#3094B4;
}

.media-table .button {
	font-size:.8vw;
	margin:1.5vh .5vw 0 0;
}

.edit-footer .button {
	width:10vw;
	padding:1vw 0;
}

.cancel {
	background-color:#666666;
}

.add-new, .delete-all, .bulk-add {
	float:right;
	margin:1.5vh 1.2vw;
}

.delete-all {
	display:none;
}

.account-link {
	float:right;
	padding:2.3vh 3vh 2.3vh;
	border-left: 1px solid #666;
}

.account-link:hover {
	color:#EEE;
}

.sort-select {
	position:absolute;
	display:none;
	width:initial;
	margin-top:-.5vw;
}

.asset-remove {
	display:none;
}

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

	LOG IN PAGE

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

#login-header {
	background-color:#1C1C1C;
	width:92vw;
	height: 20vh;
	color:white;
	padding:4vw;
}

#login-wrapper {
	width:100vw;
	text-align:center;
	margin-top: -13vh;
}

#login-box {
	display:inline-block;
	text-align:left;
	background-color:white;
	margin:auto;
	border-radius:2px;
	box-shadow:1px 3px 3px #777;
	color:#BBB;
}

#login-box input {
	width:18vw;
	padding:1vw;
	margin: 1vh 2vw;
}

#login-box label {
	font-weight:bold;
	margin-left:2vw;
}

#login-submit-container {
	background-color:#F3F3F3;
	width:100%;
	text-align:center;
	margin-top:1vw;
}

#login-box #login-submit {
	background-color: #3094B4;
	color:white;
	border-radius:5px;
	font-weight:bold;
	font-size:1.5vw;
	width:12vw;
	height:4vw;
	margin:3vh 0;
}

#login-pw {
	margin-left:2vw;
}

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

	MAIN PAGE

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

.logo {
	width: 9vw;
	margin:.9vw;
}

#sidebar {
	height:100vh;
	background-color:#1C1C1C;
	color:white;
	width:10.8vw;
	vertical-align:top;
	border-right:.2vw solid #EEE;
	box-shadow:0px -2px 4px #555;
	text-transform:uppercase;
	font-size:.8vw;
	position:relative;
	z-index:1;
}

.sidebar-tab {
	display:inline-block;
	width:8.8vw;
	padding:1vw;
	margin-top:.2vh;
	background-color:#282D31;
	border-bottom:2px solid #282D31;
	color:white;
}

.sidebar-tab:hover, #sidebar .active {
	background-color:#3D444A;
	cursor:pointer;
	border-bottom:2px solid #3D444A;
}

#sidebar .active {
	border-bottom:2px solid #A44;
}

#logout {
	display:inline-block;
	position:absolute;
	bottom:3vh;
	left:1.8vw;
	border:3px solid red;
	padding:1vh 1.5vw;
	border-radius:5vw;
}

#main-wrapper {
	position:absolute;
	top:0;
	left:11vw;
	width:89vw;
}

#topbar {
	width:100%;
	background-color:#1C1C1C;
	color:white;
}

#search-bar {
	margin: 1vh 1.8vw;
	padding: 1vh;
	width: 20vw;
}

#breadcrumbs {
	width:100%;
	background-color:white;
}

.breadcrumb {
	margin: .5vh 0;
	padding: 1vh 1vw 1vh 1.5vw;
	font-size: 1.2vw;
	text-transform: uppercase;
	border-right: 1px solid #EEF1F3;
}

#main-container {
	margin: 3vh 0 0 2vw;
	box-shadow:0px 0px 2px #888;
	background-color:white;
	width:85vw;
	height:81vh;
    overflow-y: auto;
    overflow-x: hidden;
}

#file-name, #thumb-name {
	margin:.5vh 1vw;
	color: #3094B4;
}


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

	ELEMENTS/MEDIA PAGE	(mostly)

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

#General-tab .section {
	width:92%;
	background-color:#DFE4E8;
	padding:2vh 4%;
	margin-bottom:1vh;
}

#General-tab label {
	font-size:90%;
	color:#80888D;
	display:block;
	margin:1vh 0;
}

#General-tab input, #General-tab select {
	max-width:40%;
}

#General-tab #element-name {
	margin:1.2vw 0;
}

.versionLabel {
	width: 15vw;
	margin-right: 2vw;
	/* overflow: hidden; */
	text-overflow: ellipsis;	
}

#General-tab .objecttab, #General-tab .mediatab {
	max-width:50%;
	margin-bottom:5vh;
}

#General-tab .sMediaPreview {
	margin-top:3vh;
}

.tab-list, .wall {
	vertical-align:top;
}

.tab-list {
	width:25%;
}

#hotspot-select {
	width: 91%;
	margin-bottom: 1.5vh;
	border-radius: .5vw;
}

#set-list {
	width:64%;
}

.wall {
	width:71%;
	padding-left:3%;
	border-left:.15vw solid #666;
}

.spots {
	height:24.5vh;
	overflow-y:scroll;
	width:80%;
	border: 1px solid #999;
	padding: 1vh 1vw;
	border-radius: .5vw 0 0 .5vw;
	background-color:#FEFEFE;
}

.spots div {
	display:block;
	overflow: hidden;
	width: 15vw;
	font-size:.9vw;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding:1vh 0;
	border-bottom:1px solid #888;
}

.spots div:last-child {	
	border-bottom:none;
}

#spot-container {
	position:relative;
	width:100%;
	max-height:40vh;
	overflow:hidden;
}

#bg-image {
	min-height:31vh;
	width:100%;
}

.spot  {
	position:absolute;
	z-index:2;
}

.spot-label {
	position:absolute;
	z-index:3;
	background-color:white;
	border:1px solid black;
	padding:.4vh .4vw;
	border-radius:.5vw;
	font-size:80%;
}

.spot-label:hover {
	z-index:5;
}

.coordinate-tracker {
	float:right;
	margin-top:1.75vh;
	width:22vw;
}

.coordinate-tracker  input {
	width:5vw;
	margin:0 1vw;
}

.zoom-controls {
	float:right;
	margin:1vh 5vw 0 0;
	width:10vw;
}

.zoom-controls img {
	width:3vw;
	margin-right:1vw;
	cursor:pointer;
}

#main-container-tabbed {
	margin:1px 0 0 2vw;
	box-shadow:0px 0px 2px #888;
	background-color:white;
	width:85vw;
	height:77vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.tab-bar {
	margin: 3vh 0 0 2vw;
	position:relative;
	z-index:1;
}

.tab {
	margin-right:.5vw;
	padding:1vh 1vw;
	border-radius:.3vw .3vw 0 0;
	background-color:#CDD5DA;
	cursor:pointer;
}

.tab-bar .active {
	background-color:white;	
}

.header {
	font-size:1.5vw;
	padding: 2vh 1.5vw;
	color:#80888D;
}

.tab-div {
	width:100%;
	display:none;
}

.element-name {
	padding:1vw;
	background-color:#DFE4E8;
	width:100%;
}

.shade, .save-block {
	position:fixed;
	top:0;
	left:0;
	display:none;
	width:100%;
	height:100%;
	background-color: rgba(0, 0, 0, .8);
	z-index:2;
}

.save-block {
	z-index:4;
	background-color: rgba(0, 0, 0, .5);
}

.save-block .dialog {
	margin:40vh 40vw;
	padding:2.5vh 2.5vw;
	height:15vh;
	width:15vw;
	border-radius:1vw;
	text-align:center;
	line-height:15vh;
	background-color:white;
}

.edit-screen {
	position:absolute;
	display:none;
	top:10vh;
	left:25%;
	width:50%;
	box-shadow:0px 0px 2px #888;
	background-color:white;
	z-index:3;
}

.edit-header {
	background-color:#EEEEEE;
	border-bottom: 1px solid #AAA;
	width:94%;
	padding:1.75vh 3%;
}

.version-selector {
	float:right;
	width: 15%;
	font-size:100%;
	padding:.4vh;
	margin-right:3%;
}

.edit-body {
	height: 65vh;
	padding:1vh 10%;
	width:80%;
	overflow-y:scroll;
}

.edit-body label {
	display:block;
	margin:1vh 0 .5vh 0;
}

.edit-footer {
	background-color:#EEEEEE;
	width:100%;
	text-align:center;
	padding:1vh 0;
}

#media-selector {
	z-index:3;
	top:15vh;
	left:20%;
	width:60%;
}

#media-selector .edit-body {
	height: 50vh;
}

.media-filter-box {
	width:100%;
	background-color:#DDD;
	margin-bottom:1vh;
	padding:1vh 0;
}

.media-filter-box label {
	display:inline-block;
	font-weight:normal;
	margin:0 2vw;
}

#med-name-filter {
	width:30%;
}


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

	ANALYTICS

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

.analytics-filter {
	float:right;
	margin:1.4vh 0;
}

.analytics-filter label {
	font-size:.8vw;
	display:inline-block;
}

.analytics-filter select{
	display:inline-block;
	margin:0 2vw 0 .5vw;
	width:12vw;
}

.date-container {
	width:24vw;
}

.date-container input{
	width:6vw;
	margin:0 .5vw;
}

.chart-area {
	width:81vw;
	margin:0 3vw 0 1vw;
}

.chart-area canvas {
	padding:2vh 0 1vh 0;
}

.ui-datepicker .ui-datepicker-header, .ui-datepicker .ui-datepicker-title {
	display:block;
}

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

	LOTS OF TABLES AND RELATED

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

.user-tab {
	width:25vw;
	margin:5vh 0 0 28vw;
	font-size:120%;
	display:none;
}

.user-tab label {
	display:inline-block;
	width:10vw;
	color:#999;
	font-weight:normal;
}

.user-tab input {
	width:14vw;
}

.user-tab .save {
	font-size:120%;
	margin-left:10vw;
	padding:1vw;
	background-color: #3094B4;
	color: white;
	border-radius:.5vw;
	cursor:pointer;
}

#elements-table tbody .clickable{
	color: #3094B4;
	text-decoration:underline;
	cursor:pointer;
}

#elements-table .analytics {
	width:5vw;
	color: #3094B4;
	text-align:center;
	cursor:pointer;
}

#elements-table .clickable:hover {
	color: #CC1F37;
}

.standard-table {
	width:100%;
}

.standard-table thead {
	background-color:#DFE4E8;
	color:#80888D;
}

.standard-table tbody td {
	vertical-align:top;
	border-bottom: 1px solid #DFE4E8;
	border-right: 1px solid #DFE4E8;
    word-wrap: break-word;
	max-width:10vw;
}

.standard-table .item {
	color:white;
	font-weight:bold;
	box-shadow:1px 2px 1px #AAA;
	margin:.4vw;
	padding:.5vw 1vw;
	border-radius:.2vw;
	background-color:#999;
	cursor:default;
}

.standard-table img {
	max-width:5vw;
}

.objecttab, .mediatab {
	width: 100%;
	background-color: #fff;
	font-size:90%;
}
.objecttab thead, .mediatab thead {
	font-weight: bold;
}
.objecttab td, .mediatab td {
	border: 1px solid #111;
	padding: 5px;
	vertical-align:middle;
	background-color:white;
}
.objecttab a, .mediatab a {
	float: right;
	margin-right: 20px;
	cursor:pointer;
}
.objecttab .delete *, .mediatab .delete * {
	margin:0 .2vw;
}

.checkboxList {
	width:100%;
	max-height:200px;
	overflow:auto;
}

.checkboxList .row{
	display:block;
	border:1px solid #AAA;
	margin:7px 0;
}

.checkboxList label {
	font-size:100%;
	width:100%;
	display:inline-block;
	font-weight:normal;
	margin:0;
}

.checkboxList label div{
	border-left:1px solid #AAA;
	padding:.5vw 0 .5vw 1vw;
}

.checkboxList input {
	margin:0 .5vw;
	vertical-align:middle;
}

td {
	padding:1vw;
}

.action-td {
	width:10vw;
	min-width:10vw;
	font-weight:bold;
	text-align:center;
}

.action-td img {
	max-width:5vw;
	max-height:5vw;
}

.action-td:hover {
}

.td-edit, .td-delete {
	margin:0 .75vw;
	cursor:pointer;
}

.td-edit:hover, .td-delete:hover {
	text-decoration:underline;
}

.td-edit { color: #3094B4; }
.td-delete { color: #CC1F37; }

.action-td .mass-delete {
	width:1.3vw;
	height:1.3vw;
	margin-top:2vh;
}

.media-table {
	width:100%;
}

.media-table thead {
	background-color:#DFE4E8;
	color:#80888D;
	text-transform:uppercase;
	font-weight:bold;
}

.media-table tbody tr:nth-child(odd) {
	background-color:#F4F6F7;
}

.media-table td {
	vertical-align:top;
	border-bottom: 1px solid #DDD;
    word-wrap: break-word;
	max-width:10vw;
}

#version-menu .version {
	margin:1vh 0;
	padding:1vh;
	width:25vw;
	cursor:pointer;
}

#version-menu .version.active {
	background-color:#ccc;
}


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

	CLIENT PAGE STUFF

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

.clientLogo {
	width:7vw;
	vertical-align:middle;
}

.logoFile {
	width:13vw;
}

.add-project:hover, .project-name:hover {
	cursor:pointer;
	color: #CC1F37;
}

.project-name {
	display:block;
	padding-bottom:.4vh;
}