﻿body
{
	background-color: #fff; /*: #f4f4f4 url(images/bg.gif) top center repeat-y;*/
	padding: 20px 20px 2px 20px;
	background-position-y: 0px;
	background-image: url(images/topbar.gif);
	background-repeat: repeat-x;
	font-size: .85em;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	color: #000;
}

.NoBorder
{
	border-width:0px;
	border-style:none;
	
}

.minwidth
{
	width: 790px;
	height: 1px;
	margin: auto;
}
.AlignRight
{
	text-align: right;
}
.AlignCenter
{
	text-align: center;
}

a:link, a:visited
{
	color: #003366;
	text-decoration: none;
}

a:hover
{
	color: #A52A2A;
	text-decoration: none;
}

strong, #content strong
{
	font-weight: bold;
}

em, #content em
{
	font-style: italic;
}

p, #content p
{
	margin-bottom: 5px;
}
div.clear
{
	height: 0px;
	clear: both;
}

#main
{
	width: auto;
	height: auto;
	margin: 0 auto;
}


#header
{
	background-position: right bottom;
	background-image: url(./images/inspire.gif);
	background-repeat: no-repeat;
	height: 194px;
}


#popupheader
{
	height: 225px;
	margin-left:-15px;
	margin-right:-20px;
	
}

#header .tagline, #popupheader .tagline
{
	display: block;
	position: relative;
	z-index: 0;
	margin-top: 28px;
	margin-left: 5px;
	float: left;
}

#popupheader .tagline
{
	display: block;
	position: relative;
	z-index: 0;
	margin-top: 30px;
	margin-left: 5px;
	float: left;
}

#header .logo
{
	display: block;
	float: left;
	position: relative;
	margin-top: -55px;
	margin-right: 5px;
}

#popupheader .logo
{
	
	display: block;
	float: left;
	position: relative;
	
	
}

#topmenu
{
	height: 43px;
	background-color: #fff;
	border: none;
	border-top: 10px solid #003B6F;
	font-size: 95%;
	margin-left: 270px;
}
#topmenu ul
{
	display: inline;
	border: none;
	position: relative;
}

#topmenu li
{
	float: left;
}
#topmenu li a
{
	display: block;
	float: left;
	clear: left;
	border-right: 1px solid #CCC;
	height: 19px;
	font-weight: 700;
	font-size: 95%;
	padding: 12px 25px;
	text-decoration: none;
	color: #000;
}

#topmenu li a:hover
{
	background-color: #F9EFCC;
}

#footer
{
	width: 500px;
	padding-top: 10px;
	padding-left: 265px;
	margin: auto;
	clear: both;
}




#contentcolumn, #contentfullcolumn, #contentfullwidth
{
	text-align: left;
	margin: 30px 10px auto 270px;

}

#contentfullwidth
{
	width:90%;
	margin-left:auto;
	margin-right:auto;	
}



#contentcolumn
{
	margin-right: 210px;
}



#contentpopup
{
	
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;

}

#leftcolumn
{
	font-size: 85%;
	float: left;
	width: 240px;
	padding: 10px;
	padding-bottom: 40px;
	height: 385px;
	clear: left;
	background-color: #003B6F;
	margin-top: -10px;
}

#LeftMenuCustomText
{
	margin-top:10px;
	color:#ffffff;
	clear:both;
}

#rightcolumn
{
	margin-top: 38px;
	padding: 12px;
	width: 150px;
	height: auto;
	float: right;
	background-color: #EEE;
	font-size: 85%;
}

#rightcolumn h1
{
	padding: 2px;
	font-weight: bold;
	color: #003B6F;
}

#content
{
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 85%;
	line-height: 20px;
	font-size-adjust: none;
	font-stretch: normal;
	
}

#content h1, #content h3
{
	color: #003B6F;
}

#content h1
{
	font-size: 150%;
	font-weight: 500;
	margin-bottom: 15px;
}

#content h2
{
	font-size: 115%;
	color: #003B6F;
	font-weight:bold;
}

#content h3
{
	font-size: 115%;
	font-weight:bold;
}


#featuredbrands
{
	margin-bottom: 20px;
}

#featuredbrands img
{
	width: 110px;
}
#featuredbrands a
{
	display: block;
	padding: 2px 0px 2px 1px;
}

#CallHelp
{
	margin-bottom: 20px;
}

#ManufacturerSpecials
{
	text-align: left;
}

#ManufacturerSpecials a
{
	display: block;
	margin: 0px 1px 3px 5px;
}

#ProductSearch
{
	border-bottom: solid 2px #CCC;
	padding: 2px 2px 10px 2px;
	color: #fff;
}

#ProductSearch .Keyword
{
	width: 110px;
	margin-bottom: 5px;
}

#ProductSearch .Brand
{
	width: 115px;
	margin-bottom: 5px;
}

#ProductSearch .Price
{
	width: 87px;
}

#ProductSearch h1
{
	font-size: 125%;
}

.ProductList
{
	margin-left: 10px;
	border-collapse: separate;
}
.ProductListItem
{
	border: solid 1px #efefef;
	padding: 2px 2px 2px 2px;
	text-align: center;
	vertical-align: top;
}

#ProductListHeader
{
	margin: 10px;
}

#ProductListHeader td
{
	padding: 5px 15px 5px 5px;
	vertical-align: middle;
	background-color: #eee;
}


#ProductListHeader table
{
	border: solid 1px #efefef;
}

#ProductListFooter table
{
	border-collapse: separate;
	margin: 10px;
}

.pager table
{
	border-collapse: separate;
}

#ProductListFooter td, .pager td
{
	background-color: #f8f8ff;
	border: solid 1px #efefef;
	padding-right: 2px;
	padding-left: 2px;
}


#BreadCrumb
{
	margin-top: 35px;
	border-bottom: solid 1px #efefef;
	padding-left: 10px;
	background-color: #eee;
	color: #000;
}

#ProductImage
{
	padding-top: 5px;
	text-align: center;
}

#ProductBlock
{
	padding-left: 10px;
}
#ProductBlock p
{
	padding-bottom: 10px;
}


#ProductPricing th
{
	background-color: #f8f8ff;
}

#ProductPricing th, #ProductPricing td
{
	border: solid 1px #efefef;
	padding-left: 3px;
	padding-right: 3px;
}


.ErrorText
{
	color: #ff0000;
}

div.Addresses
{
	margin-top:5px;
}

.billing_address
{
	margin-top:15px;
}



#Cart, #QuoteItems
{
	margin-top: 10px;
}



#Cart .SpecialRequrementsText, #Quote .SpecialRequrementsText, #Quote .ChangeReasonText
{
	width: 500px;
	height: 100px;
}

.ReportGrid td, .ReportGrid th 
{
	border: solid 1px #efefef;
	padding: 3px 3px 3px 3px;
	vertical-align: middle;
}

.ReportGrid th
{
	background-color: #d2dff0;
	color: #003366;
}

.ReportGrid tr.AlternatingRow
{
	background-color: #f8f8ff;
}

td.AlignRight
{
	padding: 3px; /*nothing here yet maybe we add something later just in case the cart is setting this style though*/
}

.TextBox
{
	padding: 0px 1px 0px 1px;
}

.QuantityText
{
	width: 40px;
}

#PricingDisclaimer
{
	background-color: #f5f5f5;
	padding: 5px 5px 5px 5px;
	font-size: 85%;
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 10px;
	border: solid 1px #efefef;
}

.CommandButton, .CommandButton:hover
{
	background-color: #d2dff0;
	color: #000;
	border: 2px #ccc none;
	margin: 10px 5px;
	padding: 2px;
}
.CommandButton
{
	border-style: outset;
}
.CommandButton:hover
{
	border-style: inset;
}



div.PageSection
{
	margin-top: 10px;
}

#Login
{

	padding-top: 50px;
}

#Login table
{
	margin:0px auto;
}

#Login table table
{
	width: 300px;
	border: solid 1px #efefef;
	margin:5px;
	height:140px;
}

#Login table td
{
	vertical-align:top;
}

#Login td th
{
	height:1px;
}
#Login td td, #Login td th
{
	text-align: left;
	padding: 6px;
	vertical-align: top;
	white-space: nowrap;
}
#Login th
{
	background-color:#b0c4de;
	border-bottom:1px solid #efefef;
	color:#FFFFFF;
	font-weight:bold;
}
#Login .Textbox
{
	padding: 0px 1px 0px 1px;
	width: 150px;
}

.filter
{
	margin-top: 10px;
	width: 98%;
	background-color: #f8f8ff;
}

.filter th
{
	border: solid 1px #efefef;
	font-weight: bold;
	padding: 5px 5px 0px 5px;
}
.filter td
{
	border: solid 1px #efefef;
	padding: 5px 5px 0px 5px;
}


.ajax__calendar div.ajax__calendar_container
{
	background-color: #ffffff;
	border: solid 1px #000000;
}

.ajax__calendar td, .ajax__calendar th
{
	padding: 0px 0px 0px 0px;
	border: none 0px #ffffff;
}


#ReportData table
{
	width: 98%;
}

#ReportData div.export
{
	margin-bottom:5px;
	text-align:right;
	width:98%;
	padding-top:3px;
	padding-bottom:3px;
}



#ReportData td, #ReportData th
{
	margin: 0px 0px 0px 0px;
	border: solid 1px #efefef;
	padding: 3px 8px 3px 3px;
	vertical-align: middle;
	
}

#ReportData td.alternating
{
	background-color: #f8f8ff;
}

#ReportData td.blank, #ReportData td.smallblank
{
	border-left: solid 1px #ffffff;
	border-right: solid 1px #ffffff;
	border-top-style: none;
	border-bottom-style: none;
	border-top-width: 0px;
	border-bottom-width: 0px;
	padding:0px 0px 0px 0px;
	
	
}

#ReportData td.smallblank
{
	font-size: 0px;
	line-height: 0px;
	height:3px;
}


#ReportData th
{
	background-color: #d2dff0;
	color: #003366;
}

#ReportData th.grouping
{
	background-color: #ffffff;
	color: #003366;
	font-weight: bold;
	
}

#ReportData th.orggrouping
{
	background-color: #ffffff;
	color: #003366;
	font-weight: bold;
	border: solid 1px #4682b4;
		
}


#ReportData th.sitegrouping
{
		
	font-weight: bold;
	font-size: 115%;
	background-color: #4682b4;
	color: #f8f8ff;
	
}

.BlockElement
{
	display:block;
}

#ReportData td .ClearGrid , .ClearGrid  
{
	border-width:0px;
	border-style:none;
}


.ClearGrid td, .ClearGrid th , #ReportData td .ClearGrid td, #ReportData td .ClearGrid th 
{
	border-width:0px;
	border-style:none;
	padding: 3px 3px 3px 3px;
	vertical-align: middle;
}


/* When the Menu control's Orientation property is Vertical the adapter wraps the menu with DIV */
/* whose class is AspNet-Menu-Vertical. */
/* Note that the example menu in this web site uses relative positioning to force the menu to occupy */
/* a specific place in the web page.  Your web site will likely use a different technique to position your */
/* menu.  So feel free to change all the properties found in this CSS rule if you clone this style sheet. */
/* There is nothing, per se, that is magical about these particular property value choices.  They happen to */
/* work well for the sample page used to demonstrate an adapted menu. */
.CategoryMenu .AspNet-Menu-Vertical
{
	position: relative;
	left: 0;
	z-index: 300;
}

/* The menu adapter renders an unordered list (ul) in HTML for each tier in the menu. */
/* So, effectively says: style all tiers in the menu this way... */
.CategoryMenu ul
{
	background-color: #003B6F;
}
.CategoryMenu ul li ul
{
	border: #d2dff0 1px solid;

}

/* Top tier */
.CategoryMenu .AspNet-Menu-Vertical ul.AspNet-Menu
{
	padding-top: 8px;
	margin-top: 10px;
	width: 200px;
}

/* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
/* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
/* the topmost tier's appearance. */
.CategoryMenu ul.AspNet-Menu ul
{
	width: 200px;
	left: 201px;
	top: -1%;
	z-index: 400;
}

.CategoryMenu ul.AspNet-Menu ul ul
{
	width: 150px;
	left: 280px;
	top: -1%;
	z-index: 400;
}

/* The menu adapter generates a list item (li) in HTML for each menu item. */
/* Use this rule create the common appearance of each menu item. */
.CategoryMenu ul.AspNet-Menu li
{
	background-color: #003B6F;
}

/* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */
/* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */
/* in each menu item.  One comes from the CSS rule (above) governing the li tag that each menu item has. */
/* The second image comes from this rule (below). */
.CategoryMenu ul.AspNet-Menu li a, .CategoryMenu ul.AspNet-Menu li span
{
	padding: 0px 15px 10px 5px;
	color: #FFF;
	font-weight: 700;
	background: url(images/arrowRightW.gif) no-repeat right top;
}



/* When a menu item contains no submenu items it is marked as a "leaf" and can be styled specially by this rule. */
.CategoryMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a, .CategoryMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
{
	background-image: none;
}


/* When you hover over a menu item, this rule comes into play. */
/* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically change the */
/* menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is over that li tag. */
/* See MenuAdapter.js (in the JavaScript folder). */
.CategoryMenu ul.AspNet-Menu li:hover, .CategoryMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
	background-color: #003B6F;
}

/* While you hover over a list item (li) you are also hovering over a link or span because */
/* the link or span covers the interior of the li.  So you can set some hover-related styles */
/* in the rule (above) for the li but set other hover-related styles in this (below) rule. */
.CategoryMenu ul.AspNet-Menu li a:hover, .CategoryMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
	color: #d2dff0;
	background: transparent url(images/ArrowRight.gif) right top no-repeat;
}

.CategoryMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
{
	background-image: none;
}
/* Selected Items - doesn't seem to work with this datasource */
.CategoryMenu .AspNet-Menu-Selected a.AspNet-Menu-Selected:link, .CategoryMenu .AspNet-Menu-Selected a.AspNet-Menu-Selected:visited, .CategoryMenu .AspNet-Menu-Selected a.AspNet-Menu-Selected:active
{
	color: #d2dff0;
}


.credit_card
{
	padding-bottom:25px;
}

.select_artwork
{
	border-collapse:separate;
	border-spacing:2px;
	margin-bottom:15px;
}



.select_artwork img
{
	margin-bottom:10px;
}

.select_artwork td
{
	border: solid 1px #efefef;
	padding:5px;
	text-align:center;
}

.artwork_link
{
	display:block;
	padding-bottom:8px;
}

.artwork_link img
{
	width:150px;
}

#OrderDetails 
{
	width:600px;
	margin-left:auto;
	margin-right:auto;
}

#OrderDetails th
{
  font-weight:bold;
}

#OrderDetails th, td
{
	padding:3px;
}
#OrderDetails #addresses
{
	width:100%;
}

#OrderDetails .invoice_info
{
	text-align:center;
	padding-top:70px;
}
#OrderDetails .invoice_info table
{
	margin-left:auto;
	margin-right:auto;
}

#OrderDetails .invoice_info td, #OrderDetails .invoice_info th
{
	border:solid 1px black;

	padding:5px;
}

#OrderDetails .sold_ship th
{
	border:solid 1px black;
	padding:2px 6px;
	
}
#OrderDetails #order, #OrderDetails #details
{
	margin-top:15px;
	border:solid 1px black;
	width:100%;

}

#OrderDetails #order th, #OrderDetails #details th
{
	border:solid 1px black;
}

#OrderDetails #order td,  #OrderDetails #details td
{
	border-right:solid 1px black;
}

#OrderDetails #details .total
{
	text-align:right;
	font-weight:bold;
}


.bulk_promo_product
{
	margin-bottom:25px;
	width:475px;
	margin-right:auto;
	margin-left:auto;
}

.bulk_promo_product th
{
	font-weight:bold;
}

.bulk_promo_product table
{
	border-collapse:collapse;
	margin-top:5px;
	margin-bottom:5px;
}

.bulk_promo_product th, .bulk_promo_product td
{
	padding:3px;
	border:solid 1px #ccc;
}
