/* Common styles used in screens */
@import "client/common.scss";

.screen {
    display:none;
}

.screen.secondary {
    border: 1px solid $ColorScreenPrimary;
    background-color:$ColorScreenBackground;

    .footer button {
        margin:1em 0em 1em 1em;
    }

    .breadcrumb {
        margin-bottom:3em;
    }

    .breadcrumb p {
        float:left;
    }

    p {
        margin: 1em;
        cursor: pointer;
        font-size: 120%;
        line-height: 150%;
    }

    ul {
        margin-left: 2em;
        list-style: disc;
    }

    li {
        margin-bottom:1.5em;
    }

    p.current {
        font-weight: bold;
    }
}

.content,
.inner-content {
    clear: both;
    float: left;
    height: 100%;
    width: 100%;
    position:relative;
}

.content-head {
    height:21px;
    padding:4px;
    background-color:#ED3618;

    .content-icon {
        margin-right:10px;
        float:left;
    }

    h1 {
        margin: -3px 0px 0px 0px;
        padding:0;
        float:left;
        font-weight:100;
        font-size:24px;
    }

    .content-icon {
        margin-right:10px;
        float:left;
    }

    .content-nav {
        float:right;
        margin-right:10px;

        .home-icon {
            float:left;
            margin-right:20px;
        }

        a.arrow-right {
            float:left;
            display:block;
            margin-top:2px;
            margin-right:10px;
            width: 0; 
            height: 0; 
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-left: 7px solid #FFF;
        }

        a.arrow-left {
            float:left;
            display:block;
            margin-top:2px;
            margin-right:20px;
            width: 0; 
            height: 0; 
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent; 
            border-right:7px solid #FFF; 
        }
    }
}

.content-scroller {
    height:inherit;
    position:relative;
    display:block;
    overflow:auto;
}

.content-wrapper {
    padding: 0px 0px 0px 0px;
    font-size: 15px;
    color: #ccc;
    border-bottom: dotted 1px #444;
}

.content-wrapper h2 {
    color:#fff;
    font-weight:600;
    font-size:24px;
}

.buttonrow, .screen.secondary .footer {
    position: absolute;
    bottom:0px;
    right:0px;
    z-index:5;
    background-color:$translucent1;
    width:100%;
}

textarea {
    background-color: $ColorTextBoxBackground;
    border:none;
    -webkit-box-shadow: inset 2px 2px 3px 0px #888;
    box-shadow: inset 2px 2px 3px 0px #888;
}



/* Start of Jeff's common.css file */
body {
    font-size: 14px;
    font-weight: 300;
    color: #FFF;
    padding:3% 6%;
    background-color: #262626;
    position:relative;
}

h1, h2, h3, h4, h5, h6, p, div, table, form, img, tr, td, th {
    margin:0;
    border:0;
    padding:0;
}

a {display:inline-block;}
a img {border:none;}
.clearall {clear:both;}
.clearleft {clear:left;}
small, .small {font-size:11px;}
.bold {font-weight:bold;}

.button-grey-toggle.selected {
  background-color: #999;
  text-decoration:none;
   &:hover {
    background-color: #999;
    color:#ccc;
    text-decoration:none;
  }
}

.button-grey-toggle:hover {
    text-decoration:none;
}

.button-grey, .button-grey-toggle {
    margin:0px 8px 0px 8px;
    background-color:#666;
    border: solid 1px #868686;
    outline:solid 2px #666;
    padding:3px 10px;
    font-size:12px;
    font-weight:300;
    cursor:pointer;
    color:#ccc;
    text-decoration:none;
    line-height:12px;
    text-align:center;

    &.disabled {
      background-color: transparent;
      border: solid 1px #868686;
      outline: solid 2px transparent;
      color:#ccc;
    }

    &.disabled:hover {
      background-color: #515151;
      color:#ccc;
    }
}

.button-grey:hover {
    background-color:#999;
    color:#FFF;
    text-decoration:none;
}

.button-orange {
    margin:0px 8px 0px 8px;
    background-color: $ColorScreenPrimary;
    border: solid 1px #F27861;
    outline: solid 2px $ColorScreenPrimary;
    padding:3px 10px;
    font-size:12px;
    font-weight:300;
    cursor:pointer;
    color:#FC9;
    text-decoration:none;
    line-height:12px;
    text-align:center;

    &.disabled {
      background-color: transparent;
      border: solid 1px #868686;
      outline: solid 2px transparent;
      color:#ccc;
    }

    &.disabled:hover {
      background-color: #515151;
      color:#ccc;
    }
}

.smallbutton {
    font-size:10px;
    padding:2px 8px;
}

.button-orange:hover {
    background-color:#f16750;
    color:#FFF;
    text-decoration:none;
}

.button-disabled {
    border: none;
    outline: none;
    color:#EEE;
    background-color:#666;
    cursor:default;
}

.button-disabled:hover{
    color:#EEE;
    background-color:#666;
}

.f8 {font-size:8px !important}
.f9 {font-size:9px !important}
.f10 {font-size:10px !important}
.f11 {font-size:11px !important}
.f12 {font-size:12px !important}
.f13 {font-size:13px !important}
.f14 {font-size:14px !important}
.f15 {font-size:15px !important}
.f16 {font-size:16px !important}
.f17 {font-size:17px !important}
.f18 {font-size:18px !important}
.f19 {font-size:19px !important}
.f20 {font-size:20px !important}

.m0 {margin: 0 !important;}

.mr5 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr35 {margin-right:35px;}
.mr40 {margin-right:40px;}
.mr45 {margin-right:45px;}
.mr120 {margin-right:120px;}

.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml20 {margin-left:20px;}
.ml25 {margin-left:25px;}
.ml30 {margin-left:30px;}
.ml35 {margin-left:35px;}
.ml45 {margin-left:45px;}

.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}
.mt35 {margin-top:35px;}
.mt40 {margin-top:40px;}
.mt45 {margin-top:45px;}
.mt50 {margin-top:50px;}
.mt55 {margin-top:55px;}
.mt65 {margin-top:65px;}

.mt5 {margin-top:5px}
.mt10 {margin-top:10px}
.mb5 {margin-bottom:5px}
.mb10 {margin-bottom:10px}
.mb15 {margin-bottom:15px;}

.w0 {width:0% !important}
.w5 {width:5% !important}
.w10 {width:10% !important}
.w15 {width:15% !important}
.w20 {width:20% !important}
.w25 {width:25% !important}
.w30 {width:30% !important}
.w35 {width:35% !important}
.w40 {width:40% !important}
.w45 {width:45% !important}
.w50 {width:50% !important}
.w55 {width:55% !important}
.w60 {width:60% !important}
.w65 {width:65% !important}
.w70 {width:70% !important}
.w75 {width:75% !important}
.w80 {width:80% !important}
.w85 {width:85% !important}
.w90 {width:90% !important}
.w95 {width:95% !important}
.w100 {width:100% !important}

.p5 {padding:5px !important}
.p10 {padding:10px !important}
.p15 {padding:15px !important}
.p20 {padding:20px !important}
.p25 {padding:25px !important}
.p30 {padding:30px !important}

.h20 { height:20px; line-height:20px; vertical-align:middle}
.h30 { height:30px; line-height:30px; vertical-align:middle }
.h40 { height:40px; line-height:25px; vertical-align:middle }

.border-right {border-right:solid 1px #999;}
.border-left {border-left:solid 1px #999;}
.border-bottom {border-bottom:solid 1px #999;}
.border-top {border-top:solid 1px #999;}

.whitespace {white-space:normal;}
.clearall {clear:both;}

.error {
    background-color:#300;
    padding:5px;
    border: solid 1px #900;
}

.op50 {
    opacity: .5;
    -ms-filter: "alpha(opacity=50)";
}

.op30 {
    opacity: .3;
    -ms-filter: "alpha(opacity=30)";
}

.op10 {
    opacity: .1;
    -ms-filter: "alpha(opacity=10)";
}

.nowrap {
    display:inline-block;
    white-space:nowrap;
}

.overlay {
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index: 999;
    background-image:url('/assets/shared/bkg_overlay.png');
}

.overlay-small {
  width:300px;
  //height:160px;
  position:absolute;
  left:50%;
  top:20%;
  background-color:#333;
  border: 1px solid #ed3618;
  z-index:1000;
  display:none;
}

.overlay-inner {
  width:250px;
  //height:130px;
  padding:25px;
  font-size:15px;
  color:#aaa;
}

.overlay-inner input[type=text], .overlay-inner input[type=password] {
  padding:3px;
  font-size:13px;
  width:239px;
}

.overlay-video {
  position:absolute;
  left:50%;
  top:20%;
  background-color:#333;
  border: 1px solid #ed3618;
  z-index:1000;
  display:none;

  .overlay-video-inner {
    padding:25px;
  }
  
  #video-dialog-close {
    margin:0;
  }
}

.help-launcher {
  font-weight:bold;
  font-size:12px;
  line-height:12px;
  position:absolute;
  top:3px;
  right:3px;
  cursor:pointer;
}
.white {color:#fff;}
.lightgrey {color:#ccc;}
.grey {color:#999;}
.darkgrey {color:#333;}
.orange {color:#ED3618 !important;}
.teal {color:#2b8897;}
.green-fill {background-color:#72a43b;}
.gold-fill {background-color:#cc9900;}
.red-fill {background-color:#660000;}
.orange-fill {background-color:#ed3618;}
.teal-fill {background-color:#0b6672;}

/* End of Jeff's common.css file */
