/* General text and background colors */
body{ 
 	color: #FFF;
	background: url(images/bg_tiny.gif);
	padding-top:10px;
}	 
/* General links colors */
a:link,
a:visited{
	color:#A1A5A9;
}	

/* FIRST SCREEN: ALBUMS ------------------------------------------------------------*/

#ScreenAlbums{ 
	background: url(images/bg_tiny.gif);
	margin-top:20px;
}

#ScreenAlbums #AlbumsArea{ 
	background-color: #000;
	border:2px solid #222222;
	border:0px;
	color:#FFF;
}

#ScreenAlbums #Albums_main{ 
	background-color: #111;
	border:2px solid #222222;
	color:#FFF;
}

#Albums_main div {
	color:#FFF;
}

.Albums_imgFrame img {
	padding:5px;
	background:#220000;
	border:1px solid #330000;
	margin:5px 0;
}

.Albums_imgFrame img:hover {
	background:#330000;
}

.gallery_imageArea {
	padding:0px;
}

.Bar_visible_msg {
	padding-left:10px;
	color:#FFF;
}

.Bar_visibleArea_discountMsg img {
	margin:0; padding:0;
	text-align: left;
	float:left;
}


/* Logo Area*/
#Albums_logo{
	background: #000;
}

/* Text Next to Logo*/
#Albums_topText {
	color: #FFF;
	background:#151515;
	border:1px solid #330000;
	margin-top:23px;
	margin-right:10px;
	padding: 0 30px;
	font-weight: normal;
	font-size: 14px;
}

table.top {
	background:#FFF;
	width:100%;
}

table.top td {
	vertical-align: top;
	text-align: left;
}

table.top {
	margin:0px;
	width:100%;
	background:#111;
	border:2px #222222 solid;
	border-bottom: 0;
}

/* Area containing albums list*/
#Albums_main{
	border:1px solid #999;
}

/* Header text in area containing albums list*/
#Albums_mainHeader{
	color: #FFF;
	background:#330000;
	font-size:22px;
	margin:0px 0 0 0px;
	padding:0 15px;
}
/* Subheader*/
#Albums_mainText{
	color: #000;
	background:#220000;
	padding:5px 15px;
}

/* Albums name text*/
.Albums_foldername{
	color: #FFFFFF;
}

/* Frames for albums list*/
div .Albums_imgFrame {
	border: 0;	
}

/* Top Left Corner in Area Containing Albums list*/
#Albums_mainTL{
	/*width: 12px;
	height: 12px;
	 Rounded corners. If you don't want them remove next line*/
	/*background: url(images/main-tl.gif) 0 0 no-repeat;*/
}
/* Bottom Right Corner*/
#Albums_mainBR{
	width: 12px;
	height: 12px;
	margin-top: 38px;
	/* Rounded corners. If you don't want them remove next line*/
	/*background: url(images/main-br.gif) 100% 0 no-repeat;*/
}


/* BAR ON THE LEFT -------------------------------------------------------- */
/* Has two sections: Visible area and extended Area. Extended is the area visible on its left */
/* when the pictures are enlarged */

#ScreenBar{
	background-color: #111111;
	color: #FFFFFF;	
	border-right: 2px solid #222222;
}

/* Bar Visible Area (Column containing logo, always visible)---------------------*/
#Bar_visibleArea{
	background-color: #111111;
	border-left:2px solid #222222;
	color: #000;
}
/* "Add or Edit Quantity" Text*/
.Bar_visibleArea h2{
	color:#111;
	font-size:30px;
	font-weight:bold;
}

/* Logo */
#Bar_visibleArea_logo{
	background:#FFF;
	/* Rounded corners. Remove next line if you don't want squared corners*/
	/*background: url(images/border-bl.gif) no-repeat bottom left;*/
}

/* Logo Color Area */
#Bar_visibleArea_logo{
	background-color: #111111;
}


/* Prices table */
.Bar_visibleArea table{
	background-color: #111111;
	border-color: #FFFFFF;
}
/* Prices table caption*/
.Bar_visibleArea_tableHeader, #Bar_visibleArea_tablePrice{
	background-color: #222;
	text-align: left;
	color:#FFF;
}

/* "Basket updated" green message above prices table*/
#Bar_visibleArea_basketUpdatedMsg{
	color: #85B666;
	margin-left:10px;
}

/* Clear button below prices table */
#Bar_visibleArea_clearButton{
	color: #E45A49;
	margin-left:10px
}

/* Navigation and buttons */
#Bar_visibleArea_navigation{
	/* Rounded corners. Remove next line if you don't want squared corners*/
	/*background:  url(images/border-tl.gif) no-repeat top left;*/
	
	background-color: #111111;
}

/* Buttons Text Color on normal state*/
#Bar_visibleArea_navigation ul li a,
#Bar_visibleArea_navigation ul li a:visited  {
	color: #FFF;	
}
/* Buttons Text Color on clic */
#Bar_visibleArea_navigation ul li a:hover{
	color:#FFF;
}

/* Button colors on click */
#Bar_visibleArea_btnPreviousStep:hover,
#Bar_visibleArea_btnNextStep:hover,
#Bar_visibleArea_gallery:hover,
#Bar_extendedArea_navigation:hover,
#Bar_visibleArea_btnMontage:hover{
	/* background-color: #cad0de; */
	background: url(images/btn_up.jpg) no-repeat;
	border:none;
	color:#FFF;
}

#Bar_visibleArea_btnPreviousStep a,
#Bar_visibleArea_btnNextStep a,
#Bar_visibleArea_gallery a,
#Bar_extendedArea_navigation a,
#Bar_visibleArea_btnMontage a{
	/* background-color: #cad0de; */
	text-align:center;
	padding:0px;	
	height:29px;
	color:#FFF;
}

#Bar_visibleArea_btnPreviousStep,
#Bar_visibleArea_btnNextStep,
#Bar_visibleArea_gallery,
#Bar_extendedArea_navigation,
#Bar_visibleArea_btnMontage{
	/* background-color: #cad0de; */
	background: url(images/btn_hover.jpg) no-repeat;
	width:250px;
	height:29px;
	text-align: center;
	color:#FFF;
}

#Bar_visibleArea_gallery a {
	color:#FFF;
}

#Bar_visibleArea_instructionsArea h2 {
	background: #330000;
	color:#FFF;
	margin:0px;
	padding:10px 0;
}

#Bar_visibleArea_instructionsArea center {
	background: #220000;
	color:#FFF;
	padding:0px 0 5px 0;
	margin:0px;	
}

#Bar_visibleArea_instructionsArea ol {
	background: #220000;
	color:#FFF;
	font-size:12px;
	padding:6px 0 8px 10px;
	text-align: left;
	margin:0px;	
}

#Bar_visibleArea_instructionsArea ol li {
	padding:4px 0 0 0;
}

.bar_visibleArea_pricesArea {
	border:1px solid red;
	color:#fff;
}

#Bar_visibleArea_pricesArea h2 {
	padding:10px 0;
	background:#330000;
	margin:0px;
}

#Bar_visibleArea_pricesArea h2 a {
	color:#FFF;
}

#Bar_visibleArea_discountMsg {
	color:#FFF;
	margin:2px 10px;
}

/* Bar Extended Area (Area showing enlarged icons when the bar moves to right)---------------------*/


/* Navigation */
#Bar_extendedArea_navigation{
	/* Rounded corners. Use next line if you don't want squared corners*/
	/*background: url(images/border-tl.gif) no-repeat;*/
	
	background-color: transparent;
	padding-top:0px;
	padding-left:0px;
}
/* Button text color */
#Bar_extendedArea_navigation ul li a{
	color:#FFF;
}

#MontagePicturesArea_tabsArea {
	padding-top:4px;
	padding-left:1px;
	border:2px solid #222222;
}

/* Button text color on click */
#Bar_extendedArea_navigation ul li{
	width:250px;
}


#Bar_extendedArea_navigation ul li a:hover {
	color:#FFF;
}
/* Button Background Color on click*/
#Bar_extendedArea_close a:hover{
	/*background-color: #cad0de;*/
	color:#000;
	width:250px;
	margin:5px 0;
}

#Bar_extendedArea_close a {
	color:#000;
	text-align: center;
}


#enlargedImage img{
	background:#220000;
	border:1px solid #330000;
	padding:20px;
}

#enlargedImage img:hover {	
	background:#330000;
}

.Basket_pictureLink img {
	background:#3c4f7c;
	border:1px solid #6699cc;
}

.Basket_pictureLink img:hover {
	background:#6699cc;
}

#Basket_orderInfo img:hover {
	
}

/* GALLERY SCREEN showing all pictures in selected album ---------------------------- */
/* Main background color */
#ScreenGallery{
	
	background: url(images/bg_tiny.gif);
}

/* Picture boxes colors*/
.Gallery_imageFrame{
	background-color: #220000;
	border-color: #330000;
	padding:0px;
	margin:0px;
}

/* Picture boxes color when mouse is over it*/
.Gallery_imageFrame-hover{
	background:#220000;
}

.Gallery_imageFrame-hover:hover{
	background:#330000;
}

.Gallery_imageFrame:hover{
	background:#330000;
}

/* MONTAGES ---------------------------------------------------------------*/

/* Selected images for montage list area*/
.Montage_imageArea{
	border: none;
}

/* Selected images for montage list frames */
.Montage_imageFrame {
	background:#220000;
	border:1px solid #330000;
	padding:0px;
}

.Montage_imageFrame:hover {
	background:#330000;
}

/* Montage Frame properties */
.Bar_extendedArea_montageFrame{
	 background-color: #111111;
	 color:#FFF;
}

.Bar_extendedArea_montageFrame center h2, .Bar_extendedArea_montageFrame center{
	 color:#FFF;
}

.Bar_extendedArea_montageFrame ol li 
{
	padding:3px 0;
	font-size:12px;
}


/* Montage picture boxes properties */
.Bar_extendedArea_montageBox{
	color: #36B4CD;
}
/* Montage picture boxes border properties */
.Bar_extendedArea_montageBoxWithBorders {
	border: 1px dashed #000;
}

/* Montage picture box properties on mouse over it */
.Bar_extendedArea_montageBox-hover{
	border-color: #36B4CD;
}


/*Tabs area in montage area*/
.MontagePicturesArea_tabsArea{
	background:#151515;
	background:#111;
}

#Bar_montageArea div {
	color:#FFF;
}

.MontagePicturesArea_tabsArea ul {
	color:#FFF;
}

/* Tab properties on normal state */
.MontagePicturesArea_tabsArea ul a, #MontagePicturesArea_tabsLabel {
  color:#FFF;
  background:#220000;
}
/* Tab properties on mouse over it */
.MontagePicturesArea_tabsArea ul a:hover {
  color:#FFF;
  background:#330000;
}
/* Selected tab properties */
.MontagePicturesArea_tabsArea ul a.selected {
  color:#FFF;
  background:#330000;
}
/* Select layout button normal state properties */
.montageTab_controlsArea ul li {
	color:#FFF;
}

.montageTab_controlsArea ul li div ul li {
	color:#000;
	background: #FFF;
}

.montageTab_controlsArea a.montageTab_btnTemplate {	
	background: url(images/small_button.gif) no-repeat top left;
	color:#FFF;
	padding-left:15px;
	padding-right:15px;
	width:130px;
}

.montageTab_controlsArea a.montageTab_btnTemplate:hover {	
	background: url(images/small_button.gif) no-repeat top left;
	background-position:0 -27px;
}

#montageTab0_canvasArea div, #montageTab1_canvasArea div,#montageTab2_canvasArea div,#montageTab3_canvasArea div {
	color:#000;
}

/*****************

#montageTab0_canvasArea div div, #montageTab1_canvasArea div div, #montageTab2_canvasArea div div, #montageTab1_canvasArea div div, #montageTab3_canvasArea div div {
	border:1px dashed #000;
}

******************/


/* Montage color list properties */
.montageCombo {
	border:1px solid #ccc;
}

/* TEMPLATE LIST (Select layout) SCREEN ----------------------------------------------*/
/* Whole area */
#ScreenTemplates{
	background: url(images/bg_tiny.gif);
}
/* Header area */
#TemplatesArea_header{
	background-color: #111;
	border-bottom: 2px solid #220000;
	color: #FFF;
}

/* Template in list properties*/
.TemplatesArea_template{
	border:1px solid #330000;
	background:#220000;
}

/* Template in list properties on mouse over it */
.TemplatesArea_template:hover {
	background: #330000;
}
/* Filter by picture number selector properties */
.MontageList_layoutsCombo{
	border:1px solid #ccc;
}

/* Template Frame properties*/
.TemplatesArea_montageListFrame{
	 background-color: #222222;
	 border: solid 2px #222222;
}

/* Template picture boxes properties*/
.TemplatesArea_montageListBox{
	border: dashed 1px #FFF;
	background-color: transparent;
	color: #FFF;
}


/* BASKET SCREEN (showing items in basket and order form)-----------------------------*/
/* Deep background color */
#BasketArea{
	background: url(images/bg_tiny.gif);
	color:#FFF;
}

/* Main background color (page look & feel)*/
#Basket_page{
}
/* Section headers, like "Prints" text */
.ScreenBasket h2{
	color:#FFF;
}

/* Border color for pictures in basket */
.ScreenBasket .picture{
	border-color: #FFFFFF;
}

/* Picture references in basket (first line next to picture above order subtables) */
.Basket_productPreHeader{
	color: #CCCCCC;
}

/* Header for subtables (Description, Price, Qty. Cost)*/
.Basket_productHeader{
	background-color: #FFF;
	color:#333;
}

/* Montage Frame properties*/
.BasketArea_montageFrame{
	 background-color: black;
	 border: solid 1px white;
}

/* Montage picture boxes properties*/
.BasketArea_montageBox{
	border: dashed 1px #222;
	background-color: transparent;
	color: #111;
}

/* Onsite Checkout button */
#Basket_submitButton_onsite {
	width:248px;
	height:69px;
}

#Basket_submitButton_onsite a { 
	background: url(images/addtobasket.gif) no-repeat;
	width:248px;
	color:red;
	height:24px;
}

#Basket_submitButton_onsite a:hover{
	background-position: 0 -69px;
	
}

/* Clear Basket Button Color */
#BasketArea ul li a,
#BasketArea ul li a:hover {	
	color: #e45a49;
}


/* Order Form */
/* All Text Boxes in the basket form will have these colors */
.Basket_input,
.Basket_combo{
	border-color: #b6b3b3;
}

/* EXTRAS (Other elements) ------------------------------------------- */

/* TOOLTIPS appearing with the price discounts for instance.*/
/* Caption*/
.hovertip-caption{
	background: #FFF;
	color: #111;
	border-bottom: #FFFFFF solid 1px;
}
/* Main Body */
.hovertip, .clicktip {
	background-color: #111;
	border-color: #FFFFFF;
	color: #000;
}


/* MESSAGE DIALOGS ------------------------------*/
/* Box colors*/
.dialogYesNo, .dialogError, .dialogYes, .dialogProcess{
	border-color:#FFFFFF;
	color: #FFF;
	background-color: #111;
}

/* Header colors*/
.dialogYesNo  h1, .dialogError h1, .dialogYes h1, .dialogProcess h1{
	color:#FFF;
}
/* Main body text color*/
.dialogYesNo p, .dialogError p, .dialogYes p, .dialogProcess p{
	color:#FFF;
}


/* FORM SELECT BOXES --------------------------*/
/* Main colors*/
div.autocomplete {
  background-color: white;
  border-color:#CCCCCC;
}
/* Main Text Color*/
div.autocomplete ul {
	color: black;
}

/* Main colors for list items*/
div.comboOptions {
  background-color:white;
  border-color: #CCCCCC;
}
/* List selected item color */
div.autocomplete ul li.selected,
.lihover { 
  background-color: #EAF2FB;
}

.Bar_visibleArea_pricesTableArea table {
	border:2px solid #222222;
	color:#FFF;
	margin-left:10px;
}