style.css

/**
 * @author Ikaros Kappler
 * @date 2014-03-19
 **/

body {
    font-family:         Monospace;
    font-size:           10pt;
    /* background-color:    #f8f8f8; */
/* background-image: url('img/depositphotos_1692651-Blueprint_0.6.jpg'); */
}

h3 {
    margin-bottom:       0px;
    margin-top:          0px;
}

a:link {
    color:               #0072ff;
}

a:hover {
    color:               #0072ff;
}

a:active {
    color:               #0072ff;
}

a:visited {
    color:               #0072ff;
}

*.error {
    color:               #884400;
}

*.faq {
    font-family:         Verdana, Arial, Helvetica, sans-serif;
}

h1.faq {
    font-size:           12pt;
}

h2.faq {
    margin-top:          50px;
    font-size:           11pt;
}

h3.faq {
    font-size:           10pt;
}

div.faq {
    margin-left:         35px;
    width:               480px;
    text-align:          justify;
}

*.dt_string {
    color:               #880000;
}

input {
    font-family:         Monospace;
}

code.faq {
    color:               #68a868;
    font-family:         Monospace;
}

pre.faq {
    color:               #68a868;
    font-family:         Monospace;
}

*.terminal {
    font-family:         Monospace;
    margin:              25px;
    padding-left:        15px;
    padding-right:       15px;
    padding-top:         5px;
    padding-bottom:      5px;
    background-color:    #282828;
    color:               #a8a8a8;           
}

div.integration {
    width:               800px;
    margin-top:          100px;
}

*.terminal_mnemonic {
    color:               #ff00a8;
}

*.terminal_argument {
    color:               #00a800;
}

code.integration {
    background-color:    #e0e0e0;
    padding-left:        5px;
    padding-right:       5px;
    color:               #008800;
}


table { 
    border-spacing:      0;
    border-collapse:     collapse;
}

td { 
    padding-left:        0px;
    padding-right:       0px; 
}

canvas#preview_canvas { 
    position:            absolute; 
    /* DEPRECATED: these settings are deployed dynamically since version 0.3.17 */
    /* top:                 40px;  */
    /* left:                10px;  */
    /* width:               512px; */
    /* height:              768px; */
    border:              1px solid #000000;
    background-color:    #FFFFFF;
}

canvas#bezier_canvas {
    position:            absolute;
    /* DEPRECATED: these settings are deployed dynamically since version 0.3.17 */
    /* top:                 40px;  */
    /* left:                532px; */
    /* width:               512px; */
    /* height:              768px; */
    border:              1px solid #000000;
}

div#status_bar {
    position:            absolute;
    background-color:    #d8d8d8;
    left:                10px;
    top:                 818px;
    width:               1034px;
    height:              16px;
    font-size:           9pt;
}

div#register_head {
    position:            absolute;
    top:                 21px;
    left:                1054px;
    width:               450px;
    height:              16px;
    border:              0px solid #000000;
    padding:             0px;
    background-color:    #ffffff;
}

div.register_card {
    position:            absolute;
    top:                 40px;
    left:                1054px;
    width:               400px;
    height:              380px;
    border:              1px solid #000000;
    padding:             10px;
    background-color:    #ffffff;
    background-image:    url('img/bg_controls.png');
    background-position: 0 0;
    background-size:     420px 400px;
    font-size:           9pt;
}

.register_tab_selected {
    border-top-left-radius:  8px;
    border-top-right-radius: 8px;
    height:                  24px;
    padding:                 2px;
    color:                   #000000;
    background-color:        #b0b0b0;
    cursor:                  normal;
}

.register_tab {
    border-top-left-radius:  8px;
    border-top-right-radius: 8px;
    height:                  24px;
    padding:                 2px;
    color:                   #000000;
    background-color:        #e8e8e8;
    cursor:                  pointer;
}

.tooltip {
    display:             inline;
    position:            relative;
    font-size:           10pt;
 }

.tooltip:hover:after{
    background:          #333;
    background:          rgba(0,0,0,.8);
    border-radius:       5px;
    bottom:              26px;
    color:               #fff;
    content:             attr(title);
    left:                20%;
    padding:             5px 15px;
    position:            absolute;
    z-index:             98;
    width:               220px;
    font-size:           10pt;
}

tooltip:hover:before{
    border:              solid;
    border-color:        #333 transparent;
    border-width:        6px 6px 0 6px;
    bottom:              20px;
    content:             "";
    left:                50%;
    position:            absolute;
    z-index:             99;
    font-size:           10pt;
}

#version_tag {
    position:   absolute;
    top:        30px;
    /* DEPRECATED: these settings are deployed dynamically since version 0.3.17 */
    /* text-align: right; */
    /* left:       10px; */
    width:      512px;
    font-size:  7pt;

    /* Thank you to Robert K for the post at
     * http://stackoverflow.com/questions/1080792/how-can-i-draw-vertical-text-with-css-cross-browser
     **/ 
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);

    /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
    /*-webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
*/

    /* Should be unset in IE9+ I think. */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

#gallery_links {
    position:   absolute;
    top:        10px;
    /* DEPRECATED: these settings are deployed dynamically since version 0.3.17 */
    /* left:       532px; */
    width:      512px;
    text-align: center;
    /* font-size:  pt; */

}

#beta_tag {
    position:   absolute;
    top:        18px;
    left:       522px;
    width:      512px;
    text-align: center;
    font-size:  7pt;

}

#donations {
    position:            absolute;
    width:               160px;
    height:              21px;
    top:                 690px;
    left:                1154px;
    font-size:           8pt;
    text-align:          center;
}

#license {
    position:            absolute;
    top:                 730px;  
    /* DEPRECATED: these settings are deployed dynamically since version 0.3.17 */
    /* left:                1154px; */
    font-size:           8pt;
}

/* The menu bar style */
#menu_bar {
    position:            absolute;
    left:                10px; 
    top:                 10px;
}

.open_file_menu_div {
    position:            relative; 
    top:                 0px; 
    left:                0px; 
    width:               220px; 
    height:              30px; 
    cursor:              pointer;
}

.open_file_menu_input {
    position:            relative; 
    width:               220px; 
    height:              30px; 
    top:                 -30px; 
    left:                0px; 
    opacity:             0; 
    filter:              alpha(opacity=0); 

}



div#informational {
    position:            absolute;
    top:                 460px; 
    /* DEPRECATED: these settings are deployed dynamically since version 0.3.17 */
    /* left:                1054px; */
    width:               400px;
    height:              100px;
    padding:             10px;
    background-color:    #ffffff;
    background-position: 0 0;
    background-size:     420px 400px;

    font-size:           7pt;
}

td.color_cell {
    width:               20px; 
    height:              20px; 
    padding:             2px;
}

div.color_picker {
    width:               20px; 
    height:              20px; 
    cursor:              pointer;
}

comment {
    font-size:           7pt;
    color:               #888888;
}

label.disabled {
    color: #a8a8a8;
}

*.indent_1 {
    margin-left:         15px;
}

*.indent_2 {
    margin-left:         30px;
}

/* A single div at the bottom of the page */
div#impressum {    
    position:            absolute;
    right:               0px;
    bottom:              0px;
    margin:              10px 10px 10px 10px;
    text-align:          right;
}



/* The gallery styles */
td.gallery {
    padding-left:        35px;
    padding-right:       35px;
    spacing-left:        25px;
    spacing-right:       25px;
    vertical-align:      top;
}


/* Sorry for the adverts. I hope you all use advertisment 
   blockers such as AdBlock Plus and/or Ghostery! */
div#adv_footer {
    position:            absolute;
    width:               1424px;
    left:                10px;
    top:                 1018px;
    /* background-color:    #ff0000; */
}

div#adv_gallery {
    position:            relative;
    text-align:          center;
    width:               800px;
}

div#dg_fb_placeholder {
    margin:              2px;
}

div#dg_gplus_placeholder {
    margin:              2px;
}

div#dg_twitter_placeholder {
    margin:              2px;
}

button.social_two_click {
    width:               160px;
    height:              22px;
    font-size:           8pt;
    color:               #ffffff;
    border:              1px solid;
    border-color:        #686868;
    border-radius:       4px;
    /* margin:              2px; */
}

button.zoom_button {
    width:               40px;
}