img, div { behavior: url("css/iepngfix.htc") }






/* BASE STYLE SHEET - USED FOR DEMO SITE */


/* =========================================================================================*/
/* ELEMENT SELECTORS ==================================================================*/

body {
	margin:0px auto;
	padding:0px;
	
	font-family:Verdana, sans-serif;
	text-align:center;
	font-size:80%;
	color:#666666;
}

h1 { font-size:140%; font-weight:normal; margin:10px 0 20px 5px; padding:0; }
h2 {font-weight: bold; font-size: 120%; color: #4F6C7C; margin:0; padding:0; }
h3 { font-size:120%; font-weight:normal; margin:5px 0 0 5px; } 
h4 { font-size:100%; font-weight:bold; } 
p { margin:6px 0 0 5px;}
a { color:#999; }
a:hover { color:#777; }
a img {border: none;}


/* ========================================================================================*/
/* OUTER STRUCTURE ====================================================================*/

#container {
	width:960px;
	margin:0 auto;
	text-align:left;
}

#header {
	width:800px;
	display:none;
	margin:0 auto;
	height:0px;
	background:url(../images/headerImage.jpg) top right no-repeat;
	margin-bottom: 20px;
}

#logo {
	width:211px;
	height:69px;
	margin:14px 0 0 0;
	float:left;
}

#strap {
	width:450px;
	float:left;
	font-size:12px;
	margin:17px 0 0 0;
	padding:0 0 0 10px;
	height:69px;
}

.phone { font-size:10px; margin:3px 0 0 0; color:#777; }

.titleDesc { font-size:16px; font-weight:bold; margin:0; padding:0; }

#create {
	width:710px;
	height:30px;
	margin:22px 0 0 0;
	float:left;
	padding:0 0 0 10px;
	font-size:16px;
	color:#333;
	font-weight:bold;
}

#personalise {
	font-size:12px;
	color:#666666;
}


/* ======================================================================================= */
/* MAIN CONTENT ====================================================================== */

#content {
	width:960px;
	float:left;
	margin:0 auto;
}

#left-col {
	width:205px;
	float:left;
	margin:0;
}

#right-col {
	width:300px;
	float:left;
	margin:0 0 0 30px;
	text-align:left;
}

#main-col {
	width:725px;
	float:left;
	margin:0 0 0 10px;
	display:inline;
}

#main-col-narrow {
	width: 400px;
	float:left;
	margin:0 0 0 10px;
	display:inline;	
}


/* ======================================================================================= */
/* CONTENT OBJECTS ================================================================== */

.aspBtnLong {
	background-image: url(../images/aspBtnLong.gif);
	border: 0px;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	width: 165px;
	padding-top: 2px;
	padding-bottom: 4px;
	margin-bottom: 2px;
	color: #343434;
	cursor:pointer;
	font-size:13px;
} 

.aspBtn {
	background-image: url(../images/aspBtn.gif);
	border: 0px;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	width: 82px;
	padding-top: 2px;
	padding-bottom: 4px;
	margin-bottom: 2px;
	color: #343434;
	cursor:pointer;
	font-size:13px;
} 

.aspBtnbrowse {
	background-image: url(../images/aspBtn.gif); background-position:right;
	border: 0px;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	width: 82px;
	padding-top: 2px;
	padding-bottom: 4px;
	margin-bottom: 2px;
	color: #343434;
	cursor:pointer;
	font-size:13px;
} 


.transImg {
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter: alpha(opacity=50);

}

.errorTxt {
	font-weight: bold;
	color: #CC3300;
}

#img { 
	margin-right:5px;
	margin-top:20px;
	padding: 10px;
	border: 1px solid #CCCCCC;
	width: 465px;
	float: left;
}
  
.imgitem { 
	position: relative;
	padding: 10px;
	border-bottom:#ccc 1px solid;
	border-right:#ccc 1px solid;
	border-left:#ccc 1px solid;
	border-top:#ccc 1px solid;
	font-size:10pt;
	font-weight: normal;
	text-align:center;
	width: 465px;
}


/* ======================================================================================= */
/* SELECT CARD PAGE =================================================================== */

#selectCard {
	text-align:center;
}

#selectCard td {
	width: 150px;
	
}


/* ======================================================================================= */
/* CREATE CARD PAGE =================================================================== */

.stepshead { 
	width:170px;
	height:18px;
	padding: 0 3px 0 5px;
	border:#ccc 1px solid;
	text-align: left;
	font-size:10pt;
	background-color:#eee;
	color:#000000;
}

.stepsheadlong { 
	width:477px;
	height:18px;
	padding: 0 3px 0 5px;
	border:#ccc 1px solid;
	border-bottom:0px;
	text-align: left;
	font-size:10pt;
	background-color:#eee;
	color:#000000;
	margin-left: 0px;
}
  
.stepsitem { 
	width:172px;
	padding: 8px 3px 8px 3px;
	border-bottom:#ccc 1px solid;
	border-right:#ccc 1px solid;
	border-left:#ccc 1px solid;  
	font-size:10pt;
	font-weight: normal;
	text-align:left;
	margin-bottom: 15px;
}

#uProgressBg {
    z-index: 13;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
	background-color: #333333;
	text-align: center;
	opacity: 0.5;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
}
  
#uProgress {
   	z-index: 20;
	position: absolute;
	left: 25%; 
	top: 40%;
	height: 100px;
	width: 250px;
	background-color: #FFFFFF;
	text-align: center;
	border: 1px solid #999999;
}

#uUploadingProgressBg {
   	z-index: 11;
	position: absolute;
	height: 110px;
	width: 470px;
	background-color: #ffffff;
	text-align: center; 
}
  
#uUploadingProgress {
   	z-index: 15;
	position: absolute;
	height: 105px;
	width: 470px;
	background-color: #FFFFFF;
	text-align: center;
}
 
/* ======================================================================================= */
/* UPLOAD IMAGE ============================================================================== */
#uploadImage {
	padding: 10px;
	border: 1px solid #CCCCCC;
	margin-top: 0px;
	margin-left: 0px;
	width: 465px;
}

#btnUpload {
	float: left;
}

#imgToolBar {
	float: left;
	width: 30px;
	text-align: right;
	margin-right: 10px;
}




/* ======================================================================================= */
/* CHECKOUT PAGE ========================================================================= */
.address {
	float: left;
	margin-right: 10px;
}

.addresshead { 
	width:340px;
	height:18px;
	padding: 0 3px 0 5px;
	border:#ccc 1px solid;
	text-align: left;
	font-size:10pt;
	background-color:#eee;
	color:#000000;
}
  
.addressitem { 
	width:342px;
	padding: 8px 3px 8px 3px;
	border-bottom:#ccc 1px solid;
	border-right:#ccc 1px solid;
	border-left:#ccc 1px solid;  
	font-size:10pt;
	font-weight: normal;
	text-align:left;
	margin-bottom: 15px;
}

.fulldiv {
	float: left;
}

.fullhead { 
	width:700px;
	height:18px;
	padding: 0 3px 0 5px;
	border:#ccc 1px solid;
	text-align: left;
	font-size:10pt;
	background-color:#eee;
	color:#000000;
}

.fullfoot { 
	width:700px;
	height:18px;
	padding: 0 3px 0 5px;
	border-right:#ccc 1px solid;
	border-left:#ccc 1px solid;
	border-bottom:#ccc 1px solid;

	text-align: left;
	font-size:10pt;
	background-color:#eee;
	color:#000000;
	margin-top: -15px;
	margin-bottom: 15px;
}
  
.fullitem { 
	width:702px;
	padding: 8px 3px 8px 3px;
	border-bottom:#ccc 1px solid;
	border-right:#ccc 1px solid;
	border-left:#ccc 1px solid;  
	font-size:10pt;
	font-weight: normal;
	text-align:left;
	margin-bottom: 15px;
}

.halfdiv {
	width:342px;
	padding: 8px 3px 8px 3px;
	font-size:10pt;
	font-weight: normal;
	text-align:left;
	margin-bottom: 15px;
	float: left;
}

.previmage {
margin-left:50px;
}


/* ======================================================================================= */
/* FOOTER ============================================================================== */

#footer {
	width:940px;
	display:none;
	float:left;
	background:url(../images/footBg.gif) left top repeat-x;
	padding:0px 10px 20px 10px;
	text-align:left;
	margin-top: 30px;
}

#footer ul { 
	margin:10px 0 0 0; padding:0;
}

#footer ul li {
	display:inline;
	font-size:75%;
	color:#aaa;

}

#footer ul li a {
	display:inline;
	color:#777;
}

#footer ul.copyr {
	display:inline-block;
	margin:0; padding:0;
}






.magTitle	{ font-size:14px; font-weight:bold; }




/* DELIVERY POP UPS  */

a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#eee;
    color:#4F6C7C;
	border:#ccc 1px solid;
	padding:2px;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#ccc}

a.info span{display: none; background-color:}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:22px; left:-18.8em; width:36em;
    border:1px solid #ccc;
	background-color:#eee;
	font-weight:normal;
	font-size:10px;
	padding:5px;
    }

.box { padding:10px 10px 12px 10px; border:1px solid #ccc; background-color:#eee; width:688px; font-size:12px;  }
#alternate	{ margin-left:350px; font-weight:bold; font-size:10px; margin-bottom:15px; color:#AA0404  }
.divAddress		{ background-color:#993300 }
.alter			{ border:1px solid #CCC; height:180px; margin-left:14px; background-color:#EEE; }


.clear { clear:both;}




/**Products page**/
#products		{position:relative; width:100%; height:100%; text-align:center }
#products h1 	{position:relative; padding-left:5px; padding-top:5px;font-size:16px; color:#4F6C7C; font-weight:bold; margin:0 }
#products h2 	{padding-top:5px; font-size:11px; color:#666666; font-weight:normal}
#products p		{padding-top:5px; font-size:14px; color:#4F6C7C; font-weight:bold; padding-bottom:10px}
#products img 	{padding-top:15px}

#frame1			{position:relative; float:left; width:280px; border:1px solid #e2e2e2; margin-bottom:7px; margin-right:20px;}
#frame1	h1		{ color:#4F6C7C }
#frame2			{position:relative; float:left; width:280px;  border:1px solid #e2e2e2; }
#frame2	h1		{ color:#4F6C7C }

#frame3			{position:relative; float:left; width:280px; border:1px solid #e2e2e2; top:20px; margin-bottom:20px; margin-right:20px;}
#frame3	h1		{ color:#4F6C7C }
#frame4			{position:relative; float:left; width:280px;  border:1px solid #e2e2e2; top:20px;margin-bottom:10px}
#frame4	h1		{ color:#4F6C7C }

.clear			{ clear:both }



/* SCROLLER ELEMENTS  */


#my-glider	{ position:relative; float:left;  }

div.scroller {  position:relative; width:660px; overflow: hidden;  height:190px; }
div.scroller div.section { width:660px;  overflow:hidden; float:left; padding:0em;  }
div.scroller div.scrollcontent { width: 12000px; }


#prevBtn a			{ position:relative; float:left; width:40px; height:170px; margin-right:5px; margin-left:55px; background-image:url(../images/leftArrow.jpg); cursor:pointer; }
#prevBtn a:hover	{ background-image:url(../images/leftArrowHover.jpg) }
#nextBtn a			{ position:relative; float:left; width:40px; height:170px; margin-left:0px; background-image:url(../images/rightArrow.jpg); cursor:pointer }
#nextBtn a:hover	{ background-image:url(../images/rightArrowHover.jpg) }

.miniPreview				{  margin:0; padding-top:0px; padding-bottom:10px; width:109px; height:180px; float:left; text-align:center   }
.miniPreview .image		  	{  background-color:#F2F2F2; height:142px;  padding:0px; border:0px solid #605751;  margin:0; margin-right:20px;  }
.miniPreview img			{ border:none; margin:0 }
.miniPreview h1  			{ position:relative; font-family:Verdana, Arial, Helvetica, sans-serif;  font-size:11px; color:#333; font-weight:normal; margin:0; text-decoration:none; padding:5px 0 0 0;}
.miniPreview h5 a			{  color:#FFFFFF;  }


#ifrm						{ position:relative; margin-left:40px }


#sampleOverlay				{ position:absolute; top:250px; left:250px; width:485px; height:346px; margin:0 }


#zoomButtons						{ position:relative; text-align:center; width:150px; height:108px; left:3px; padding:5px; background-color:#E5E5E5; margin:10px 0 10px 0; font-weight:bold; border:1px solid #CCCCCC }

.imgPreview { z-index : 12 }