html, body
{
    height:100%;
	background-color: #86BEC9;
	/*background-image: url(../images/logo.png);
	background-repeat: no-repeat;
	background-position: 20px 60px;*/
}

/* no gutters */
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* center option */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

/* navigation */
.navbar {
	margin-bottom: 0;
	max-height: 30px;
}
.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}
.brand-pseudo-button {
	color: rgba(255,255,255,0.85);
	font-size: 1em;
	padding: 15px 5px 0 5px;
}
.navbar-inverse {
    background-color: rgba(0,0,0,0.65);
}

/* main container acts as a wrapper */
.container-main-wrapper {
	height: 100%;
	display: table;
    width: 100%;
    /*margin-top: -50px;*/
    padding-top: 50px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.row.faux-table {
	height: 100%;
    display: table-row;
}

.row.faux-table .no-float {
	display: table-cell;
}

.row.faux-table .col-sm-8 {
	width: 66.6667%;
}

.row.faux-table .col-sm-4 {
	width: 33.3334%;
	background: #000;
}

.no-float {
    float: none;
}

.row > .grid {
	/* main grid area */
	position: relative;
	/*background: url(../images/waves.svg);*/
	background-size: cover;
}

.grid-inner {
	visibility: hidden;
	position: relative;
	background: rgba(255,255,255,0.3);
	/*background: #80CEFB;*/
	width: 100%;
	height: 100%;
	text-align: center;
	margin: 0 auto;
	overflow: hidden;
}

#intro {
	position: absolute;
	width: 50%;
	top: 10%;
	left: 25%;
	background: #EFEDE9;
	-moz-box-shadow: 0 0 5px #fff;
	-webkit-box-shadow: 0 0 5px #fff;
	box-shadow: 0px 0px 5px #fff;
	filter: progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
	z-index: 200;
	padding: 1% 5% 3% 5%;
}

.vline {
	border-left: 1px solid rgba(44,44,44,0.2);
	width: 1px;
	height: 100%;
	position: absolute;
	z-index: 1;
}

.hline {
	border-top: 1px solid rgba(44,44,44,0.2);
	width: 100%;
	height: 1px;
	position: absolute;
	z-index: 1;
}

.obj-wrapper {
	background: rgba(255,255,255,0.6);
	position: absolute;
	display: none;
	-moz-box-shadow: 0 0 5px #fff;
	-webkit-box-shadow: 0 0 5px #fff;
	box-shadow: 0px 0px 5px #fff;
	filter: progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
}

.obj {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	overflow: hidden;
}

.obj.library {
	display: none;
}

.obj.library svg rect, .obj.library svg polyline {
	fill: #FFFFBF !important;
	stroke: #000 !important;
	stroke-width: 3 !important;
}

.obj.ultralite svg rect, .obj.ultralite svg polyline {
	fill: #fff !important;
	stroke: #000 !important;
	stroke-width: 3 !important;
}

.obj.lite svg rect, .obj.lite svg polyline {
	fill: #E2D5C7 !important;
	stroke: #000 !important;
	stroke-width: 3 !important;
}

.obj.elite svg rect, .obj.elite svg polyline {
	fill: #BCBCBC !important;
	stroke: #000 !important;
	stroke-width: 3 !important;
}

.obj.hd svg rect, .obj.hd svg polyline {
	fill: #BBE7AD !important;
	stroke: #000 !important;
	stroke-width: 3 !important;
}

.obj.library svg rect.floating,
.obj.ultralite svg rect.floating,
.obj.lite svg rect.floating,
.obj.elite svg rect.floating, 
.obj.hd svg rect.floating {
	fill: #000 !important;
}

/*
.obj.lift svg rect, .obj.lift svg polyline {
	fill: #FFBFBF !important;
	stroke: #000 !important;
	stroke-width: 3 !important;
}
*/

.obj img, .obj p {
	position: absolute;
	padding: 0;
	margin: 0;
	left: 0;
	top: 0;
	color: #000;
	font-size: 80%;
	cursor: move !important;
}

.obj img {
	width: 100%;
	height: 100%;
}

.obj svg {
	position: absolute;
	padding: 0;
	margin: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	cursor: move !important;
}

.obj p {
	text-align: center;
	position: relative;
  	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 10%;
}

.obj .orntSpfc {
	visibility: hidden;
}

.obj .r0 .r0,
.obj .r90 .r90,
.obj .r180 .r180,
.obj .r270 .r270 {
	visibility: visible;
}

#obj2 {
	width: 5%;
	height: 12.5%;
	left: 80%;
	top: 80%;
}

/*
#obj2:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid blue;
}

#obj3 {
	left: 10%;
	top: 10%;
	width: 5%;
	max-width: 5%;
	height: 12.5%;
	max-height: 12.5%;
	overflow: hidden;
}

#obj4 {
	left: 50%;
	top: 25%;
	width: 12.5%;
	max-width: 12.5%;
	height: 5%;
	max-height: 5%;
	overflow: hidden;
	background: red;
}

#obj4 img {
	-webkit-transform: rotate(90deg) scale(2,2);
   	-ms-transform: rotate(90deg) scale(2,2);
	transform: rotate(90deg) scale(2,2);
}

#obj5 {
	background: pink;
	width: 10%;
	height: 10%;
}

#obj5 circle {
	fill: white;
}

#obj6 {
	left: 70%;
	top: 25%;
	width: 5%;
	max-width: 5%;
	height: 12.5%;
	max-height: 12.5%;
}
*/

.rotate {
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	bottom: 0px;
	right: 0px;
	background: #cc0000;
	text-decoration: none;
}

#loading {
	position: absolute;
	right: -34px;
	top: 4px;
}

/* tools panel */
#tools {
	visibility: hidden;
	position: absolute;
	width: 3vw;
	right: -3vw;
	top: 33%;
}
#tools a {
	filter: Alpha(opacity=30);
	opacity: 0.3;
	background: rgba(255,255,255,0.7);
	display: block;
	width: 3vw;
	height: 3vw;
	border: 1px solid rgba(0,0,0,0.7);
	text-decoration: none;
	color: #aaa;
}
#tools.active a {
	filter: Alpha(opacity=100);
	opacity: 1;	
}

#zoomtools {
	visibility: hidden;
	position: absolute;
	width: 3vw;
	right: -3vw;
	bottom: 0;	
}
#zoomtools a {
	background: rgba(255,255,255,0.7);
	display: block;
	width: 3vw;
	height: 3vw;
	border: 1px solid rgba(0,0,0,0.7);
	text-decoration: none;
	color: #aaa;
}

#gridsize {
	position: absolute;
	top: 1%;
	right: 1%;
	background: rgba(255,255,255,0.8);
	border: 1px solid rgba(0,0,0,0.7);
	padding: 0 2%;
	font-size: 0.8em;
}