/* body */
* { 
  font-family: Arial, Helvetica,  Verdana, sans-serif;
}

body { 
  background-color: #FFFFFF; 
  color: #000000; 
  margin: 0px;
  padding: 0px;
}

body, td, th, input, textarea, a {
  font-size: 12px;
  color: #000000;
  line-height: 1.3;
}

.warning {
  font-size: 12px;
  color: #CC0000;
}

form {
  padding: 0;
  margin: 0;
}

a img {
  border: none;
}

a:hover {
  color: #002A8F;
  text-decoration: underline;
}

/* layout */
#container {
  width: 850px;
  margin: 10px auto;
	border: 2px solid #3C61A8;
}

h1 { 
  display: none;
}

#header {
  clear: both;
}


#central {
	float: left;
	width: 850px;
  padding-top: 20px;
  padding-bottom: 20px;
}

#menudiv {
	float:left;
	width: 150px;
}

#content {
	float:left;
  padding: 0 10px;
  width: 680px
}

#home-left {
  float: left;
  padding-right: 20px;
  width: 356px; 
}
#home-right {
  float: right;
  width: 300px;
}

#footer {
  height: 25px;
  clear: both; 
  background-color: #3C61A8;
  text-align: center; 

  font-size: 12px;
  color: #FFF; 
}

#footer div {
  padding-top: 4px;
}

#footer span {
  color: #FFFFFF;
}

#title {
  font-size: 18px;
  margin: 0 0 14px 0;
  color: #002A8F;
}

#time {
  color: #C4D0D9;
  text-align: center;
  clear: both;
}

.nav {
  font-size: 10px;
}

.nav a {
  font-size: 10px;
  color: #002A8F;
}

.list {
	float: left;
 	width: 112px;
 	height: 150px;
  text-align: center; 
  padding: 0px;
}

.list a {
  color: #000000;
  text-decoration: none;
}

.list a:hover {
  text-decoration: underline;
}
.pen_list{float:left;  width:300px;  height:300px;  text-align:center;  padding:0px} 
.pen_personalize_li{
  list-style-type:none;
  padding:2px 0;
}
.pen_personalize_ul{
  padding:0;margin:0;
} 
/* header */
#header-top {
  clear: both;
  height: 90px;
	background: #005499;
}

#logo{
  float: left;
  width: 250px;
}

#xmas {
  float: left;
  width: 535px;
  height: 100%;
  background: url(image/xms.jpg) no-repeat 0px 0px;  
}

#header-login {
  float: right;
	padding: 0 5px;
  width: 240px;
}

#logo {
  height: 100%;
  background: url(image/logo.gif) no-repeat 5px 8px; 
}


#header-login {
  height: 100%;
  text-align: right;
	color: #FFF;
	background: url(image/top.jpg) no-repeat 0px 0px; 
}

#header-login a {
  color: #FFF;
}

#header-bottom {
  background-color: #03539A;
  height: 25px;
}

#header-bottom-left, #header-bottom-right {
  color: #FFF;
  text-transform: uppercase;
  font-size: 12px;
  padding-top: 4px;
}

#header-bottom-left {
  float: left;
  padding-left: 6px;
}

#header-bottom-right {
  float: right;
  padding-right: 6px;  
  height: 20px;
  color: #FFFFFF;
} 

#header-bottom-right a {
	color: #FFFFFF;
  text-decoration: none;
} 

#header-bottom-right a:hover {
 	color: #FFFFFF;
 text-decoration: underline;
} 

#personalise {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  padding: 2px 0px;
}

#personalise table {
  width: 100%;
}

#personalise td {
  text-align: center;
  padding: 3px;
  height: 15px;
  cursor: pointer;
}

.hover {
  background-color: #E4EDD2;
}

.highlight {
  background-color: #002A8F;
  color: #FFFFFF;
  font-weight: normal;
}

/* cart */
#bastet-container {
  position: relative;
  top: 20px;
  width: 90%;
  margin-left: -45%;
  left: 50%;
}

#basket {
  clear: both;
  width: 100%;
  margin-bottom: 10px;  
  border: 3px solid #E4EDD2;
}

#basket a {
  color: #002A8F;
}
#basket img {
  border: 0;
}

#basket th, #basket td {
  padding: 5px;
}

#basket .preview {
  font-size: 9px;
	text-decoration: underline;
	cursor: pointer;
}

th.remove {
  text-align: center;
}

td.remove {
  text-align: center;
  vertical-align: middle;
}

th.image {
  text-align: center;
}

td.image {
  text-align: center;
  vertical-align: middle;
  width: 116px;
}

th.name {
  text-align: left;
}

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

th.code {
  text-align: left;
}

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

th.option {
  text-align: left;
}

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

#basket td.name span, #basket td.name span a {
  font-size: 9px;
}

th.quantity {
  text-align: right;
  vertical-align: top;
}

td.quantity {
  text-align: right;
  vertical-align: top;
}

th.price {
  text-align: right;
  vertical-align: top;
}

td.price {
  text-align: right;
  vertical-align: top;
}

#basket .total {
  text-align: left;
}

#bottom-nav {
  width: 100%;
  border: 3px solid #E4EDD2;
  background-color: #FFFFFF;
  margin-bottom: 20px;
}

#basket th {
  color: #000000;
  background-color: #E4EDD2;
}

#basket td {
  background-color: #FFFFFF;
}

#basket th, #basket td,  #basket a {
  font-size: 11px;
}

#basket .total {
  text-align: right;
  color: #000000;
}

#basket .total b {
  text-align: right;
}

#basket div {
  text-decoration: underline;
  cursor: pointer;
}
/* account-login */
#login {
  width: 580px;
  margin: 0 auto;  
  top: 10px;
}

#account-login-left, #account-login-right {
  width: 284px;
}

#account-login-big{
  width: 500px;
}

#account-login-left div, #account-login-right div {
  background-color: #FFFFFF;
  border: 1px solid #002A8F;
  height: 190px;
  padding: 10px;
}

#account-login-big div{
  background-color: #FFFFFF;
  border: 1px solid #002A8F;
  padding: 10px;
}

#account-login-right table {
  width: 100%;
}

#account-login-left span, #account-login-right span, #account-login-big span{
  font-weight: bold;
  margin-bottom: 2px;
  display: block;
}

#account-login-left, #account-login-big {
  float: left;
}

#account-login-right {
  float: right;
}

.account-login-table td input {
  width: 140px;
}

.account-button {
  text-align: right;
  cursor: pointer;
  border: 0; 	
  padding-top: 5px;  
}

.account-button a {
  float: left;
  font-size: 10px;
}


/* create account */
#account-container {
  width: 500px;
  margin: 0 auto;
}

#account-container p {
  font-weight: bold;
  color: #002A8F;
  margin: 8px;
}

#account-container div {
  padding: 5px;  
  border: 3px solid #F3E0E0;
  margin-left: 12px;
}

#account-container #bottom-nav {
  width: 98%;
}

#account-container table {
  width: 100%;
  margin-bottom: 20px; 
}

#account-container td {
  color: #956A43; 
}

#account-container ul a {
  color: #002A8F; 
}

#password {
  height: 100px;
  width: 300px;
  border: 3px solid #F3E0E0;  
  background-color: #FFFFFF;
  margin: 0 auto;
  margin-top: 20px;
}

.sample {
  color: #FF0000;
  font-size: 10px;
}
/* cca traditional version
 include instead of (or as well as) pers.css
 to include both, make the alternative(s) rel="alternate stylesheet" rather than just "stylesheet"
 and give a title to all the choices (including the default)
 Also change webform to produce structured html, rather than tubular data (whatever that is)
*/
.c , .c  input, .c  textarea, .c  select { text-align: center; margin: 0 0 4px 0 }
.r, .r  input, .r  textarea, .r  select { text-align: right; margin: 0 0 4px 0 }
.sr, .sr  input, .sr  textarea, .r  select { text-align: right; margin: 0 0 4px 0 }
.lsr  div { float: left }
.lsr  div.sr { float: right; text-align: right }
div.c { clear: both }
.std { color: black; background-color: #EEE }
.prompt { font-weight: bold }
span.logoRequest, a.logoRequest { font-size: 11px; color: #666 }
a.logoRequest { font-weight: bold }
div#navigation
{
	background: #EEE;
	padding: 4px;
	text-align: right;
	margin-bottom: 10px;
	font-size: 11px;
	border-bottom: 1px solid #000;
}
div#navigation a { font-size: 11px; }
div#pageInfo
{
	text-align: left;
	margin-bottom: 10px;
	padding: 4px;
	background: #FFFFCC;
}

/* artwork */
.artthumb {
  float:left;
  margin: 5px;
  padding:2px;
  border: 1px solid #DDDDDD;
  background-color:#F3F2EF;
  width:72px;
  text-align: center; 
}
.portfolio {
  float: left;
  clear: both;
  margin: 5px;
  padding:2px;
  border: 1px solid #DDDDDD;
  background-color:#F3F2EF;
  width:654px;
}

input, textarea, select
{
	border: 1px solid #002A8F;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
input
{
	padding: 0 2px;
}
.button
{
	background: #002A8F;
	border: 1px solid #002A8F;
	color: #FFF;
	font-weight: bold;
	cursor: pointer;
}
table.contentTable
{
	border: 1px solid #002A8F;
	border-collapse: collapse;
}
th.contentTh
{
	border: 1px solid #002A8F;
	background: #002A8F;
	font-weight: bold;
	color: #FFF;
	padding: 3px;
}
td.contentTd
{
	border: 1px solid #002A8F;
	padding: 3px;
}
h2
{
	color: #002A8F;
	font-size: 13px;
}
.pv, .pvthumb {
  border: 1px solid #999999;
  background-color: #FFFFFF;
  margin: 5px;
}

#preview {
  margin-top: 30px; 
  padding: 10px;
  width: 674px; 
  height: 400px; 
  margin-bottom: 30px;
  background-color: #EEEEEE;
  border: 3px solid #F3E0E0;
  text-align: center;
  overflow: auto;
}
.zoom {
	font-weight: bold;
  margin-bottom: 6px;
  margin-top:2px;
}
.zoom a {
	font-size: 10px;
	color: #002A8F;
	padding: 3px;
	text-decoration: none;
	background-color: #FFF;
	border: 1px solid #002A8F;
}
.zoom a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #002A8F;
}
.search_list font{	
	color:#3C61A8;
	font-size: 12px;
	padding: 2px;
}
DIV.img_loader{background: url(/image/spinner.gif) no-repeat center center;}
IMG.img_loading{display:none;}  
.hidden{display:none;}
.visable{display:block;}