/*Div container for each table*/
div.brandtable {
/*If width is changed need to adjust width values in .topedgespacer & .topedge*/
max-width:630px;
width:630px;
font-family:"Arial", "Verdana", "sans-serif";
padding-bottom:1px; 
border-radius:11px;
background-color:#C13B00;
position:relative;
font-size:16px;
margin-bottom:15px;
}

/*Caption heading for table*/
div.brandtable h1.brandtitle {
font-family:"Arial", "Verdana", "sans-serif";
font-size:1.3em;
color:#C13B00;
text-shadow: 0px 1px 1px #D6D6D6;
text-transform: uppercase;
font-weight:700;
text-align:center;
word-wrap:break-word;
padding:0.5em;
margin-bottom:0;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom:1px solid #828282;
border-top:1px solid #E9E9E9;
background-color:#B0B0B0;
background:-webkit-linear-gradient(top, #CFCFCF, #ABABAB);
background:-moz-linear-gradient(top, #CFCFCF, #ABABAB);
background:-ms-linear-gradient(top, #CFCFCF, #ABABAB);
background:-o-linear-gradient(top, #CFCFCF, #ABABAB);
background:linear-gradient(to bottom, #CFCFCF, #ABABAB);
}

div.brandtable div.topedge {
/*Width and has to be changed if .brandtable width is changed*/
width:626px;
height:10px;
margin-left:auto;
margin-right:auto;
margin-top:2px; 
margin-bottom:0px; /*Originally 2px without border-collapse issue*/
border-top-left-radius:11px;
border-top-right-radius:11px;
border-top:1px solid #FFFBF7;
background-color:#CBAC71;
background:-webkit-linear-gradient(top, #F2EEEA, #E8E4DF);
background:-moz-linear-gradient(top, #F2EEEA, #E8E4DF);
background:-ms-linear-gradient(top, #F2EEEA, #E8E4DF);
background:-o-linear-gradient(top, #F2EEEA, #E8E4DF);
background:linear-gradient(to bottom, #F2EEEA, #E8E4DF);
}

/*Rounded bottom edge of table*/
div.brandtable div.bottomedge {
width:626px; /*Width needs to be changed if .brandtable width is changed*/
height:10px;
margin-left:auto;
margin-right:auto;
margin-bottom:1px;
margin-top:0px; /*Originally -2px without border-collapse issue*/
border-bottom-left-radius:11px;
border-bottom-right-radius:11px;
border-bottom:1px solid #84652B;
background-color:#CBAC71;
background:-webkit-linear-gradient(top, #BD913D, #B2883A);
background:-moz-linear-gradient(top, #BD913D, #B2883A);
background:-ms-linear-gradient(top, #BD913D, #B2883A);
background:-o-linear-gradient(top, #BD913D, #B2883A);
background:linear-gradient(to bottom, #BD913D, #B2883A);
}

/*Main table*/
div.brandtable table.outertable {
width:100%;
color:black;
/*Have to apply gradient here instead of tbody due to Webkit & IE bugs*/
border-collapse:collapse;  /*Originally was separate and could apply gradient to tbody and didn't need to mess with borders*/
border-left: 2px solid #C13B00; 
border-right: 2px solid #C13B00;
background-color:#CBAC71;
background:-webkit-linear-gradient(bottom, #BD913D, #E8E4DF);
background:-moz-linear-gradient(bottom, #BD913D, #E8E4DF);
background:-ms-linear-gradient(bottom, #BD913D, #E8E4DF);
background:-o-linear-gradient(bottom, #BD913D, #E8E4DF);
background:linear-gradient(to top, #BD913D, #E8E4DF);
}

div.brandtable table.outertable tbody.outertbody {
line-height:1.25em;
/*Originally could put gradients here but Webkit & IE mess this up*/
}

/*Re-implements the borders that could easily be done with border-collapse:separate*/
div.brandtable table.outertable tr {
border-bottom: 2px solid #C13B00;
}

/*Removes the border-bottoms so they don't show up at the end of the table*/
div.brandtable table.outertable tr:last-child {
border-bottom: none;
}

/*Removes the border-bottoms so they don't show up on the spectable rows*/
div.brandtable table.outertable table.spectable tr {
border-bottom: none;
}

/*Left column*/
div.brandtable td.seriesnamecol {
width:33%;
text-align:center;
padding:5px 3px;
word-wrap:break-word;
vertical-align:middle;
border-right: 2px solid #C13B00;
}

/*Needed to fix Firefox relative positioning on a table*/
div.brandtable div.seriesnamecolwrapper {
position:relative;
}

div.brandtable div.productname {
color:#C13B00;
/*color:#565656; /*- alternate colour for product name*/
font-size:1.05em;
font-weight:700;
text-shadow:0px 1px 0px #ABABAB, 0px -1px 0px #CFCFCF;
/*text-shadow:0px 1px 1px #828282, 0px -1px 1px #E9E9E9; /*- alternate text shadows for product name*/
}

/*The 'Read our Review button*/
div.brandtable a.reviewlink {
/*Positioning*/
position:relative;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
top:0.9em;
padding-left:0.8em;
padding-right:0.8em;
/*Styling*/
color:#C13B00;
text-decoration:none;
text-shadow: 0px 1px 1px #D6D6D6;
border-radius:10px;
border-bottom:1px solid #828282;
border-top:1px solid #E9E9E9;
background-color:#B0B0B0;
background:-webkit-linear-gradient(top, #CFCFCF, #ABABAB);
background:-moz-linear-gradient(top, #CFCFCF, #ABABAB);
background:-ms-linear-gradient(top, #CFCFCF, #ABABAB);
background:-o-linear-gradient(top, #CFCFCF, #ABABAB);
background:linear-gradient(to bottom, #CFCFCF, #ABABAB);
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
}

div.brandtable a.reviewlink:hover {
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
box-shadow:0px 0px 7px #666666;
color:#C29A4F;
text-shadow: 0px 1px 1px #D6D6D6;
}

div.brandtable a.reviewlink:active {
-webkit-transition-duration:0.1s;
-moz-transition-duration:0.1s;
-ms-transition-duration:0.1s;
-o-transition-duration:0.1s;
transition-duration:0.1s;
box-shadow:none;
color:#161616;
background:#A0A0A0;
background:-webkit-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-moz-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-ms-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-o-linear-gradient(top, #AEAEAE, #C0C0C0);
background:linear-gradient(to bottom, #AEAEAE, #C0C0C0);
border-top:1px solid #949494;
}

/*Right column*/
div.brandtable td.specscol {
width:67%;
padding:5px 3px;
}

/*Inner table to keep the labels and data together*/
div.brandtable table.spectable {
width:100%;
border-spacing:0;
table-layout:fixed;
word-wrap:break-word; 
}

div.brandtable td.headingscol {
width:25%;
border-right:1px solid black;
padding:1px 1px 1px 5px;
}

div.brandtable td.datacol {
width:75%;
padding:1px 1px 1px 5px;
}

/*Sets the link colour for the SSD Store pricing link*/
div.brandtable td.datacol a {
color:#0000CC;
}

div.brandtable td.datacol a:visited {
color:#800080;
}

/*Filter Options Styling*/
/*The parent for the filter options*/
#filtercontainer {
font-family:"Arial", "Verdana", "sans-serif";
font-size:16px;
/*If width is changed, #filterbutton and #showallbutton widths must be changed*/
max-width:630px;
width:630px;
border-radius:11px;
margin-bottom:15px;
background-color:#CBCBCB;
background:-webkit-linear-gradient(right, #CFCFCF, #ABABAB);
background:-moz-linear-gradient(right, #CFCFCF, #ABABAB);
background:-ms-linear-gradient(right, #CFCFCF, #ABABAB);
background:-o-linear-gradient(right, #CFCFCF, #ABABAB);
background:linear-gradient(to left, #CFCFCF, #ABABAB);
}

/*Ensures the filter container's height will expand properly with the floated Filter/Showall buttons*/
.cf:after {
content: " ";
display: block;
visibility: hidden;
height: 0;
clear: both;
}

/*Filter Options title*/
#filtercontainer h1.mainheader {
font-family: "Arial", "Verdana", "sans-serif";
font-size:1.3em;
text-transform: uppercase;
font-weight:700;
color:#C13B00;
text-shadow: 0px 1px 1px #D6D6D6;
text-align:center;
padding:0.5em;
margin:auto;
border-bottom:1px solid #828282;
border-top:1px solid #E9E9E9;
background-color:grey;
border-top-right-radius:10px;
border-top-left-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
background-color:#B0B0B0;
background:-webkit-linear-gradient(top, #CFCFCF, #ABABAB);
background:-moz-linear-gradient(top, #CFCFCF, #ABABAB);
background:-ms-linear-gradient(top, #CFCFCF, #ABABAB);
background:-o-linear-gradient(top, #CFCFCF, #ABABAB);
background:linear-gradient(to bottom, #CFCFCF, #ABABAB);
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
box-shadow:none;
}

#filtercontainer h1.mainheader:hover {
color:#C29A4F;
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
box-shadow:0px 0px 15px #D6C19B;
}

#filtercontainer h1.mainheader:active {
box-shadow:none;
color:#161616;
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
background:#A0A0A0;
background:-webkit-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-moz-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-ms-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-o-linear-gradient(top, #AEAEAE, #C0C0C0);
background:linear-gradient(to bottom, #AEAEAE, #C0C0C0);
border-top:1px solid #949494;
}

#filtercontainer h1.mainheader #filteroptionsspan {
font-size:0.8em;
text-transform:none;
}

/*Headings for each spec type*/
#filtercontainer h2.subheader {
font-family: "Arial", "Verdana", "sans-serif";
font-size:1.2em;
font-variant:small-caps;
font-weight:700;
color:#C13B00;
text-shadow: 0px 1px 1px #D6D6D6;
text-align:center;
padding:0.25em;
margin:auto auto 10px auto;
border-top:1px solid #FCFCFC;
border-bottom:1px solid #C1C1C1;
background-color:#E5E5E5;
background:-webkit-linear-gradient(top, #FAFAFA, #D2D2D2);
background:-moz-linear-gradient(top, #FAFAFA, #D2D2D2);
background:-ms-linear-gradient(top, #FAFAFA, #D2D2D2);
background:-o-linear-gradient(top, #FAFAFA, #D2D2D2);
background:linear-gradient(to bottom, #FAFAFA, #D2D2D2);
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
box-shadow:none;
clear:left; /*Needed for IE as part of the column layout fix since it doesn't support column-count*/
}

#filtercontainer h2.subheader:hover {
color:#C29A4F;
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
box-shadow:0px 0px 15px #D6C19B;
}

#filtercontainer h2.subheader:active {
box-shadow:none;
color:#161616;
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
background:#D5D5D5;
background:-webkit-linear-gradient(top, #D9D9D9, #E7E7E7);
background:-moz-linear-gradient(top, #D9D9D9, #E7E7E7);
background:-ms-linear-gradient(top, #D9D9D9, #E7E7E7);
background:-o-linear-gradient(top, #D9D9D9, #E7E7E7);
background:linear-gradient(to bottom, #D9D9D9, #E7E7E7);
border-top:1px solid #A7A7A7;
}

/*Gives checkboxes a 2-column layout*/
#filtercontainer div.containCheckboxes {
font-family: "Arial", "Verdana", "sans-serif";
font-size:0.8em;
color:black;
-webkit-column-count:2;
-webkit-column-gap:0.1em;
-webkit-column-rule:none;
-moz-column-count:2;
-moz-column-gap:0.1em;
-moz-column-rule:none;
-ms-column-count:2;
-ms-column-gap:0.1em;
-ms-column-rule:none;
column-count:2;
column-gap:0.1em;
column-rule:none;
margin-bottom:10px;
padding-left:1em;
padding-right:1em;
}

/*Styling for the unordered list work-around for IE not supporting column-count*/
#filtercontainer ul.ieColumnFix {
float:left;
list-style-type:none;
padding:0;
width:50%;
word-wrap:break-word;
margin:0;
margin-bottom:1em;
}

#filtercontainer ul.ieColumnFix li {
list-style-type:none;
word-wrap:break-word;
font-size:1em;
line-height:1em;
}

/*Labels containing the checkboxes need to be block elements for CSS columns to work*/
#filtercontainer label.checkLabels {
display:block;
}

/*Style for the button that toggles the checked status for each spec type's checkboxes*/
#filtercontainer div.toggleCheckedButton {
clear:both;	/*Required for the ieColumnFix to work*/
width:100px;
margin-right:auto;
margin-left:auto;
margin-bottom:10px;
padding-left:0.8em;
padding-right:0.8em;
text-align:center;
color:#C13B00;
text-decoration:none;
text-shadow: 0px 1px 1px #D6D6D6;
border-radius:10px;
border-bottom:1px solid #828282;
border-top:1px solid #E9E9E9;
background-color:#B0B0B0;
background:-webkit-linear-gradient(top, #CFCFCF, #ABABAB);
background:-moz-linear-gradient(top, #CFCFCF, #ABABAB);
background:-ms-linear-gradient(top, #CFCFCF, #ABABAB);
background:-o-linear-gradient(top, #CFCFCF, #ABABAB);
background:linear-gradient(to bottom, #CFCFCF, #ABABAB);
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
}

#filtercontainer div.toggleCheckedButton:hover {
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
box-shadow:0px 0px 7px #666666;
color:#C29A4F;
text-shadow: 0px 1px 1px #D6D6D6;
}

#filtercontainer div.toggleCheckedButton:active {
-webkit-transition-duration:0.1s;
-moz-transition-duration:0.1s;
-ms-transition-duration:0.1s;
-o-transition-duration:0.1s;
transition-duration:0.1s;
box-shadow:none;
color:#161616;
background:#A0A0A0;
background:-webkit-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-moz-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-ms-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-o-linear-gradient(top, #AEAEAE, #C0C0C0);
background:linear-gradient(to bottom, #AEAEAE, #C0C0C0);
border-top:1px solid #949494;
}

/*Style for the Filter button*/
#filtercontainer #filterbutton {
text-align:center;
font-family: "Arial", "Verdana", "sans-serif";
font-size:1.2em;
font-weight:700;
color:#C13B00;
text-shadow: 0px 1px 1px #D6D6D6;
text-transform:uppercase;
padding-top:0.3em;
padding-bottom:0.3em;
border-bottom:1px solid #828282;
border-top:1px solid #E9E9E9;
border-right:1px solid black;
background-color:#B0B0B0;
background:-webkit-linear-gradient(top, #CFCFCF, #ABABAB);
background:-moz-linear-gradient(top, #CFCFCF, #ABABAB);
background:-ms-linear-gradient(top, #CFCFCF, #ABABAB);
background:-o-linear-gradient(top, #CFCFCF, #ABABAB);
background:linear-gradient(to bottom, #CFCFCF, #ABABAB);
border-bottom-left-radius:10px;
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
box-shadow:none;
float:left;
width:314px; /*Must be adjusted if the filtercontainer width is changed = #filtercontainer (width / 2)-1 (smaller because this button has the border)*/
}

#filtercontainer #filterbutton:hover {
color:#C29A4F;
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
box-shadow:0px 0px 15px #D6C19B;
}

#filtercontainer #filterbutton:active {
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
box-shadow:none;
color:#161616;
background:#A0A0A0;
background:-webkit-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-moz-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-ms-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-o-linear-gradient(top, #AEAEAE, #C0C0C0);
background:linear-gradient(to bottom, #AEAEAE, #C0C0C0);
border-top:1px solid #949494;
}

/*Style for the Show All Button*/
#filtercontainer #showallbutton {
text-align:center;
font-family: "Arial", "Verdana", "sans-serif";
font-size:1.2em;
font-weight:700;
color:#C13B00;
text-shadow: 0px 1px 1px #D6D6D6;
text-transform:uppercase;
padding-top:0.3em;
padding-bottom:0.3em;
border-bottom:1px solid #828282;
border-top:1px solid #E9E9E9;
background-color:#B0B0B0;
background:-webkit-linear-gradient(top, #CFCFCF, #ABABAB);
background:-moz-linear-gradient(top, #CFCFCF, #ABABAB);
background:-ms-linear-gradient(top, #CFCFCF, #ABABAB);
background:-o-linear-gradient(top, #CFCFCF, #ABABAB);
background:linear-gradient(to bottom, #CFCFCF, #ABABAB);
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
box-shadow:none;
border-bottom-right-radius:10px;
float:left;
width:315px; /*Must be adjusted if the filtercontainer width is changed = #filtercontainer width / 2 */
}

#filtercontainer #showallbutton:hover {
color:#C29A4F;
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
box-shadow:0px 0px 15px #D6C19B;
}

#filtercontainer #showallbutton:active {
-webkit-transition-duration:0.3s;
-moz-transition-duration:0.3s;
-ms-transition-duration:0.3s;
-o-transition-duration:0.3s;
transition-duration:0.3s;
box-shadow:none;
color:#161616;
background:#A0A0A0;
background:-webkit-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-moz-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-ms-linear-gradient(top, #AEAEAE, #C0C0C0);
background:-o-linear-gradient(top, #AEAEAE, #C0C0C0);
background:linear-gradient(to bottom, #AEAEAE, #C0C0C0);
border-top:1px solid #949494;
}

#lastupdate {
font-family:"Arial", "Verdana", "sans-serif";
font-size: 14px;
font-style:italic;
line-height:1.5em;
margin:10px;
text-align:justify;
color:#C6C6C6;
}