﻿
@media only screen and (min-width: 990px)  {
    .selectTopPane {
        height: 65px;
        border: 2px solid #c22032;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        padding-left: 5px;
    }
	.productSelectPane
	{
		width:25%;
		float:left;
		margin-top:5px;
		margin-left:5px;   
		height:40px;
		border-right:solid 1px #fff; 
        display:none;
	}	
	.specStyleSelect
	{
		width:20%;
		float:left;
		margin-top:5px;
		margin-left:5px;  
		height:40px;
		border-right:solid 1px #fff; 
	}
	.compareModelPane{
		width:30%;
		float:left;
		margin-left:5px;
		padding-top:7px;
		text-align:right;
	}
}

@media only screen and (min-width: 320px) and (max-width: 989px) {
    .selectTopPane {
        min-height: 100px;
        border: 2px solid #c22032;
        padding-left: 5px;
        display: table-cell;
    }
	.productSelectPane
	{
		width:240px;
		float:left;
		margin-top:5px;
		margin-left:5px;   
		height:40px;
        display:none;
	}
	.specStyleSelect
	{
		width:240px;
		float:left;
		clear:right;
		margin-top:5px;
		margin-left:5px;  
		height:40px;
	}
	.compareModelPane{
		width:240px;
		float:left;
		margin-left:5px;
		padding-top:7px;
	}	
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
    .productContainer {
        width: 55px;
        float: left;
        height: 75px;
        margin: 1px;
        border: 1px solid #c22032;
        position: relative;
        border-radius: 2px;
    }
	.selectContainer
	{
		min-height:300px;
		width:100%;
		margin-top:5px;
		margin-bottom:5px;
		line-height:20px;
        margin-left:auto;
        margin-right:auto;
	}

    .selectLeftPane {
        /*clear:left;*/
        width: 175px;
        height: 100%;
        float: left;
        position: relative;
        border: 3px solid #c22032;
        background-color: #fff;
    }
	
	.selectRightPane
	{
		padding-left:4px;
		width:85px;
		float:left;
		position:relative;   
		background-color:#fff;
	}	
	
	.productPhotoContainer{
		width:40px;
		height:50px;
		display: table-cell;
		vertical-align:middle;
		position:relative;
	}
	
	.productPhoto
	{
		display: block;
		margin-left:auto;
		margin-right: auto;
		width:75%;
		height:75%;
	}		
	.specParamContainer
	{
		width:160px;
		float:left;
		overflow:auto;   
		border:2px solid #ccc;
		margin:5px;
		border-radius:15px;
	}   
}

@media only screen and (min-width: 481px) {
    .productContainer {
        width: 120px;
        float: left;
        height: 120px;
        margin: 3px;
        border: 1px solid #c22032;
        position: relative;
        border-radius: 5px;
    }
    .selectContainer {
        min-height: 300px;
        width: 100%;
        max-width: 1024px;
        margin-top: 5px;
        margin-bottom: 5px;
        line-height: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    .selectLeftPane {
        /*clear:left;*/
        max-width: 670px;
        width: 61%;
        height: 100%;
        float: left;
        position: relative;
        border: 3px solid #c22032;
        background-color: #fff;
    }	
	
	.selectRightPane
	{
		padding-left:4px;
		width:39%;
		max-width:600px;
		float:left;
		position:relative;   
		background-color:#fff;
	}	
	.productPhotoContainer{
		width:100px;
		height:120px;
		display: table-cell;
		vertical-align:middle;
		position:relative;
	}	
	.productPhoto
	{
		display: block;
		margin-left:auto;
		margin-right: auto;
	}
	.specParamContainer
	{
		width:195px;
		float:left;
		overflow:auto;   
		border:2px solid #ccc;
		margin:5px;
		border-radius:15px;
	}   
}

/* clear fix */
.isotope:after {
  content: '';
  display: block;
  clear: both;
}

.headerLabel
{
    color:#fff;
    font-weight:bold;
    font-size:14px;
}

.specParamRow
{
	height:20px;
	/* height:25px  if using iCheck */
	margin-top:2px;
	margin-left:2px;
}     
.specParamLabel
{
    text-align:center;
    font-weight:bold;
    font-size:12px;
    /*background-color:#336699;*/
    color:#000;
    padding:2px;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
}
.specCheckBoxContainer
{
    float:left;
    clear:left;
    width:10%;   
}
.specCheckBoxLabel
{
    float:left;   
    padding-top:2px;
    font-size:11px;
  	width:90%;
    text-align:left;
}
.specLabelCount {
    color:#2489C5;
}
.productCounter
{     
    border: 1px solid #ccc;
    margin: 3px 0px 2px 0px;
    font-size: 16px;
    text-align: center;
    color: #2489C5;
    font-weight: bold;
    padding: 2px 0px 2px 0px;
    width:98%;
}
.modelLink
{
    height:20px;
    text-align:center;
    font-size:11px;
}
.headerGradient
{
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 25%, #f6f6f6 42%, #d3d3d3 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(25%,#f1f1f1), color-stop(42%,#f6f6f6), color-stop(100%,#d3d3d3));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 25%,#f6f6f6 42%,#d3d3d3 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#f1f1f1 25%,#f6f6f6 42%,#d3d3d3 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#f1f1f1 25%,#f6f6f6 42%,#d3d3d3 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 25%,#f6f6f6 42%,#d3d3d3 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d3d3d3',GradientType=0 );
}

    .tour 
    {
        width:155px;
        height:20px;
        color: #fff;
        background-color: #B81324;
        padding: 4px 10px;
        margin: 0px 0px 0px 5px;
        font-size: 18px;
        line-height: 18px;
        text-decoration: none;
        border-radius: 4px;
        text-align:center;
        /*position:absolute;*/
        top:-30px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
    }
    
.maskOverlay
{
    height:80%;
    width:100%;
    background-color:#cccccc;   
    position:absolute;
    top:0px;
    left:0px;
    margin-top:25px;
    font-weight:bold;
    font-size:13px;
}

.maskOverlay div
{
    margin:5px   
}

.TEDS
{
    height:68px;   
}