/* Default CSS Stylesheet for a new Web Application project 
   mark "!L" in style comment means that this style is important for page layout and is recommended to not change
			 this value unless you want to change page-layout (position of the DIVs)
*/

body
{
	/* font styles */
	font-family: Arial;
	font-size:  smaller;
	/* element body margin */
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	/* size of body */
	height: 99%;
	width: 100%;

	/* allows to set MainPage in the center of the IE browser. Does not work in FireFox.*/
	text-align: left;	
}
.sampleInfoPanel_envelope
{
	display: block;
	width: 100%;	
	background-color: darkgray;	
	border-top: 1px solid darkgray;
	border-bottom: 1px solid darkgray;
	margin-bottom: 5px;	
}
.sampleInfoPanel
{	
	display: block;			
	color: white;
	height: 15px;
	font-family: Tahoma, Arial;
	font-size: 11px;
	font-weight: bold;		
	margin: 1px 2px 1px 2px;
}

.sampleInfoPanel A
{
	color: White;
}

/* this class contains all content on page including header and (possible) footer */
.MainPage
{
	height: 100%;	   /* !L */
	width: 800px;	   /* if you change this value, you also should change width in .ContentArticle */
	
	margin: 0px 0px 0px 0px;	

	background: white;   /* should be the same as .MainPageOverlay background */
	
	text-align: left;
	font-family: Arial;
	font-size: 12px;		
		
	position: absolute;	 /* !L */
	left: 0px; 	
}
.MainPageOverlay
{
	padding: 4px 4px 4px 4px; /* !L */
	position: absolute;	      /* !L */
	background: white;	      /* should be the same as .MainPage background */
	height: auto;	          /* !L */
	width: 792px;			  /* !L */
}
/* combination of above 3 classes makes mainpage always fit to page height, but also allows overlay when needed.
It's made like this mainly due to FireFox.*/


/* ############### HEADER ############### */
.logoBar 
{
	float:left;			/* !L */
	margin-bottom: 4px;	/* !L - makes a place between logoBar and mainMenuBar */
	width: 400px;		/* !L */	
}
.logoBar img 
{
	/* fits the logo to the top and left of parent DIV */
	display: block;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;	
}
.searchBar 
{	
	float: right;		/* !L */
	margin-bottom: 4px; /* !L - makes a place between searchBar and mainMenuBar */
	text-align: right;
	width: 385px;		/* !L - should not be greater than 392px (because MainPageOverlay.width - logoBar.width >= searchBar.width)*/	
}

.searchBox
{
	vertical-align: middle;
}

.mainMenuBar 
{
	clear: both;	/* !L - clears float. If set to "none", mainMenuBar is between logoBar and searchBar */
	width: 100%;	/* !L */
	height: 21px;
	margin-bottom: 5px; /* !L - makes a place between mainMenuBar and Content */
	/*float: left; */
	position: relative;	
	z-index: 1500;		
		
	/*border: 1px solid #c2c2c2;*/
	background-color: #E2E2E2;	/* for constant background color of mainMenuBar, the value should be the same 
									as .CMSMenu BACKGROUND-COLOR */
}

/* Dropdown menu (main menu) */
/* if you don't want to change layout, do not change padding-* */

.CMSMenu { BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; BACKGROUND-COLOR: #E2E2E2;}
.CMSMenuItem { PADDING-RIGHT: 15px; PADDING-LEFT: 5px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; WIDTH: 91px; COLOR: black; PADDING-TOP: 2px; FONT-FAMILY: verdana }
.CMSMenuItemMouseUp { PADDING-RIGHT: 15px; PADDING-LEFT: 5px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; WIDTH: 91px; COLOR: black; PADDING-TOP: 2px; FONT-FAMILY: verdana }
.CMSMenuItemMouseOver { PADDING-RIGHT: 15px; PADDING-LEFT: 5px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; WIDTH: 91px; CURSOR: hand; COLOR: white; PADDING-TOP: 2px; FONT-FAMILY: verdana; BACKGROUND-COLOR: #808080 }
.CMSMenuItemMouseDown { PADDING-RIGHT: 15px; PADDING-LEFT: 5px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; WIDTH: 91px; COLOR: black; PADDING-TOP: 2px; FONT-FAMILY: verdana }
.CMSMenuHighlightedMenuItem { PADDING-RIGHT: 15px; PADDING-LEFT: 5px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; WIDTH: 91px; COLOR: black; PADDING-TOP: 2px; FONT-FAMILY: verdana; BACKGROUND-COLOR: #808080; color: White; }
.CMSMenuHighlightedMenuItemMouseUp { PADDING-RIGHT: 15px; PADDING-LEFT: 5px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; WIDTH: 91px; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; FONT-FAMILY: verdana; BACKGROUND-COLOR: #808080; color: White; }
.CMSMenuHighlightedMenuItemMouseOver { PADDING-RIGHT: 15px; PADDING-LEFT: 5px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; WIDTH: 91px; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; FONT-FAMILY: verdana; BACKGROUND-COLOR: #808080; color: White; }
.CMSMenuHighlightedMenuItemMouseDown { PADDING-RIGHT: 15px; PADDING-LEFT: 5px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; WIDTH: 91px; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; FONT-FAMILY: verdana; BACKGROUND-COLOR: #808080; color: White; }


/* ############### CONTENT ############### */

/* envelopes content of the page, that mean ContentArticle and ContentNews*/
.Content 
{
	margin-top: 0px;
}
/* Because of incompatibilies between IE and FireFox, it's better not to use padding when you want to set DIV position.
   Therefore, it is soluted with 2 DIVs, where the inner DIV has set margin style. The effect is same as usign padding
   in outer DIV. Outer DIV is ContentNews and inner DIV ContentNewsPadding, or ContentArticle and ContentArticlePadding.*/

/* You can switch the position of panels (DIV) by switching float from left to right or right to left in 
   ContentArticle and ContentNews. */
.ContentArticle 
{
	float:left;
	width: 585px;
}
.ContentArticlePadding
{
	margin: 0px 0px 0px 0px;
}
/* Latest news box */
.ContentNews 
{
	float: right;
	width: 200px;
	background: #EFEFEF;
	border: 1px solid #C6C6C6;	
}
.ContentNewsPadding 
{
	margin: 3px 3px 3px 3px;
}
.LatestNews
{	
	text-align: left;
	width: 100%;
}
/* end Latest news */

/* panel, that contains link to administrator's mode (cmsdesk)*/
.AdminBar
{
	clear: both;	/* !L  clears the floating */
	height: 1.3em;	
		
	/*	border: 1px solid red;*/
}

/* ############### PRODUCTS ############### */

/* if you would like to move category panel to the right, set flow to right in class CategoryMenu
   and sets the width of ProductList panel and ProductViewer panel. */
.CategoryMenu
{
	float: left;
}
.CategoryMenuRight
{
	float: right;	
}
.PartnersMain
{
	float: left;
	width: 638px;	
}
.PartnersMenu
{
	float: right;
	width: 150px;
}
.ProductList 
{
	margin-left: 152px;
}
.RightColumn
{
	margin-left: 152px;
}	
.ProductViewer 
{
	margin-left: 155px;
	display: inline-block;
}

/* Products Listing */

.ProductListing
{
	border: 1px solid #E0E0E0; 
}
.ProductListingPadding
{
	margin: 4px 4px 4px 4px;
}

/* Left tree menu (see also TD) */

.CMSTreeMenuTable { width:150px; border-bottom: 1px solid #c2c2c2;}
.CMSTreeMenuItem { BACKGROUND: #E2E2E2;  padding: 2px; border: 1px solid #C2C2C2; border-bottom-width: 0px;}
.CMSTreeMenuSelectedItem { BACKGROUND: #808080; padding: 2px; border: 1px solid #606060; border-bottom-width: 0px;}
.CMSTreeMenuLink { COLOR: black; TEXT-DECORATION: none }
.CMSTreeMenuSelectedLink { COLOR: white; TEXT-DECORATION: none }


/* ############### OTHER TAGS ############### */
/* Left tree menu has items in element TD, so changing following style in TD change also those menu.*/
td
{
	font-family: Arial;
	font-size: 12px;
}
h1
{
	font-size:16px;
	margin: 5px 0px;
}

h2
{
	font-size:13px;
	margin: 8px 0px;
}

h3
{
	font-size:11px;
	margin: 10px 0px;
}

p 
{
	margin-top: 0px; /* !L - fit the paragraph to the top of parent box */
	margin-bottom: 1em; /* !L - makes a one line space under each paragraph */
}

img 
{
	margin-right: 5px;
}
/* SEARCH page - set the same width for dropDownList (in IE by default, but not in FireFox)*/
select.CMSSearchDialogSearchScopeDropDownList,
select.CMSSearchDialogSearchModeDropDownList
{
	width: 100%;
}

/* ############# EDIT MODE BUTTONS ################ */

.CMSEditModeButtons
{
	border: 1px solid black;
	background: white;
	cursor: hand;
	font-size: 12px;
	font-weight: bold; 
	position:absolute;   
}

.CMSPageManager
{
	border: 1px solid darkgray;
	padding: 3px 3px 3px 3px;
	display: block;
	width: 100%;
	background-color: #EEEEEE;
	margin-bottom: 3px;
}

.CMSPageManager A
{
	font-weight: bold;
	text-decoration: underline;
	color: Black;
}
.CMSPageManagerLabel
{
	text-align: right;
}
.CMSPageManagerTDlabel
{
	padding-left: 10px;
}
.CMSEditableRegion
{
	background-color: white;
	border: 1px dotted red;
	text-decoration: none;
	font-weight: normal;
}

/* ############# CMSListMenu (main menu) styles ################ */
/* !L - has an effect to layout ... do not change or delete unless you want to change the menu behavior */

.Horizontal 
{	
	float: left;	/* !L */
	width: 100%;	
	/*position: absolute;	*/
	font-family: Arial;
	font-size: 12px;
	background-color: #e2e2e2;
	border: 1px solid #c2c2c2;
}
.Horizontal ul 
{
/*	width: 100%;*/
	
	list-style: none;
	margin: 0;
	padding: 0;	
}
.Horizontal li 
{
/*	display: inline;	/* !L */
	float: left;		/* !L */
	
	border-width: 1px;
	border-style: solid;
	border-color: #e2e2e2;
	padding: 0px;
}
.Horizontal a
{
	display: block;		/* !L */
	margin: 0;
	padding: 2px 3px;
	width: 112px;

	color: Black;
	background-color: #e2e2e2;
	text-decoration: none;
}
.Horizontal a:hover {
	color: white;		
	background: #808080;
	
	background-image: url(images/bottom_button2.png);
	background-repeat: no-repeat;
	background-position: bottom right;	
}
.Horizontal ul ul
{	
	position: absolute;	/* !L */
	margin-top: 1px;
	
	border-top: 1px solid #c2c2c2;
	border-left: 1px solid #c2c2c2;
	border-right: 1px solid #c2c2c2;
	border-bottom: 2px solid #c2c2c2;	
	width: 120px;
}
.Horizontal ul ul li
{
	display: block;		/* !L */
	clear: left;		/* !L */
	position: relative;	/* !L */
}
.Horizontal ul ul ul
{
	top: -1px;			/* !L - should be the negation of UL border-width */
	left: 100%;			/* !L */
	margin-left: 1px;
	margin-top: 0px;
}
.Horizontal ul ul ul ul
{
	top: -2px;
}
.Horizontal ul ul,
.Horizontal ul li:hover ul ul,
.Horizontal ul ul li:hover ul ul
{display: none;}		/* !L */

.Horizontal ul li:hover ul,
.Horizontal ul ul li:hover ul,
.Horizontal ul ul ul li:hover ul
{display: block;}		/* !L */


/* Highlight the actual page item */
li.highlighted a,					/* if RenderCssClasses = "false" */
li.highlightedfirst a,				/* and if FirstItemCssClass="first" */
li.highlightedlast a				/* and if LastItemCssClass="last" */
{
	font-weight: bold;
}

/* normal style for sublinks */
li.highlighted li a,
li.highlightedfirst li a,
li.highlightedlast li a	
{
	font-weight: normal;
}

a.CMSListMenuLinkHighlighted		/* else if RenderCssClasses = "true" */
{
	font-weight: bold;
}

/* Newsletter Subscription */
.CMSNewsletterSubscriptionTextBox
{
	width: 130px;
}

.ERegTextBox textarea
{
	overflow: hidden;
}

.ImageGalleryPager
{
	border: solid black;
	padding: 2;
	margin: 5 0 5 0;
	text-align: center;
}
.ImageGalleryPager div
{
	display: inline;
}
.ImageGalleryPagerPrevious
{
	width: 20%;
	text-align: left;
}
.ImageGalleryPagerNext
{
	width: 20%;
	text-align: right;
}

.CommerceCartHeader
{
	background-color: #888888;
	font-weight: bold;
	color: #ffffff;
}

.FormErrorLabel
{
  color: Red;
}

.ImageGalleryPager
{
	background-color: #E2E2E2;
	padding: 2px 2px 2px 2px;
	display: inline-block;
}

.ImageGalleryPagerPrevious
{
	float: left;
	vertical-align: middle;
	padding: 3px 3px 3px 3px;
}

.ImageGalleryPagerNext
{
	float: right;
	vertical-align: middle;
	padding: 3px 3px 3px 3px;
}

.ImageGalleryPreviewImage
{
	border-width: 0px;
}

.ImageGalleryDetailImage
{
	border-width: 0px;
}

.ImageGalleryParent
{
	padding: 2px 2px 2px 2px;
}

.ImageGalleryItem
{
	padding: 2px 2px 2px 2px;
}