@charset "UTF-8";

/* style.js
 * Created 2013-07-08
 */

/* -- Custom UI Building --------------------------------*/
/* Tentative UI colors
 *  68,171,218: blue
 * 238, 96, 24: orange
 * 230, 29, 95: red
 *  70,232,143: green
 * 171, 49,255: purple
 * 230,255, 59: yellow
 * 255,200, 46: orange-yellow
 */
p.custom-ui-section {
    font-family: 'Lucida Grande',sans-serif;
    font-size: 11px;
    color:rgb(238,238,238);
    height: 27px;
    line-height: 27px;
    padding: 0 4px 0 16px;
    margin-left: -4px;
    /*
    -webkit-background-clip: border-box;
    -webkit-background-origin: padding-box;
    -webkit-background-size: auto;
    */
    background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==);
    background-position: 6px 10px;
    background-repeat:no-repeat;
    background-color: rgb(0, 0, 0);
    border-bottom-color: rgba(255, 255, 255, 0.2);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    cursor:pointer;
}
p.custom-ui-close {
    color:rgb(238,238,238);
    height: 20px;
    line-height: 20px;
    text-align:center;
    margin-left: -4px;
    background-color: rgb(0, 0, 0);
    border-top-color: rgba(255, 255, 255, 0.2);
    border-top-style: solid;
    border-top-width: 1px;
    cursor:pointer;
}
p.custom-ui-close:hover {
    background-color: rgb(17, 17, 17);
}
#preset-gui-container {
    position:absolute;
    top:0;
    left:15px;
    width:200px;
    background-color:#fff;
    font-family: 'Lucida Grande',sans-serif;
    font-size: 11px;
    color:rgb(238,238,238);
}

/* Thanks to Eric Meyer for the basis of a decent CSS dropdown menu */
#ui-presets ul {
    width: 200px;
}
#ui-presets ul ul {
    display: none;
}
#ui-presets ul li {
    list-style-type: none;
    position: relative;
    height:27px;
    line-height:27px;
    border-bottom-color: rgb(44, 44, 44);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgb(238, 96, 24);
    border-left-style: solid;
    border-left-width: 3px;
    background-color: rgb(26, 26, 26);
    color:rgb(238,238,238);
    padding-left: 5px;
    cursor:pointer;
}

#ui-presets ul li:hover > p::after {
    content:'•';
    position:absolute;
    left:180px;
    
}
#ui-presets ul li:hover > p {
    background-color:rgb(17,17,17);
}
#ui-presets ul li:hover {
    background-color:rgb(17,17,17);
}
#ui-presets ul li:hover > ul {
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
}
#ui-presets li p {
    display: block;
    padding: 8px 6px;
    padding: 0;
    text-decoration: none;
    background-color: rgb(26, 26, 26);
    color:rgb(238,238,238);
}
/* ----------------- */
#ui-ruleset div {
    height:27px;
    line-height:27px;
    border-bottom-color: rgb(44, 44, 44);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgb(238, 96, 24);
    border-left-style: solid;
    border-left-width: 3px;
    background-color: rgb(26, 26, 26);
    color:rgb(238,238,238);
    padding-left: 5px;
}
#ui-ruleset div input[type=number] {
    background-color: rgb(48, 48, 48);
    color:rgb(68, 171, 218);
    border:2px inset rgb(44, 44, 44);
    position:absolute;
    left:140px;
    width:50px;
    margin-top:4px;
    text-align:right;
}
#ui-ruleset div input[type=text] {
    position:absolute;
    left:80px;
    width:110px;
    margin-top:4px;
    background-color: rgb(48, 48, 48);
    color:rgb(68, 171, 218);
    border:2px inset rgb(44, 44, 44);
}
#ui-ruleset div input[type=checkbox] {
    position:absolute;
    left:177px;
    margin-top:8px;
    background-color: rgb(48, 48, 48);
    color:rgb(68, 171, 218);
    border:2px inset rgb(44, 44, 44);
}
#ui-ruleset div input:hover {
    background-color: rgb(60, 60, 60);
}
#ui-ruleset div input:focus {
    outline-width:0;
    outline-style:none;
    background-color: rgb(73, 73, 73);
    color: rgb(255, 255, 255);
}
#ui-ruleset div textarea {
    position:absolute;
    left:3px;
    width:189px;
    resize:none;
    background-color: rgb(48, 48, 48);
    color:rgb(68, 171, 218);
    border:2px inset rgb(44, 44, 44);
    height:146px;
}
/* Scrollbar styles */
#ui-ruleset div textarea::-webkit-scrollbar {
    width: 5px;
    background: #1a1a1a;
}
#ui-ruleset div textarea::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #676767;
}
#ui-ruleset div textarea::-webkit-scrollbar-corner {
    height: 0;
    display: none;
}
/* Hover and focus styles */
#ui-ruleset div textarea:hover {
    background-color: rgb(60, 60, 60);
}
#ui-ruleset div textarea:focus {
    outline-width:0;
    outline-style:none;
    background-color: rgb(73, 73, 73);
    color: rgb(255, 255, 255);
}
/* Make readonly ignore hover and focus */
#ui-ruleset div textarea[readonly]:hover {
    background-color: rgb(48, 48, 48);
}
#ui-ruleset div textarea[readonly]:focus {
    background-color: rgb(48, 48, 48);
}
/* Clumsy, but until CSS4, I see no way around it */
#ui-ruleset .custom-ui-number-container   {border-left-color: rgb( 68, 171, 218);}
#ui-ruleset .custom-ui-text-container     {border-left-color: rgb( 70, 232, 143);}
#ui-ruleset .custom-ui-textarea-container {border-left-color: rgb(230, 255,  59); height:180px;}
#ui-ruleset .custom-ui-checkbox-container {border-left-color: rgb(128, 103, 135);}

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

#canvas {
	background-color:#000;
}

#header {
    font-family:sans-serif;
	color:#555;
	position:absolute;
	z-index:1;
	width:100%;
	margin:0;
	padding:0;
	top:10px;
	font-size:13px;
	text-align:center;
}


#help {
    font-family:'Lucida Grande',sans-serif;
    color:#999;
    background-color:#333;
    border: 2px solid #7f7f7f;
    position: absolute;
    z-index:2;
    width:50%;
    margin-left:25%;
    top:-2px;
    max-height:90%;
    -webkit-border-radius: 0px 0px 8px 8px;
    border-radius: 0px 0px 8px 8px;
    padding:12px;
    overflow:auto;
    display:none; /* we unhide in script */
}
#help em {
    color:#aaa;
}
#help em.blue {
    color:#2fa1d6;
}
#help em.red {
    color:#e61d5f;
}
#help code.key {
    font-family:monospace;
    color:#ff7000;
    font-size:1.4em;
}
#help h3 {
    font-size:1.5em;
    color:#ccc;
    padding-top:4px;
}
#help p {
    padding-left:16px;
    padding-top:4px;
}
#help ul {
    padding-left:32px;
    text-indent:-12px;
}
#help ul ul {
    padding-left:16px;
}