/* Document Body */
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{
 width: 100%;
  background-color: #c2c2c2;
  margin: 0px auto 16px auto;
}

#casperScripts{
  margin:16px auto 16px 2%;
  padding:8px;
}

label [for=casperScripts]{
   margin:0px 10px 0px 40px; 
}

#harOptions{
    width:70%;
    margin: 16px 17%;
    color:black;
}

#logo{
    float:left;
    background-image:url('/images/slimer.png');
    width:188px;
    height:190px;
}

#urlList{
    width:100%; 
    margin:10px 16px;
    clear:both;
}

#waitTimeCont, #exeTimeCont, #throttlingCont{
    width:200px; 
    margin:16px 16px;
    float:left;
}

#networkThrottle{
    width:155px;
    position: relative;
    bottom: 7px;
}

#enableThrottle{
    width:20px;
    height:20px;
}

#ghostIt{
    background-color: red;
    float: right;
    margin-right: 150px;
    padding: 16px;
    width: 200px;  
}

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

#scriptOutputCont{
    width:95%; 
    height:300px;
    background-color:#000000;
    margin:0 auto;
    padding:16px;
    overflow-y:scroll;
}
/* Document Header and Footer*/
.header .left a:hover {
    text-decoration: none;
}
.header .right {
    text-align: right;
    font-family: "Gill Sans", Verdana;
    font-size: 77%;
    margin: 6px 0 0 0;
}
.header .left {
    float: left;
    text-align: left;
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-weight: bold;
    font-size: 174%;    
}
.header .hr,.footer .hr {
    height: 1px;
    width: 100%;
    background-color: #498a2d;
    margin: 10px 0 10px 0;
}
/* Preferences menu */
.header #preferences {
    position: absolute;
    width: 250px;
    height: 168px;
    top: 60px;
    right: 7px;
    padding: 8px;
    background: #FFFFFF;
    opacity: 0.85;
    border: 1px solid #498a2d;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
    z-index: 100;
    display: none;
}
.header #close {
    position: absolute;
    top: 7px;
    right: 8px;
    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 10px 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: 4px 0;
    margin: 0px 75px 0px 75px;
    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;
}

#reportControls{
    margin:20px 20px 20px 20px;
}
.uploader{
    width:45%;
    float:left;
    margin:0px auto 0px auto;
}


/* Manual uploader */
.uploader fieldset {
    margin: 20px 10px 20px 10px;
    border: 1px solid #498a2d;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
  
}
.uploader legend {
    color: #fff;
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-size: 93%;
    background: #498a2d;
    border: 1px solid #498a2d;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 2px 20px;
}
.uploader .file {
    float:left;
    color: #000;
    font-size: 77%;
    background: #d7e7cf;
    border: 1px solid #498a2d;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
}
.uploader .button {
    width: 100px;
    padding: 4px 0;
    margin: 0px 0 20px 0px;
    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;
}
/* Summary Table on Home Page */
.summary {
    width: 960px;
    visibility: hidden;
}
.summary .title {
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-weight: bold;
    font-size: 108%;
    margin: 0 0 12px 0;
    text-align: left;
    clear:both;
}
.summary table {
    table-layout: fixed;
}
.summary button {
    width: 220px;
    padding: 4px 0;
    margin: 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;
}
/* Superposed Test */
.sp-display {
    width: 960px;
}
.sp-display #chart{
    width: 960px;
    height: 400px;
}
.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: 12px 0 18px 0;
    float: left;
    text-align: left;
}
.sp-display #metrics, .sp-display #timings {
    visibility: hidden;
}
.sp-display #metrics {
    width: 155px;
}
.sp-display #timings {
    width: 200px;
}
.sp-display .selector {
    text-align: right;
    margin: 12px 0 18px 0;
}
.sp-create fieldset {
    width: 960px;    
    border: 1px solid #498a2d;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.sp-create legend {
    color: #fff;
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-size: 93%;
    background: #498a2d;
    border: 1px solid #498a2d;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 2px 20px;
}
.sp-create {
    position: relative;
}
.sp-create .form {
    position: relative;
    z-index: 1;
}
.sp-create .spinner {
    position: relative;
    z-index: 2;
    width: 24px;
    top: 32px;
    left: 480px;
    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: 960px;
}
.results #timeline{
    width: 960px;
    height: 450px;
}
.results .title {
    font-family: times, "Times New Roman", times-roman, georgia, serif;
    font-weight: bold;
    font-size: 108%;
    margin: 12px 0 0 0;
    float: left;
    text-align: left;
}
.results select {
    width: 200px;
    display: none;
}
.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%;
}
.results .container-max {
    width: 260px;
}
.results .container-min {
    width: 220px;
}
.results .container-umin {
    width: 200px;
}
.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 {
    margin: 35px 0 0 170px;
}
.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 0px 10px 0px;
    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 {
    width: 200px;
    margin: 8px 8px;
    float: left;
}

#existingPathsCont{
    height:100%;
    width:50%; 
    margin:0px 16px;
    float:left;
}

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

#wraithBottom {
    height: 250px;
    max-width:900px;
}

#wraithTop{
   min-height:77px;
   max-width:854px;
}
#updateData, #removeData {
    padding: 16px;
    width :80px;
    height:76px;
    background-color: red;
    float:left;
  
}
#existingPathsSel {
    height: 100%;
    width: 100%;
    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:5px 0px;
}

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

#newPathCont{
    margin-bottom:16px;
}

#newPathCont label{
   display:block; 
}

#newPathCheck{
    margin-right:10px;
}

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

#newSiteCheck{
    position: relative;
    bottom: 3px;
    float:left;
}

#newSiteName{
   float:left;
}

#newBaselineCont{
    width:300px; 
}

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

#newBaslineCheck, #removeSiteCheck{
    float:left;
}

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

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

/*For small devices*/
@media only screen and (max-width: 767px) {
    #existingPathsCont{
      width:90%;    
    }
}

#linkCont{
    width:80%;
    padding:10px 10px;
    background-color:#090909;
    margin:10px auto;
    min-height:300px;
    z-index:2;
    
}

#linkCont div{
    margin:16px auto;
    width:25%;
    float:left;
    padding:0px 10px;
    
}

#wraithLogo{
    background-image:url('/images/wraithLogo.png');
    width:188px;
    height:190px;
    background-size: contain;
    position: absolute;
    left:30px;
    top:75px;
    z-index:1;
}
