html {
    height: 100%;
}

body {
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D6D8CD', endColorstr='#FFFFFF'); /* for IE */
    background-image: linear-gradient(to bottom right, #D6D8CD 0%, #FFFFFF 100%); /* IE 10 */
    background: -webkit-gradient(linear, left top, left bottom, from(#D6D8CD), to(#FFFFFF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #D6D8CD,  #FFFFFF); /* for firefox 3.6+ */
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#main {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    border-left: 1px solid #D6D8CD;
    border-right: 1px solid #D6D8CD;
    border-bottom: 1px solid #D6D8CD;
}

.clear{
    clear: both;
}

#leftColumn
{
    width: 715px;
    float: left;
}

#rightColumn
{
    width: 245px;
    float: left;
}

#titleBar
{
    height: 20px;
    position: relative;
    background: url(../Images/TitleBar_BG.png) no-repeat 20px 15px;
}

#logo
{
    padding: 2px 0px 0px 5px;
}

#productName
{
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 2px 10px 0px 0px;
}

#renderWindow
{
    height: 500px;
    position: relative;
    background: url(../Images/ControlPanel_BG.png) no-repeat bottom;
}

#renderWindow .ajaxMask
{
    position: relative;
    top: 0px;
    left: 0px;
}

.canvas
{
    background: #eee;
    height: 500px;
    position: absolute;
    display: none;
    width: 720px;
    opacity: 1.0;
    filter: alpha(opacity=100);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.canvas img
{
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 1.0;
    filter: alpha(opacity=100);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#renderCanvas2
{
    display:none;
}

.on
{
    display: block;
}

.off
{
    display: none;
}

.bold
{
    font-weight: bold;
    color: #000;
}

#controlpanel
{
    height: 30px;
    width: 100%;
    position: absolute;
    bottom: 7px;
}

#categories
{
    height: 200px;
}

#tabs
{
    background: url("../Images/DetailsTop_BG.png") no-repeat bottom;
    font-size: 11px;
    height: 20px;
    padding-left: 15px;
    padding-top: 4px;
    text-transform: uppercase;
}

#tabs .button
{
    float: left;
    text-align: center;
    width: 110px;
}

#tabs .button.selected
{
    background: #fff;
}

#categories ul
{
    text-align: right;
    margin: 5px 15px;
    font-size: 12px;
}

#categories li
{
    color: #999;
    list-style-type: none;
    text-transform: uppercase;
    margin-bottom: 3px;
}

#categories li:hover
{
    color: #990000;
    cursor: pointer;
}

#rightColumn .bottom
{
    height: 6px;
    background: url(../Images/DetailsTop_BG.png) no-repeat 10px;
}

#details
{
    height: 355px;
    padding: 0px 30px 0px 15px;
}

#details .thumbnail
{
    height: 186px;
    width: 183px;
    background: url(../Images/LargeThumbnailframe.png);
    padding: 5px 0px 0px 10px;
    margin: 10px 0px 5px 15px;
}

#details .name
{
    color: #000;
    text-align: right;
}

#details .description
{
    margin-top: 0px;
    color: #999;
    text-align: right;
    font-size: 11px;
}

#details .description .small
{
    font-size: 10px;
}

#options
{
    height: 125px;
    padding: 10px 0px 0px 5px;
    text-transform: uppercase;
    position: relative;
    color: #999;
    font-size: 12px;
}

#options .content
{
    display: none;
}

#options .name
{
    float: left;
    margin-right: 20px;
}

#options #changeComponentButtons
{
    position: absolute;
    right: 5px;
    top: 10px;
    width: 170px;
}

#options .selection
{
    float: right;
    margin-left: 10px;
}

#options .selection:hover
{
    color: #990000;
    cursor: pointer;
}

#PrevOptionPage
{
    width: 26px;
    height: 36px;
    background: url(../Images/prev_arrow.png);
    position: absolute;
    bottom: 25px;
    left: 0px;
}

#PrevOptionPage:hover
{
    cursor: pointer;
}

#NextOptionPage
{
    width: 26px;
    height: 36px;
    background: url(../Images/next_arrow.png);
    position: absolute;
    bottom: 25px;
    right: 0px;
}

#NextOptionPage:hover
{
    cursor: pointer;
}

#options .thumbnails
{
    width: 710px;
    float: left;
    margin-top: 5px;
    position: relative;
    min-height: 77px;
}

#options .thumbnails ul
{
    padding: 0;
    margin: 0px 27px;
}

#options .thumbnails li
{
    list-style-type: none;
    float: left;
    width: 77px;
    height: 83px;
    padding: 4px 0px 0px 5px;
    background: url(../Images/SmallThumbnailFrame.png);
}

#options .thumbnails li:hover
{
    cursor: pointer;
}

#options .thumbnails li img
{
    border: 1px solid #000;
    width: 73px;
    height: 73px;
}

#options .thumbnails li img.selected
{
    border: 2px solid #CC0000;
}

.button
{
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#D6D8CD'); /* for IE */
    background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D6D8CD 100%); /* IE 10 */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#D6D8CD)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FFFFFF,  #D6D8CD); /* for firefox 3.6+ */
}

.button:hover
{
    cursor: pointer;
    margin-top: 1px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D6D8CD', endColorstr='#FFFFFF'); /* for IE */
    background-image: linear-gradient(to bottom right, #D6D8CD 0%, #FFFFFF 100%); /* IE 10 */
    background: -webkit-gradient(linear, left top, left bottom, from(#D6D8CD), to(#FFFFFF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #D6D8CD,  #FFFFFF); /* for firefox 3.6+ */
}

.button a
{
    color: #696969;
    display: block;
    text-decoration: none;
}

.selected
{
    background: #fff;
    filter: none;
}

.selected:hover
{
    filter:none;
}

#controlpanel ul
{
    padding: 0px 0px 0px 5px;
    margin: 0;
}

#controlpanel li
{
    float: left;
    padding: 5px;
    margin-right: 10px;
    list-style-type: none;
    border-radius:10px;
    border-radius:0px \0/;
    border: 1px solid #b9b9b9;
}

#controlpanel li:hover
{
    cursor: pointer;
}

#bookmarkContent
{
    width: 450px;
}

#bookmarkContent p.strong
{
    font-weight: bold;
}

#detailsContent
{
    width: 450px;
}

.ajaxMask
{
    display: none;
    position: absolute;
    background: #000;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    filter: alpha(opacity=40);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    top: 0;
    left: 0;
}

.ajaxMask img
{
    position: relative;
    top: 40%;
    left: 50%;
}

.introTitle
{
    font-weight: 700;
    font-size: 38px;
    text-align: center;
    padding-top: 100px;
}

.introLine
{
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    padding-top: 50px;
}

#introPopup
{
    width: 720px;
    height: 480px;
    padding: 10px 20px;
}

#introPopup .link
{
    color: #990000;
    text-transform: uppercase;
    float: left;
    width: 240px;
    margin-top: 20px;
}

#introPopup .link:hover
{
    cursor: pointer;
}

#introPopup .link.right
{
    text-align: right;
}

#fancybox-wrap {
  position: absolute;
  top: 50px !important;
}