/*
    font-family:  'Segoe UI', 'myriad pro', myriad, Tahoma, Geneva, Verdana, sans-serif;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

    #button red : #ed1d25
    #tan        : #e5d4c9

*/

/* Body Containers */

body
{
    background-color:#333;
    color:#FFF;
    font-family:  'Segoe UI', 'myriad pro', myriad, Tahoma, Geneva, Verdana, sans-serif;
}

table.BodyContainer
{
    width:100%;
}

.BodyContainer-Left,
.BodyContainer-Right
{
    display:table-cell;
}
.BodyContainer-Left
{
    width:350px;
    background:#0A0909 url('../images/menuBackground.jpg') top no-repeat;
    vertical-align: top;
    border-right:solid 1px #666;
    height:100vh;
}
.BodyContainer-Right
{
    vertical-align: top;
    width:auto;
    background:url('../images/brickBackground.jpg') top no-repeat ;
    background-size: cover;
}


.BodyContainer-Nav
{
    padding:10px;
}


@media all and (max-width:768px) {
    .BodyContainer-Left,
    .BodyContainer-Right {
        display: block;
    }

    .BodyContainer-Left {
        width: auto;
        background-size: cover;
        height:auto;
    }
}

/* Body Left */

.BodyContainer-Left > a.LogoLink
{
    padding:10px;
}
.Logo
{
    display:block;
    width:200px;
    margin:30px auto 20px;
}
.BodyContainer-Left a
{
    display:block;
    color:white;
    text-transform:uppercase;
    text-align:center;
    padding:5px;
    font-weight:normal;
}
#collapsableMenu > a
{
    padding-left:32px;
}
.BodyContainer-Left > a
{
    padding-left:30px;
}
.BodyContainer-Left .treeSelected a.treeSelected,
.BodyContainer-Left a:hover
{
    color:#ed1d25;
    text-shadow:0px 0px 8px #000;
    font-weight:bold;
}
.BodyContainer-Left .treeSelected a.treeSelected
{
    font-size: 18px !important;
    padding-left: 15px;
    border-right:#ed1d25 solid 10px !important;
    border-top:solid rgba(255,255,255,0.2) 1px !important;
    border-bottom:solid rgba(255,255,255,0.2) 1px !important;
}
.BodyContainer-Left .tree > div > table:first-child .treeSelected a.treeSelected
{
    border-top: none !important;
}
.BodyContainer-Left .tree > div > table:last-child .treeSelected a.treeSelected,
.BodyContainer-Left .tree > table .treeSelected a.treeSelected
{
    border-bottom: none !important;
}

.tree > div
{
    padding-left: 17px;
    background: rgba(0,0,0,0.6);
    background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.7));
    border-top: solid rgba(255,255,255,0.2) 1px !important;
    border-bottom: solid rgba(255,255,255,0.2) 1px !important;
}

a.social-links
{
    text-align:center;
    vertical-align:middle;
    display:block;
    width:30px;
    height:30px;
    padding:5px;
    background:#FFF;
    border-radius:15px;
}
a.social-links i
{
    color:#0A0909;
}
a.social-links:hover
{
    text-shadow:none;
    color:#0A0909;
    background:#ed1d25;
}
.social-link-container
{
    padding:30px;
}

/* Body Right */

.row nav{
    text-align:center;
}

.NavLink
{
    float:right;
    padding:20px 10px;
}

h1, h2, h3, h4, h5, h6
{
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
h1 ,
.jumbotron h1
{
    font-size:72px;
    text-align:left;
    color: #FFF;
    text-transform:uppercase;
}
.jumbotron h1
{
    color: #ed1d25;
}

@media (max-width: 768px) 
{
    h1 ,
    .jumbotron h1
    {
        font-size:10vw;
    }
}

.btn{
    padding:1px 10px;
    text-align:center;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing:1px;
    word-spacing:3px;
    text-transform:uppercase;
    font-size:20px;
    word-wrap:normal;
    white-space:normal;
    overflow:hidden;
}
.btn-danger
{
    background:#C00;
    border-color:#C00;
}

input.input-tan,
input.input-tan::placeholder,
.btn.btn-tan
{
    background-color:#e5d4c9;
    color:#111;
    border:none;
}
.tan
{
    color:#b88f76;
}

.modal-dialog
{
    width:450px !important;
}
@media (max-width: 500px) 
{
    .modal-dialog
    {
        width:320px !important;
    }
}

.MobileControl
{
    display:none;
}

abbr[title]{
    text-decoration:none;
    border:none;
}

/* Product control */

.thumbnail .col-md-6,
.thumbnail .col-sm-6
{
    padding-top:10px;
}

.productControl
{
    max-width:350px;
}

.productControl label
{
    display:block;
    font-size:14px;
    line-height:1.5em;
    margin: 5px 0px 0px;
}

.productControl h3 {
    height: 2.34em !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.productControl .caption {
    padding: 0px 20px 10px;
}

@media (min-width: 768px) 
{
    .productControl .btn.btn-warning {
        position: absolute;
        width: auto;
        font-size: 14px;
        line-height:28px;
    }
}
@media (min-width: 1700px) 
{
    .col-md-6.col-lg-4 
    {
        width: 25%;
    }
}

.ProductImage
{
    height:300px;
    background:#777 center no-repeat;
    background-size: cover;
    margin-bottom:20px;
}

.ProductImage-none
{
    background:#777;
    color:#BBB;
    font-size:20px;
    text-align:center;
    vertical-align:middle;
    line-height:30px;
    padding:10px;
}
.ProductImage-none > p
{
    margin:30% 0px;
}


/* Mobile interface */

@media all and (max-width:768px) 
{
    .MobileControl
    {
        display:block;
        text-align:center;
        border-bottom: 1px solid rgba(255,255,255,0.3);
    }
    #collapsableMenu.collapse
    {
        overflow:hidden;
    }
}
@media all and (min-width:768px) 
{
    #collapsableMenu.collapse
    {
        display:block !important;
        height:auto !important;
    }
}


/* Common  */

.ThumbContainer
{
    text-align:center;
}

.form-group input,
.form-group button,
.form-group select,
.form-group textarea,
.form-group .btn
{
    border-radius:8px;
    display:block;
    width: 100%;
}

.thumbnail,
.thumbnail p,
.panel-body,
.list-group-item,
.modal-dialog,
#print,
.datepicker 
{
    color: #333;
}

.nav-tabs > li > a
{
    background: rgba(255,200,200,0.5);
    color: #FFF;
}

.panel
{
    border-radius:0px;
}

.Radiolist input
{
    display:inline;
    width:auto;
}

.region-container
{
    max-width:800px;
}

.input-group .input-group-addon i
{
    color:#333;
    font-size:1em;
}
.form-horizontal .form-group {
    margin-right: 0px;
    margin-left: 0px;
}

.table > thead > tr > td > img,
.table > tbody > tr > td > img
{
    max-width:unset;
}

@media all and (max-width:500px)
{
    .table > tbody > tr > td, 
    .table > tbody > tr > th, 
    .table > tfoot > tr > td, 
    .table > tfoot > tr > th, 
    .table > thead > tr > td, 
    .table > thead > tr > th
    {
        padding:1px
    }
    .table > tbody > tr > th, 
    .table > tfoot > tr > th, 
    .table > thead > tr > th
    {
        
    }
}