%# Note that this file is not a valid *.css file!
%# It is intended to be a bottlepy - style template
%# used for the scripting part of TheOnionBox!

<%
    base_path = get('virtual_basepath', '') + '/'
%>

% navbar_height = 50

/* Bootstrap Customizations
@grid-float-breakpoint: 101%
@navbar-height: 70px
@navbar-default-bg: #64b22b (the kind of green we use!)

*/


%# <!-- styles start here! -->

html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
  min-width: 640px;
}

body {
    %# to compensate for the fixed NavBar
    /* padding-top: 50px; */
    font-family: "LatoLatinWeb";
    position: relative;
}

/*p {
    margin: 5px 0px 5px 0px;
}*/

%# to compensate the coverage of the NavBar when jumping within the page
.hash_target:before {
  display: block;
  content: " ";
  margin-top: -10px;
  height: 10px;
  visibility: hidden;
}

.box_header {
    background-image: linear-gradient(to right, rgba(100, 178, 43, 100), rgba(75, 160, 39, 100));

}

.box_title {
	font-family: "LatoLatinWebBlack";
    font-size: 63px;
    color: white;
    text-shadow: 1px 1px 2px #23300e;

}

.box_subtitle {
    font-size: 21px;
	font-family: "LatoLatinWebLight";
    color: white;
    background-color: rgba(132, 54, 187, 100);
}

.box_powered {
    font-size: 16px;
	font-family: "LatoLatinWebThin";
    color: white;
}


.box_bold {
	font-family: "LatoLatinWebBlack";
    font-size: 36px;
    text-align: right;
    min-width: 200px;
}

.box_section {
	font-family: "LatoLatinWebLight";
    font-size: 36px;
    text-align: left;
}

.box_datum {
	font-family: "LatoLatinWebLight";
    font-size: 19px;
    text-align: right;
    min-width: 200px;
}

.box_datum_bold {
	font-family: "LatoLatinWebBlack";
    font-size: 19px;
    text-align: right;
    min-width: 200px;
}

.box_datum_modal {
	font-family: "LatoLatinWebLight";
    font-size: 19px;
    text-align: right;
}

.box_value {
	font-family: "LatoLatinWeb";
    font-size: 19px;
    text-align: left;

}

.box_value_columns {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

/* this could/should be merged into box_value if usage of <p> for all values is re-organized */
.box_value_margin {
    margin: 0 0 5px;
}

.box_canvas {
    border-radius: .25rem;
    /*border-width: 4px;*/
    /*border-style: solid;*/
    /*border-color: #44ee44;*/
}


%# /* http://stackoverflow.com/questions/20760047/upside-down-caret */
.caret.caret-reversed {
    border-top-width: 0;
    border-bottom: 4px solid #000000;
}

<%
    from bottle import TemplateError
    import logging

    css_log = logging.getLogger('theonionbox')

    for section in sections:

        special = section[0]
        if special == '!' or special == '-':
            continue
        end

        file = 'sections/{0}/{0}.css'.format(section)
        try:
            include(file)
        except TemplateError as exc:
            css_log.debug("While including '{}' into 'box.css': {}".format(file, exc))
        except Exception as exc:
            css_log.warning("While including '{}' into 'box.css': {}".format(file, exc))
        end
    end
%>


.box_name {
   % #// Animation
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
   opacity: 1
}

.box_name.hide_name {
    opacity: 0;
}

.navbar-default.noline {
    border-color: transparent;
}

% # /* Styles for the Upload/Download Glyphs */

@font-face {
  font-family: 'tob';
  src:  url('{{base_path}}{{session_id}}/fonts/tob.eot?5gsh4g');
  src:  url('{{base_path}}{{session_id}}/fonts/tob.eot?5gsh4g#iefix') format('embedded-opentype'),
    url('{{base_path}}{{session_id}}/fonts/tob.ttf?5gsh4g') format('truetype'),
    url('{{base_path}}{{session_id}}/fonts/tob.woff?5gsh4g') format('woff'),
    url('{{base_path}}{{session_id}}/fonts/tob.svg?5gsh4g#tob') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'tob' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-download:before {
  content: "\e900";
}
.icon-upload:before {
  content: "\e901";
}


.form-group input[type="checkbox"] {
    display: none;
}

.form-group input[type="checkbox"] + .btn-group > label span {
    width: 20px;
}

.form-group input[type="checkbox"] + .btn-group > label span:first-child {
    display: none;
}
.form-group input[type="checkbox"] + .btn-group > label span:last-child {
    display: inline-block;
}

.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
    display: inline-block;
}
.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
    display: none;
}



.config_group {
    overflow: hidden;
    text-align: left;
}
.config_group:after {
    background-color: lightgrey;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;  /* middle seemed to be more obvious, yer super looks better (in chrome) */
    width: 100%;
}

.config_group:after {
    left: 0.5em;
    margin-right: -100%;
}

div.smoothie-chart-tooltip {
    background: #b9b9b9;
    padding: 1em;
    margin-top: 5px;
    font-family: "LatoLatinWebLight";
    color: white;
    font-size: 10px;
    pointer-events: none;
}

/* Bootstrap Toggle Styles */
% # include('bootstrap-toggle/css/bootstrap-toggle.min.css')
% # include('bootstrap-switch/css/bootstrap-switch.min.css')
