/*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, #555, #FFF);
	margin:5vh auto;
}

h1 {
	font-size:4vw;
}

h2 {
	font-size: 2.5vw;
}

h3 {
	font-size: 1.5vw;
}

h4.info {
	color: brown;
}

smaller {
	font-size:60%;
}

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

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

input[type="checkbox"], input[type="radio"] {
	width:1.3vw;
	height:1.3vw;
	vertical-align:middle;
}

input[type="checkbox"].autothumb {
	margin:1vh 0 .5vh .5vw;
	vertical-align:top;
}

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

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

select {
	font-size: .9vw;
	padding:.75vh .75vw;
	max-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;
}

.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;
}

.ui-sortable-helper {
	background-color:white;
    display: table;
}

.standard-table tr.ui-sortable-helper {
	border-top:1px solid #DFE4E8;
}


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

	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, .reorder {
	float:right;
	margin:1.5vh 1.2vw;
}

.delete-all, .reorder {
	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;
	max-width: 25em;
}

#login-box p {
	padding: 1em;
}

#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;
}

#other-links {
	display: flex;
	justify-content: space-around;
}

#other-links a:hover {
	text-decoration: underline;
}

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

	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 {
	margin:.6vh 0;
}

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

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


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

	ELEMENTS/MEDIA PAGE	(mostly)

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

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

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

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

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

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

#General-tab .tab-list {
	width:25%;
}

.field-container {
	vertical-align:top;
}

#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%;
	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:84vh;
    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:6vh;
	left:0;
	width:80vw;
	background-color:white;
	z-index:3;
}

#new-media.edit-screen, #thumb-update.edit-screen {
	left:20vw;
	width:40vw;
}

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

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

.edit-body {
	height: 70vh;
	padding:1vh 5%;
	width:90%;
	overflow-y:scroll;
}

#new-media .edit-body, #thumb-update .edit-body {
	overflow:hidden;
	height:20vh;
}

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

.edit-body label.checkboxLabel {
	display:inline-block;
	margin:0 0 0 .5vw;
	font-weight:normal;
}

.edit-body smaller {
	color:#dd3333;
	margin-left:5px;
}

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

#media-selector, .dev-editor {
	top:12vh;
	left:15vw;
	width:50vw;
}

#media-selector .edit-body, .dev-editor .edit-body {
	height: 56vh;
}

.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%;
}

#thumbMenu {
	display:none;
	position:absolute;
	background-color:white;
	border:1px solid #777;
	border-radius:5px;
	cursor:pointer;
}

#thumbMenu div:not(.close) {
	width: 9vw;
	padding:1vw;
}

#thumbMenu .thumbIt {
	color: #3094B4;
    font-weight: bold;
	border-top:1px solid #777;
}

#thumbMenu .close {
	position:absolute;
	top:-1.1vw;
	right:-1.1vw;
	padding:0 .75vw;
	line-height:2.25vw;
	background-color:black;
	color:white;
	text-align:center;
	border-radius:5vw;
}

#thumb-chooser {
	display:none;
}


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

	LOTS OF TABLES AND RELATED

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

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

.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;
}

.validatable input {
	width: initial;
}

.validatable label {
	display: initial;
}

#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%;
	margin-top:3vh;
}
.objecttab thead, .mediatab thead {
	font-weight: bold;
}
.objecttab td, .mediatab td {
	border: 1px solid #111;
	padding: 5px;
	vertical-align:middle;
	background-color:white;
}

.dragHeader {
	font-style:italic;
	font-size:.62vw;
	width:6vw;
	text-align:center;
}

.objecttab a, .mediatab a {
	float: right;
	margin-right: 20px;
	cursor:pointer;
}
.objecttab .delete *, .mediatab .delete * {
	margin:0 .2vw;
}

.listrow {
	margin-bottom:1vh;
	width:100%;
}

.listrow .row-num {
	width:1vw;
}

.listrow .row-delete {
	width:1vw;
	color:#FF0033;
	padding-left:1vw;
	cursor:pointer;
}

.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; */
	font-weight:bold;
	text-align:center;
}

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

.preview-td {
	width:6vw;
	text-align:center;
}

.preview-td img {
	cursor:pointer;
	max-width:5vw;
	max-height:5vw;
}

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

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

.td-edit { color: #3094B4; }
.td-delete { color: #CC1F37; }
.td-validate { color: forestgreen; padding-top: 1em; }

.list-controls {
	text-align:center;
	width:6vw;
	color: #CC1F37;
	font-weight:bold;
}

.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;
}


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

	BC3 STORY STUFF

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

.storyContainer {
	width:100%;
}

.storyContainer .story{
	width:100%;
}

.storyContainer .story *{
	vertical-align:top;
}

.storyContainer .storyDelete {
	margin:1.9vw 0;
	color:#FF0033;
	cursor:pointer;
}

.storyContainer input{
	margin:1.2vw 0;
	width:20%;
}

.storyContainer .storyThumbPreview {
	margin:0 3vw;
}

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

	DEV ITEMS

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

#dev-table tr{
	border:1px solid #AAA;
}

#dev-table tr td {
	border-left:1px solid #AAA;
}

#main-container-tabbed.dev-box {
	overflow:hidden;
}

.dev-box input:not([type=checkbox]):not([type=radio]) {
	width:15vw;
	display:inline-block;
}

.dev-box select {
	width:16.8vw;
	display:inline-block;
}

.dev-box .tab-div{
	height:100%;
}

.dev-box .tab-list {
	width:12vw;
	height:95%;
	background-color:#DFE4E8;
	padding:2vh 2vw;
	position:relative;
}

.dev-box .tab-back {
	color:#3094B4;
	margin-top:3vh;
	font-size:110%;
	cursor:pointer;
}

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

.dev-box .tab-sort-box li {
	border-bottom: 1px solid #888;
	background-color:#DFE4E8;
	width: 12vw;
	padding: .5vw 0;
	font-weight: bold;
	color: #3094B4;
	cursor:pointer;
	line-height:1.5vw;
	font-size:95%;
}

.dev-box .tab-sort-box li span {
	max-width:10vw;
	display:inline-block;
	text-overflow:ellipsis;
	overflow:hidden;
}

.dev-box input.hs-selection {
	width:1.3vw;
	float:right;
}

.dev-box .tab-sort-box li.active span{
	color:#ca4037;
	padding-left:.5vw;
	width:9.5vw;
}

.dev-box .elem-content {
	display:none;
	padding:0 2vw;
	width:65vw;
	position:relative;
	height:83.5vh;
	overflow-y:auto;
}

.dev-box .elem-content label, .dev-editor label {
	color:#666;
	font-weight:bold;
	display:block;
	margin:4vh 0 1vh 0;
}

.dev-box .element-save {
	position:absolute;
	bottom:1vh;
	left:1vw;
}

.dev-box .element-delete {
	position:absolute;
	bottom:1vh;
	right:1vw;
}

.dev-box .add-item {
	margin:0 1vw;
	color:#3094B4;
	font-size:80%;
	cursor:pointer;
	user-select:none;
}

.dev-box span.x {
	color: #3094B4;
	cursor:pointer;
}

.dev-box .add-item-box div {
	display:block;
	margin:1vh 0;
}

.dev-box .ext-label {
	font-weight:bold;
	width:7vw;
	line-height:1.5vw;
	margin-bottom:1.5vh;
}

.dev-box .tab-data-box {
	width:15vw;
}

.dev-box .tab-data-box #tab-name, .dev-box .tab-data-box select {
	width:10vw;
}

.dev-box .tab-data-box #tab-sort-name {
	width:6vw;
}

.dev-box .tab-data-box #tab-sort-direction {
	width:4vw;
	margin-left:1vw;
}


.dev-box .ext-con {
	width:6vw;
}

.dev-box .permission-box {
	margin-right:2vw;
}

.dev-box .field-container {
	overflow:auto;
	height:30vh;
}

.dev-box .field-container .field-row {
	padding:1vh;
	border-bottom:1px solid #DFE4E8;
}

.dev-box .field-container .field-row td{
	width:55vw;
}

.dev-box .field-container .field-row * {
	margin-right:1vw;
}

.dev-box .field-container .field-type {
	width:10vw;
}

.dev-box .field-container .field-options, .dev-box .field-container .field-con {
	border:1px solid #aaa;
	padding:1vh 1vw;
	text-align:center;
	cursor:pointer;
}

.dev-box .field-container .field-options:hover, .dev-box .field-container .field-con:hover {
	background-color:#eee;
}

.dev-box .field-container .field-sort {
	width:8vw;
}

.dev-box .field-container .field-ham {
	height:1.5vh;
	cursor:-webkit-grab;
}

.dev-box .op-row {
	margin:1.5vh 0;
	user-select:none;
	display:block;
}

.dev-box .options-container input.option-name {
	width:8vw;
	margin-right:1vw;
}