/*
-----------------------------------------------
smartprintltd.co.uk
Stylesheet: screen.css
Author:		Zoli Konyves
Version:	20 September 2005
----------------------------------------------- */

/* HTML TAGS
---------------------------------------------*/
html, body 
	{ 
	padding: 0; 
	margin: 0; 
	}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background:#fff;
	}

a, a:link, a:visited, a:hover, a:active    
	{
	text-decoration: none;
	}

img 
	{
	border: 0;
	}
	
ul, li 
	{
	list-style:none;
	}


h1, h2, h3, h4, p
	{
	line-height:25px;
	background-color:#fff; /* cover background when text size is increased in browser */		
	}
	
		
h1, h2
	{
	margin:20px 0 10px 20px;
	font-size:110%;
	color: #828B98;
	}

h3
	{
	margin:10px 0 0 20px;
	font-size:90%;
	font-weight:bold;
	color: #98A3B2;
	}
	
h4
	{
	font-size:70%;
	font-weight:bold;
	color: #596475;	
	white-space:nowrap;
	}	

p
	{
	margin:0 0 20px 20px;
	padding: 0 0 0 1px;
	font-size:78%;
	color: #AEADA2;
	}

dl
	{
	margin:0;	
	padding:0;
	}
	
dt  
	{
	float:left;
	display:inline;
	}
	
dd 
	{
	margin:8px;	
	}


/* PAGE STRUCTURE
---------------------------------------------*/
/*VETICAL ALIGN - START	
  thanks to: http://www.hicksdesign.co.uk/journal/how-to-vertical-centering-with-css
  styles for IE 5 Mac */
#centraliser
	{
	background-color: transparent;
	position: absolute;
	top: 5px;
	left: 5px;
	}

/* following rules are invisible to IE 5 \*/
#centraliser 
	{
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -210px;
	text-align: center;
	min-width: 762px;
	
	}
/* end IE 5 hack */

#container_main 
	{
	position: relative;
	text-align: left;
	width: 762px;
	height: 420px;
	margin: 0px auto;
	}
 /*VETICAL ALIGN - END*/
 
 
#container_inner
	{
	position:absolute;
	top:65px;
	left:39px;
	width: 721px;
	height: 330px;
	border:1px solid #D1E3E3;
	overflow:visible;
	}

/* ADJUST QUOTE ELEMENTS*/
/* ENLARGE INNER CONTAINER VERTICALLY FOR QUOTE FORM  */
#quoteholder
	{
	height: 420px;		
	}	
	
body#quote #container_inner
	{
	height: 430px;	
	}
body#quote #colourbar
	{
	top: 445px;
	}	
body#quote #footer
	{
	margin: 445px 0 0 0;
	}

	

/* REPEATING PAGE ELEMENTS
---------------------------------------------*/	
#logo
	{ 
	background: transparent url(/images/sp_logo.jpg) top left no-repeat; 
	float:left;
	width: 202px; 
	height: 60px; 	
	}
		
#leftcontent
	{ 
	position: absolute;
	left:0;
	top:0;
	width: 360px; 
	height: 330px; 	
	z-index:100;  /* in case user increases textsize */
	}
	
#leftcontent p a, #leftcontent p a:visited
	{
	color:#828B98;
	border-bottom:dotted 1px #828B98;
	}

#leftcontent p a:hover
	{
	color:#000;
	border-bottom:solid 1px #828B98;
	}

#rightcontent
	{ 
	position: absolute;
	left:361px;
	top:0;
	width: 360px; 
	height: 330px; 	
	}
	
#footer 
	{
	position:absolute;
	left:-1px;
	top:0;
	margin:343px 0 0 0;
	background-color:Transparent;
	font-size:68%;
	color: #C0BFB3;	
	}
	
#footer a, #footer a:visited
	{
	color: #C0BFB3;	
	}

#footer a:hover
	{
	color: #000;	
	}


#colourbar
	{ 
	background: transparent url(/images/colourbar.gif) top left no-repeat; 
	position: absolute;
	left:493px;
	top:341px;
	width: 228px; 
	height: 21px; 
	}
	

	
/* CLEAR FLOATS  */
.clear 
	{
	clear:both;	
	}
	
/* NAVIGATION 
---------------------------------------------*/
#nav
	{	
	float:right;
	padding:0;
	margin-top: 35px;	
	}

/* HIDE THIS FROM IE5 \*/	
#nav li
	{
	float:left;
	display:block;
	text-align:right;
	padding: 4px 10px;
	margin: 0 0 0 -1px; /* Makes sure left bored is not duplicated when full border is shown  \*/
	border-right:1px solid #9EACAC;
	}


#nav a, #nav a:visited 
	{
	display:block; /* this will ensure that the link will be as wide as its container (li) \*/
	color: #9EACAC;
	font-size:78%;
	}

#nav a:hover 
	{
	color:#000;
	}

/* indicate current page \*/	
body#home #home_tab,
body#products #products_tab,
body#location #location_tab,
body#quote #quote_tab,
body#contact #contact_tab
	{
	border:1px solid #9EACAC;
	}
	
body#home #home_tab 
	{
	margin: 0; /* Makes sure first tab has left border (see above #nav li) \*/
	}

/* make current page hover-setting as of active link \*/		
body#home #home_tab a:hover,
body#products #products_tab a:hover,
body#location #location_tab a:hover,
body#quote #quote_tab a:hover,
body#contact #contact_tab a:hover
	{
	color: #9EACAC;
	}
/* end IE5 hack */
	
/* BREADCRUMB 
---------------------------------------------*/
a.breadcrumb 
	{
	color: #AEADA2;
	font-size: 75%;
	margin:0;
	padding: 4px 18px 5px 15px;
	border-style: solid;
	border-width: 0 1px 1px 0;
	border-color: #D1E3E3;
	}

a.breadcrumb:hover
	{
	color: #000;
	}	


/* HOME PAGE
---------------------------------------------*/
div#inkflow
	{ 
	background: transparent url(/images/inkflow.gif) top left no-repeat; 
	float:right;
	left:0;
	width: 297px; 
	height: 330px; 
	}
	
h1#introhead
	{
	color: #0071C1;
	}	


/* PRODUCTS PAGES
---------------------------------------------*/

.productlist
	{	
	padding: 0 0 0 18px;
	margin: 0;	
	}
	
.productlist li
	{
	display:block;
	text-align:left;
	padding: 4px;
	}

.productlist a, .productlist a:visited 
	{
	display:block; /* this will ensure that the link will be as wide as its container (li) */
	color: #AEADA2;
	font-size:78%;
	}

.productlist a:hover 
	{
	color:#000;
	}
	
.productpic img
	{
	border: solid 1px #AEADA2;
	margin:4px;	
	float:right;
	display:inline;
	}

/* PRODUCT DESCRIPTION AND PRICE TABLES */

#productdesc table
	{
	float:left;
	border-collapse:collapse;
	border:solid 1px white;
	margin:0 12px;
	font-size:78%;
	color: #AEADA2;
	background-color:#fff;  /* in case text size is increased by user */
	}
	
#productdesc td, th
	{
	border:dashed 1px #D1E3E3;
	padding:4px 4px;
	text-align:center;	
	white-space:nowrap;
	}
	
#productdesc th
	{
	font-weight:normal;
	font-size:75%;
	}
	
#productdesc caption
	{
	font-weight:bold;
	padding: 10px 0 0 10px;
	color:#828B98;
	white-space:nowrap;
	}
	
.caption_small
	{
	font-weight:normal;
	font-size:70%;
	white-space:nowrap;
	}
	
#tfoot1 td
	{
	border: solid 1px #fff;
	font-size:75%;
	vertical-align:top;
	}
	
#productdesc h2
	{
	margin:10px 0 0px 15px;	/* ajust for product list */
	}

p.product_desc, p.product_desc_wall
	{	
	font-size:65%;
	line-height:normal;
	padding:0;
	margin:0 0 0 15px;
	color: #828B98;
	}
p.product_desc_wall
	{
	line-height:18px;
	}

p.smallprint
	{	
	font-size:65%;
	line-height:normal;
	clear:both;
	padding:5px 0 0 0;
	margin:0 0 0 15px;
	}
	
/* Web Pages */

.web_samples
	{
	width:335px;
	height:100px;	
	display:block;
	margin:6px 5px 5px 20px;
	}
	
.web_samples  img
	{ 
	float:left;
	width:100px;
	height:100px;
	border: solid 1px #AEADA2;
	display:inline;
	margin:0 10px 0 0;
	}
	
.web_samples  p
	{ 
	font-size:70%;
	color: #AEADA2;
	margin:0;
	padding: 0 3px 0 7px;
	line-height:15px;
	}
	
.web_samples p span.head
	{
	font-weight:bold;
	font-size:120%;
	color:#828B98;
	}

a.visit_site, a.visit_site:visited, a.head_link, a.head_link:visited
	{
	color: #828B98;
	white-space:nowrap;
	}
	
a.visit_site, a.visit_site:visited
	{
	border-bottom:dotted 1px #828B98;		
	}
	
a.visit_site:hover
	{
	color: #000;
	border-bottom:solid 1px #000;	
	}
	

/* Random images on Calendar product page */
img.image
	{
	border-left:solid 1px #D1E3E3;
	}

/* Product image in wall calendar pages */
#wallcal_img
	{
	float:right;
	display:inline;
	margin:-15px 0 0 0;
	}

/* Thumbnail sceneries on calendar pages  */	
#cal_small_pix_panel
	{
	margin:10px 0 0 8px;
	}

#cal_small_pix_panel p
	{
	line-height:20px;
	margin:20px 5px;
	}
#cal_small_pix_panel p.cd_p
	{
	line-height:18px;
	margin:10px 5px;
	}
	
#cal_small_pix_panel img
	{
	border: solid 1px #AEADA2;
	padding:2px;
	margin:3px;	
	float:left;
	display:inline;	
	}

#cal_small_pix_panel img.noborder
	{
	border: solid 1px #fff;
	}


/* Large image of sceneries on wall calendar page  */		
#cal_large_pix_panel
	{
	display:none;
	}

/* Navigate back to small images */	
#back_to_thumbs
	{
	position:absolute;
	margin:0;
	width:360px;
	background-color:#fff;
	display:block;
	filter:alpha(opacity=70);
	opacity: 0.7;
	}

#back_to_thumbs a
	{
	color:#86857D;
	font-size:78%;
	padding:5px 8px;
	display:block;
	}
	
#back_to_thumbs a:hover
	{
	color:#000;
	}
	

/* Artwork, design and other product page */
p.artwork_others
	{
	line-height:20px;
	background-color:#fff;	
	margin:6px 0 0 14px;
	font-size:70%;
	color: #AEADA2;
	}
	
.nowrap
	{
	white-space:nowrap;	
	}


/* LOCATION 
---------------------------------------------*/

p.location
	{
	text-align:left;
	margin-right:80px;
	line-height:18px;
	}
	
	
/* CONTACT
---------------------------------------------*/

/* leftcontent on contact page */
.contact_background 
	{
	background: transparent url(/images/inkflow2.jpg) top left no-repeat; 	
	}
	
/* MAIL RESPONSE
---------------------------------------------*/
#envelope
	{
	background: transparent url(/images/envelope.gif) top left no-repeat; 
	float:right;
	left:0;
	width: 360px; 
	height: 330px; 	
	}
	
h3.mailmsg, p.mailmsg
	{
		margin-left:70px;	
	}
	
h3.mailmsg
	{
		margin-top:73px;
	}

	
/* PRIVACY POLICY
---------------------------------------------*/
#privacy
	{
	height:400px;
	overflow:auto;
	}

#privacy li
	{
	list-style-type:disc;
	font-size:78%;
	color:#86857D;
	line-height:25px;
	}

#privacy a
	{
	display:block; /* this will ensure that the link will be as wide as its container (li) */
	color: #65645E;
	font-size:110%;
	background-color:#D6D5C7;
	text-align:center;
	margin:30px 0 0 0;
	}
	
#privacy a:hover
	{
	color: #000;	
	}