/*

File:		eqtr_components.css
Project:	DeAgostini Model Space
Created:	03/08/2009

Notes:


---------
Contents
---------

1. INTRO CONTENT
2. MODEL LIST GALLERY
3. GENERIC IMAGE + TEXT + LINK COMPONENT **styles for multiple uses**
4. HOME PAGE COMPONENTS
	4.1 SCROLLER
	4.2 TABLET
	4.3 FEATURE CAROUSEL
5. MODEL INFORMATION PAGE (includes styling for Model Alternate Layout)
6. MODEL DETAILS
	6.1 MODEL PURCHASE OPTIONS 
	6.2 MAGAZINE SUBSCRIPTION INFO
	6.3 EXTRA CONTENT SHOW/HIDE
    6.4 MODEL DETAILS & DIMENSIONS
    6.5 CSS STYLE SELECTOR
7. MODEL DETAIL GALLERY
8. TUTORIAL COMPONENTS
	8.1 8.1 TUTORIAL LIST / TUTORIAL CONTENT
	8.2 CATEGORIES MENU
	8.3 PAGING COMPONENT 
9. SUBCONTENT ADVERT COMPONENT
10. CONTACT US PAGE
11. SEARCH RESULTS PAGE

*/

/*---[ 1. INTRO CONTENT ]---*/

#content h1
{
    margin: 0 0 20px 0;
    font-size: 150%;
    line-height: 1.4em;
    color: #000;
}

#content .introContent
{
    padding-bottom: 10px;
}

#content .introContent p, #content .introContent li
{
    color: #666;
    font-size: 75%;
    line-height: 1.7em;
    margin-bottom: 1em;
}

#content .introContent h3, #content .introContent h4
{
    color: #55B9DF;
    margin: 1.7em 0 0.5em;
    font-size: 125%;
}

#content .introContent h4
{
    font-size: 100%;
}

#content .introContent h2
{
    font-size: 100%;
}

/*---[ 2. MODEL LIST GALLERY ]---*/


.modelListGallery p
{
    margin: 0;
}

.modelListGallery .row
{
    float: left;
    width: 597px;
    padding-bottom: 25px;
}

.modelListGallery .model
{
    width: 281px;
    float: left;
    position: relative;
}

.modelListGallery .featuredModel .model
{
    width: 569px;
    border: 8px solid #e6e6e6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background: url(../cssimages/featured_back.gif) top left repeat-y;
}

.modelListGallery .model .image
{
    border: 8px solid #e6e6e6;
    margin: 0;
    padding: 0;
    line-height: 0em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.modelListGallery .featuredModel .model .image
{
    float: left;
    width: 345px;
}

.modelListGallery .featuredModel .model .image
{
    border: none;
}

.modelListGallery .model .image img
{
    margin: 0;
    padding: 0;
}

.modelListGallery .model .info
{
    background: #fbfbfb url(../cssimages/model_info_back.gif) bottom left repeat-x;
    padding: 10px 10px 15px;
    margin: 0;
    width: 261px;
    float: left;
}

.modelListGallery .featuredModel .model .info
{
    width: 224px;
    float: right;
    padding: 0 0 15px 0;
    background: #FFF url(../cssimages/featured_info_back.gif) bottom left repeat-x;
}

.modelListGallery .model h3
{
    margin: 0;
    padding: 0;
    font-size: 100%;
    color: #000;
}

.modelListGallery .featuredModel h3
{
    width: 204px;
    font-weight: bold;
    color: #FFF;
    background: #55b9df;
    padding: 10px 10px 25px;
    margin: 0;
    line-height: 1.3em;
    text-decoration: none !important;
    text-shadow: 0px 1px 2px #03486B;
}

.modelListGallery .featuredModel .intro
{
    padding: 10px 10px 0;
    width: 204px;
    clear: right;
    line-height: 1.75em;
    color: #666;
}

.modelListGallery .featuredModel .featured
{
    position: absolute;
    top: -8px;
    left: -8px;
    text-indent: -9999px;
    background: url(../cssimages/featured_overlay.png) top left no-repeat;
    width: 138px;
    height: 106px;
}

.modelListGallery .action
{
    padding: 10px 0 0;
    margin: 0;
}

.modelListGallery .featuredModel .action
{
    width: 204px;
    padding: 10px 10px 0;
}

.modelListGallery .row .last
{
    margin-left: 23px;
}

.modelListGallery .featuredModel .last
{
    margin-left: 0;
}

/*---[ 3. GENERIC IMAGE + TEXT + LINK COMPONENT ]---*/

.subContent .item, .pageComponents .item
{
    width: 300px;
    background: #FFF url(../cssimages/side_comp_back.gif) top left repeat-x;
    border-top: 1px solid #000;
    padding-bottom: 20px;
}

.subContent .item h3, .pageComponents .item h3
{
    font-size: 125%;
    padding: 10px 10px 15px;
    margin: 0;
    color: #03486b;
}

.subContent .item h4, .pageComponents .item h4
{
    font-size: 140%;
    margin: 0 0 1em 0;
}

.subContent .item .image, .pageComponents .item .image
{
    margin: 0 0 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    display: block;
}

.subContent .item .image
{
    text-align: center;
}

.subContent .item .image img, .pageComponents .item .image img
{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.subContent .item .details, .pageComponents .item .details
{
    padding: 0;
    line-height: 1.7em;
}

.subContent .item .details
{
    position: relative;
}

.subContent .item .details .info, .pageComponents .item .details .info
{
    padding: 0 10px;
}

.subContent .item .action, .pageComponents .item .action
{
    padding: 0 10px;
}

/* Coming Soon promo badge */

.subContent .item .details .comingSoon, .pageComponents .item .details .comingSoon
{
    width: 116px;
    height: 116px;
    text-indent: -9999px;
    background: url(../cssimages/coming_soon.png) top left no-repeat;
    position: absolute;
    top: -15px;
    right: -15px;
}

/* Two column component layout styles */

.pageComponents
{
    float: left;
    width: 100%;
    clear: both;
}

.pageComponents .row
{
    float: left;
    width: 100%;
    clear: both;
}

.pageComponents .component
{
    float: left;
    width: 436px;
}

.pageComponents .item
{
    width: 436px;
    position: relative;
}

.pageComponents .last
{
    margin-left: 33px;
}

.pageComponents .item .image
{
    float: left;
    margin: 0 17px 0 0;
    padding-bottom: 10px;
}

.pageComponents .item .details
{
    color: #666;
}

.pageComponents .item .action
{
    text-align: left;
}

.pageComponents .item .details .comingSoon
{
    top: 3.3em;
    left: -15px;
    position: absolute;
}

/* Arrow Bullet-style link */

.link a
{
    padding-left: 10px;
    background: url(../cssimages/list_bullet.gif) center left no-repeat;
}


/*---[ 4. HOME PAGE COMPONENTS ]---*/

/*---[ 4.1 SCROLLER ]---*/

.mainContent .shipScroller
{
    overflow: hidden;
    position: relative;
    padding: 0 27px 10px;
    background: #AADCEF;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    width: 532px;
}

.mainContent .shipScroller .ships
{
    overflow: scroll;
}

html.js .mainContent .shipScroller .ships
{
    overflow: hidden;
}

.mainContent .shipScroller .inner
{
    width: 3000px;
}

.mainContent .shipScroller ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    height: 270px;
}

.mainContent .shipScroller ul li
{
    width: 265px;
    height: 260px;
    float: left;
    margin: 0 3px 0 0;
    padding: 10px 0 0;
    background: #AADCEF;
    position: relative;
}

.mainContent .shipScroller ul li div.model
{
    width: 265px;
    height: 210px;
    padding-bottom: 50px;
    background: #FFF url(../cssimages/scroll_item_back.gif) bottom left repeat-x; /*-moz-border-radius:3px;*/
}

.mainContent .shipScroller ul li h3
{
    margin: 0;
    color: #333333;
}

.mainContent .shipScroller ul li h3 img
{
}

.mainContent .shipScroller ul li h3 span, .mainContent .shipScroller ul li p.action, .mainContent .shipScroller ul li p.intro
{
    padding: 0 10px;
}

.mainContent .shipScroller ul li p.intro
{
    font-size: 100%;
}

.mainContent .shipScroller ul li p.action
{
    padding-top: 10px;
    position: absolute;
    bottom: 15px;
    left: 0;
    margin-bottom: 0;
}

/* Scroller Controls */

.mainContent .shipScroller .scrollControls .prevBut, .mainContent .shipScroller .scrollControls .nextBut
{
    position: absolute;
    top: 10px;
    width: 27px;
    height: 260px;
    text-indent: -9999px;
    background: #FFF;
    cursor: pointer; /*-moz-border-radius:4px; 	-webkit-border-radius:4px;*/
}

.mainContent .shipScroller .scrollControls .prevBut
{
    left: 0;
    background: url(../cssimages/scroller_prev_button_alt.gif) center left no-repeat;
}

.mainContent .shipScroller .scrollControls .nextBut
{
    right: 0;
    background: url(../cssimages/scroller_next_button_alt.gif) center left no-repeat;
}

.mainContent .shipScroller .scrollControls .pEnd, .mainContent .shipScroller .scrollControls .nEnd
{
    background-position: -27px 0px;
    cursor: default;
}

.mainContent .shipScroller .scrollControls .pageCount
{
    margin: 0;
    padding-top: 7px;
    font-size: 75%;
    font-weight: bold;
    color: #347082;
}

.mainContent .shipScroller .scrollControls .pageCount strong
{
    color: #347082;
}

/* Model Number */

.mainContent .shipScroller p.number
{
    position: absolute;
    top: -1px;
    left: 113px;
    width: 37px;
    height: 36px;
    text-indent: -9999px;
    background-position: top left;
    background-repeat: no-repeat;
}

.mainContent .shipScroller p.num1
{
    background-image: url(../cssimages/scroller_1.png);
}
.mainContent .shipScroller p.num2
{
    background-image: url(../cssimages/scroller_2.png);
}
.mainContent .shipScroller p.num3
{
    background-image: url(../cssimages/scroller_3.png);
}
.mainContent .shipScroller p.num4
{
    background-image: url(../cssimages/scroller_4.png);
}
.mainContent .shipScroller p.num5
{
    background-image: url(../cssimages/scroller_5.png);
}
.mainContent .shipScroller p.num6
{
    background-image: url(../cssimages/scroller_6.png);
}
.mainContent .shipScroller p.num7
{
    background-image: url(../cssimages/scroller_7.png);
}
.mainContent .shipScroller p.num8
{
    background-image: url(../cssimages/scroller_8.png);
}
.mainContent .shipScroller p.num9
{
    background-image: url(../cssimages/scroller_9.png);
}
.mainContent .shipScroller p.num10
{
    background-image: url(../cssimages/scroller_10.png);
}


/*---[ 4.2 TABLET ]---*/

.mainContent .tablet
{
}

.tablet
{
    float: left;
    width: 100%;
    clear: both;
    padding: 30px 0;
    margin: 0;
}

.tablet h2.intro
{
    margin-top: 0;
    color: #333;
    font-size: 125%;
}

html.js .tablet ul.controls
{
    width: 100%;
    float: left;
    border-bottom: 5px solid #55B9DF;
    z-index: 100;
    list-style: none;
    margin: 0;
    padding: 0;
}

#wrapper .tablet ul.controls
{
    font-size: 100%;
    margin-bottom: 0;
}

html.js .tablet ul.controls li
{
    float: left;
    font-size: 100%;
    margin: 0;
    padding: 0;
}

html.js .tablet ul.controls li a
{
    float: left;
    font-size: 87.5%;
    line-height: 2em;
    padding: 1px 12px;
    margin: 7px 3px 0 0;
    text-decoration: none;
    color: #333;
    border: 1px solid #BBB;
    background: #FFF url(../cssimages/tab_back.gif) bottom left repeat-x;
    border-bottom: none;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
}

html.js .tablet ul.controls li.selected a
{
    color: #FFF;
    background: #55B9DF;
    border-color: #55B9DF;
    padding: 4px 12px 5px;
    margin: 0px 3px 0px 0px;
    text-shadow: 0px 1px 2px #000;
}

.tablet .sections
{
    clear: both;
    padding-top: 10px;
}

.tablet .sections .section
{
    display: block;
    padding: 12px;
}

.tablet h3, .tablet h4
{
    color: #55B9DF;
    margin: 1em 0 .5em;
}

.tablet h3
{
    font-size: 125%;
    clear: both;
}

.tablet h4
{
    font-size: 100%;
}

.tablet img
{
    line-height: 0em;
    border: 8px solid #e6e6e6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

/* RSS FEED */

.tablet .feed .entry
{
    margin-bottom: 10px;
    padding-bottom: 5px;
    background: url(../cssimages/feed_divider.gif) bottom center no-repeat;
}

.tablet .feed .entry:last-child
{
    background: none;
}

.tablet .feed .rssTitle
{
    color: #333;
    font-size: 100%;
    margin-bottom: 10px;
    margin-top: 0;
}

.tablet .link
{
    margin-top: 1em;
}

/*---[ 4.3 FEATURE CAROUSEL ]---*/

/*---[ Feature Carousel ]---*/

/* Homepage banner */

.featureCarousel
{
    width: 571px;
    background: #e6e6e6;
    border: 8px solid #e6e6e6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    margin: 30px 0 0;
    position: relative;
    overflow: hidden;
    float: left;
    padding: 0;
}

.featureCarousel img
{
    padding: 0;
    border: none;
}

.featureCarousel li img
{
    display: none;
}

html.js .featureCarousel li.active img
{
    display: block;
    width: 336px;
    height: 222px;
    overflow: hidden;
}

.featureCarousel img
{
    position: absolute;
    top: 0;
    left: 235px;
    width: 594px;
    height: 268px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
}

.featureCarousel a
{
    text-decoration: none;
}

.featureCarousel ul
{
    padding: 0;
    width: 605px;
}

.featureCarousel ul
{
    font-size: 100%;
}

.featureCarousel li
{
    float: left;
    font-size: 100%;
    width: 235px;
    padding-right: 200px;
    padding-bottom: 3px;
    background: none;
}

.featureCarousel li.last
{
    padding-bottom: 0px;
}

.homepage .featureCarousel li
{
    width: 312px;
    padding-left: 614px;
    margin: 0;
    height: 72px;
}

.featureCarousel li.active
{
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.featureCarousel li h2
{
    font-size: 112.5%;
    color: #828282;
    line-height: 1em;
    padding-top: 11px;
    padding-bottom: 5px !important;
    margin: 0 !important;
}

.featureCarousel li .feature a
{
    background: #fefefe url(../cssimages/feature_back.gif) center left repeat-x;
    height: 72px;
    padding: 0 15px 0 15px;
    display: block;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
}

.featureCarousel li .feature a:hover
{
    text-decoration: none;
}

.featureCarousel li p
{
    font-size: 75%;
    margin: 0;
    line-height: 1.2em;
    color: #999;
}

#mainContent .featureCarousel ul p
{
    font-size: 75%;
}

.featureCarousel li.active h2, html.js .featureCarousel li.active p
{
    color: #FFF;
    text-shadow: 0 1px 2px #000;
}

.featureCarousel li .feature
{
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    cursor: default !important;
}

.featureCarousel li.active .feature a
{
    background: #55b9df;
}

.featureCarousel li .overlay
{
    display: none;
}

.featureCarousel li.active .overlay
{
    position: absolute;
    bottom: 0;
    left: 235px;
    width: 336px;
    display: block;
    z-index: 100;
    cursor: pointer;
}

.featureCarousel li .overlay p
{
    background: #55B9DF;
}

.featureCarousel li .overlay p
{
    padding: 15px;
    color: #FFF;
    background: rgba(85,185,223,0.7);
    clear: left;
    font-size: 100%;
    margin: 0;
    padding: 15px 10px 20px;
    display: block;
    cursor: pointer;
}




/*---[ 5. MODEL INFORMATION PAGE ]---*/

.modelInformation, .extraContent
{
    float: left;
    width: 100%;
}

.modelInformation .intro p
{
    font-size: 75%;
    margin-bottom: 20px;
}

/* Model info page alternate layout */


.videoHolder 
{
	padding-bottom:10px;
}

.videoHolder .componentTitle
{
    background:#FFF url(../cssimages/side_comp_back.gif) top left repeat-x;
    border-top:1px solid #000;
    padding-bottom:0;
    width:434px;
    margin-bottom:-12px;
}
.videoHolder p 
{
	margin-top:12px;
}

.videoHolder .componentTitle h3
{
    font-size: 125%;
    padding: 10px 10px 15px;
    margin: 0;
    color: #03486b;
}

.sideComponentsWrapper
{
	width:436px;
	float:left;
}
.modelInformation .sideComponentsWrapper .info 
{
	float:none;
	width:auto;
	padding: 20px 0;
}

.assemblyGuideContainer 
{
	width:100%;
	overflow:hidden;
}
.assemblyGuideItemRow 
{
	width:100%;
	overflow:hidden;
}
.assemblyGuideItem 
{
	float:left;
	width:452px;
}

.itemHeaderContainer 
{
	width:100%;
	overflow:hidden;
}
.modelInstructions 
{
	clear:both;
	background:#f6f6f6;
	width:100%;
	overflow:hidden;
}
.modelInstructions .showHide 
{
	margin:0 10px;
	padding:14px 0;
}
.modelInstructions .open span
{
    background-image: url(../cssimages/button_back_open.gif);
}
.assemblyGuideContainer h3 
{
	font-size:80%;
	color:#000;
	width:50%;
}
.modelInstructions .extraContent 
{
	background:#fff;
}
.assemblyGuideContainer .leftColHeader 
{
	float:left;
}
.assemblyGuideContainer .rightColHeader 
{
	margin-left:50%;
}

/* Model info page alternate layout END */

/*---[ 6. MODEL DETAILS ]---*/

.modelInformation .modelDetails
{
    width: 436px;
    float: right;
}
.modelInformation .modelDetails ul
{
    margin-bottom:15px;
}

.modelInformation .info
{
    width: 436px;
    float: left;
    padding: 20px 0;
}

.modelInformation .info .section
{
    float: left;
    width: 45%;
}

.modelInformation .info .last
{
    float: right;
}

.modelInformation .info .section h3
{
    font-size: 75%;
    color: #000;
    margin: 0 0 .5em;
}

.modelInformation .info .section p, .modelInformation .info .section li
{
    margin-bottom: 0;
    font-size: 75%;
}

.modelInformation .info .section li
{
    line-height: 1.3em;
}

.modelInformation .info .section strong
{
    color: #000;
}

/*---[ 6.1 MODEL PURCHASE OPTIONS ]---*/

.modelInformation .modelDetails .priceOptions
{
    width: 436px;
    float: right;
}

.modelInformation .modelDetails .priceOptions div
{
    float: left;
    width: 408px;
    display: block;
    padding: 10px 14px;
    background: #f9f9f9;
    margin-bottom: 2px;
}

.modelInformation .modelDetails .priceOptions div.even
{
    background: #f2f2f2;
}

.modelInformation .modelDetails .priceOptions .option
{
    padding: 0 30px 0 0;
    color: #333333;
    font-weight: bold;
    float: left;
    width: 180px;
    font-size: 75%;
}

.modelInformation .modelDetails .priceOptions .price
{
    color: #55B9DF;
    font-size: 112.5%;
    font-weight: bold;
    padding-right: 10px;
    float: left;
    width: 80px;
    font-size: 87.5%;
}


.modelInformation .modelDetails .priceOptions p.action
{
    float: left;
    width: 100px;
    margin-bottom: 0;
    font-size: 100%;
}

/*---[ 6.2 MAGAZINE SUBSCRIPTION INFO ]---*/

.modelInformation .modelDetails .magazineOffer
{
    width: 436px;
    float: right;
    background: #F2F2F2;
}

.modelInformation .modelDetails .magazineOffer .info
{
    padding: 0;
    float: left;
    width: 176px;
    padding: 10px 0 10px 14px;
}

.modelInformation .modelDetails .magazineOffer .info .option
{
    color: #333333;
    font-weight: bold;
    float: left;
    width: 140px;
    font-size: 75%;
}

.modelInformation .modelDetails .magazineOffer .info .price
{
    color: #55B9DF;
    font-size: 112.5%;
    font-weight: bold;
    float: left;
    width: 30px;
    font-size: 87.5%;
}

.modelInformation .modelDetails .magazineOffer .info .description
{
    line-height: 1.3em;
    width: 160px;
    clear: left;
}

.modelInformation .modelDetails .magazineOffer .image
{
    float: right;
    width: 240px;
    margin: 0;
    padding: 0;
    line-height: 0em;
}

/*---[ 6.3 EXTRA CONTENT SHOW/HIDE ]---*/

.modelInformation .modelDetails .extra
{
    background: #F2F2F2;
    padding: 10px 14px 0;
    float: left;
    width: 408px;
    margin-top: 2px;
}

.modelInformation .modelDetails .extraContent
{
    padding: 0;
    margin: 0 0 14px 0;
    width: 408px;
}

.js .modelInformation .modelDetails .extraContent
{
    display: none;
}

.js .modelInformation .modelDetails .extra .showHide
{
    margin: 0 0 14px 0;
}

.js .modelInformation .modelDetails .extra .open span
{
    background-image: url(../cssimages/button_back_open.gif);
}

/*---[ 6.4 MODEL DETAILS & DIMENSIONS ]---*/

.modelDimensions 
{
	background:#f2f2f2;
	width:100%;
	overflow:hidden; 
	margin:0 0 20px;
} 

.modelSpec dl
{
    width:218px;
    float:left;
    font-size:70%;
    margin:0;
}
.modelSpec dl dt
{
    margin:0;
    padding:10px;
    color:#000;
    background:#e6e6e6;
    border-bottom:1px solid #FFF;
    font-weight:bold;
}
.modelSpec dl dd
{
    margin:0;
    padding:5px 10px 0;
    color:#808080;
}
.modelSpec dd p,.modelSpec dd li,
.modelSpec dd dd,.modelSpec dd blockquote 
{
	font-size:100%;
}
.modelSpec ul 
{
	margin:0 0 8px;
	padding:0;
}
.modelSpec li 
{
	list-style:none;
}
.modelSpec dd strong
{
    color:#333333;
}

/*---[ 6.5 CSS STYLE SELECTOR ]---*/

/* SJ: Style selector gets css class from ModelAlternateLayout Doc type. 
   Values are set in the Colour Scheme Drodown Datatype. */
   
.styleSelector 
{
	width:100%;
	overflow:hidden;
}
#content .styleSelector_red h1
{
	color:#EA2432;
}
.styleSelector_red .videoHolder .componentTitle,
.styleSelector_red .subContent .item,
.styleSelector_red .pageComponents .item
{
	background-image:url("../cssimages/side_comp_back_red.gif");
}
.styleSelector_red .videoHolder .componentTitle h3,
.styleSelector_red .subContent .item h3,
.styleSelector_red .pageComponents .item h3
{
	color:#000;
}
.styleSelector_red .subContent .item h3,
.styleSelector_red .pageComponents .item h3 
{
	padding-bottom:18px;
}
.styleSelector_red strong 
{
	color:#EA2432;
}

.styleSelector_red .modelInformation .modelDetails .priceOptions .price
{
	color:#EA2432;
}

.styleSelector_red a:link,.styleSelector_red a:visited 
{
	color:#EA2432;
}
.styleSelector_red .action a:link,.styleSelector_red .action a:visited,
.styleSelector_red .showHide span
{
	color:#000;
	background-image:url(../cssimages/button_back_red.gif);
}
.styleSelector_red .action a:hover,.styleSelector_red .action a:active,
.styleSelector_red .action a:focus
{
	color:#03468b;
}

.styleSelector_red .open span 
{
	background-image:url(../cssimages/button_back_open_red.gif)!important;
}

#content .styleSelector_gold h1
{
	color:#D7AF49;
}
.styleSelector_gold .videoHolder .componentTitle,
.styleSelector_gold .subContent .item,
.styleSelector_gold .pageComponents .item
{
	background-image:url("../cssimages/hms-side_comp_back.gif");
}
.styleSelector_gold .videoHolder .componentTitle h3,
.styleSelector_gold .subContent .item h3,
.styleSelector_gold .pageComponents .item h3
{
	color:#000;
}
.styleSelector_gold .subContent .item h3,
.styleSelector_gold .pageComponents .item h3 
{
	padding-bottom:18px;
}
.styleSelector_gold strong 
{
	color:#D7AF49;
}

.styleSelector_gold .modelInformation .modelDetails .priceOptions .price
{
	color:#D7AF49;
}

.styleSelector_gold .action a:link,.styleSelector_gold .action a:visited,
.styleSelector_gold .showHide span
{
	color:#D7AF49;
	background-image:url(../cssimages/hms-victory-button_back.gif);
}
.styleSelector_gold .action a:hover,.styleSelector_gold .action a:active,
.styleSelector_gold .action a:focus,
.styleSelector_gold .showHide span:hover
{
	color:#000;
}

.styleSelector_gold .open span 
{
	background-image:url(../cssimages/hms-button_back_open.jpg)!important;
}



/*---[ 7. MODEL DETAIL GALLERY ]---*/

.modelInformation .modelGallery
{
    width: 436px;
    float: left;
    display: inline;
    margin-bottom: 20px;
    
}

.modelInformation .modelGallery .mainImage
{
    width: 436px;
    margin-bottom: 5px;
    display: block;
}

.modelInformation .modelGallery .galleryRow:after
{
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}


.modelInformation .modelGallery .galleryRow
{
    width: 436px;
    margin-top: 0px;
    margin-bottom: 0px;
    clear: left;
}

.modelInformation .modelGallery .galleryRow .galleryImage
{
    width: 106px;
    margin: 0 4px 4px 0;
    display: inline;
    line-height:13px;
    vertical-align:middle;
    float: left;
}

.modelInformation .modelGallery .galleryRow .last
{
    margin: 0 0 4px;
}

.modelInformation .modelGallery .galleryRow img
{
    border: none;
}


/*---[ 8. TUTORIAL / NEWS COMPONENTS ]---*/

/*---[ 8.1 TUTORIAL LIST / TUTORIAL CONTENT / NEWS LIST / NEWS CONTENT ]---*/

h2.tutorialsCategory, h2.newsArchiveCategory
{
    margin: 0 0 25px;
    font-size: 125%;
    color: #55b9df;
    padding: 5px;
    background: #F2F2F2;
}

.tutorial, .newsItem
{
    padding: 0 0 15px;
    margin: 0 0 15px;
    background: url(../cssimages/feed_divider.gif) bottom center no-repeat;
}

.tutorial:last-child, .newsItem:last-child
{
    background: none;
}

.tutorial h2.category, .newsItem h2.category
{
    font-size: 125%;
}

.tutorial h3, .newsItem h3
{
    font-size: 125%;
    color: #333;
    margin: 0;
}

.tutorial .metadata, .newsItem .metadata
{
    padding: 5px 0 10px;
    font-size: 68.75%;
}

.tutorial .metadata span.author, .newsItem .metadata span.author
{
    color: #55b9df;
}

.tutorial .featuredImage, .newsItem .featuredImage
{
    padding-bottom: 10px;
}

.tutorial .tutorialContent h3, .tutorial .tutorialContent h4, .newsItem .newsContent h3, .newsItem .newsContent h4
{
    color: #55b9df;
    margin: 1.7em 0 0.5em;
}

.tutorial .tutorialContent h4, .newsItem .newsContent h4
{
    margin-top: 1em;
}

.tutorial .tutorialContent p, .tutorial .tutorialContent ul, .newsItem .newsContent p, .newsItem .newsContent ul
{
    margin-bottom: 1.7em;
}

.tutorial .tutorialContent ul, .newsItem .newsContent ul
{
    margin-left: 15px;
    margin-right: 30px;
}

.tutorial .tutorialContent p, .tutorial .tutorialContent li, .newsItem .newsContent p, .newsItem .newsContent li
{
    line-height: 1.7em;
}

.tutorial img, .newsItem img
{
    border: 8px solid #e6e6e6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    max-width: 571px;
}

.tutorial .featuredImage, .newsItem .featuredImage
{
    position: relative;
}

.tutorial .featuredImage .topTutorial, .newsItem .featuredImage .mainNews
{
    position: absolute;
    top: 0;
    left: 0;
    text-indent: -9999px;
    background: url(../cssimages/top_tutorial.png) top left no-repeat;
    width: 138px;
    height: 106px;
}


/*---[ 8.2 CATEGORIES/ARCHIVE MENUS ]---*/

.subContent .tutorialCategories ul, .subContent .newsArchive ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.subContent .tutorialCategories ul li a, .subContent .newsArchive ul li a
{
    font-size: 112.5%;
    font-weight: bold;
    padding: 7px 10px 7px 23px;
    background: #f2f2f2 url(../cssimages/list_bullet.gif) 11px center no-repeat;
    display: block;
}

.subContent .tutorialCategories ul li:nth-child(2n) a, .subContent .newsArchive ul li:nth-child(2n) a
{
    background-color: #f9f9f9;
}

.subContent .tutorialCategories ul li.even a, .subContent .newsArchive ul li.even a
{
    background-color: #f9f9f9;
}

.subContent .tutorialCategories ul li.selected a, .subContent .newsArchive ul li.selected a
{
    background: #55b9df url(../cssimages/list_bullet_wob.gif) 11px center no-repeat;
    color: #FFF;
}


/*---[ 8.3 PAGING CONTROL - ** Also used for Model List** ]---*/

.pagingControl
{
    text-align: center;
    background: #f2f2f2;
    padding: 7px 10px;
    position: relative;
    font-size: 75%;
    font-weight: bold;
    clear: both;
    position: relative;
}

.pagingControl ul.pages
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
}

.pagingControl ul.pages li
{
    display: inline;
    font-size: 100%;
}

.pagingControl ul.pages li.selected a
{
    background: #55b9df;
    padding: 3px 5px;
    color: #FFF;
}

.pagingControl .action
{
    display: inline;
}

.pagingControl .back
{
    float: left;
    background-image: url(../cssimages/button_back_prev.gif);
    position: absolute;
    left: 10px;
    top: 8px;
}

.pagingControl .next
{
    float: right;
    position: absolute;
    right: 10px;
    top: 8px;
}


/*---[ 9. SUBCONTENT ADVERT COMPONENT ]---*/

.flashAdvert
{
    padding-bottom: 20px;
    width: 300px;
}

.adImageScroller
{
    width: 300px;
    margin-bottom: 20px;
}

.js .adImageScroller
{
    height: 250px;
    overflow: hidden;
    margin-bottom: 20px;
}

.js .adImageScroller a img
{
    border: none;
}

.js .adImageScroller .adScrollerInner
{
    height: 250px;
    float: left;
}

.js .adImageScroller .adScrollerInner .adImage
{
    float: left;
    width: 300px;
    height: 250px;
    overflow: hidden;
}


/*---[ 10. CONTACT US PAGE ]---*/

.contactUsContent
{
    width: 100%;
}

.contactUsContent iframe.contactUsFrame
{
    width: 100%;
    border: none;
    height: 500px;
}

/*---[ 10. SEARCH RESULTS PAGE ]---*/

h2.searchSummary
{
    font-size: 112.5%;
    font-weight: normal;
    color: #000;
}

ul.searchResults
{
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.searchResults li
{
    font-size: 100%;
}

ul.searchResults h3
{
    font-size: 125%;
    margin-bottom: 5px;
}

ul.searchResults p
{
    margin-bottom: 5px;
}

ul.searchResults .matchRating
{
    font-size: 75%;
    margin: 0;
}


.subContent .item a .image img, .pageComponents .item a .image img {border:none;}


.hmsVictoryHomepage
{
    position: relative;
    padding: 5px 27px 0 17px;
    background: #ebca7a;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #ebca7a;
    width: 542px;
    margin: 20px 0 30px;
    min-height: 152px;
}

.hmsVictoryHomepage .copy
{
    width: 260px;
    float: left;
    display: inline;
}
.hmsVictoryHomepage .copy h2
{
    font-size: 100%;
    margin: 0px;
    padding: 0 0 7px;
    color: #000;
}
.hmsVictoryHomepage .copy p
{
    font-size: 70%;
    color:#000;
}

.hmsVictoryHomepage .action a {font-size: 140%; text-transform:none;}

.hmsVictoryHomepage .image
{
    border: medium none;
    display: inline;
    float: right;
    position: absolute;
    right: -10px;
    top: -19px;
    width: 306px;
    z-index: 10;
}
.hmsVictoryHomepage:after
{
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
.hmsVictoryHomepage .image img
{
    width: 306px;
}





#zoom
{
	background:black no-repeat;
	border:2px solid black;
	-mz-border-radius:50%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
	display:none;
	overflow:hidden;
	
}

#zoom img {position: absolute;}

#orig
{
	width:300px;
	margin:40px;
	position:relative;
}

.fakeLayer
{
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	z-index:2;
	background:url(../cssimages/blank.gif);
	cursor:url(../cssimages/blank.gif),pointer;
	
}

.miniImg
{
	position:absolute;
	left:0;
	bottom:0;
	z-index:0;
	display:none;
	border:solid black;
	border-width:2px 2px 0 0;
	
}

.miniImg img
{
    width:120px;
}

.miniImg span
{
	position:absolute;
	border:1px solid red;
	-mz-border-radius:50%;
	left:0;
	top:0;
	background:rgba(0,0,0,0.2);
	font-size:0;
	line-height:0;
}


.zoomMessage {position: absolute; top: 10px; left: 10px; background: #000; color:#FFF; padding:10px; font-size: 60%; text-align:center; cursor:pointer;}

.js .hmsVic .mainImage img
{display:block;}
.js .hmsVic .mainImage {width: 100%;}


.subContent .videoHolder h3 
{
    padding-bottom: 9px;
    color:#000;
    }
    



.subContent .videoHolder {
background-image:url(../cssimages/hms-side_comp_back.gif);
}