@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
/*@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600,700);*/
/*@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic);*/
/*@import url(https://fonts.googleapis.com/css?family=Dosis:400,700,600,300,500,200);*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);

/* CSS RESET - DO NOT MODIFY! */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin         : 0;
    padding        : 0;
    border         : 0;
    font-size      : 100%;
    font           : inherit;
    vertical-align : baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display : block;
}

body {
    line-height : 1;
}

blockquote, q {
    quotes : none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content : '';
    content : none;
}

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

/* SI */
.code_block {
    clear              : both;
    display            : block;
    position           : relative;
    font-size          : 12px;
    font-family        : 'Consolas';
    padding            : 10px;
    -moz-box-sizing    : border-box;
    -webkit-box-sizing : border-box;
    box-sizing         : border-box;
    background-color   : #111;
    color              : #EEE;
    z-index            : 10000;
    transition         : all 0.2s;
    max-height         : 800px;
    overflow-y         : scroll;
    overflow-x         : hidden;
    word-wrap          : break-word;
    line-height        : 14px;
}

.code_block pre {
    text-align : left !important;
}

.code_block .message {
    background-color : #222;
}

.maximise_code_block {
    position         : absolute;
    width            : 70px;
    height           : 20px;
    background-color : #222;
    text-align       : center;
    line-height      : 20px;
    top              : 0px;
    right            : 20px;
}

.maximise_code_block:hover {
    cursor           : pointer;
    background-color : #FFF;
    color            : #000;
}


/* MAIN STYLES */
html {
    overflow-x : hidden;
}

body {
    overflow         : auto;
    height           : 100%;
    text-align       : center;
    margin           : 0px auto;
    font-family      : Roboto, Arial, sans-serif;
    background-color : #F2F2F2;
    text-rendering   : optimizeLegibility;
    overflow-x       : hidden;
}

#desktop_ui .ui_top_bar {
    position: fixed;
    width            : 100%;
    height           : 100px;
    background-color : #FFF;
    z-index          : 50;
    box-shadow       : 0px 0px 15px rgba(0, 0, 0, 0.1);
}

#desktop_ui .ui_top_bar .ui_product_logo {
    width: 5em;
    height: 100%;
    position: absolute;
    left: 2em;
    background-color: #C00;
}

#desktop_ui .ui_top_bar .ui_top_bar_segment .ui_product_logo {

}

/* Full Desktop */
@media screen and (min-width : 1280px) {

}

/* Small Desktop  */
@media screen and (max-width : 1280px) {

}

/* Smartphone Portrait */
@media screen and (max-width : 960px) {

}

/* iPhone */
@media screen and (max-width : 400px) {

}