﻿html {
    background-color:#FCFCFC;
}

body {
    padding-top: 50px;
    background-color:rgba(0,0,0,.1);
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    background-color: rgba(255,255,255,.9);
    box-shadow:0px 30px 30px rgba(0,0,0,.3);
}


/*Navbar*/
.navbar{
    background-color: rgba(255,255,255,0.9);
    box-shadow: 0px 3px 10px black;
    padding: 0px 15px 0px 15px;
}
.navbar-toggle{
    margin-right:-15px;
}
.navbar-toggle .icon-bar{
    background-color:black;
}

a{
    color:black;
}

@media (min-width: 768px) and (max-width: 991px){
	.navbar-nav > li > a{
		padding-left:10px;
		padding-right:10px;
	}
}

/*Language Picker*/
.navbar .language-switcher{
	float:none;
}
.navbar .language-switcher > ul{
    margin-top:15px;
    padding-left:15px;
    padding-right:0px;
}
a[data-lang]{
    color: transparent;
    background-repeat:no-repeat;
    background-position:bottom;
    width:40px;
}
a[data-lang="PT"]{
    background-image: url(/Themes/AlgoTheme/Content/pt-PT.png);
}
a[data-lang="EN"]{
    background-image: url(/Themes/AlgoTheme/Content/en-US.png);
}
@media (min-width: 768px){
	.navbar .language-switcher{
		float:right;
	}
}

/*Page Banner*/
.page-banner{
    height:300px;
    overflow:hidden;
    position:relative;
    margin-bottom:15px;
    margin-left:-15px;
    margin-right:-15px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.page-banner h1{
    position:absolute;
	margin:15px;
	padding:15px;
	z-index:1;
	color:white !important;
    background-color:rgba(0,0,0,.3);
    text-shadow: -1px 2px 3px rgba(0, 0, 0, 1);
}

.page-banner img {
    width:100%;
    height:auto;
    position:absolute;
    top:50%;
    transform: translateY(-30%);
}

.page-banner.up10 img {
    transform: translateY(-10%);
}
.page-banner.up25 img {
    transform: translateY(-25%);
}
.page-banner.up35 img {
    transform: translateY(-35%);
}
.page-banner.up50 img {
    transform: translateY(-50%);
}
.page-banner.down25 img {
    transform: translateY(25%);
}

/*Orchard zone styling*/
.zone-footer{
    background-color: #DA291C;
    padding:30px;
    padding-bottom:5px;
    box-shadow:inset 0px 5px 10px black;
}
.zone-footer, .zone-footer a, .zone-footer a:active, .zone-footer a:visited {color:white;}
.zone-footer input, .zone-footer textarea, .zone-footer button {color:black;}

/*Footer menu styling*/
.zone-footer ul.menu, .zone-footer .menu ul{
    list-style:none;
    margin:0px;
    padding:0px;
    font-weight:bold;
}
.zone-footer .menu ul{
    font-weight:normal;
    padding-left:15px;
}

.zone-footer ul.menu:after{
    clear:both;
    display:table;
    content:" ";
}

.zone-footer ul.menu > li{
    position:relative;
    float:left;
    width:100%;
}

@media (min-width: 768px) {
    .zone-footer ul.menu > li {
        width:25%;
    }
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}


/*Side nav*/
.side-nav {
    width:215px;
    padding:0px;
    background-color:#EEE;
    box-shadow: inset -3px 0px 10px #CCC;
    position: fixed !important;
    top: 0px;
    bottom:0px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index:100;    
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;    
    transition: all 0.4s ease-out;
}
.side-nav.collapse, .side-nav.collapsing {
    left:-220px;
    height:auto !important;
}
.side-nav.collapse.in
 {
    left:0px;
}

.side-nav-spacer{
    height:50px;
    background-color:white;
}

/*Large screens sidenav is visible*/
@media (min-width: 767px) {
    .side-nav{ position:absolute; left:0px !important;display:block !important;}
    .side-nav ~ .main-content {margin-left: 215px; padding-top:15px;}
    .side-nav ~ .main-content .page-title, .side-nav-toggle {display: none;}
    
}

/*Side-nav items*/
.side-nav ul {
    padding-left:0px;
    margin-bottom:15px;
}
.side-nav li{
  position: relative;
  display: block;
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  min-height: 40px;
}

.side-nav li.active{
    background-color:#f5f5f5;
    background-color:rgba(255,255,255,.5);
}
.side-nav li:hover{
    background-color:#fefefe;
    background-color:rgba(255,255,255,.6);
}

.side-nav li:hover:before,
.side-nav li:hover:after,
.side-nav li.active:after,
.side-nav li.active:before{
    content:' ';
    position:absolute;
    width:0px; height:0px;
    border: 15px solid transparent;
    border-right-color: #FEFEFE;
    border-left-width:0px;
    right:0px;
    top:5px;
    margin-right:-1px;
}
.side-nav li:hover:before,
.side-nav li.active:before {
    border-right-color: #DDD;
    margin-right:0px;
}

.avatar {
display:inline-block;
border-width:1px; 
padding:3px; 
font-weight:bold; 
font-size:.8em; 
border-style:solid; 
border-radius:50%; 
width:2em; 
height:2em;
margin-top:-0.5em; 
margin-bottom:-0.5em;
}

.table .progress {
    margin-bottom: 0px;
}

.progress-bar-auto-advance {
    -webkit-animation: advanceprogress 10s infinite cubic-bezier(.05,.1,.2,1), bgPosition 1s infinite linear;
    animation: advanceprogress 10s infinite cubic-bezier(.05,.1,.2,1), bgPosition 1s infinite linear;
}
@keyframes advanceprogress {
    from { width: 1%; }
    90% {margin-left:0px; width: 100%;}
    to { margin-left:99%; width: 1%; }    
}
@keyframes bgPosition {
    from { background-position-x: 0px; }
    to { background-position-x: 40px; }    
}

/*Modal body overflow*/
.modal-auto-height .modal-body {
    overflow-y:auto;
}

/*Responsive background*/
.content-background {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 0px 30% !important;
    color: #FEFEFE;
}

/*Slider*/
.carousel-caption{
    text-align:left !important;
    right:initial !important;
    left:10%;
    max-width:80%;
    background-color:rgba(0,0,0,.3) !important;
    padding:15px !important;
    padding-top:5px !important;
    top:20px !important;
    bottom:initial !important;
    font-size:1em;
    text-shadow: -1px 2px 3px rgba(0, 0, 0, 1);
}

@media (min-width: 768px) {
    .carousel-caption{
        font-size:1.2em;
    }
}
@media (min-width: 992px) {
    .carousel-caption{
        padding-top:15px !important;
        left:20%;
        max-width:60%;
        font-size:1.2em;
    }
}

.carousel-caption a{
    color:white;
    background-color: rgba(255,255,255,.2);
    border-radius: 5px;
    padding:5px;    
}
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img{
    width:100%;
    /*position:absolute;
    top:0px; bottom:0px;
    margin:auto;*/
}
.carousel-inner .item img {
    position:relative;
    top:50%;
    transform: translateY(-30%);
    -webkit-animation: carouselimg 20s infinite ease-in-out;
    animation: carouselimg 20s infinite ease-in-out;
}
@keyframes carouselimg {
    from { top:50%;}
    50% {top:10%; }
    to { top:50%; }    
}

/*Messages*/
.messages-placeholder{
    position:absolute;
    width:100%;
    top:0px;
    z-index:2000;
}

.messages-placeholder .alert {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    margin-left:50px;
    margin-right:50px;
    margin-top:30px;
}

.message {
    position:absolute;
    top:40px;
    left:0px;
    right:0px;
    padding:15px;
    z-index:2000;
    box-shadow:0 5px 15px rgba(0, 0, 0, .5);
}
.message-Information{
    background-color:rgb(79, 190, 241);
    color:white;
}
.message-Success{}
.message-Error{}


/*bootstrap fixes*/
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  margin-left: 0px;
}

/*Animations*/
@keyframes rotate360 {
from { transform: rotate(0deg);}
to { transform: rotate(360deg); }    
}
@keyframes rotateInv360 {
from { transform: rotate(360deg);}
to { transform: rotate(0deg); }    
}




