/*
 * style.css for index.html of http://OpenJSCAD.org/
 */

body { 
   margin: 0px; 
   padding: 0px; 
   font-family: Helvetica, Arial, Sans;

   /* viewer/canvas is screen.width x screen.height so when window 
      is resized all remains intact, but we make sure no scrollbar appears */
   overflow: hidden;       
}

a {
   text-decoration: none;
}

#header {
   position: absolute;
   top: 1em;
   left: 1em;
   z-index: 20;
}

#editor { 
   width: 40%;
   top: 0px;
   bottom: 0px;
   /* height: 100%;    note: newer ace expects height */
   right: 0px;
   z-index: 6;
   background: rgba(255,255,255,0.15);
}

#viewer {
   background: #fff;
   //width: 100%;
   //height: 100%;
   top: 0px;
   bottom: 0px;
}
canvas { 
   cursor: move; 
   padding: 0px; 
   margin: 0px;
}

#about {
   position: absolute;
   width: 30%;
   left: 30%;
   top: 30%;
   font-size: 0.75em;
   box-shadow: 0px 0px 20px black;
   color: #404040;
   border-radius: 20px;
   background: white;
   display: none;
   padding: 1.5em;
   text-align: center;
   z-index: 100;
}

.okButton {
   border: 2px solid #808080;
   border-radius: 4px;
   padding: 0.5em; 
   padding-left: 2em;
   padding-right: 2em;
   margin-top: 3em;
   background: #eee;
}

.okButton:hover {
   background: #ccc;
}

#footer {
   font-size: 0.7em;
   text-align: left;
   position: absolute; 

   margin-left: 1.5em;
   bottom: 0.5em; 
   
   opacity: 0.5;    
   -moz-opacity: 0.5;      /* css mess (why do it simple, when we can do it complicate!) */
}

#tail { 
   z-index: 4;
   position: absolute;
   bottom: 1em; 
   margin: 1em;
}

#busy {
   vertical-align: middle;
}

.support {
   vertical-align: bottom;
}

#menu, #menu nav a {
   transition: all 0.4s;
   -o-transition: all 0.4s;
   -moz-transition: all 0.4s;
   -webkit-transition: all 0.4s;
}

#menu {
   background: white;

   opacity: 0.8;    
   -moz-opacity: 0.8;

   border-right: 1px solid black;
   width: 250px;
   padding-left: 20px;
   padding-right: 10px;
   position: fixed;
   z-index: 12;

   font-size: 0.9em;
   
   box-shadow: 4px 0 10px rgba(0,0,0,0.25);
   -moz-box-shadow: 4px 0 10px rgba(0,0,0,0.25);
   -webkit-box-shadow: 4px 0 10px rgba(0,0,0,0.25);
}
 
#menu {
   left: 0; 
}

#menu:hover, #menu:focus ~ #menuHandle:hover, #menuHandle:focus {
   left: 0 !important;  /* slide out */
}

#menuHandle {
   right: -25px;
   top: 45%;
   position: absolute;
   z-index: 6;
}

#menu nav {
   position: relative;
   top: 50px;
}

#menu nav .navlink {
}

#menu nav .navlink:hover {
}

#menu #examples {
   font-size: 0.6em;
}

#menu #examples .newExample {
   border-radius: 5px;
   background: yellow;
   padding-left: 4px;
   padding-right: 4px;
}

#menu #examples, #menu #examples a {
   margin-top: 0px;
}

#menu .info {
   border-spacing: 0;
   border-collapse: collapse;
   margin-bottom: 0.5em;
}

#menu .info td {
   margin: 0px;
   padding-left: 2px;
   padding-right: 2px;
   padding-top: 0px;
   padding-bottom: 0px;
   font-size: 0.6em;
}

.info .infoOperation {
   font-weight: bold;
   color: #602080;
}

.info .infoKey {
   font-weight: bold;
   color: #808080;
}

#menuVersion {
   text-align: center; 
   font-size: 0.6em;
   color: #666;
}

.menuSubInfo {
   font-size: 0.6em;
   color: #666;
}

.externalLink {
   vertical: middle;
}

#examples {
   /* width: 60em; */
   width: auto;
   z-index: 12;
   position: absolute;
   display: none;
   background: #f8e8ff;
   border: solid 1px #888;
   padding: 1em;
   border-radius: 5px;
   box-shadow: 0px 0px 10px #849;
}

#examples td {
   white-space: nowrap;
}

#examples li {
   list-style-type: none;
}

#examplesList { 
   border-bottom: 1px solid #888;
   height: 4px;
   overflow: hidden;
}

#examplesList:hover {
   /*height: 100%;*/
}

#examplesHandle {
   bottom: 0px;
   left: 45%;
   position: relative;
   z-index: 10;
}

.examplesSeparator {
}

#options {
   width: auto;
   z-index: 12;
   position: absolute;
   display: none;
   background: #f8e8ff;
   border: solid 1px #888;
   padding: 0.5em;
   border-radius: 5px;
   box-shadow: 0px 0px 10px #849;
   font-size: 0.8em;
}

.optionGroup {
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 0.5em;
   margin: 0.5em;
   background: white;
}

.optionGroup input, .optionGroup select {
  background: #fea;
  border: none;
}

.optionInfo {
   font-size: 0.8em;
   color: #888;
}

/* arrows */

.shift-scene {
   position: absolute;
   left: 50%;
   top: 50%;
   border-radius: 50%;
   border: 5px dotted #999;
   width: 160px;
   height: 160px;
   margin-top: -80px;
   margin-left: -80px;
   background: transparent;
   cursor: move;
   opacity: 0.8;
   display: none;
}
.shift-scene.active {
   display: block;
}
.arrow {
   width: 0px;
   height: 0px;
   border: 50px solid transparent;
   position: absolute;
   z-index: 100;
   margin-left: 30px;
   margin-top: 30px;
}
.arrow-left {
   border-right-color: #666;
   margin-left: -90px;
}
.arrow-right {
   border-left-color: #666;
   margin-left: 150px;
}
.arrow-top {
   border-bottom-color: #666;
   margin-top: -90px;
}
.arrow-bottom {
   border-top-color: #666;
   margin-top: 150px;
}
.shift-vertical .arrow-left,
.shift-vertical .arrow-right,
.shift-horizontal .arrow-top,
.shift-horizontal .arrow-bottom {
   display: none;
}