/* @override 
	http://handcustomisedshoes.com/css/main.css
	http://www.handcustomisedshoes.com/css/main.css
*/

/*universal settings*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	font-family : Verdana, sans-serif;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

body{
	background: #585655;
}
#wrapper{
	display: block;
	width: 999px; 
	margin: 0 auto;
	padding: 0;
	background: #bcc7ca url(../images/wrapper.jpg) top left repeat-y;  
}
#container{
	display: block;
	width: 1002px; 
	background: transparent url(../images/container.jpg) top right repeat-y;  
}
 
#header{
	display: block; 
	width: 1010px;
	height: 300px;
	position: relative;
	top: 0;
	left: -1px;
	background: transparent url(../images/header.jpg) top left no-repeat;  
}
#navigation{
	display: block;
	position: relative;
	top: -290px;
	left: 110px;
	width: 320px;   
	font-size: 0.9em;  
	font-weight: normal;  
} 
#navigation ul{
	margin: 0;
	padding: 0; 
}
#navigation ul li{
	display: inline; 
	padding: 0 7px 0 0;
}
#navigation ul li a{ 
	text-decoration: none;
	color: #585655;
}
#navigation ul li a:link{ 
	color: #585655;
}
#navigation ul li a:visited{ 
	color: #585655;
}
#navigation ul li a:hover{ 
	color: #fff;
}
#navigation ul li a:active{ 
	color: #fff;
} 
#about{
	display: block;
	width: 850px;
	position: relative;
	top: -90px;
	left: 100px;  
}
#arhive{
	display: block;
	width: 850px;
	position: relative;
	top: -80px;
	left: 100px;
	padding: 20px 0; 
}
#stock{
	display: block; 
	width: 850px;
	position: relative;
	top: -20px;
	left: 100px;
	padding: 20px 0; 
}
#stock small{   
	font-size: 0.7em;
	color: #585655;  
}
#contact{
	display: block;
	width: 800px;
	position: relative;
	top: -10px;
	left: 150px;
	padding: 20px 0 0 0; 
}
h1 {
	text-indent: -2000px;
	position: relative;
	top: 25px; 
	width: 380px;
	height: 153px;
	background: transparent url(../images/logo.png) top right no-repeat; 
	margin-left: 575px;  
}
h2.about{
	width: 249px;
	height: 41px;
	margin-left: 760px;
	text-indent: -2000px;
	background: transparent url(../images/about.png) top left no-repeat;
}

h2.arhive{
	width: 249px;
	height: 41px;
	margin-left: 600px;
	text-indent: -2000px;
	background: transparent url(../images/arhive.png) top left no-repeat;
}
h2.stock{
	width: 249px;
	height: 41px;
	margin-left: 706px;
	text-indent: -2000px;
	background: transparent url(../images/stock.png) top left no-repeat;
}
h2.contact{
	width: 249px;
	height: 41px;
	margin-left: 710px;
	text-indent: -2000px;
	background: transparent url(../images/contact.png) top left no-repeat;
} 
#about span{
	display: block;
	float: left;
	position: absolute;
	top: -20px;
	left: -100px;
	width: 457px;
	height: 556px;
	text-indent: -2000px; 
	background: transparent url(../images/photo.png) top left no-repeat; 
}
#about p{ 
	 width: 580px; 
	 padding: 10px 0 0 270px;
	 text-align: right;
}
#about p a{ 
	  color: #852e3f;
	  text-decoration: none;
}
#about p a:link{ 
	  color: #852e3f;
}
#about p a:visited{ 
	  color: #852e3f;
}

#about p a:hover{ 
	  color: #fff;
}
#about p a:active{ 
	  color: #fff;
} 
p{ 
	padding: 10px 0 10px 300px;
	font-family: verdana, san-serif;
	font-size: 0.8em;
	line-height: 1.4em;
	color: #60524e;
	text-align: right; 
}
p span{  
	color: #cd162d;
	font-size: 0.9em; 
}
p span.mail{
	color: #852e3f;
}
a.sub{
	padding: 5px;
	float: right;
	text-decoration: none; 
}
a.sub:link{
	color: #000; 
}
a.sub:visited{
	color: #000;
}
a.sub:hover{
	color: #fff; 
}
a.sub:active{
	color: #fff; 
}
#gallery_arhive{
	padding: 0 0 0 22px;  
}
#gallery_stock{
	padding: 0 0 0 22px; 
} 
.MagicZoomBigImageCont { 
 	margin: 0 0 0 0;
	padding: 0 0 0 0; 
} 
.MagicZoom { 
 	float: right;
	margin: 0 0 10px 10px;
	padding: 0 0 0 0;
	border: 1px solid #585655;
}

/* My Comment */
#footer{
	display: block;
	width: 1010px;
	height: 220px;
	position: relative;
	top: 0;
	left: 0;
	line-height: 1.4em;
	text-align: right;
	font-family: verdana, san-serif; 
    font-size: 0.9em; 
	background: transparent url(../images/footer.jpg) bottom left no-repeat;  
}
#footer p{  
	position: relative;
	top: 70px;
	right: 60px; 
	padding: 3px;
	color: #333;  
} 
#footer a{
	text-decoration: underline;
}
#footer a:link{
	color: #852e3f; 
}
#footer a:visited{
	color: #852e3f; 
} 

#footer a:hover{
	color: #fff; 
}
#footer a:active{
	color: #fff; 
} 
.clear{
	clear: both;
} 

/* contact form */

#form-div { 
  font-family : verdana, sans-serif;  
  line-height : 1.4em;
  font-size: 0.9em; 
  color: #60524e; 
}
 
 /* === form div link styles ======================================== */

#form-div a { 
  color : #669900; 
}
  
#form-div a:hover, #form-div a:focus, #form-div a:active { 
  color : #000; 
  text-decoration : none; 
}

#form-div a:focus, #form-div a:active { 
}


/* === success and error message/results box ======================= */

#form-div p.success, #form-div p.error, #form-div p.center { 
  color : #fff;
  /* color : #000; (lite colors option - uncomment to use) */
  padding : 1px 4px; 
  margin : 10px 3px;
  text-align : center;
}

#form-div p.error {  
}
 

#form-div p.error a, #form-div p.success a {
  color : #852e3f;
}

#form-div p.center {
  text-align : center;
  background-color : #edbaba;
  color : #000;
  margin-top : -3px;
  padding : 0px 4px; 
}

#form-div p.error a:hover, #form-div p.error a:focus, #form-div p.error a:active, 
#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
  color : #fff; 
}

#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active { 
}


/* === structural form elements ==================================== */

form#gbcf-form { }

fieldset.main-set,
fieldset.req-set,
fieldset.opt-set { 
  border : 1px solid #eee;
  padding : 5px;
}


/* === textural form elements ====================================== */

#form-div legend { 
  font-weight : normal;
}

#form-div legend span { }

legend.main-legend { 
  color : #777; 
}

legend.req-legend,
legend.opt-legend { 
  color : #777;
}

legend.main-legend span { }
legend.main-legend { }

legend.req-legend span { }
legend.req-legend {
  margin-left : -2px;
}

legend.opt-legend span { }
legend.opt-legend { 
  margin-left : -2px;
}

label.req-label, label.opt-label {
  color: #60524e;
}

label.opt-label.check {
  float : left;
  padding : 0;
  margin : 1px 4px;
  cursor : pointer;
}

label.opt-label.main-label {
  margin : 0 2px;
  font-weight : normal;
}

label.opt-label.main-label span {
  font-weight : normal;
  color : #666;
}

label.opt-label.main-label span.req, label span.req  {
  font-weight : normal;
  color : #c70000;
}

label.req-label.explain {
  color : #666;
  font-size : .8em;
}

label.req-label.explain:hover {
  color : #000;
}

/* === control and interface form elements ========================= */
/*
  note: In this section you will see the hover/focus styles for the 
  inputs. For example: input:hover, input:focus. You will also see 
  these names applied as classes: input.hover, input,focus, for 
  example. This is not done by mistake. Those classes are needed for 
  the JavaScript focus script (files/focus.js) for IE 7 and older.
*/

 
 
input.checkbox {
  border : 1px dotted black;
  width : 1em;
  height : 1em;
  padding : 0;
  margin : 0;
  cursor : pointer;
}

input.checkbox:hover, input.checkbox.hover,
input.checkbox:focus, input.checkbox.focus {
  border : 1px dotted #666;
}

input.text-short, 
input.text-med, 
input.text-long,
select.select,
textarea.textarea {
  font : 1em verdana, sans-serif;
  border: 1px solid #585655;
  background: #bcc7ca;
  cursor : text;
  padding : 1px 2px;
}

select.select {
  padding : 1px 0;
}

input.text-short {
  width : 100px;
}

input.text-med, select.select {
  width : 250px;
}

input.text-long {
  width : 300px;
}

textarea.textarea {
  width : 440px;
  height : 120px;
}

select.select, select.select option {
  cursor : pointer;
}

input.text-short:focus, input.text-short.focus, 
input.text-med:focus, input.text-med.focus,
input.text-long:focus, input.text-long.focus,
select.select:focus, input.select.focus,
textarea.textarea:focus, textarea.textarea.focus {
  border : 1px solid #585655;
  background-color : #fff;
}
input.text-short:hover, input.text-short.focus, 
input.text-med:hover, input.text-med.focus,
input.text-long:hover, input.text-long.focus,
select.select:hover, input.select.focus,
textarea.textarea:hover, textarea.textarea.focus {
  border : 1px solid #585655;
  background-color : #fff;
}

input.button { 
  font : 1.1em verdana, sans-serif;
  font-weight : bold;
  margin-left: 120px;
  margin-top : 20px;
  padding : 0 0;
  cursor : pointer;
  float : left;
  clear : both;
  color : #585655;
  background: none;
  border: none;
  text-decoration: underline;
}
input.button:hover, input.button.hover,
input.button:hover, input.button.focus {
  color : #fff;
}
/* because IE6 sucks - if you have a conditionally served IE6 style sheet add this to it */
* html input.button {
  border : 1px solid #666;
}