html,
body {
    margin: 0px;
    padding: 0px;
}


html {
    min-height: 100%;
    height: 100%;
    color: #e1e1e1;
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: 13px;
    margin: 0 20px;
    background: #000000;
}

#bg { 
    background: url('images/bg.png') repeat top left;
    position: fixed;
    z-index: 0;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#wrap {
    position: absolute;
    z-index: 1;
    left: 50%;
    margin: 80px 0 0 -405px;
    display: block;
}

#wrap .if-image {
    text-align: left;
    padding: 40px;
    background: #444444;
    background: -moz-radial-gradient(center, ellipse cover,  #444444 0%, #111111 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#444444), color-stop(100%,#111111));
    background: -webkit-radial-gradient(center, ellipse cover,  #444444 0%,#111111 100%);
    background: -o-radial-gradient(center, ellipse cover,  #444444 0%,#111111 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #444444 0%,#111111 100%);
    background: radial-gradient(ellipse at center,  #444444 0%,#111111 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#111111',GradientType=1 );
}

.if-wrap {
    margin-bottom: 113px;
}

#youRaiseMeUUP {
    position: relative;
    z-index: 5;
    width: 800px;
}


/* HEADER */

#logo {
    width: 250px;
    float: left;
    clear: both;
}

#menu {
    font-family: 'Arvo', serif;
    font-size: 14px;
    line-height: 15px;
    font-weight: 300;
    margin: 0px 0px 20px 70px;
    padding: 0px;
    float: left;
    clear: none;
}

#menu li {
    float: left;
    list-style: none;
}

#menu li a {
    float: left;
    color: #e1e1e1;
    padding: 10px 20px;
    margin-right: 10px;
}

#menu li a:hover {
    color: #fff;
}

#menu li a:active {
    padding-top: 11px;
}

#menu .current {
    border-bottom: 1px solid #565656;
}


/* CONTENT */

#dasLine {
    position: absolute;
    top: 105px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 2px;
    background: #222;
}

#dasLine:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 1px;
    /*background: #444;*/

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0NDQ0NDQiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(68,68,68,0) 0%, rgba(68,68,68,0.65) 40%, rgba(68,68,68,0.65) 60%, rgba(68,68,68,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(68,68,68,0)), color-stop(40%,rgba(68,68,68,0.65)), color-stop(60%,rgba(68,68,68,0.65)), color-stop(100%,rgba(68,68,68,0)));
background: -webkit-linear-gradient(left,  rgba(68,68,68,0) 0%,rgba(68,68,68,0.65) 40%,rgba(68,68,68,0.65) 60%,rgba(68,68,68,0) 100%);
background: -o-linear-gradient(left,  rgba(68,68,68,0) 0%,rgba(68,68,68,0.65) 40%,rgba(68,68,68,0.65) 60%,rgba(68,68,68,0) 100%);
background: -ms-linear-gradient(left,  rgba(68,68,68,0) 0%,rgba(68,68,68,0.65) 40%,rgba(68,68,68,0.65) 60%,rgba(68,68,68,0) 100%);
background: linear-gradient(to right,  rgba(68,68,68,0) 0%,rgba(68,68,68,0.65) 40%,rgba(68,68,68,0.65) 60%,rgba(68,68,68,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00444444', endColorstr='#00444444',GradientType=1 );

}

#content {
    float: left;
    width: 100%;
    padding: 40px 0px 0px 0px;
    position: relative;
}

#content .left {
    width: 350px;
    float: left;
}

#footer {
    color: #9c9c9c;
    position: absolute;
    bottom: -95px;
    left: 0px;
    right: 0px;
    width: 100%;
    text-align: center;
}

#footer a {
    color: #6b6b6b;
}

#footer a:visited {
    color: #555;
}


#footer a:hover {
    color: #fff;
}

/* MISC */

h2 {
    margin: 20px 0px 10px 0px;
    font-family: 'Arvo', serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #fff;
    text-align: left;
    float: left;
    clear: both;
    width: 100%;
}

h2.first {
    margin-top: 0px;
}

.docs h2 {
    margin-top: 30px;
    padding-bottom: 5px;
    border-bottom: 1px solid #555;
}

.docs h3 {
    float: left;
    clear: both;
    font-size: 14px;
    font-weight: 900;
    font-family: 'Arvo', serif;
    margin-top: 15px;
    padding: 5px;
    color: #fff;
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: left;
    border-radius: 50px;
}


p,
pre {
    font-size: 13px;
    width: 100%;
    padding: 10px 0px;
    margin: 0px;
    float: left;
    clear: both;
    color: #c1c1c1;
}

p {
    text-align: left;
    line-height: 16px;
}

a {
    color: #999999;
    text-decoration: none;
}

ul, ul a { clear: both; float: left; }

a:hover {
    color: #fcfcfc;
}

.button {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* EXTRA cont */

.imgPreview {
    color: #333;
    float: left;
    line-height: 20px;
    overflow: hidden;
    position: relative;
}

.imgPreview img {
    position: absolute;
    top: 7px;
    right: 2px;
}

body .prevIMG {
    display: none;
    position: absolute;
    top: 80px;
    left: 50%;
    margin-left: -353px;
}

.if-link {
    position: absolute;
    z-index: 4;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.close_btn {
    display: none;
    width: 67px;
    height: 24px;
    background: url('images/close_btn.png') no-repeat top left;
    position: absolute;
    z-index: 5;
    top: 10px;
    right: 10px;
    border: 1px solid transparent;
}

.prev_txtLink:hover,
.close_btn:hover {
    border: 1px solid #000;
    box-shadow: 0px 0px 4px #111;
    color: #bcbcbc;
}

.prev_txtLink {
    position: absolute;
    z-index: 5;
    top: 10px;
    left: 10px;
    float: left;
    padding: 5px;
    font-size: 12px;
    line-height: 14px;
    display: none;
    color: #bcbcbc;
    background: rgba( 0, 0, 0, 0.6 );
    border: 1px solid transparent;
}

.prevIMG:hover .close_btn,
.prevIMG:hover .prev_txtLink {
    display: block;
}



a.if-image img { display: block; }

body .snippet-wrap {
    float: left;
    width: 635px;
}


.syntaxhighlighter {
    float: left;
    width: 71% !important;
    padding: 10px 0px;
    border-radius: 5px;
    box-shadow: 0 0 8px #111;
}

#trickery .syntaxhighlighter {
    width: 608px !important;
    margin: 5px 0px 0px 30px !important;
}

#mahButtons {
    text-align: center;
}
#mahButtons > div {
    text-align: left;
    float: left;
}

.fancy {
    font-size: 18px;
    font-family: 'Indie Flower', cursive;
    text-align: center;
    color: #e1e1e1;
    width: 100%;
    float: left;
    clear: both;
}

.hotkeys {
    display: none;
    margin: 30px 0 0 0;
    padding: 0;
    width: 100%;
    text-align: left;
    float: left;
    background: #f1f1f1;
    color: #222;
    border-radius: 4px;
    overflow: hidden;
}

.hotkeys li {
    list-style: none;
    line-height: 40px;
    border-bottom: 1px solid #fff;
    padding: 0px 10px;
    float: left;
    clear: both;
    position: relative;
    width: 100%;
}

.hotkeys li:first-child:before,
.hotkeys li:after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0px;
    right: 0px;
    z-index: 1;
    width: 100%;
    height: 1px;
    background: #fff;
}

.hotkeys li:after {
    content: '';
    position: absolute;
    top: 1px;
    background: #c1c1c1;
}

.hotkeys .info {
    text-align: left;
    float: left;
    clear: left;
    width: 160px;
}

.hotkeys .hk {
    text-align: left;
    width: 200px;
    float: left;
    clear: right;
}

.hotkeys .icon {
    color: #fff;
    background: #252525;
    padding: 2px 6px;
    border-radius: 2px;
    border-top: 2px solid #222;
    border-left: 2px solid #111;
    border-right: 2px solid #111;
    border-bottom: 3px solid #000;
    box-shadow: 0 0 3px 0 #444;
}

.hotkeys .icon.arrowLR {
    padding: 2px 6px;
}
.hotkeys .icon.arrowUD {
    padding: 2px 10px;
}

pre {
    display: none;
}

#trickery {
    display: none;
}


.column {
    width: 47%;
    float: left;
}

.column.right { float: right; }


.optionsList {
    float: left;
    clear: both;
    width: 100%;
}

.optionsList td,
.optionsList th {
    border-radius: 3px;
    padding: 5px;
    background: #353535 url('images/grid.png') repeat top left;
    box-shadow: 0 0 3px #111;;
}

.optionsList .option { background-color: #242c35; }

.moarInfo {
    padding: 10px;
    border: 1px solid #333;
    background: #444;
    clear: both;
    float: left;
}

#docFT ul {
    float: left;
    clear: none;
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: justify;
}

#wrap li.if-image {
    width: 155px;
    font-family: 'Arvo', serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 48px;
    text-align: center;
    padding: 5px;
    list-style: none;
    float: left;
    background: #151515;
}

#docFT ul img { float: left; }




/* Mah Drop DOOWN! */

.dropdown {
    position: relative;
    float: left;
    clear: both;
}

.imgPreview,
.dropdown div,
.hotkeysBtn,
#frameReset {
    float: left;
    clear: both;
    color: #333;
    width: 120px;
    height: 20px;
    line-height: 20px;
    border-radius: 7px;
    margin: 6px;
    padding: 6px 10px;
    float: left;
    position: relative;
    z-index: 11;
    box-shadow: 0 0 10px #111;
background: #ededed;
background: -moz-linear-gradient(top,  #ededed 0%, #ededed 46%, #e8e8e8 47%, #c6c6c6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(46%,#ededed), color-stop(47%,#e8e8e8), color-stop(100%,#c6c6c6));
background: -webkit-linear-gradient(top,  #ededed 0%,#ededed 46%,#e8e8e8 47%,#c6c6c6 100%);
background: -o-linear-gradient(top,  #ededed 0%,#ededed 46%,#e8e8e8 47%,#c6c6c6 100%);
background: -ms-linear-gradient(top,  #ededed 0%,#ededed 46%,#e8e8e8 47%,#c6c6c6 100%);
background: linear-gradient(to bottom,  #ededed 0%,#ededed 46%,#e8e8e8 47%,#c6c6c6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#c6c6c6',GradientType=0 );

}

.imgPreview:hover,
.dropdown:hover div,
.dropdown.active div,
.hotkeysBtn:hover {
    background: #c6c6c6;
    background: -moz-linear-gradient(top,  #c6c6c6 0%, #e8e8e8 53%, #ededed 54%, #ededed 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c6c6c6), color-stop(53%,#e8e8e8), color-stop(54%,#ededed), color-stop(100%,#ededed));
    background: -webkit-linear-gradient(top,  #c6c6c6 0%,#e8e8e8 53%,#ededed 54%,#ededed 100%);
    background: -o-linear-gradient(top,  #c6c6c6 0%,#e8e8e8 53%,#ededed 54%,#ededed 100%);
    background: -ms-linear-gradient(top,  #c6c6c6 0%,#e8e8e8 53%,#ededed 54%,#ededed 100%);
    background: linear-gradient(to bottom,  #c6c6c6 0%,#e8e8e8 53%,#ededed 54%,#ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#ededed',GradientType=0 );
}

#frameReset {
    display: none;
    color: #fff;
    background: #ce0407;
    background: -moz-linear-gradient(top,  #ce0407 0%, #990002 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ce0407), color-stop(100%,#990002));
    background: -webkit-linear-gradient(top,  #ce0407 0%,#990002 100%);
    background: -o-linear-gradient(top,  #ce0407 0%,#990002 100%);
    background: -ms-linear-gradient(top,  #ce0407 0%,#990002 100%);
    background: linear-gradient(to bottom,  #ce0407 0%,#990002 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce0407', endColorstr='#990002',GradientType=0 );
}

.dropdown ul { color: #333; }

.dropdown.active {
    z-index: 15;
}

.dropdown.active div {
    box-shadow: 0 0 3px #333;
}

.dropdown .arrow {
    margin-top: 6px;
    float: right;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #888;
}

.dropdown.active .arrow {
    margin-top: 8px;
    border-bottom: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #888;
}

.dropdown ul {
    display: none;
    float: left;
    width: 140px;
    background: #e1e1e1;
    margin: 0px;
    padding: 26px 0px 6px 0px;
    position: absolute;
    z-index: 10;
    top: 20px;
    left: 6px;
    border-radius: 4px;
}

.dropdown li {
    list-style: none;
    line-height: 19px;
    height: 19px;
    padding: 3px 10px;

    -webkit-transition: padding 0.2s ease-out;
     -moz-transition: padding 0.2s ease-out;
       -o-transition: padding 0.2s ease-out;
          transition: padding 0.2s ease-out;
}


.dropdown li:hover {
    background: #c9c9c9;
    padding-left: 14px;
}

ul .selected {
    color: #fff;
    background: #282828;
}

ul .selected:hover {
    background: #3a3a3a;
}