/* 
========================================================================
HEADINGS AND BASIC FONT STYLES
========================================================================
*/
p,
td,
th,
select,
body                                    { font-family: Segoe UI, Arial, Helvetica, Sans-Serif; line-height: 17px; font-size: 13px; font-weight: normal; color: #555; padding: 0; margin: 0; }
p                                       { margin: 5px 0 10px 0 }
h1                                      { font-family: "Segoe UI Light", "Open Sans", "Segoe UI", Sans-Serif; font-size: 210%; letter-spacing: -0.5px; color: #000; margin: 0; padding: 15px 0 10px 0; display: block; font-weight: 100; line-height: 33px; }
h2                                      { font-family: Segoe UI, Arial, Helvetica, Sans-Serif; font-size: 130%; color: #000; margin: 5px 0 5px 0; padding: 0; }
.h2_light_extra                         { color: #aaa; font-weight: bold; }
h3                                      { font-family: Segoe UI, Arial, Helvetica, Sans-Serif; font-size: 95%; font-weight: normal; margin: 0 0 5px 0; padding: 0; }
h4,
h2.blockheader                          { font-family: Segoe UI, Arial, Helvetica, Sans-Serif; font-weight: 100; font-size: 140%; color: #000; margin: 0; padding: 0 0 15px 0; }
h5                                      { font-family: Segoe UI, Arial, Helvetica, Sans-Serif; margin: 0px 0px 5px 0px; color: #000; text-transform: uppercase; padding: 2px 2px 2px 0px; text-align: left; }
pre                                     { color: #008800 }
iframe                                  { border: none; overflow: hidden; display: inline;}
iframe body                             { padding: 5px 0 0 0;  overflow: hidden; }
.strong                                 { font-weight: bold }
.floatright                             { float: right }
ul, ol, dl                              { font-size: inherit; }
/* 
========================================================================
BREADCRUMBS
========================================================================
*/
.breadcrumbtrail                        { padding: 5px 17px 5px 0; display: block; font-weight: normal; text-decoration: none; margin: 15px 0 9px 0px; font-size: 100%; }
.breadcrumbtrail span span              { font-weight: bold; color: #000; display: inline-block; padding: 0 0 0 6px; }
.breadcrumbtrail span span a            { color: #666; padding: 0 17px 0 0; display: inline-block; font-weight: normal; margin: 0; background-image: url(Images/breadcrumb_back.png); background-position: right center; background-repeat: no-repeat; }
/* 
========================================================================
HYPERLINKS
========================================================================
*/
a:link,
a:visited                               { text-decoration: none; color: #04d; outline: 0; }
a:hover                                 { text-decoration: none; color: #000; }
a.link2,
span.link2 a                            { padding: 2px 8px; text-transform: uppercase; font-size: 11px; font-weight: bold; text-decoration: none; color: #fff; background-color: #888; margin-right: 10px; border-radius: 3px; }
a.link2:hover,
span.link2:hover a                      { background-color: #f90; }
/* 
========================================================================
GENERAL
========================================================================
*/
.pad_shortformat                        { padding: 20px }
div.spacer                              { clear: both }
/* Invisible elements - when we need a control to render, but not show */
.invisible                              { visibility: hidden; display: block; width: 10px; height: 8px; }
/* By default disable all borders on images */
img                                     { border: none }
/* 
========================================================================
TABLES
========================================================================
*/
table                                   { border: none; background-color: transparent; border-collapse: separate; width: 100%; max-width: 100%; }
table tr td                             { background-color: #f5f5f5; border-bottom: solid 1px #ddd; vertical-align: top; padding: 5px 10px 5px 5px; }
table tr.alt                            { }
table tr.headrow,
table thead tr                          { }
table tr.headrow th,
table thead tr th                       { background-color: #fff; border-bottom: solid 1px #f90; line-height: 12px; padding: 5px 10px 4px 5px; font-weight: normal; color: #888; text-align: left; text-transform: uppercase; font-size: 85%;}
table td,
table th                                { padding: 3px }
table td strong                         { color: #000 }
table td.itemname                       { font-weight: bold }
table td.select,
table th.select                         { text-align: right }
table.filled                            { border-collapse: collapse; margin-bottom: 10px; }
table.filled td                         { color: #000; vertical-align: top; }
table tr.totalsrow td                   { background-color: transparent }
table tr.totalsrow td.total             { background-color: transparent; color: #f00; font-weight: bold; }
.nowrap                                 { white-space: nowrap }
/* 
========================================================================
DETAILS VIEW / SECTIONS
========================================================================
*/
.Kartris-DetailsView                    { width: 100% }
.Kartris-DetailsView-Data               { margin-bottom: 10px }
.Kartris-DetailsView-Data ul            { list-style-type: none; padding: 0; margin-left: 0;  }
.Kartris-DetailsView-Data ul li         { padding-top: 5px }
.Kartris-DetailsView-Name               { font-size: 90%; display: inline-block; color: #666; margin-bottom: 3px; width: 150px; font-weight: normal; vertical-align: top; padding-right: 10px; }
.Kartris-DetailsView-Value              { font-size: 90%; display: inline-block; width: 350px; max-width: 100%; vertical-align: top; color: #000; overflow: visible; }
.Kartris-DetailsView-Value label        { white-space: nowrap; max-width: 100%; }
/* 
========================================================================
FORM ELEMENTS
========================================================================
*/
form                                    { margin: 0; display: inline; padding: 0; }
textarea                                { min-height: 80px; max-width: 100%; }
select,
input                                   { width: 250px; max-width: 100%; }
input.longtext                          { width: 400px }
select.shorttext,
input.shorttext                         { width: 60px }
select.fullwidth,
input.fullwidth                         { width: 100% }
select:focus,
input:focus,
textarea:focus                          { color: #000; background-color: #fff; border: solid 1px #c00; }
.button                                 { font-family: Segoe UI, Arial, Helvetica, Sans-Serif; font-size: 14px; border: solid 1px #333; background-color: #ddd; color: #111; font-weight: bold; padding: 3px 13px; margin: 1px 0px 1px 2px; width: auto; display: inline-block; }
.button:focus,
.button:hover                           { background-color: #666; color: #fff; border: solid 1px #666;  }
input.cancelbutton                      { background-color: #ddd; border-color: #bbb; color: #666; }
input.highpriority                      { }
.inputform p                            { margin: 5px 0 15px 0 }
.inputform div                          { margin-bottom: 5px; }
.inputform .submitbuttons div           { float: none }
.inputform br                           { display: block; clear: both; }
.checkbox input,
.radio input                            { border-style: none; background-color: transparent; display: inline-block; width: 20px; float: left; margin-right: 1px; }
label                                   { font-size: 11px; text-transform: uppercase; display: inline-block; letter-spacing: 0px; color: #777; margin-bottom: 3px; font-weight: normal; vertical-align: top; }
.inputform .column2                     { padding: 0px; margin-left: 130px; }
.inputform .column2 label               { width: auto }
div.formdivider                         { display: block; border-top: dotted 1px #bbb; width: 100%; }
div.section                             { margin: 10px 0 10px 0 }
.submitbuttons                          { margin: 5px 0 20px 0; z-index: 2; width: 100%; }
/* We use this to override Foundation defaults */
select,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea                                { border: solid 1px #bbb; background-color: #f5f5f5; box-shadow: inset 3px 3px 3px #ccc; height: auto; padding: 1px; color: #333; }
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
textarea:focus                          { background-color: #fff4cc; color: #000; border: solid 1px #f90; box-shadow: none;}

/* 
========================================================================
ERRORS & VALIDATION
========================================================================
*/
span.error,
div.errortext                           { font-style: normal; font-size: 13px; display: inline-block; color: #fff; font-weight: bold; padding: 1px 5px 1px 3px; background-color: #f00; margin-left: 3px; border-radius: 3px; }
.requiredfield                          { font-weight: bold }
.valsummary                             { display: inline; color: #fff; font-weight: bold; padding: 1px 5px 1px 3px; background-color: #f00; margin-left: 10px; border-radius: 3px; }
.valsummary ul                          { display: none; visibility: hidden; }
/* 
========================================================================
IMAGES
========================================================================
*/
.imageholder                            { display: block; text-align: center; max-width: 90vw; max-height: 90vw; }
.imageholder img                        { margin: 0; padding: 0; max-width: 100%; max-height: 100%; }
.imageviewer                            { text-align: center; }
.imageviewer .gallery                   { padding: 0; width: 100%; text-align: left; }
.imageviewer .gallery .scrollarea       { display: inline-block }
#frmLargeImage div                      { }
#frmLargeImage .imageviewer .gallery    { padding: 5px 0 0 0; text-align: center; overflow-x: auto; overflow-y: hidden; white-space: nowrap; position: fixed; bottom: 0; width: 99%; }
.imageviewer .gallery .imageholder      { background-color: #fff; display: inline-block; float: left; border: solid 1px #aaa; margin: 0 1px 2px 1px; vertical-align: middle; height: 80px; width: 80px; overflow: visible; }
html>body .imageviewer .gallery .imageholder
										{ float: none; float: *right; /*IE7 hack */ }
.imageviewer .gallery .imageholder:hover
										{ border: solid 1px #fc5 }
.imageviewer .gallery .imageholder img  { vertical-align: middle; margin: 5px; }
.singleimage                            { margin: auto }
.product .promotions .singleimage       { float: left }
.largeview                              { margin: 0 0 5px 0; float: left; }
.largeview span                         { color: #000; cursor: pointer; font-weight: bold; padding: 0 0 0 0; }
.hand                                   { cursor: pointer; }
/* 
========================================================================
LIGHTBOX (FOUNDATION 'CLEARING')
v2.9 This replaces the popup we used to use
========================================================================
*/
.clearing-assembled .clearing-container                     { background: #fff; }
.clearing-assembled .clearing-container .visible-img        { background: #fff; }
.main_product_image .clearing-assembled .carousel           { margin-top: 10px; }
.clearing-assembled .clearing-container .carousel           { margin-top: 10px; background: #fff; }
.clearing-assembled .clearing-container .carousel > ul      { width: auto !important; } /* centre the thumbs */
.carousel > ul li                                           { list-style: none; height: 70px; width: 70px; padding: 3px; border: solid 1px #aaa; margin-right: 2px; overflow: hidden; }
.clearing-assembled .clearing-container .carousel > ul li   { list-style: none; border: solid 1px #444; display: block; height: 70px; width: 70px; margin-right: 4px; overflow: hidden; }
.clearing-assembled .clearing-container .carousel > ul li:hover { border: solid 1px #fc5; }
.clearing-assembled .clearing-container .carousel > ul li.fix-height img
															{ height: auto; }
.versions .carousel > ul li                                 { height: 120px; width: 120px; } /* height of version images, without affecting product thumbs */
a.clearing-close                                            { font-size: 27pt; font-weight: bold; color: #000; }
.clearing-main-prev > span                                  { border-right-color: #444; }
.clearing-main-next > span                                  { border-left-color: #444; }

/* 
========================================================================
MEDIA (Video, audio, etc.)
========================================================================
*/
/* media gallery for product */
.imagecolumn .media_gallery             { padding: 5px 0 0 0 }
.imagecolumn .media_gallery h2			{ font-size: 100%; margin: 0; padding: 3px 0 5px 0; color: #000; font-weight: bold; }
.imagecolumn .media_gallery_inner       { margin: 1px 0 1px 0 }
/* media links, new styles (v2.8006 and earlier) */
.media_links .mediaholder a             { text-align: center; padding: 0px; display: block; margin: auto auto auto auto; height: 52px; }
.media_links .mediaholder:hover			{ border: solid 1px #fc5 }
.media_links .mediaholder img           { vertical-align: middle; margin: 5px; height: 50px; width: 50px; }
.media_links .mediaholder               { display: inline-block; float: left; margin: 0 1px 2px 0; vertical-align: middle; border: solid 1px #aaa; width: 60px; height: 60px; overflow: visible; }
/* media links, new styles (v2.8006 onwards) */
.media_links .mediaholder_horiz a       { text-align: left; padding: 1px; display: block; font-weight: bold; }
.media_links .mediaholder_horiz a:hover { color: #000; text-decoration: none; }
.media_links .mediaholder_horiz img     { vertical-align: middle; margin-right: 5px; }
.media_links .mediaholder_horiz         { display: block; margin: 0 1px 2px 0; vertical-align: middle; overflow: visible;}                { }
.media_links .mp3player                 { border: solid 1px #888; background-color: #888; margin: 2px 1px; border-radius: 3px; }
.media_links .customthumb img           { width: 100px; }
/* media gallery for versions, hide title */
.versions .media_gallery h2             { display: none }
/* v2.9 we apply a new class to popups for media, so can make them full screen, hide border and match Foundation lightbox look and feel */
.popup.popup_media                      { border: none; min-height: 100%; min-width: 100%; }
.popup.popup_media .closebutton         { font-size: 27pt; font-weight: bold; color: #000; top: 18px; right: 14px; }
/* 
========================================================================
TABS AJAX CONTROL
========================================================================
*/
.ajax__tab_default .ajax__tab_header    { border-bottom: solid 3px #ccc; margin: 8px 0 10px 0; font-weight: normal; }
.ajax__tab_default .ajax__tab_header .total
										{ font-weight: normal }
.ajax__tab_default .ajax__tab_active .ajax__tab_outer,
.ajax__tab_default .ajax__tab_header .ajax__tab_outer,
.ajax__tab_default .ajax__tab_hover .ajax__tab_outer
										{ margin-right: 2px; padding: 0 0 2px 0; }
.ajax__tab_default .ajax__tab_active .ajax__tab_inner,
.ajax__tab_default .ajax__tab_header .ajax__tab_inner,
.ajax__tab_default .ajax__tab_hover .ajax__tab_inner
										{ padding: 0; margin-left: 3px; /* offset the width of the left image */ }
.ajax__tab_tab                          { margin: 2px 5px 1px 2px; padding: 1px 3px 0 3px; }
.ajax__tab_default .ajax__tab_header .ajax__tab_inner a
										{ color: #000 }
.ajax__tab_default .ajax__tab_hover .ajax__tab_inner a
										{ color: #fff }
.ajax__tab_default .ajax__tab_active .ajax__tab_inner a
										{ color: #000 }
.ajax__tab_default .ajax__tab_hover .ajax__tab_tab strong,
.ajax__tab_default .ajax__tab_active .ajax__tab_tab strong
										{ font-weight: bold }
.ajax__tab_default .ajax__tab_body      { background-color: transparent }
.ajax__tab_header                       { }
.ajax__tab_outer                        { background-color: #ddd; border-bottom: solid 1px #fff; }
.ajax__tab_hover .ajax__tab_outer       { background-color: #999; }
.ajax__tab_active .ajax__tab_outer      { background-color: #ccc; border-bottom: solid 1px #ccc; color: #000; font-weight: bold; }
/* 
========================================================================
ACCORDION AJAX CONTROL
========================================================================
*/
.accordionHeader,
.accordionHeaderSelected                { border-top: solid 1px #ddd; cursor: pointer; }
.accordionHeader h2,
.accordionHeaderSelected h2             { cursor: pointer; margin-bottom: 10px; padding: 3px 0 0 0; }
.accordionHeader h2:before              { content: "[+]"; color: #666; font-size: 70%; width: 25px; display: inline-block; }
.accordionHeaderSelected h2:before      { content: "-"; color: #666; font-size: 70%; width: 25px; display: inline-block; }
/* 
========================================================================
UPDATE MESSAGE ('the record was updated')
========================================================================
*/
div.updatemessage                       { border: dotted 1px #0a0; background-color: #ccf4bb; color: #080; padding: 3px 10px 3px 10px; margin: 15px 0 10px 0; font-weight: bold; }
/* 
========================================================================
PAGE LINKS
========================================================================
*/
.itempager                              { display: block; font-weight: normal; text-decoration: none; padding: 12px 5px 22px 0px; }
.itempager a                            { border: solid 1px #333; display: inline-block; padding: 2px 7px 2px 7px; font-weight: normal; margin: 0 3px 5px 0; color: #333; background-color: #ddd; }
.itempager a:hover                      { background-color: #fff; color: #000; text-decoration: none; }
.itempager a.arrow                      { text-align: center }
.itempager a.currentpage                { background-color: #fff; background-image: none; color: #000; font-weight: bold; }
.itempager .previous                    { padding: 2px 7px 2px 7px }
.itempager .next                        { padding: 2px 7px 2px 7px }
.itempager a.disabled,
.itempager a.disabled:hover             { background-color: #fff; color: #999; padding: 2px 7px 2px 7px; }
/* 
========================================================================
POPUP MESSAGE
========================================================================
*/
#largeimagepopup                        { overflow-y: hidden; overflow: hidden; background-image: none; }
.popup_background                       { background-color: #000; filter: alpha(opacity=30); opacity: 0.3; }
.popup                                  { background-color: #fff; border: solid 2px #222; padding: 45px 10px 13px 10px; width: 650px; max-width: 100%; max-height: 100%; min-height: 150px; text-align: left; top: 0px; left: 0px; overflow-x: hidden; }
.popup h2                               { position: absolute; left: 10px; top: 0; padding: 10px 0 10px 0; margin: 0px; font-size: 125%; }
.popup p                                { padding: 10px 0 0 0; margin: 0; }
.popup strong                           { color: #000 }
.popup .closebutton                     { position: absolute; right: 5px; top: 4px; text-align: center; padding: 1px 6px 1px 6px; font-size: 17pt; font-weight: bold; color: #000; }
.popup .closebutton:hover               { color: #ccc; }
.imagecolumn .popup                     { overflow-y: hidden; } /* needed in chrome to turn right hand scroll bar off */
/* 
========================================================================
AUTOCOMPLETE FLY-OUT
========================================================================
*/
.autocomplete_completionListElement     { visibility : hidden; margin : 0px!important; background-color : inherit; color : windowtext; border : buttonshadow; border-width : 1px; border-style : solid; cursor : 'default'; overflow : auto; height : 200px; text-align : left; list-style-type : none; }
.autocomplete_highlightedListItem       { background-color: #3333CC; color: #FFFFFF; padding: 1px; font-weight: bold; }
.autocomplete_listItem                  { background-color : window; color : windowtext; padding : 1px; }
/* 
========================================================================
RADIO BUTTON LIST ADAPTOR
========================================================================
*/
.Kartris-RadioButtonList ul             { margin: 0 0 0 0; padding: 0; border: 0; overflow: hidden; }
.Kartris-RadioButtonList ul li          { white-space: nowrap; list-style: none; float: none; clear: both; margin: 0; height: 20px; border: 0; }
.Kartris-RadioButtonList ul li input    { width: 25px; float: left; border: none; background: none; }
/* 
========================================================================
UPDATE PROGRESS LIGHTBOX EFFECT
========================================================================
*/
.updateprogress                         { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; position: fixed; background-color: #000; z-index: 9; filter: alpha(opacity=30); opacity: 0.3; }
.loadingimage                           { position: fixed; background-position: center; background-image: url(Images/updateprogress.gif); background-repeat: no-repeat; top: 0px; left: 0px; width: 100%; height: 100%; padding: 5px; z-index: 10; }
.smallupdateprogress                    { display: block; height: 16px; width: 16px; background-image: url(Images/updateprogress_small.gif); background-repeat: no-repeat; float: left; margin: 0 3px 0 3px; }
/* 
========================================================================
CALLOUT VALIDATOR EXTENDER POPUP EXTENDER
========================================================================
*/
.vcHighlight                            { border: solid 1px #000; background-color: #FFFACD; width: auto; }