/* column container */
.colmask {
    position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
    clear:both;
    float:left;
    width:100%;				/* width of whole page */
    overflow:hidden;		/* This chops off any overhanging divs */
}
/* holy grail 3 column settings */
.holygrail {
    background:#ff9;    	/* Right column background colour */
}
.holygrail .colmid {
    float:left;
    width:200%;
    margin-left:0px; 	/* Width of right column */
    position:relative;
    right:100%;
    background:#fff;    	/* Centre column background colour */
}
.holygrail .colleft {
    float:left;
    width:100%;
    margin-left:-50%;
    position:relative;
    left:290px;         	/* Left column width + right column width */
    background:#fff;    	/* Left column background colour */
}
.holygrail .col1wrap {
    float:left;
    width:50%;
    position:relative;
    right:290px;        	/* Width of left column */
    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
}
.holygrail .col1 {
    margin:0 0 0 290px;     	/* Centre column side padding:
    Left padding = left column width + centre column left padding width
    Right padding = right column width + centre column right padding width */
    position:relative;
    left:200%;
    overflow:hidden;
}
.holygrail .col2 {
    float:left;
    float:right;			/* This overrides the float:left above */
    width:290px;        	/* Width of left column content (left column width minus left and right padding) */
    position:relative;
    right:0px;         	/* Width of the left-had side padding on the left column */
}

.container {
    width: auto;
    padding: 5px 20px;
}

.testName {
    color: #444;
}
.completedAt {
    font-size: 10px;
    color: #3f5686;
}
.moreDetailsToggle {
    font-weight: normal;
    color: #666;    
}

.rerunForm {
  clear: both;
  float: right;
  margin: 10px;
  color: #3f5686;
  font-size: 12px;
}
.rerunForm #test_run_name {
    width: 200px;
    padding: 3px;
}
.rerunForm .imagesubmit {
    vertical-align: bottom;
}

/* Left column */
#leftcol {
  float: left;
  padding: 10px 0 0 0;
  width: 290px;
  /* YELLOW background-color: #FFFF11; */
}
#leftcol div {
  /*width: 100%;*/
  overflow: hidden;
}
#leftcol .summary {
  /*height: 350px;*/
  overflow: hidden;
  table-layout: fixed;
}
.differencesSummaryContainer {
    margin-right: 10px;
}
#differencesSummary {
    font-size: 13px;
    border-collapse: inherit;
    border: 2px solid #ddd;
    width: 100%;    
}
#differencesSummary .left {
    text-align: left;
}
#differencesSummary .right {
    text-align: right;
    font-weight: bold;
}

.moreDetailsTD {
    padding: 0;
    
}
.moreDetailsTD table {
    width: 100%;
    }
.urlList {
    margin: 0;
}
.urlList li {
    list-style-type: none;
}
.summaryTableHeader {

}
.pageTitleLabel {
    float: left;
    font-size: 14px;
    font-weight: bold;
    margin: 5px 0 0 5px;
    color: #666;
}
.sortDropdown {
    float: right;
    font-size: 13px;
    margin: 0 10px 3px 0px;
}

/* Table styles */
#summaryTable thead {
    display: none;
}
#summaryTable th, #summaryTable td {
    border: none;
    border-bottom: 1px dotted #9DB0D0;
    border-top: 1px dotted #9DB0D0;
    font-size: 12px;
    padding: 5px 0 5px 5px;
    text-align: left;
}
#summaryTable .gap {
    border: none;
    padding: 0;
}

#summaryTable tr.selectedRow{
    background-color: #CCD8E6;
}

/* Try get the gap
#summaryTable tr.selectedRow th, #summaryTable tr.selectedRow td {
    border-bottom: 1px dotted #9DB0D0;
    border-top: 1px dotted #9DB0D0;
}*/

#summaryTable .notices {
    vertical-align: top;
}
#summaryTable .notices img,  #differencesSummary img{
    margin-left: 4px;    
    clear: both;
    float: right;
}
#summaryTable .notices span, #differencesSummary span.summaryTotal {
    display: block;
    font-weight: bold;
    float: right;
}
.page_title {
    color: #3f5686;
    font-weight: bold;
}

.page_title:hover, .notices:hover, .gap:hover {
  cursor: pointer; cursor: hand;
}


.pageUrl {
    color: #979797;
    font-size: 0.8em;
}
tr.hovered {
    background-color: #FFFF88;
}

/* Center col */
/* TODO: Necessary to show the Loading dialog before the screenshots arrive */
.holygrail .col1 {
  /*overflow: visible;*/
}

#centerWrapper {
    margin: 10px 10px 10px 0;
}

.center {
  float: left; /* Necessary for FF to pull it up to the top */
  /*margin-left: 10px;*/
  width: 100%;
  background-color: #CCD8E6;
  padding: 5px;
}


#displayTab {
    margin: 0;
}
#displayTab a {
    color: white;
    background-color: #899DBE;
    font-weight: bold;
    font-size: 12px;
}
#displayTab a.active {
    color: #516484;
    background-color: #EEE;
    font-weight: bold;
}

#displayTab .tab {
    margin-right: 5px;    
}

#layoutDifferences {
    background-color: #EEE;
    position: relative; /* So that the loading dialog can use absolute position */
}


/* Tabs */
li.tab {
  float: left;
  text-align: center;
  list-style-type: none;
}
li.tab a {
  background-color:#FFF;
  color:#666;
  display:block;
  height:20px;
  padding:4px 6px;

  /*width: 160px;*/
  }
li.tab a.active {
  background-color:#DDD;
  text-decoration: none;
  cursor: default;
}


/* Zoom and open link */
.zoom, .open {
  float: right;
  margin-right: 5px;
}

#openPage {
    color: #3F5686;
    font-size: 12px;
    font-weight: bold;
    text-decoration: underline;
    margin-top: 6px;
}

.tabWrapper {
    background-color: #EEE;
    padding: 5px;
    border-bottom: 1px solid #DDD;
}
.tabHeader {
    background-color: #CCD8E6;
    color: #666;
    font-size: 13px;
    font-weight: bold;
    padding: 8px;
}

.tabHeaderTitle {
    float: left;
}

.tabHeader a {
    float: right;
    margin-right: 5px;
}
.issues {
    border: 1px solid #DDD;
}
/* Difference list */
.errorDetails {
    background-color: white;
}
#problemTable {
  margin: 0;
}
#problemTable td {
  border-collapse: collapse;
  font-size: 12px;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid #DDD;

}

#javascriptErrorList {    
    margin: 0;
}

#javascriptErrorList li {
    list-style: none;
    padding: 5px;
    border-bottom: 1px solid #DDD;
    font-size: 12px;
}


/* Difference images, which already pad 5px on the right */
#pageRenderings{
    padding: 5px 0 5px 5px;
    background-color: white;
}
.left_image, .right_image {
    width: 50%;
    /*width: 200px;*/
    position: relative;
    margin-bottom: 5px;
    /* Hide some of the crazier positioned elements that may be outside the domdifftopdiv like on forums.redfin.com */
    overflow: hidden;
    /* Pad the width of the borders we use for elements that run right up to the bottom/right */
    /*padding: 1px;*/
    /*background-color: #879CBB; /* Default pass color */
}

.left_image {
    float: left;
    /*margin-right: 5px;*/
}
.right_image {
    float: right;
    /*margin-left: 15px; */
}

.left_image .inner, .right_image .inner {
    background-color: #879CBB; /* Default pass color */
    margin-right: 5px;
    padding: 1px;
    }
/* Test all in one row */
.diffThumbImage {
    /*width: 340px;*/
}

.screenshotImage {
    background-color: white;
    position: relative;
    overflow: auto;
    height: 300px;
    /* IE6 needs this, otherwise vscroll isnt present */
    width: 100%;

    /*border: 1px solid #395B73;*/
}
.labelBar {
    /*width: 100%;*/    
    /* unnecessary height: 25px;*/
    display: block;
    border-bottom: 1px solid gray; /* Match #diffDetailBox>div>div selector */
    font-weight: bold;
    font-size: 13px;
    height: 20px;
    padding: 5px;
    color: white;
    
}
.labelBar a {
    padding: 5px;
    display: block;
    float: right;    
    font-size: 1px; /* Hack for FF, since it doesnt shrink wrap around an image link */
}



.labelBar p {
    float: left;
    margin: 0;
}

/* When a browser passes/fails this difference.  Need specificity to override inner style above */
.passLabel {
    background-color: #879CBB; /* Default pass color */
}

.left_image .failLabel, .right_image .failLabel {
    background-color: #9A0000;
}
/* Hack to not have to change prob_highlighter */
.primary_image .failLabel {
    background-color: #879CBB;
}

/* Display of elements */
div.relativePositionChangedElement{
    font-size: 0pt;/*  Needed for IE6 to not have minimum div height */
    position: absolute;

}
/* IE Hack */
* div.relativePositionChangedElement {
    background-image: url(/images/clear.gif);
}


.relativePositioningComparison, .floatWrapComparison {
    border: 2px solid fuchsia; /*orange;*/
}

.dOMDocumentComparison {
    background-color: #9A0000;
    opacity: 0.2;
    filter: alpha(opacity=20);
}

.hoveredSelector {
    /*border: 2px solid yellow;*/
    background-color: yellow;
    z-index: 1000; /* Put on top of most everything else */
    opacity: 0.9;
    filter: alpha(opacity=90);
}

/* Sharing widget styles start */

#lbgwLightbox {
    padding: 0;
    width: 400px;
    height: 250px;
}
.modalTitleBar {
    background-color: #879CBB;
    margin: 0;
}
.modalBody {
    padding: 10px;
}

#lbgwLightbox #sharingForm img {
    width: auto;
    height: auto;

}
#sharingIndicator {
    text-align: center;
}
#sharingClose {
    margin-right: 10px;
}
/* Sharing widget styles end */