/* SETTING DEFAULT VALUES */
html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
	margin:0;
	padding:0;
}
ul,li {
	list-style-type:none;
}
img{
	border: none;
}
body{ 
 font:76%/140% Verdana,Arial,Helvetica,sans-serif;
}	 
a:link,
a:visited{
	text-decoration:none;
}	


/* FIRST SCREEN: ALBUMS ------------------------------------------------------------*/
#ScreenAlbums{
	top:0;left:0;
	position:absolute;
	z-index:50;
	width:100%;
	height:100%;
}
.ScreenAlbums a{ 
 font:76%/140% Verdana,Arial,Helvetica,sans-serif;
}	 

#AlbumsArea{
	margin: 50px 100px;
}

#Albums_logo{
	float: left;
	width: 220px;
	height: 156px;
	margin: 0 20px 0 0;
}

#Albums_logo table{
	margin-top: 15px;
	margin-left: 15px;
	width: 184px;
	height: 122px;
	text-align:center;
	vertical-align:middle;
}

#Albums_topText{
	width: 100%;
	font: normal 24px/30px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
}

#Albums_main{
	margin: 20px 0 0 0;
	padding: 0px 0px 50px 0px;
}

#Albums_mainTL{
}

#Albums_mainBR{
	float:right;
}

#Albums_mainHeader{
	margin: 20px 0px 0 20px;
	font: normal 48px/52px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
}
#Albums_mainText{
	font: normal 12px/14px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	margin:5px 20px 15px 20px;
}
.Albums_foldername{
	font: normal 24px/26px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	margin:20px 0px 0px 0px;
}

div .Albums_imgFrame {
	width:130px;
	height: 130px;
	cursor: pointer;
	border: solid 1px;
}

.Albums_imgFrame table {
	margin-top: 0px;
	margin-left: 0px;
	width: 130px;
	height: 130px;
	text-align:center;
	vertical-align:middle;
}

#Albums_list{
	margin-left: auto;
	margin-right: auto;
}

.Albums_image{
	cursor: pointer;
}

/* 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{
	margin:0;
	padding:0;
	position: fixed;
	top: 0;
	z-index:30;
	height: 100%;
}
.Bar_open{
	right:160px;
	/*right:175px;*/
	width:100%;
}
.Bar_closed{
	width: 250px;
	left:0px;
}
/* Bar Visible Area (Column containing logo, always visible)---------------------*/
#Bar_visibleArea{
	position:absolute;
	right:0px;
  top:0px;
  height:100%;
	width:250px;
}
.Bar_visibleArea h2{
	letter-spacing:-1px;
	font: normal 24px/26px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
}

/* Logo */
#Bar_visibleArea_logo{
	width: 250px;
	height: 156px;
	
}
#Bar_visibleArea_logo table{
	margin-top: 0px;
	margin-left: 0px;
	width: 250px;
	height: 130px;
	text-align:center;
	vertical-align:middle;
	border: none;
}

/* Prices table */
.Bar_visibleArea table{
	width: 230px;
	border: solid 1px;
}

.Bar_visibleArea_tableHeader{
	letter-spacing:-1px;
	font: normal 16px/18px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
}

#Bar_visibleArea_tableQty{
	width:30px;
}
#Bar_visibleArea_tableDesc{
	width: 300px;
}
#Bar_visibleArea_tablePrice{
	text-align:right;
}

#Bar_visibleArea_clearButton{
	background: url(images/cross.gif) no-repeat 0 0;
	padding-left: 20px;
}

#Bar_visibleArea_basketUpdatedMsg{
}

#Bar_visibleArea_priceTableArea{
	width: 248px;
	overflow:auto;
	max-height: 255px;
}

/* Navigation and buttons */
#Bar_visibleArea_navigation{
	width: 100%;
	bottom: 0px;
	position: absolute;
}

#Bar_visibleArea_navigation ul{
	float:left;
	width:200px;
	margin-left: 50px;
	margin-bottom:20px;
	margin-top: 15px;
	
}

#Bar_visibleArea_navigation ul li {
	font-size:1.2em;
}
#Bar_visibleArea_navigation ul li a {
	display:block;
	padding:6px 3px 6px 28px;
}
#Bar_visibleArea_navigation ul li a:hover {
}
#Bar_visibleArea_navigation ul li a:visited {
}

#Bar_visibleArea_btnPreviousStep a{
	background: url(images/bg-nav-albums.gif) no-repeat bottom left;
}
#Bar_visibleArea_btnPreviousStep a:hover{
	background: url(images/bg-nav-albums.gif) no-repeat bottom left;
}

#Bar_visibleArea_btnNextStep a{
	background: url(images/bg-nav-basket.gif) no-repeat bottom left;
}

#Bar_visibleArea_btnNextStep a:hover{
	background: url(images/bg-nav-basket.gif) no-repeat bottom left;
}

#Bar_visibleArea_gallery a{
	background: url(images/bg-nav-gallery.gif) no-repeat bottom left;
}
#Bar_visibleArea_gallery a:hover{
	background: url(images/bg-nav-gallery.gif) no-repeat bottom left;
}


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

#Bar_extendedArea{
margin-left: 180px;
margin-top: 20px;	

}

/* Navigation */
#Bar_extendedArea_navigation{
	width: 600px;
	bottom: 0px;
	position: absolute;
	padding: 20px;
}
#Bar_extendedArea_navigation ul li {
	margin-right: 10px;
	font-size:1.2em;
	display:inline;
}
#Bar_extendedArea_navigation ul li a {	
	padding: 6px 3px 6px 28px;
}
#Bar_extendedArea_navigation ul li a:hover {
}
#Bar_extendedArea_close a {
	background: url(images/bg-nav-gallery.gif) no-repeat bottom left;
}
#Bar_extendedArea_close a:hover{
	background: url(images/bg-nav-gallery.gif) no-repeat bottom left;
}


/* GALLERY SCREEN showing all pictures in selected album ---------------------------- */
#ScreenGallery{
	position: absolute;
	margin: 0 0 0 0;
	padding: 0 0 0 0px;
  left:0px; top:0px;
  width:100%;
  height:100%;
	z-index:20;
	overflow:auto;
}
.Gallery_closed{
	padding-right: 50px;
	padding-left: 305px;
}
.Gallery_open{
	position:absolute;
	padding:0px;
	margin:0px;
	width: 167px;
	right: 0px;
	
}

.Gallery_imageFrame{
	float:left;
	text-align:center;
	cursor: pointer;
	margin: 30px 0px 0px 30px;
	border: none;
	border: 1px solid;
}

.Gallery_imageFrame-hover{
}

/* BASKET SCREEN (showing items in basket and order form)-----------------------------*/
#ScreenBasket{
	font:76%/140% Verdana,Arial,Helvetica,sans-serif;
	position:absolute;
	top: 0; left: 0;
	margin: 0 0 0 0;
  width:100%;
  height:100%;
	z-index:0;
	overflow:auto;
}
#BasketArea{
	top:0px;
	left:0px;
	margin:0px;
	width:100%;
}
#Basket_page{
	margin-top: 50px;
	margin-left:255px;
	margin-right: 20px;
	margin-bottom: 50px;
	
	padding: 20px;
}

.ScreenBasket h2{
	letter-spacing:-1px;
	font: normal 24px/26px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
}

.ScreenBasket .picture{
	border: 4px solid;
}

.Basket_productPreHeader{
}
.Basket_productHeader{
	letter-spacing:-1px;
	font: normal 16px/18px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
}

#BasketArea ul li {
	margin-right: 10px;
	font-size:1.2em;
}
#BasketArea ul li a {	
	padding: 6px 3px 0px 20px;
}
#BasketArea ul li a:hover {
}

Basket_Buttons ul li{
	display:inline;
}

#Basket_clearButton{
	background: url(images/cross.gif) no-repeat bottom left;
}



/* Order Form */
.Basket_input{
	border:1px solid;
	margin-right:5px;
}

.PaymentButton{
	cursor: pointer;
}

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

/*hovertip -----------------------------*/
.hovertip, .clicktip {
    display: none; /* in case javascript is disabled */
		background-color: #476D94;
		border-color: #FFFFFF;
		border:solid 1px #FFFFFF;
		color: #FFFFFF;
		z-index: 1000;
    /* you can add additional style attributes here */
}
.hovertip-caption{
	background: #FFFFFF;
	color: #476D94;
	margin: 1px;
	padding: 0 3px 0 3px;
	text-align: center;
}
.hovertipAnchor{
	cursor:pointer;
}

/* dialogs ------------------------------*/
.dialogYesNo, .dialogError, .dialogYes{
	border: solid 2px #171F1F;
	color: #93B2C4;
	background: #476D94;
  padding:30px;
	
}

.dialogYesNo  h1, .dialogError h1, .dialogYes h1{
	color:#FFFFFF;
	letter-spacing:-1px;
	font: normal 24px/26px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	margin-bottom: 10px;
	text-align: left;
	
}

.dialogYesNo p, .dialogError p, .dialogYes p{
	color:#FFFFFF;
	font:76%/140% Verdana,Arial,Helvetica,sans-serif;
	margin-bottom: 10px;
	text-align: left;
}





/* PLUGINS */
/* spinbutton --------------------------*/
INPUT.spin-button {
	padding-right:20px;					/* Padding pevents text from covering the up/dn img. Works better in Firefox but also causes textbox to widen by 20px. Arrows can go wonky in IE when text is too long. Perhaps it could be fixed with script that monitored the horiz-scroll position? */
	background-repeat:no-repeat;		/* Warning: Img may disappear in Firefox if you use 'background-attachment:fixed' ! */
	background-position:100% 0%;
	background-image:url(images/spinbtn_updn.gif);
	width: 20px;
}

INPUT.spin-button.up {					/* Change button img when mouse is over the UP-arrow */
	cursor:pointer;
	background-position:100% -18px;		/* 18px matches height of 2 visible buttons */
}
INPUT.spin-button.down {				/* Change button img when mouse is over the DOWN-arrow */
	cursor:pointer;
	background-position:100% -36px;		/* 36px matches height of 2x2 visible buttons */
}



/* select boxes --------------------------*/
div.autocomplete {
  position:absolute;
  width:400px;
  background-color:white;
  border:1px solid #ccc;
  margin:0px;
  padding:0px;
  font-size:1em;
  text-align:left;
  max-height:200px;
  overflow:auto;
}
div.autocomplete ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
	color: black;
	display:block;
	
}
div.autocomplete ul li.selected { 
  background-color: #EAF2FB;
}
div.autocomplete ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}
.Basket_combo{
	margin:0px;
	width : 10em; 
	display : block;
	text-align:left; 
	background: url('images/bg_select.jpg') right;
	height:18px;
	cursor: pointer;
	border:1px solid #ccc;
}



div.comboOptions {
  position:absolute;
  background-color:white;
  border:1px solid #ccc;
  margin:0px;
  padding:0px;
  font-size:0.8em;
  text-align:left;
  max-height:200px;
  overflow:auto;
}
div.comboOptions ul {
	
  list-style-type:none;
  margin:0px;
  padding:0px;
}
.lihover { 
  background-color: #EAF2FB;
}
div.comboOptions ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}