/*
  $Id: stylesheet.css 1739 2007-12-20 00:52:16Z hpdl $

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2003 osCommerce

  Released under the GNU General Public Licensessssss
*/
HTML 		{ /* overflow-y:scroll; background-color:#dddedd; background-image:url(images/background.jpg); */}
BODY		{font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#555; margin:0px}
A			{
	text-decoration:none;
	cursor:pointer;
	outline:none;
	color:#6D4886;
}

H1			{font-size:22px; color:#be202e;margin:0px;padding:0px 0px 5px 0px; font-family:'HandOfSeanRegular',Arial, Helvetica, sans-serif;}
H2			{font-size:16px; /* color:#be202e; */margin:0px;padding:0px 0px 5px 0px; font-family:'HandOfSeanRegular',Arial, Helvetica, sans-serif;}
.headerdown h1	{font-family:Arial, Helvetica, sans-serif; font-size:11px;padding:0px 0px 0px 0px;}
H3			{margin:0px; padding:0px; font-size:18px;}
H4			{font-size:22px; color:#fff;margin:0px;padding:0px 0px 0px 0px; text-align:center;}
H5			{margin:0px; padding:5px 0px; font-size:13px;}
TD			{border-collapse:collapse;}
TABLE		{border-collapse:collapse;}
INPUT		{border:1px solid #818181;}
A:hover		{text-decoration:underline;}
:focus 		{ -moz-outline-style:none;}
IMG			{border:none;}

#wrapper1 		{position:relative; text-align:left; width:1000px; margin: 0 auto;}
#wrapper2 		{position:relative; text-align:left; width:1000px; }
#header 		{ /* margin: 0 auto; width:1000px; height:193px; background-repeat:no-repeat; position:relative; z-index:10; background-repeat:no-repeat; background-image:url(images/header.png); background-repeat:no-repeat; overflow:auto; background-position:center top; */}
/*
#headertop		{padding:20px; position:relative; height:75px; color:white; }
#headertop A	{color:white; font-size:11px; background-repeat:no-repeat;}
#headertop .col	{display:block; padding:10px 10px;font-size:11px; background-repeat:no-repeat;font-weight:bold; font-size:14px;  text-align:left; background-position:0px 0px; padding-left:15px; }
#headertop A:hover{text-decoration:underline}
#headerbottom	{padding:7px 6px; position:relative; height:55px; }
#headerbottom a	{display:inline-block;height:30px; margin-left:1px; padding-top:8px; background-repeat:no-repeat; color:white; font-weight:bold; font-size:13px; text-align:center; background-image:url(images/top-nav-all.png);}
#headerbottom a:hover	{text-decoration:none;}	
*/
#maincol 		{/* position:relative;	margin:0;	padding:0px 0px; top:0px; z-index:1;padding-bottom:10px; */ }
#leftcol 		{position:relative;	top:0px; left:0px; float:left; width:191px;	margin:0; z-index:100; padding-bottom:7px;}
#rightcol 		{position:relative;	top:0px; right:0px; float:right; width:191px; margin:0;	z-index:99;}
#centercol 		{overflow:auto; min-height:150px;  position:relative;padding:10px; margin-top:2px;}
#footer 		{position:relative; top:0px; width:960px; clear:both; margin:0 auto; padding:10px 20px; background-image:url(images/footer.png); background-poition:top; min-height:60px;}
#topfooter		{color:#be202e; height:35px; padding:5px 30px;}
#topfooter A	{color:#be202e;}
#nav			{background-image:url(images/header-bg.png); height:131px;}
#banner			{clear:both; }
#login			{height:40px; background-position:right top; padding-top:8px;}
#login A:hover	{color:#ccc}
#buttons		{padding-top:10px;}



@font-face 			{font-family: 'HandOfSeanRegular'; src: url('css/handsean-webfont.eot'); src: url('css/handsean-webfont.eot?#iefix') format('embedded-opentype'), url('css/handsean-webfont.woff') format('woff'), url('css/handsean-webfont.ttf') format('truetype'), url('css/handsean-webfont.svg#HandOfSeanRegular') format('svg'); font-weight: normal; font-style: normal;}

.red				{color:#be202e !important;}
/* .mainsection		{overflow:auto;} */
.mainsectiontop		{background-image:url(images/section-top-bottom.png); background-repeat:no-repeat; height:20px; background-position:0px -5px; z-index:1; position:relative}
.mainsectionbottom	{background-image:url(images/section-top-bottom.png); background-repeat:no-repeat; height:30px; background-position:0px -65px; position:relative; top:0px; z-index:0;}
.mainsectionmid		{/* background-image:url(images/section-middle.png); background-position:top; min-height:75px; z-index:5; padding:0px 52px 0px 50px;overflow:hidden; z-index:10; */float:left;}
.mainsectiontop.red	{background-image:url(images/section-top-bottom-red.png);}
.mainsectionbottom.red	{background-image:url(images/section-top-bottom-red.png);}
.mainsectionmid.red	{background-image:url(images/section-middle-red.png);}
.mainsectiontop.small	{background-image:url(images/section-top-bottom-small.png);}
.mainsectionbottom.small	{background-image:url(images/section-top-bottom-small.png);z-index:100;position:absolute;}
.mainsectionmid.small	{background-image:url(images/section-middle-small.png); background-repeat:no-repeat;overflow:hidden;}
.msmidinner			{position:relative; top:-5px;}
.right		{position:relative; float:right;}
.left		{position:relative; float:left;}
.one		{position:relative; float:left; width:178px; margin-right:2px; overflow:auto;}
TD.one		{width:172px;}
.two		{position:relative; float:left; width:358px; margin-right:2px; overflow:auto;}
TD.two		{width:364px;}
.three		{position:relative; float:left; width:538px; margin-right:2px; overflow:auto;}
.four		{position:relative; float:left; width:718px; margin-right:2px; overflow:auto;}
.five		{position:relative; width:900px; overflow:auto; clear:both}
.three_one	{position:relative; float:left; width:298px; margin-right:2px; overflow:auto;}
.three_two	{position:relative; float:left; width:598px; margin-right:2px; overflow:auto;}
.three_three{position:relative; width:900px; overflow:auto; clear:both}
.nomr		{margin-right:none;}
.headerdown	{font-size:14px; color:#be202e;margin:0px;padding:0px 0px 5px 0px; margin-bottom:5px;}
.canvasopts	{padding:5px;  border-bottom:1px dotted #fff; width:360px !important;}
.infoSection{ /* overflow:auto; min-height:150px;position:relative;margin-top:2px;*/ }
.just		{text-align:justify;}
.baskettable		{border-collapse:collapse !important;}
.baskettable TD		{border:1px solid}
.tickbox			{background-image:url(images/site/tickbox.png); color:#555;  background-repeat:no-repeat;padding:4px 0px 4px 16px; display:inline-block; margin-right:8px;}
.tickbox-empty		{background-image:url(images/site/tickbox-empty.png); color:#555; background-repeat:no-repeat; padding:4px 0px 4px 16px; display:inline-block;margin-right:8px;}
.tickbox-empty-grey	{background-image:url(images/site/tickbox-empty.png); color:#ccc; background-repeat:no-repeat; padding:4px 0px 4px 16px; display:inline-block; cursor:help;margin-right:8px;}
.medimages			{width:170px; padding:3px 3px;}
.smallimages		{width:100px; padding:3px 3px;}
.phthumbsm 	{display: inline-block;
			  /*display: -moz-inline-box;*/
			  -moz-box-orient: bottom;
			  vertical-align: bottom;
			  horizontal-align:left;
			  /*border:1px solid white;*/
			  margin-bottom:4px;
			  margin-top:4px;
			  cursor:pointer;
			  width:119px;
			  padding:5px;
			  color:white;
			}
.phthumbmed 	{width:176px;}
.mb				{margin-bottom: 2px;}
.smallprev		{width:30px; position:relative; z-index:10;}
.largeprev		{width: 179px; position:relative; z-index:10}
.largeprevh		{height: 179px; position:relative; z-index:10}
.largeprevw		{width: 179px; position:relative; z-index:10}
.productheader	{background-image:url(images/product-header.png); background-repeat:no-repeat; background-position:0px 5px; display:block; width:203px; height:55px;  text-align:center; color:white; font-size:20px; line-height:49px;}
.addto			{/*background-image:url(images/addto.png); background-repeat:no-repeat; background-position:0px 0px;display:block; background-color:#00b6ff; width:132px; height:41px;  text-align:center; color:white; font-size:12px; line-height:35px; */}

.productListing-heading {font-weight:bold;background-color:#04a7e9;padding:5px;color:#ffffff;background-image:url(../images/buttonbg.png); background-repeat:repeat-x; background-position:bottom}
td.productListing-data {
    padding-top:10px;
}

.messageBox 			{ font-size: 16px; }
.messageStackError, .messageStackWarning {  font-size: 16px; background-color: #ffb3b5; color:#000000; }
.messageStackSuccess 	{ font-size: 16px; background-color: #99ff00; }
.pinktext				{color:#be202e}
.smlcircle				{background-color:#be202e; display:block; width:12px; padding:4px 0px; border:none; -webkit-border-radius: 6px;-moz-border-radius: 6px; border-radius: 6px; margin:0px 2px; color:white; display:inline-block; text-align:center;text-decoration:none; margin-bottom:5px}
.circle					{width:78px; height:76px; font-size:20px; background-position:2px 0px; background-repeat:no-repeat; background-image:url(images/sticker-circle-white.png); float:left; text-align:center; line-height:70px; color:#c81d26; font-family:'HandOfSeanRegular',Arial, Helvetica, sans-serif;}
.bigcircle					{width:99px; height:98px; font-size:20px; background-position:2px 0px; background-repeat:no-repeat; background-image:url(images/big-circle.png); float:left; text-align:center; line-height:93px; color:#c81d26; font-family:'HandOfSeanRegular',Arial, Helvetica, sans-serif;}
.infoBoxButton			{border:none; color:white; display:inline-block; text-align:center;text-transform:uppercase; text-decoration:none; cursor:pointer !important; }
.infoBoxStatic			{background-color:#be202e; border:none; padding:4px 36px 4px 12px; margin:0px 2px; color:white; display:inline-block; text-align:center;text-decoration:none; cursor:pointer !important; cursor:pointer !important; background-image:url(../images/buttonbg.png);  background-repeat:repeat-x; }
.infoBoxButton:hover	{text-decoration:underline;}
.infoBoxButton:visited	{color:white; }
.infoBoxButton2		{cursor:pointer !important; border:none; color:white; width:132px; height:41px;  text-align:center; font-size:12px; line-height:35px;text-decoration:none;background-color:none; background-image:url(images/addto.png); background-repeat:no-repeat; /* background-position:100% 1px;*/ position:relative; left:10px;}
A .infoBoxButton		{cursor:pointer !important; border:none; color:white; width:132px; height:41px;  text-align:center; font-size:12px; line-height:35px;text-decoration:none;background-color:none; background-image:url(images/addto.png); background-repeat:no-repeat; /* background-position:100% 1px;*/ position:relative; left:10px;}
.infoBoxButton INPUT	{cursor:pointer !important;text-transform:uppercase; border:none; color:white; width:132px; height:41px;  text-align:center; font-size:12px; line-height:20px; background-color:transparent; text-decoration:none; background-image:url(images/addto.png);background-repeat:no-repeat;  background-position:100% 4px;position:relative; left:10px;}
.infoBoxButton A		{cursor:pointer !important; border:none; color:white; width:132px; height:41px;  text-align:center; color:white; font-size:12px; line-height:35px;text-decoration:none;background-color:none;background-image:url(images/addto.png); background-repeat:no-repeat; background-position:100% 1px;position:relative; left:10px;}
.infoBoxButton INPUT:hover{cursor:pointer !important; text-decoration:underline;}
.infoBox				{-webkit-border-radius: 8px;-moz-border-radius: 8px; border-radius: 8px; border:1px solid #cccccc; padding:2px; margin:0px 2px;}
.infoBoxlb				{-webkit-border-radius: 8px;-moz-border-radius: 8px; border-radius: 8px; border:1px solid #cccccc; padding:2px; margin:0px 2px; padding:10px;}
.greyinput				{border:1px solid transparent; padding:6px 5px 7px 5px; font-size:14px;text-decoration:none;background-color:#ececec;color:#666;width:60%;}
.greyinput:focus {border:1px solid #0dadec;}
.goinput				{border:none; padding:5px 5px 7px 5px; color:white; width:37px;background-color:#00b6ff;}
.greyinput.main				{border:none; padding:5px 0px 0px 5px; font-size:22px;text-decoration:none;background-color:transparent;background-image:url(images/greyinput.png);background-repeat:no-repeat; font-family: 'HandOfSeanRegular',Arial, Helvetica, sans-serif;color:#BE202E;width:696px;height:53px;position: relative;}
.goinput.main				{border:none; padding:0px 0px 0px 0px; font-size:22px;text-decoration:none;background-image:url(images/go-bg.png);color:white; width:77px;height:53px;font-family: Arial, Helvetica, sans-serif;position:absolute;top:11px;right:10px;background-position: 100% 0px;}

.goinput.plaque			{top: 28px;height: 38px;width: 49px;right: 38px;}
.greyinput.plaque		{width: 194px;margin-left: 22px;background-position: 0px; height: 31px;font-size:18px;}

.tabs LI				{display:inline-block; background:url(images/circle.png); padding:7px; background-repeat:no-repeat}
.tabs LI.active			{display:inline-block; background:url(images/circle-active.png); padding:7px; background-repeat:no-repeat}
.pink					{color:#be202e;}
.prodlist a				{color:#666; font-size:12px; padding:2px 0px;}
.prodlist a:hover		{text-decoration:underline}
.prodlist				{overflow:none;}

.door-plaque-form {
	background: url(images/door-plaque-form-bg.jpg); 
	background-repeat:no-repeat;
	width:900px;
	height:92px;
	box-shadow: 8px 10px 10px rgba(0,0,0,0.5);
   -o-box-shadow: 8px 10px 10px rgba(0,0,0,0.5);
   -webkit-box-shadow: 8px 10px 10px rgba(0,0,0,0.5);
   -moz-box-shadow: 8px 10px 10px rgba(0,0,0,0.5);
}

.door-plaque-hd-text	{bottom: 22px;color: #787878;font-size: 16px;left: 264px;position: relative;width: 698px;}

/*scrollable */
.scrollable {
	position:relative;
	overflow:hidden;
	width: 272px;
	height:394px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
.items div {
	float:left;
	width:272px;
	
}

	#closebutton {
		background-image:url(images/close.png);
		position:absolute; left:5px; top:5px;
		cursor:pointer;
		height:35px;
		width:35px;
	}	
	/* black version of the overlay. simply uses a different background image */
	.apple_overlay.black {
		display:none;		
		background-image:url(images/overlay.png);		
		color:#fff;
		
		/* 
			width after the growing animation finishes
			height is automatically calculated
		*/
		width:640px;		
		
		/* some padding to layout nested elements nicely  */
		padding:35px;
	
		/* a little styling */	
		font-size:11px;		
	}
	

	
	#triggers {
		margin-top:10px;
		text-align:center;
	}
	
	#triggers img {
		background-color:#fff;
		padding:2px;
		border:1px solid #ccc;
		margin:2px 5px;
		cursor:pointer;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
	}

/* Slider */

#slider {
	float:right;
	position:relative;
	z-index:-1;
}

#slider ul, #slider li{ 
	margin:0;
	padding:0;
	list-style:none;
}	

#slider, #slider li{ 
	height:324px;
	width:1000px;
	overflow:hidden;
}	

#slider{ 
	margin-left:5px;
}

a.jScrollArrowUp {
	background: url(../images/basic_arrow_up.gif) repeat-x 0 0;
}
a.jScrollArrowUp:hover {
	background-position: 0 -15px;
}
a.jScrollArrowDown {
	background: url(../images/basic_arrow_down.gif) repeat-x 0 0;
}
a.jScrollArrowDown:hover {
	background-position: 0 -15px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	background-position: 0 -30px;
}


.orange-bar .jScrollPaneTrack {
	background: #f60;
}
.jScrollDrag {
	background: #BE202E  none repeat scroll 0 0;
}
.orange-bar .scroll-pane {
}
			
.holder {
	float: left;
	margin: 10px;
}

.scroll-pane {
	width: 642px;
	height: 331px;
	overflow: auto;
	float: left;
}

.wide {
	width: 400px;
}

.super-wide {
	width: 700px;
}

.tall {
	height: 400px;
}

#pane1 {
	width: 642px;
	height: 331px;
}
#pane2 {
	height: 150px;
}
#pane3 {
	height: 190px;
}
#pane4 {
	height: 190px;
}

.prods .infoBox		{position:relative; float:right; width:40%; height:175px; overflow:hidden}
.prodbutton			{text-align:center; float:right; width:44%; margin:10px 0px;}
.mountwrite			{font-size:15px; font-weight:bold}
.prodlist			{position:relative; float:left; width:18%; margin-left:1%; margin-right:1%; margin-bottom:20px; text-decoration:none; font-size:12px}
.prodlist IMG			{border:0}
.prodlist A:hover	{text-decoration:none;}
.liquid				{position:relative; float:left; width:47%;}
.liquidr			{position:relative; float:right; width:47%;}
.prods				{position:relative; float:left; width:47%;}
.prodspx			{position:relative; float:left; white-space:normal;}
.prodr				{position:relative; float:right;}
.infoBox 			{background-color:#d2cace; 	-moz-border-radius:12px;	-webkit-border-radius:12px; padding:10px 10px 10px 10px}
.smallimages-noheight{ height:157px; padding:2px 3px;}



/* **************************************** */
/* slika1 */
/* **************************************** */



.thumbnail1{
position:relative;
z-index: 0;

}

.thumbnail1:hover{
background-color: transparent;
z-index: 0;
}

.thumbnail1 span{ /*CSS for enlarged image*/
position: absolute;
background-color: #303030;
padding: 5px;
left: -2000px;
border: 3px solid lightyellow;
visibility: hidden;
color: F3D656;
size: 10 px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
}

.thumbnail1 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 5px;
height: ;

}

.thumbnail1:hover span{ /*CSS for enlarged image on hover*/
position: absolute;
visibility: visible;
top:25px;
left: -270px; /*position where enlarged image should offset horizontally */

}

/* **************************************** */
/* slika2 */
/* **************************************** */

.thumbnail2{
position:relative;
z-index: 0;

}

.thumbnail2:hover{
background-color: transparent;
z-index: 0;
}

.thumbnail2 span{ /*CSS for enlarged image*/
position: absolute;
background-color: #303030;
padding: 5px;
left: -2000px;
border: 3px solid lightyellow;
visibility: hidden;
color: F3D656;
size: 10 px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
}

.thumbnail2 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 5px;
height: ;

}

.thumbnail2:hover span{ /*CSS for enlarged image on hover*/
position: absolute;
visibility: visible;
top:25px;
left: -370px; /*position where enlarged image should offset horizontally */

}

/* **************************************** */
/* slika3 */
/* **************************************** */

.thumbnail3{
position:relative;
z-index: 0;

}

.thumbnail3:hover{
background-color: transparent;
z-index: 0;
}

.thumbnail3 span{ /*CSS for enlarged image*/
position: absolute;
background-color: #303030;
padding: 5px;
left: -2000px;
border: 3px solid lightyellow;
visibility: hidden;
color: F3D656;
size: 10 px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
}

.thumbnail3 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 5px;
height: ;

}

.thumbnail3:hover span{ /*CSS for enlarged image on hover*/
position: absolute;
visibility: visible;
top:25px;
left: -470px; /*position where enlarged image should offset horizontally */

}

/* **************************************** */
/* slika4 */
/* **************************************** */

.thumbnail4{
position:relative;
z-index: 0;

}

.thumbnail4:hover{
background-color: transparent;
z-index: 0;
}

.thumbnail4 span{ /*CSS for enlarged image*/
position: absolute;
background-color: #303030;
padding: 5px;
left: -2000px;
border: 3px solid lightyellow;
visibility: hidden;
color: F3D656;
size: 10 px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
}

.thumbnail4 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 5px;
height: ;

}

.thumbnail4:hover span{ /*CSS for enlarged image on hover*/
position: absolute;
visibility: visible;
top:25px;
left: -570px; /*position where enlarged image should offset horizontally */

}


/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
	border: 4px solid #888;
	margin:-4px;	/* Set this to minus the border thickness. */
	background-color:#fff;	
	cursor:move;		
}

/* This is for the title text. */
.cloud-zoom-title {
	font-family:Arial, Helvetica, sans-serif;
	position:absolute !important;
	background-color:#000;
	color:#fff;
	padding:3px;
	width:100%;
	text-align:center;	
	font-weight:bold;
	font-size:10px;
	top:0px;
}

/* This is the zoom window. */
.cloud-zoom-big {
	border:4px solid #ccc;
	overflow:hidden;
}

/* This is the loading message. */
.cloud-zoom-loading {
	color:white;	
	background:#222;
	padding:3px;
	border:1px solid #000;
}