/* 
========================================================================
KARTRIS by cactusoft
Copyright 2009-2012 CACTUSOFT INTERNATIONAL FZ LLC - www.kartris.com
All rights reserved.
========================================================================
*/

/* 
========================================================================
HEADINGS AND BASIC FONT STYLES
========================================================================
*/
p, td, th, select, input, body
{
	font-family: "Segoe UI",Arial,Helvetica,Sans-Serif; 
	font-size: 9.5pt; 
	font-weight: normal; 
	color: #222;
	padding: 0;
	margin: 0;
}

p
{
	margin: 5px 0 10px 0;
}

h1 
{
	font-family: "Segoe UI",Arial,Sans-Serif; 
	font-size: 180%;
	letter-spacing: -1px;
	color: #000;
	margin: 0 0 4px 0;
	padding: 15px 10px 1px 0;
	display: inline-block;
	font-weight: bold;
}

h2
{
    font-size:12px;
    color: #000;
    font-weight: normal;
    margin: 5px 0 5px 0;
    padding: 0;
}

h2.blockheader
{
    width: 100%;
    border-top: solid 2px #222;
    margin: 10px 0 10px 0;
}

h2.blockheader span
{

}

h2.blockheader span span
{

}

.h2_light_extra 
{
    color: #aaa;
    font-weight: bold;
}

h3
{
    font-size: 95%;
    font-weight: normal;
    margin: 0 0 5px 0;
    padding: 0;
}

h4
{

}

h5
{
	margin: 0px 0px 5px 0px;
	color: #000;
	text-transform: uppercase;
	letter-spacing: -1px;
	padding: 2px 2px 2px 0px;
	text-align: left;
}

pre
{
	color: #008800;
}

iframe 
{
    border: none;
}

iframe body
{
    padding: 5px 0 0 0;
}

/* --- breadcrumb trail --- */
.breadcrumbtrail
{
	display: block;
	font-weight: normal;
	text-decoration: none;
    margin: 0 0 9px 0;
    background-color: #e8e9ee;
    letter-spacing: 0px;
    font-size: 90%;
}

.breadcrumbtrail span span
{
    font-weight: bold;
    color: #000;
    display: inline-block;
    padding: 0 0 0 2px;
}

.breadcrumbtrail span span a
{
    display: inline-block;
    padding: 3px 12px 3px 6px;
    font-weight: normal;
    margin: 0;
    color: #333;
    background-image: url(Images/breadcrumb_back.png);
    background-position: right center;
    background-repeat: no-repeat;
}

.strong 
{
    font-weight: bold;
}

.floatright 
{
    float: right;
}

/* 
========================================================================
HYPERLINKS
========================================================================
*/
a:link, a:visited
{
	text-decoration: none; 
	color: #16306b;
	font-weight: bold;
}

a:hover
{
	text-decoration: none; 
	color: #000;
}

a.link2, span.link2 a
{
    letter-spacing: 0px;
	text-decoration: none; 
    color: #16306b;
    font-weight: bold;
    padding: 1px 6px 1px 18px;
    min-height: 17px;
    background-image: url(Images/icon_edit.png);
    background-position: left top;
    background-repeat: no-repeat;
}

.icon_back a:link, .icon_back a:visited, a.icon_back:link, a.icon_back:visited
{
    background-image: url(Images/icon_back.png);
}

.icon_new a:link, .icon_new a:visited, a.icon_new:link, a.icon_new:visited
{
    background-image: url(Images/icon_new.png);
}

.icon_delete a:link, .icon_delete a:visited, a.icon_delete:link, a.icon_delete:visited
{
    background-image: url(Images/icon_delete.png);
}

.icon_myaccount a:link, .icon_myaccount a:visited, a.icon_myaccount:link, a.icon_myaccount:visited
{
    background-image: url(Images/icon_myaccount.png);
}

.icon_save a:link, .icon_save a:visited, a.icon_save:link, a.icon_save:visited
{
    background-image: url(Images/icon_save.png);
}

.icon_wishlist a:link, .icon_wishlist a:visited, a.icon_wishlist:link, a.icon_wishlist:visited
{
    background-image: url(Images/icon_wishlist.png);
}

.icon_logout a:link, .icon_logout a:visited, a.icon_logout:link, a.icon_logout:visited
{
    background-image: url(Images/icon_logout.png);
}

a.link2:hover, span.link2 a:hover
{
    color: #000;
    background-image: url(Images/icon_click.png);
    background-position: left top;
    background-repeat: no-repeat;
}

a.normalweight, span.normalweight a
{
    font-weight: normal;
}

/* 
========================================================================
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-collapse: collapse;
	width: 100%;
	padding: 1px;
	border-bottom: solid 2px #ccc;
}

table tr td {
	border-top: solid 2px #ccc;
    vertical-align: top;
	background-color: #f6f6f6;
}

table tr.alt {

}

table tr.headrow,
table thead tr {

}

table tr.headrow th,
table thead tr th {
	font-weight: bold;
	color: #aaa;
	text-align: left;
	text-transform: uppercase;
	font-size: 85%;
	
}

table td, table th {
	padding: 3px;
}

table th {
	background-color: #fff;
}

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 
{
    display: -moz-inline-box;
    display: inline-block;
	color: #d69;
	margin-bottom: 3px;
    width: 130px;
    font-weight: normal;
    vertical-align: top;
    padding-right: 10px;
}

.Kartris-DetailsView-Value
{
    display: -moz-inline-box;
    display: inline-block;
    width:50%;
    vertical-align: top;
    color: #000;
    overflow: visible;
}

.popup .Kartris-DetailsView-Value
{
    width: 330px;
}


.Kartris-DetailsView-Value label
{
	font-size: 89%;
	color: #222;
	margin-bottom: 3px;
    font-weight: normal;
    vertical-align: top;
    padding-left: 10px;
}

/* 
========================================================================
FORM ELEMENTS
========================================================================
*/
form
{ 
	margin: 0; 
	display: inline;
	padding: 0;
}

select, input, textarea
{
	font-weight: normal;
	color: #111;
	background-color: #e8e9ee;
 	border:none;
	margin: 0 10px 3px 0;
	height:23px;
	
}

select:focus, input:focus, textarea:focus
{
	color: #000;
	
 	border:none;
	outline:none;
}

textarea
{ 
	width: 100%;
}

input
{
	
	height:23px;
}

input.longtext
{
	width: 400px;
}

input.button
{
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #3d6832;
	border: solid 1px #333;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	width: auto;
	font-family: Tahoma,Verdana,Arial,Helvetica;
	display: inline-block;
	cursor: pointer;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 1px;
	margin-left: 0px;
	padding-top: 3px;
	padding-right: 15px;
	padding-bottom: 3px;
	padding-left: 15px;
}

input.button:focus
{
    background-color: #ccc;
    color: #666;
}

input.cancelbutton
{
    background-color: #e8e9ee;
    border-color: #bbb;
    color: #666;
}

input.highpriority
{

}

.inputform p
{
	margin: 5px 0 15px 0;
}

.inputform div {
	float: left;
	width:100%; box-sizing:border-box;
	margin-bottom: 5px;
}

.inputform .submitbuttons div {
	float: none;
}

.inputform br {
	display: block;
	clear: both;
}

.checkbox input, .radio input /* --- older browsers like IE6 don't understand input[type=radio] unfortunately --- */
{
	border-style: none;
	background-color: transparent;
	display: inline;
	width: 20px;
    float: left;
    width: 20px;
    margin-right: 1px;
}

label 
{
    display: inline-block;
	width: auto;
	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: solid 3px #eee;
    width: 100%;
}

div.section 
{
    margin: 10px 0 10px 0;
}

.submitbuttons 
{
    margin: 5px 0 20px 0;
    z-index: 2;
    width: 100%;
}

/* 
========================================================================
ERRORS & VALIDATION
========================================================================
*/

span.error, div.errortext
{
    display: inline-block;
    color: #fff;
    font-weight: bold;
    padding: 1px 5px 1px 3px;
    text-decoration: blink;
    background-color: #f00;
    margin-left: 3px;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
}

.requiredfield
{
    font-weight: bold;
}

.valsummary 
{
    display: inline;
    color: #fff;
    font-weight: bold;
    padding: 1px 5px 1px 3px;
    text-decoration: blink;
    background-color: #f00;
    margin-left: 10px;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
}

.valsummary ul 
{
    display: none;
    visibility: hidden;
}

/* 
========================================================================
IMAGES
========================================================================
*/
.imageholder
{
	display: block;
	text-align: center;
}

.imageholder img
{
	margin: 0;
    padding: 0;
}

.imageviewer
{
    text-align: center;
}

.imageviewer .gallery
{
	padding: 5px 0 10px 0;
    margin-right:5px;
 
	background-color: #fff;
	text-align: left;
	border-top: solid 1px #fff;
    float:left;
}

.imageviewer .gallery .scrollarea
{
    display: inline-block;
}

#frmLargeImage div 
{
    max-width: 470px;
}

#frmLargeImage .imageviewer .gallery 
{
	padding: 5px 0 0 0;
	background-color: #fff;
	text-align: center;
	border-top: solid 1px #fff;
	overflow-x: auto;
	overflow-y: hidden;
    white-space: nowrap;
    position: absolute;
    bottom: 5px;
    left: 2px;
    width: 99%;
    white-space: nowrap;
}

/* The style below is just for IE6/7, the next style
replaces it for standards compliant browsers */
.imageviewer .gallery .imageholder
{
    display: inline-block;
    float: left;
    margin: 5px 1px 0 1px;
	vertical-align: middle;
	border: solid 1px #ccc;
	width: 60px;
	overflow: visible;
}

/* This style is the standards compliant version of the
style above */
html>body .imageviewer .gallery .imageholder 
{
   
    float: *right; /*IE7 hack */
}

.imageviewer .gallery .imageholder a
{
    padding: 3px;
	border: solid 2px #eee;
}

.imageviewer .gallery .imageholder a:hover
{
	border: solid 2px #ccc;
}

.imageviewer .gallery .imageholder img
{
	vertical-align: middle;
	margin: auto; 
}

.imageviewer .gallery a.gallerybutton
{
	display: block;
	margin: auto auto auto auto;
}

.singleimage
{
	margin: 0 auto;
}

.product .promotions .singleimage
{
	float: left;
}

.largeview 
{
    margin:20px 0;
    float: left;
}

.largeview span
{
    color: #04d;
    cursor: pointer;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -1px;
}

/* 
========================================================================
MEDIA (Video, audio, etc.)
========================================================================
*/

/* media gallery for product */
.imagecolumn .media_gallery
{

}

.imagecolumn .media_gallery h2.blockheader
{
    margin: 0;
    border: none;
    border-top: dotted 1px #ccc;
}

.imagecolumn .media_gallery h2.blockheader span
{
    background-color: #fff;
}

.imagecolumn .media_gallery h2.blockheader span span
{
    margin: 0;
    padding: 3px 0 0 0;
    color: #000;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.imagecolumn .media_gallery_inner
{
    margin: 1px 0 1px 16px;
}

.media_links .mediaholder a
{
    padding: 0px;
	border: solid 2px #eee;
	display: block;
	margin: auto auto auto auto;
	height: 36px;
}

.media_links .mediaholder a:hover
{
	border: solid 2px #ccc;
}

.media_links .mediaholder img
{
	vertical-align: middle;
	margin: auto;
	height: 36px;
	width: 36px;
}

.media_links .mediaholder
{
    display: inline-block;
    float: left;
    margin: 5px 1px 0 1px;
	vertical-align: middle;
	border: solid 1px #ccc;
	width: 40px;
	overflow: visible;
}

.media_downloadlink
{

}

/* media gallery for versions, hide title */
.versions .media_gallery h2
{
    display: none;
}

/* 
========================================================================
TABS AJAX CONTROL
========================================================================
*/
.ajax__tab_default .ajax__tab_header 
{
    margin: 8px 0 10px 0;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 90%;
}

.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_default .ajax__tab_active .ajax__tab_tab,
.ajax__tab_default .ajax__tab_hover .ajax__tab_tab,
.ajax__tab_default .ajax__tab_header .ajax__tab_tab
{
	margin: 2px 10px 1px 3px;
}

.ajax__tab_default .ajax__tab_hover .ajax__tab_tab
{
	color: #fff;
}

.ajax__tab_default .ajax__tab_active .ajax__tab_tab 
{
	color: #fff;
}

.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;
    padding: 0 0 0 0;
}

.ajax__tab_header 
{
    border-bottom: solid 3px #333;
}

.ajax__tab_outer
{
    background-color: #e8e9ee;
}

.ajax__tab_hover .ajax__tab_outer
{
    background-color: #ccc;
}

.ajax__tab_active .ajax__tab_outer 
{
    background-color: #333;
}

.ajax__tab_hover .ajax__tab_inner,
.ajax__tab_active .ajax__tab_inner 
{

}

/* 
========================================================================
ACCORDION AJAX CONTROL
========================================================================
*/
.accordionHeader, .accordionHeaderSelected 
{
    border-top: solid 4px #eee;
    cursor: pointer;
}

.accordionHeader h2, .accordionHeaderSelected h2
{
    cursor: pointer;
    margin-bottom: 10px;
    color: #16306b;
}

.accordionHeader h2:before
{
    content: "[+]";
    color: #16306b;
    letter-spacing: -1px;
    width: 25px;
    display: inline-block;
}

.accordionHeaderSelected h2:before
{
    content: "-";
    color: #16306b;
    letter-spacing: 0px;
    width: 25px;
    display: inline-block;
}

/* 
========================================================================
COLLAPSIBLE PANE
========================================================================
*/
.collapsiblePanel
{
    border-bottom: solid 3px #d7e4ef;
    cursor: pointer;
    padding-bottom: 15px;
}

.collapsiblePanel h2 a
{
    cursor: pointer;
    margin-bottom: 10px;
	color: #f07;
}

.collapsiblePanel h2 a:before
{
    content: "[+]";
    color: #04d;
    letter-spacing: -1px;
    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 
{
    font-size: 90%;
	display: block;
	font-weight: normal;
	text-decoration: none;
    padding: 2px 5px 2px 0px;
}

.itempager a
{
    display: inline-block;
    padding: 1px 5px 1px 5px;
    font-weight: bold;
    margin-right: 2px;
    color: #000;
    background-color: #e8e9ee;
}

.itempager a:hover
{
    background-color: #3d6832;
    color: #fff;
    text-decoration: none;
}

.itempager a.arrow
{
    text-align: center;
}

.itempager a.currentpage
{
    background-color: #888;
    background-image: none;
    color: #fff;
}

.itempager .previous
{
    padding: 1px 5px 1px 5px;
}

.itempager .next
{
    padding: 1px 5px 1px 5px;
}

.itempager a.disabled, .itempager a.disabled:hover
{
    background-color: #e8e9ee;
    color: #999;
    padding: 1px 5px 1px 5px;
}

/* 
========================================================================
POPUP MESSAGE
========================================================================
*/
#largeimagepopup
{
    overflow: hidden;
    background-image: none;
    width: 400px;
}
    
.popup_background {
	background-color: #000;
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.popup {
	background-color: #fff;
    background-image: url(Images/popup_back.png);
    background-repeat: repeat-x;
	border: solid 2px #222;
	padding: 25px 10px 3px 10px;
	width: 550px;
    text-align: left;
    top: 0px;
    left: 0px;
}

.popup h2
{
    position: absolute;
    left: 10px;
    top: 0;
    padding: 3px 0 0 0;
    margin: 0px;
    font-size: 105%;
}

.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 3px 1px 3px;
    border-bottom: solid 1px #333;
    border-right: solid 1px #333;
    background-color: #ccc;
	font-family: Verdana,Arial,Helvetica,Sans-Serif; 
	font-size: 7.5pt; 
	font-weight: bold; 
	color: #000;
	width: 8px;
}

.popup .closebutton:active
{
    background-color: #ccc;
    border-top: none;
    border-left: none;
    border-bottom: solid 1px #ccc;
    border-right: solid 1px #ccc;
    color: #666;
}

/* 
========================================================================
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;
}

.Kartris-RadioButtonList ul li 
{
	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;
}
.pageExtra
{
    color: #AAAAAA;
}