/** DISABLE TEXT SELECTION (SET ON BODY WHEN DRAGGING IS OCCURRING) **/
._jsPlumb_drag_select * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#header{
background-color:#white;
position:abosolute;
left:0px;
top: 0px;
}

#instructions{
background-color:whitesmoke;
width:450px;
border:8px double #7b869a;
float:left;
overflow-y: scroll;
}

button{
font-size: 1.5em;
}

.headerbtn{
top: 35px;
position: absolute;
}

.footerbtn{
bottom: 40px;
position: absolute;
left: 160px;
}

#narrowbtn{
left: 240px;
}

#widenbtn{
left: 345px;
}

#startoverbtn{
position: absolute;
bottom: 1px;
}

#createbtn{
left: 300px;
bottom:1px;
position: absolute;
font-size: 2em;
}


#footer{
background-color:white;
clear:both;
height:100px; 
text-align:left;
position: absolute;
top: 810px;
}

#rootmenu{
left: 482px;
border: 1px solid black;
position: absolute;
top: 668px;
z-index: 20;
}

#rootmenu button{
width: 225px;
}

.submenu{
left: 710px;
border: 1px solid black;
position: absolute;
top: 705px;
z-index: 20;
}

.submenu button{
width: 100%;
}

.midrow{
height:700px;
}

#main {  
background-color:#EEEEEE;
width:1200px;
height: 700px;
position: absolute;
left: 500px;
top: 100px;
border: 1px solid black;
}

.demo {
  position: absolute;
  width:1200px;
  background-color:white;    
  overflow:auto;  
  margin-top: 1px;
  margin-bottom:1px;
  height: 698px;
 }

/* demo elements */

a, a:visited {
    text-decoration:none;
    color:black;
    border-radius:0.2em;
    -webkit-transition: color 0.15s ease-in;
    -moz-transition: color 0.15s ease-in;
    -o-transition: color 0.15s ease-in;
    transition: color 0.15s ease-in;
}

a:hover {
    color:#7AB02C;
}

a:active {
  color:#FF2300;
}


#render a {
  margin-right:10px;
}

.selected {
  color:orange !important;
}

.window, .label {   
  text-align:center;
  z-index:24;
	cursor:pointer;
	box-shadow: 2px 2px 19px #aaa;
   -o-box-shadow: 2px 2px 19px #aaa;
   -webkit-box-shadow: 2px 2px 19px #aaa;
   -moz-box-shadow: 2px 2px 19px #aaa;
    
}
path, ._jsPlumb_endpoint { cursor:pointer; }

.cmd { 
  color:white;
  margin-right:25px;
}

.cmd:hover { 
  color:#FF2300;
  text-decoration: underline;
}
.cmd:active {
  color:#FF2300;
}

.label {
  font-size:13px; 
  padding:8px;
  padding:8px;
}

.component { 
  border:1px solid #346789; 
  border-radius:0.5em;        
  opacity:0.8; 
  filter:alpha(opacity=80);
  background-color:white;
  color:black;
  padding:0.5em;   
  font-size:0.8em;
}

.component:hover {
    border:1px solid #123456;
    box-shadow: 2px 2px 19px #444;
   -o-box-shadow: 2px 2px 19px #444;
   -webkit-box-shadow: 2px 2px 19px #444;
   -moz-box-shadow: 2px 2px 19px #fff;
    opacity:0.9;
    filter:alpha(opacity=90);
}

.window {
    background-color:white;
    border:1px solid #346789;
    box-shadow: 2px 2px 19px #e0e0e0;
    -o-box-shadow: 2px 2px 19px #e0e0e0;
    -webkit-box-shadow: 2px 2px 19px #e0e0e0;
    -moz-box-shadow: 2px 2px 19px #e0e0e0;
    -moz-border-radius:0.5em;
    border-radius:0.5em;        
    width:5em; height:5em;        
    position:absolute;    
    color:black;
    padding:0.5em;
    width:80px; 
    height:80px;    
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;
}

.object {
	position: absolute;
	top: 200px;
	left: 100px;
}

.gold{

}
.silver{

}
.bronze{

}

.distributedswitch {
width: 184px;
height: 603px;
background-image: url('VDS.png');
z-index:1;
}

.standardswitch {
width: 146px;
height: 610px;
background-image: url('VSS.png');
}
.physicalswitch{
width: 120px;
height: 88px;
background-image: url('switch.png');
}

.sanswitch{
width: 208px;
height: 10px;
background-image: url('SANSwitch.png');
}

.portgroup{
width: 131px;
height: 76px;
background-image: url('Portgroup.png');
z-index: 2;
}

.serviceprocessor{
width: 295px;
height: 75px;
background-image: url('ServiceProcessor.png');
}

.hosts{
width: 214px;
height: 80px;
background-image: url('ESXiHost.png');
}

.hba1port{
width: 41px;
height: 51px;
background-image: url('HBA.png');
}

.hba2port{
width: 97px;
height: 51px;
background-image: url('HBA.png');
}

.nic1port{
width: 41px;
height: 51px;
background-image: url('HBA.png');
}

.nic2port{
width: 97px;
height: 51px;
background-image: url('HBA.png');
}

.nic4port{
width: 210px;
height: 51px;
background-image: url('HBA.png');
}

.dbvm{
width: 42px;
height: 51px;
background-image: url('VMDB.png');
z-index: 2;
}

.webvm{
width: 42px;
height: 51px;
background-image: url('VMWEB.png');
z-index: 2;
}

.fileserver{
width: 42px;
height: 51px;
background-image: url('VMFS.png');
z-index: 2;
}

.bootorder{
width: 38px;
height: 25px;
background-image: url('bootorder.png');
z-index: 3;
}

.vAPP{
width: 559px;
height: 424px;
background-image: url('vApp.png');
z-index: 1;
}

.storage {
width: 58px;
height: 53px;
background-image: url('storage.png');
}

#scissors {
position: absolute;
left: 1579px;
top: 814px;
}

#trashcan {
position: absolute;
top: 814px;
left: 1648px;
}


#possibleanswers{
position: absolute;
top: 814px;
left: 1086px;
}

#possibleanswer1{


}

#photoshopanswer1{
position: absolute;
top: 814px;
left: 1327px;
}

#next{
position: absolute;
top: 904px;
left: 1650px;
font-size: 25px;
}

#drsdroparea{
position: absolute;
top: 160px;
left: 700px;
background-image: url('drsdroparea.png');
width: 274px;
height: 92px;
}

#drsdroparea2{
position: absolute;
top: 160px;
left: 1180px;
background-image: url('drsdroparea.png');
width: 274px;
height: 92px;
}

#drsdropareatext{
position: absolute;
top: 112px;
left: 765px;
}

#drsdropareatext2{
position: absolute;
top: 112px;
left: 1240px;
}

.window:hover {
    border:1px solid #123456;
    box-shadow: 2px 2px 19px #444;
   -o-box-shadow: 2px 2px 19px #444;
   -webkit-box-shadow: 2px 2px 19px #444;
   -moz-box-shadow: 2px 2px 19px #fff;
    opacity:0.9;
    filter:alpha(opacity=90);
}

.window a {
    font-family:helvetica;
}

.demo-links, .library-links {
  position: fixed;
  right: 0;
  top: 44px;
  font-size: 11px;
  background-color: white;
  opacity: 0.8;
  padding-right: 10px;
  padding-left: 5px;
  text-transform: uppercase;
  z-index:100001;
}

.demo-links div, .library-links a {
  display:inline;
  margin-right:7px;
  margin-left:7px;
}

.demo-links i, .library-links i {
  padding:4px;
}

.library-links {
    right: 515px;
    height: 19px;
    line-height: 19px;
}

.current-library {
  color:#7AB02C !important;
}

/** Z-INDEX **/

._jsPlumb_connector { z-index:18; }
._jsPlumb_endpoint { z-index:19; }
._jsPlumb_overlay { z-index:20; }

.aLabel {
  background-color:white; 
  padding:0.4em; 
  font:12px sans-serif; 
  color:#444;
  z-index:21;
  border:1px dotted gray;
  opacity:0.8;
  filter:alpha(opacity=80);
  cursor: pointer;
}
.aLabel._jsPlumb_hover {
  background-color:#5C96BC;
  color:white;  
  border:1px solid white;
}

/* ---------------------- bootstrap dropdowns ------------------------- */
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* load test */


    #iframe { 
      width: 98%;
	height: 1000px;
	position: absolute;
	top: 8px;
	left: 1%;
	border: 0;
    }     
    #render { height:20px;}
    #links {      
      width: 143px;
      font-size: 14px;
      padding-left: 0px;
      position: fixed;
      left: 9px;
      top: 52px;
      z-index: 20;
      background-color: white;                  
    }
    ul { padding:0; }
    li {
      list-style-type:none;
    }
    .current-tests {
      color:orange !important;
    }
    #qunit-tests li.pass, #qunit-tests li.fail {
      background-color:transparent;
    }
    .loadtest #main, #main.test  {
      max-width: none;
      margin-top: 52px;
      background-color: white;
    
      margin-left: 162px;
}


.loadtest ._jsPlumb_connection { z-index:3; }
.loadtest .jspLoad {
    z-index:4;
    position:absolute;
    width:70px;
    height:70px;
    cursor:pointer;
}

.loadtest #header {
  height:11em;
  border:2px solid #824563;
}

.loadtest #setup {
  float:left;
}
.loadtest #demo {
  margin-top:10em;
  position:relative;
}
.loadtest #setup, .loadtest #output {
  font-size:12px;
}