/* Document Body */
@import "mixins/remFontSize";

body {
    color: #498a2d;
    background-color:#292929;
}
body a {
    color: #498a2d;
    text-decoration: none;
}
body a:hover {
    text-decoration: underline;
}
/* Stuff added for this instance */
#casperForm{
  max-width:remCalc(600);
  min-width:remCalc(300);
  float:left;
  background-color: #c2c2c2;
  margin: 0px auto;
  width:47%;
  @media only screen and (max-width: 1023px) {
        float:none;
        width:100%;
    }
}

#casperScripts{
  width: remCalc(220);
  margin:remCalc(16) auto remCalc(16) 24%;
  padding:remCalc(8);
}

label [for=casperScripts]{
   margin:0 remCalc(10) 0 remCalc(40); 
}

#harOptions{
    width:86%;
    margin: remCalc(16) auto;
    color:black;
}

#logo{
    background-image:url('/images/slimer.png');
    width:remCalc(110);
    height:remCalc(112);
    position: absolute;
    left: remCalc(64);
    top: remCalc(160);
    background-size: contain;
    @media only screen and (max-width: 1023px) {
       left: remCalc(16);
    }
}

#urlList{
    width:100%; 
    margin:remCalc(10) remCalc(16);
    clear:both;
}

#waitTimeCont, #exeTimeCont, #throttlingCont{
    min-width:remCalc(200); 
    max-width:remCalc(320);
    width:100%;
    margin:remCalc(16) remCalc(16);
    float:left;
    
    input,select{
        width:80%;
    }
    
    #enableThrottle{
        width:remCalc(8);
    }
}

#testLabel{
    width:80%;
}

#networkThrottle{
    width:remCalc(155);
    position: relative;
    bottom: remCalc(8);
    margin: remCalc(16) 0px;
}

#enableThrottle{
    width:remCalc(20);
    height:remCalc(20);
    margin: remCalc(16) 0px;
}

#ghostIt{
    background-color: red;
    float: right;
    margin-right:remCalc(150);
    padding: remCalc(16);
    width: remCalc(200);  
    
     @media only screen and (max-width: 1023px) {
        float:none;
        margin:remCalc(16) auto;
        display:block;
    }
}

#harPerfUrls{
    box-sizing: border-box;
    width:95%;
    resize:none;
}

#scriptOutputCont{
    height:remCalc(400);
    background-color:#000000;
    margin:0px auto;
    padding:remCalc(16);
    overflow-y:scroll;
    max-width:remCalc(580);
    min-width:remCalc(300);
    float:left;
    width:47%;
    
    @media only screen and (max-width: 1023px) {
        float:none;
        width:85%;
    }
}
/* Document Header and Footer*/
.header .left a:hover {
    text-decoration: none;
}
.header .right {
    text-align: right;
    font-family: "Gill Sans", Verdana;
    @include font-size(16);
    margin: remCalc(16);
}
.header .left {
    float: left;
    text-align: left;
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-weight: bold;
    font-size: 174%;
    margin-left: remCalc(16);    
}
.header .hr,.footer .hr {
    height: remCalc(2);
    width: 100%;
    background-color: #498a2d;
    margin: remCalc(16) 0;
}
/* Preferences menu */
.header #preferences {
    position: absolute;
    width:remCalc(250);
    height: remCalc(168);
    top: remCalc(60);
    right: remCalc(8);
    padding: remCalc(8);
    background: #FFFFFF;
    opacity: 0.85;
    border: remCalc(2) solid #498a2d;
    border-radius: 0 0 remCalc(10) remCalc(10);
    z-index: 100;
    display: none;
}
.header #close {
    position: absolute;
    top: remCalc(16);
    right: remCalc(8);
    z-index: 110;
    font-family: "Gill Sans", Verdana;
    font-weight: bold;
    font-size: 85%;
    text-decoration: none;
}
.header #close a {
    text-decoration: none;
    font-family: "Gill Sans", Verdana;
    font-size: 85%;
}
.header .radio {
    vertical-align: -3px;
    margin: 0 0 remCalc(16) 0;
}
.header #preferences strong {
    font-family: "Gill Sans", Verdana;
    font-weight: bold;
    font-size: 77%;
}
.header #preferences .theme-name {
    font-family: "Gill Sans", Verdana;
    font-size: 77%;
}
.header #preferences button {
    width: 100px;
    padding: remCalc(4) 0;
    margin: 0 remCalc(75) 0 remCalc(75);
    color: #000;
    font-family: arial;
    font-size: 77%;
    background: #d7e7cf;
    border: remCalc(2) solid #498a2d;
    border-radius: remCalc(4);
    cursor: pointer;
}

#reportControls{
    margin:remCalc(24) remCalc(24);
}
.uploader{
    width:45%;
    float:left;
    margin:0 auto;
}


/* Manual uploader */
.uploader fieldset {
    margin: remCalc(24) remCalc(14);
    border: remCalc(2) solid #498a2d;
    border-radius: remCalc(16);
  
}
.uploader legend {
    color: #fff;
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-size: 93%;
    background: #498a2d;
    border: remCalc(2) solid #498a2d;
    border-radius: remCalc(4);
    padding: remCalc(2) remCalc(20);
}
.uploader .file {
    float:left;
    color: #000;
    font-size: 77%;
    background: #d7e7cf;
    border: remCalc(2) solid #498a2d;
    border-radius: remCalc(4);
    cursor: pointer;
}
.uploader .button {
    width: 100px;
    padding: remCalc(4) 0;
    margin: 0 0 remCalc(20) 0;
    color: #000;
    font-family: arial;
    font-size: 77%;
    background: #d7e7cf;
    border: remCalc(2) solid #498a2d;
    border-radius: remCalc(4);
    cursor: pointer;
}
/* Summary Table on Home Page */
.summary {
    width: 98%;
    visibility: hidden;
}
.summary .title {
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-weight: bold;
    font-size: 108%;
    margin: 0 0 remCalc(12) 0;
    text-align: left;
    clear:both;
}
.summary table {
    table-layout: fixed;
}
.summary button {
    width: remCalc(220);
    padding: remCalc(4) 0;
    margin: remCalc(24) 0;
    color: #000;
    font-family: arial;
    font-size: 77%;
    background: #d7e7cf;
    border:remCalc(2) solid #498a2d;
    border-radius: remCalc(4);
    cursor: pointer;
}
/* Superposed Test */
.sp-display {
    width:remCalc(960);
}
.sp-display #chart{
    width: remCalc(960);
    height: remCalc(400);
}
.sp-display #summary-table {
    visibility: hidden;
}
.sp-display .title {
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-weight: bold;
    font-size: 108%;
    margin: remCalc(16) 0 remCalc(18) 0;
    float: left;
    text-align: left;
}
.sp-display #metrics, .sp-display #timings {
    visibility: hidden;
}
.sp-display #metrics {
    width: remCalc(160);
}
.sp-display #timings {
    width:remCalc(200);
}
.sp-display .selector {
    text-align: right;
    margin: remCalc(16) 0 remCalc(18) 0;
}
.sp-create fieldset {
    width: remCalc(960);    
    border: remCalc(2) solid #498a2d;
    border-radius: remCalc(16);
}
.sp-create legend {
    color: #fff;
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-size: 93%;
    background: #498a2d;
    border: remCalc(2) solid #498a2d;
    border-radius: remCalc(4);
    padding: remCalc(2) remCalc(24);
}
.sp-create {
    position: relative;
}
.sp-create .form {
    position: relative;
    z-index: 1;
}
.sp-create .spinner {
    position: absolute;
    z-index: 2;
    width:remCalc(24);
    height:remCalc(24);
    top: 33%;
    left: 24%;
    display: none;
}
.sp-create .howto {
    width: 980px;
    margin: 20px 0 10px 0;
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-size: 100%;
    text-align: right;
}
.sp-create .howto a {
    text-decoration: none;
}
.sp-create .howto a:hover {
    text-decoration: underline;
}
.sp-create .slct-label {
    float: left;
    width: 200px;
}
.sp-create .slct-start {
    float: left;
    width: 160px;
}
.sp-create .slct-end {
    width: 160px;
}
.sp-create .container {
    text-align: left;
    margin: 20px 0 0 0;
}
.sp-create .title,.sp-create .text {
    float: left;
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-size: 93%;
}
.sp-create .text {
    margin: 4px 10px 0 20px;
}
.sp-create .title {
    width: 60px;
    font-weight: bold;
    margin: 4px 0 0 10px;
}
.sp-create .image {
    vertical-align: top;
    margin: 0 0 0 20px;
}
.sp-create .submit {
    width: 220px;
    padding: 4px 0;
    margin: 20px 0 20px 0;
    color: #000;
    font-family: arial;
    font-size: 77%;
    background: #d7e7cf;
    border: 1px solid #498a2d;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
}
.sp-create .checkbox {
    margin: 25px 5px 0 20px;
    vertical-align: -2px;    
}
.sp-create .checkbox-text {
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-size: 93%;    
}
/* Results */
.results {
    width:remCalc(960);
    background-color:#000000;
    margin:0px auto;
}
.results #timeline{
    width: remCalc(960);
    height:remCalc(450);
}
.results .title {
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-weight: bold;
    font-size: 108%;
    margin: remCalc(16) 0 0 remCalc(16);
    float: left;
    text-align: left;
}
.results select {
    width:remCalc(220);
    padding:remCalc(16);
    margin-right:remCalc(16);
}
.results .selector {
    text-align: right;
    margin: 12px 0 0 0;
}
.results #gauge {
    margin: 10px 0 0 0;
    float: left;
    text-align: left;
    width: 200px;
    height: 200px;
}
.results .container-max,.results .container-min,.results .container-umin {
    height: 210px;
    float: left;
    margin: 10px 0 0 0;
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-size: 93%;
    background-color:#000000;
    width:33.3%;
}

.results .container-umin{
    width: 100%;
    margin-top: 0px;
    margin-bottom:remCalc(16);
}

.results .title-max, .results .title-min, .results .title-umax {
    text-align: right;
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-weight: bold;
    margin: 8px 0 8px 0;
    float: left;
}
.results .title-max {
    width: 180px;
}
.results .title-umax {
    width: 160px;
}
.results .title-min {
    width: 140px;
}
.results .value {
    text-align: left;
    margin: 8px 0 8px 10px;
    width: 70px;
    float: left;
}
.results .value-min {
    text-align: left;
    margin: 8px 0 8px 10px;
    width: 50px;
    float: left;
}
.results .image {
    float:left;
}
.results #by-size, .results #by-req {
    width:450px;
    height:300px;
    float:left;
}
.results #by-size {
    margin: 10px 0 10px 10px;
}
.results #by-req {
    margin: 10px 0 10px 30px;
}
.results #domains-by-size, .results #domains-by-req {
    width:930px;
    height:300px;
    margin: 10px 0;
}
.results #pagespeed {
    margin: 10px 0;
}
.results #harviewer {
    margin: 10px 0;
}
.results #manager {
    text-align: left;
    padding: 20px 0 20px 10px;
}
.results button {
    width: 200px;
    padding: 4px 0;
    margin: 0 10px;    
    color: #000;
    font-family: arial;
    font-size: 77%;
    background: #d7e7cf;
    border: 1px solid #498a2d;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    display: none;
}
.results .newtab {
    text-align: center;
}
.results .newtab button {
    width: 200px;
    padding: 4px 0;
    margin: 5px 0 10px 0;
    color: #000;
    font-family: arial;
    font-size: 77%;
    background: #d7e7cf;
    border: 1px solid #498a2d;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
}
.results .spinner {
    position: relative;
    width: 26px;
    left: 515px;
    top: -27px;
    margin: 12px 0 0 0;
    display: none;
}


/* Wraith Interface Styles */
#existingSiteCont, #newSiteCont, #newBaselineCont {
    margin: 8px 8px;
    float: left;
}

#existingPathsCont{
    height:100%;
    width:100%;
    margin:remCalc(16) auto;
    float:left;
}

#editPathsCont{
    margin:8px;
    float:left;
}

#wraithBottom {
    min-height: 250px;
    height:100%;
}

#wraithTop{
   min-height:77px;
}
#updateData, #removeData {
    padding: 16px;
    width :80px;
    height:76px;
    background-color: red;
    float:left;
  
}
#existingPathsSel {
    height: 100%;
    width: 100%;
    min-height:remCalc(200);
    background-color: black;
    color: #498a2d;
}

input[type='checkbox']{
    min-width:20px;
    min-height:20px;
}


#existingSiteSel{
    min-width:150px;
    max-width:200px;
}

#newSiteCont label, #newPathCont label{
    margin:remCalc(4) 0;
    float:left;
    margin-right:remCalc(4)
}

#labelNewPath, #labelSecureProto{
    display:inline !important;
}

#secureProtoCheck{
    float:left;
}

#newPathCont{
    margin:remCalc(16) auto;
}

#newPathCont label{
   display:block; 
}

#newPathCheck{
    margin-right:10px;
    float:left;
}

#newPathLabel{
    margin-bottom:5px;
    width:90%;
}

#newSiteCheck{
    float: left;
}

#newSiteCheck label{
    margin-right: 8px;
    float:left;
}

#newSiteName{
   float:left;
   width:50%;
}

#newBaselineCont{
    width:remCalc(300); 
    margin:0px remCalc(16);
}

#newBaselineCont label{
    float:left;
    position: relative;
    top: 3px;
}

#newBaslineCheck, #removeSiteCheck{
    float:left;
}

#pathsInput{
    width:90%;
    resize:none;
}

#updateButtonsCont{
    min-height:80px;
    margin:0 auto;
    display:block;
    width:60%;
}


#mainContent{
    margin-top:-34px !important;
    margin-left:0 !important;
    width:98%;
}