/* the bespokeshoes stylesheet  */
/*   Copyright Webfresh, www.webfresh.com.au    */



body  {
	font-size: 14px;
	font-family: "Open Sans", Arial,  sans-serif;
	font-weight: 300;
	margin:0;
	padding: 0;
	color: #555555;
	background-color: #ffffff ;
	letter-spacing: normal;

	}


div, p, h1, h2, h3, h4, ul,  img, table, td, tr, th {padding:0px; margin:0px;}
img, td, tr, th {border: none;}

table {border-collapse:collapse;}  

ul{list-style-type:none;}

a {outline: none} /* stop dotted lines around links in firefox */


h1,h2,h3, h4  {font-family: Martel, serif; color: #444444; font-weight: 300;  }


h1 {
	padding: 16px 13px 16px 13px ;
	font-size: 42px;
	border-top: 1px solid #555555;
	border-bottom: 1px solid #555555;
}

#index h1 {
	font-family: "Open Sans", Arial,  sans-serif;
	border: none;
	color: #fff;
}

h2 {
	margin: 60px 0 14px 0px;
	font-size: 26px;
}

.firsthead {
	margin-top: 15px;
}

#privacy h2 {
	margin-top: 40px;
	font-size: 20px;
}


#shoesgallery h2 {
	margin: 3px 30px 45px 0;
	line-height: 1;
	font-size: 26px;
	text-align: center;
}

#shoesgallery h2 span{
	padding: 0 0 6px 0;
	border-bottom: 10px solid #F1EFEF;

}

#shoedetail h2 {
	line-height: 1.2;
	font-size: 26px;
	margin: 0 30px 0px 0;
	padding-bottom: 13px;
	border-bottom: 5px solid #F1EFEF;
}


h3 {
 
	margin: 30px 0 10px 0;
	font-size: 20px;
	font-weight: 400;
}



h4 {
	color: #333333;
	margin: 18px 0 6px 0;
	font-size: 15px;
	font-weight: normal;
}



/************  paragraph  *****************/
p {
	line-height: 1.5;  
	margin: 10px 10px 17px 0;
}

#rightcol p {
	font-size: 17px;
	line-height: 1.6;  
	margin: 10px 10px 30px 0;
	word-spacing: 1px;
}

#privacy #rightcol p {
	font-size: 15px;
	line-height: 1.5;  
	margin: 10px 10px 20px 0;
}

.p12 { font-size: 12px; }
.p14 { font-size: 14px; }
.p16 { font-size: 16px; }

.p18 { font-size: 18px; }

.p22 { font-size: 22px; }

.pbold { font-weight: 600;}

.pwhite {color: #ffffff;}

#index .pwhite {
	font-weight: 400;
}

.pcaption {
	font-style: italic; 
	font-size: 20px; 
	text-align: center; 
}


.g-italic {font-style: italic;}



/************  link styles  links href *************/

 a , a:visited {
	text-decoration: none;
	color: #444444;
}

 a, a:visited {
	border-bottom: 1px solid #fcd7f4;  
}

 a:hover,  a:active,  a:focus
{
	color:#000000;  
	border-bottom: 1px solid #D9ADD1;  
}


/* images inside links - remove bottom border*/

a.noborder,  a:hover.noborder,  a:visited.noborder,  a:active.noborder,  a:focus.noborder  {
	border: none;
}



/******************** main layout ***********************/


#wrapper {
	width: 980px;
	padding: 0;
	margin: 0 auto;
}	

#index #wrapper {
	width: 100%;
/*	max-width: 1460px;*/
}


#header {
	background: transparent url("images/bespokes-logo-410x136.gif") no-repeat 0 10px ;  
	height: 156px;
	width: 980px;
	margin:0;
	padding: 0;
	text-align: left;
}

#header.header_cobbler {
	background: transparent url("images/shoemakers-cobblers-logo-410x136.gif") no-repeat 0 13px ;  
}

#index #header {
	background-image: none;
	width: auto;
	height: 60px;
}

#pagetitle {
	display: table-cell;
	text-align: center;
	/*vertical-align:middle;*/
	/*height: 260px;*/
	/*height: 230px;*/
	width: 410px;
	padding-top: 50px;
	/*background-color: #F1EFEF; */


}


.centertable {
	margin-left:auto; 
	margin-right:auto;
}

.centertable td {
	text-align: center; 
	vertical-align: middle; 

}

#middle-wrapper {
	width: 980px;
	background-color: #ffffff ;  
	margin:0 0 10px 0 ;
	text-align: left;
}

#index #middle-wrapper {
	margin-left: auto;
	margin-right: auto;

}

/* now used for just the video play buttton   */
	#photoback {
		text-align: center;
		margin: 30px 0 20px 0;

	}

#shoes #middle-wrapper{
	margin: 0 0 30px 0;
}

#shoesgallery #middle-wrapper{
	margin: 0 0 30px 0;
}


#middle {
	width: 980px;
	background: #ffffff;
	margin:0 ;
	text-align: left;
}


#index #middle {
	width: 980px;
	/*height: 647px;*/
	/*background: #ffffff url("images/front-photo.jpg") no-repeat 0 0;  */
	margin:0 ;
	text-align: left;
}



#middle-inner {
	min-height: 320px;  
	padding: 1px 0 0 0;

}

#index #middle-inner {
	margin: 0;
	min-height: 0;
}






/************  left  col ***************/

#leftcol {
	float:left;
	width:410px; /* added to right col plus padding must be <= 980  */
}



#left-inner {

	padding:1px 0 15px 0;    /* 1px to uncollapse margins so all browsers look the same  */
}

.leftphoto {
	width:410px;
	margin: 15px 0 0 0 ;
}

#deliv .leftphoto {
	margin-top: 55px;
}

.leftphoto img {
	border: 10px solid #F1EFEF;
	width: 390px;
}


/************  right col ***************/

#rightcol {
	float: right;
	width:570px;  /* added to leftcol plus padding must equal 980 */

}


#index #rightcol {
	width:980px;
}

#right-inner {
	padding: 44px 0 50px 70px;
}


#index #right-inner {
	padding: 40px 0 50px 0;
}

#contact #right-inner {
	padding: 44px 0 10px 70px;
}

#shoesgallery #right-inner {
	padding:44px 0 20px 70px;
}

#shoedetail  #right-inner {
	padding:8px 0 20px 70px;
}

.rightphoto {
	margin: 30px 0px 40px 35px;
}

.rightphoto img {
	border: 10px solid #F1EFEF;
	width: 420px;
	margin-top: 20px;
}


/***************  front page  ****************/


.home-menu-clear { 
    height:0;
    font-size: 1px;
    line-height: 0px;
	}


.home-image {
	text-align: center;
	margin-top: 20px;
}


.home-image img {
		width: 100%;
		max-width: 1460px;
}


.home-image-logo img {
	width: 100%;
	max-width: 861px;
	position: absolute;
	top: 50%;
	left: 25%;
	/*margin-left: -430px;*/
}


.front-box {
	/*width:466px;*/
	/*position: relative;*/
	/*top: 342px;*/
	/*float: right;*/
	background-color: #000000;
	border-top: 10px solid #ffffff;
	border-left: 10px solid #ffffff;
	border-bottom: 10px solid #ffffff;

}

a.read-more, a.read-more :visited {
	color: #ffffff;
	border: none;
}


 a.read-more :hover, a.read-more :active,  a.read-more :focus
{
	color:#D9ADD1;  
}


.video-play {
	padding: 18px 20px 20px 20px;
	font-size: 30px;
}

.video-play, .video-play:visited, .video-play:hover, .video-play:active, .video-play:focus {
	border-top: 1px solid #ffefff;
	border-bottom: 1px solid #ffefff;
}

.video-play img {
	max-width: 46px;
	max-height: 46px;
	vertical-align: middle;
	padding-right: 10px;
}


#player-wrapper {
		display: none;
  width:100%; max-width: 980px; height:100%;  
}

.player-iframe {
   position:relative; 
   padding-top: 56.4%;
}


.player-iframe  iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%; 
  height:100%;
}

.home-banner {
	/*background-color: #F9F9F9;*/
	padding: 18px 10px;
	text-align: center;
	font-size: 36px;
	word-spacing: 3px;
	color: #222;
	margin-bottom: 10px;
	font-weight: 300;
}

.home-banner a {
	color: #222;
	border-bottom: 1px solid transparent;

}

.home-banner a:hover {
	border-bottom: 1px solid #D9ADD1;
}


.home-banner span {
	background-color: #ccc;
	border-radius: 50%;
	display: inline-block;
	height: 9px;
	width: 9px;
	margin: 0 4px 6px 4px ;
}


.home-banner-break {
	display: none;
}


   


/******************  main shoes page ********************/




.shoegallery{
	width: 100%;
	margin: 80px auto 0px auto;
	text-align: center;
	line-height: 0;
	
}


.shoegallery img{
	border: 10px solid #F1EFEF;
}


.shoephoto {
	display: inline-block;
	margin-bottom: 20px;
}

.shoephotolast {
/*	margin: 0 0 0 20px;*/
}

.shoephoto img  {
	height: 210px;
}

.shoephoto.accphoto img  {
	height: 124px;
}



.shoegallery p {
	font-size: 16px;
	color: #a3338b;
	text-align: center;
	/*-ms-text-justify: auto;*/
}

.video-center {
	max-width: 600px;
	margin: 0 auto 50px auto;
}

.video-wrapper {
  width:100%; max-width: 600px; height:100%; margin:0 auto 30px 0; 
}

.video-iframe {
   position:relative; 
   padding-top: 56%;
}


.video-iframe  iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%; 
  height:100%;
}



/*******************  main cat page *******************/


.c_shoerow{
	margin: 60px 0 70px 0;
	padding: 1px 0 1px 0;
}

#shoesgallery .c_hover:hover .c_descbox{
	background-color: #F1EFEF;
}



.c_shoepic {
	float: left;
	margin: 0 20px 0 0;
	background-color: #ffffff;
	width: 230px;
}


.c_shoepiclast {
	margin: 0;
}


.c_shoepic img{
	border: 10px solid #F1EFEF;
	vertical-align: bottom; /* needed to stop a few pixel gap under the image */
	width: 210px;
	height: 210px;
}

.c_descbox {
	height: 60px;
	border: 10px solid #F1EFEF;
	border-top: none;
	background-color: #ffffff;
}

.c_shoedesc {
	margin: 0 5px 10px 5px;
	text-align: center;
	padding-top: 17px;
	font-size: 18px;
	color: #a3338b;
	font-weight: 700;
}






/*******************  new shoes gallery page  - sub cats *******************/


.shoerow{
	width: 100%;
	margin: 40px auto 10px auto;
	text-align: justify;
	 /*-ms-text-justify: distribute-all-lines;*/
	line-height: 0;
	padding: 1px 0 1px 0;
}


#shoesgallery .g_hover:hover .g_pricebox{
	background-color: #F1EFEF;
}


.g_shoepic {
	width: 230px;
	background-color: #ffffff;
	display: inline-block;
	margin-bottom: 35px;
}


.g_shoepic img{
	border: 10px solid #F1EFEF;
	vertical-align: bottom; /* needed to stop a few pixel gap under the image */
	width: 210px;
	height: 210px;
}

.g_pricebox {
	height: 90px;
	border: 10px solid #F1EFEF;
	border-top: none;
	background-color: #ffffff;
	/*-ms-text-justify: auto;*/
}

.g_shoedesc {
	margin: 0 5px 10px 15px;
	padding-top: 17px;
	font-size: 16px;
	text-align: left;
}

.g_shoeprice {
	text-align: right;
	font-size: 18px;
	font-weight: 700;
	margin: 0 18px 0 0;
}



/*******************  shoe detail page  **************/

#d_desc {
	margin: 30px 0 25px  0;
}

#d_desc p {
	line-height: 1.4;
	margin: 10px 10px 10px 0;
}

.d_pricediv {
	width: 470px;
	border-bottom: 5px solid #F1EFEF;
}

.d_pricebox {
	/*border-top: 10px solid #F1EFEF;*/
	float: right;
	padding: 12px 10px 12px 10px;
	margin: 0 ;
	min-width: 230px;
}


.d_mainphoto {
	border: 10px solid #F1EFEF;
	width: 390px;
}

.d_thumbdiv {
	width: 100%;
	max-width: 410px;
	margin: 30px auto 40px auto;
	text-align: justify;
	 /*-ms-text-justify: distribute-all-lines;*/
	line-height: 0;
}

/*.d_thumbrow {
	margin: 10px 0 0 0 ;
}*/

.d_thumb  {
/*	margin-right: 38px;*/
	/*float: left;*/
	margin-bottom: 15px;
display: inline-block;
}

.stretch {
    width: 100%;
    display: inline-block;
}

/*.d_thumblast  {
	margin-right: 0;
}*/


.d_thumb img {
	width: 100px;
	height: 100px;
	border: 5px solid #F1EFEF;
}


.d_price {
	font-size: 26px;
	font-weight: 400;
	margin: 0;
	float: right;
}

.d_buy_div{
	float: right;
	margin: 1px 0 0 40px;

}


 .d_buy_button{
	float: right;
	/*width: 92px; */
	height: auto;
	/*background: transparent url( 'images/subscribe-buttons.png' ) left -96px no-repeat;*/
	/*font-family: "Merriweather Sans", Arial,  sans-serif;*/
	font-size: 18px;
	/*line-height: 30px;*/
	}

.d_buy_button a {
	display: block;
	margin: 0 0 0 0 ; 
	padding:4px 5px 4px 5px;
	width:100%; height:100%;
	overflow:hidden;
	text-decoration: none;
	color: #222;
	text-align:center;
	border: 1px solid #888;
	border-radius: 1px;
	text-transform: uppercase;


	/*background: transparent url( 'images/subscribe-buttons.png' ) 0 -65px no-repeat;*/
	}

 .d_buy_button  a:hover {
	/*background: transparent;*/
	border: 1px solid #000;
	background-color: #F9F9F9;
	}


#breadcrumb {
	margin: 0 0 0 51px;

}

#breadcrumb p {
	font-size: 12px;
}

#breadcrumb a , #breadcrumb a:visited {
	border: none;
}


#breadcrumb a:hover, #breadcrumb a:active, #breadcrumb a:focus
{
	border-bottom: 1px solid #D9ADD1;  
}

#breadcrumb span {
	font-family: Arial, sans-serif;
	color: #999999;
font-size: 14px;

}

#rightcol .notfound {
	margin: 20px 0 20px 30px;
}



.d_social {
	float: right;
	margin: 10px 10px 5px 0;
	text-align: right;
	min-height: 30px;
}


.d_back-link {
	background: transparent url("images/arrow-back.gif") no-repeat 0 1px ;  
	float: left;
	margin:10px 0 5px 0 ;
	font-size: 14px;
	color: #D9ADD1;
	min-height: 30px
}



.d_back-link  a, .d_back-link  a:visited {

	margin: 0 0 0 18px;
	color: #2c164d;

}


 .d_back-link  a:hover,  .d_back-link  a:active,  .d_back-link  a:focus
{

}

.fb-like {
	float: left;
}

.pinterest {
	float: left;
	padding: 0 25px 0 0 ;
	margin: 0 ;
	display: inline-block;
	text-align: left;
}

.pinterest img {
	margin: 0 0 -4px 0;

}

.g-plusone-ppb {
	float: left;
}


.facebook {
	min-height: 30px;
	float: right;
	margin-right: 20px;
}





/*****************  Links  page *******************/


#middle-inner ul.linklist{
	padding: 10px 0 0 0;
	list-style-type: none; 
	margin: 0;
}


#middle-inner ul.linklist li{
	padding: 0 0 25px 20px;
}


 #middle-inner ul.linklist li{
	padding: 0 0 20px 30px;
}


#middle-inner ul.linklist h4 {
	padding: 0px 0 4px 0;
	margin: 0 0 0 0;
}


/**  cobbler page  */
.page-banner {
    border: 1px solid rgb(252, 215, 244);
    padding: 10px;
    margin: 0px 20px 20px;
    text-align: center;
    font-weight: 400;
 }


/*********************** contact page layout divs  */

#middle-inner .contact-box{
	font-size:18px;
	/*font-weight: normal;*/
	margin:45px 0 0 40px;
	padding:1px 0 1px 0;  /* to uncollapse the margins inside this box  */
}


#middle-inner .contact-box ul{
	list-style-image: none;
}

#middle-inner .contact-box ul li{
	padding: 0 0 10px 0;
	line-height: 1.5;
}

#middle-inner .left-div {
	float:left;
	width: 120px;
}

#middle-inner .contact-box .left-div ul{
	font-weight: 400;
	color: #000;
}

#middle-inner .right-div{
	float:left;
	width: 300px;

}


.contact-slogan {
	font-style: italic; 
	font-size: 28px; 
	text-align: center; 
	color:#444444; 
	margin-bottom:30px; 
}

.contact-slogan span {
	font-weight: 400;
	color: #000000;
	font-size: 30px;
}


#middle-inner .error_div h3 {
	color: #FE0000;
	font-size: 16px;
}



.gmap {
    background: url('images/mapmarker.png') no-repeat scroll 0px 6px #ffffff;
    font-size: 14px;
    padding-left: 15px;
    padding-top: 2px;
    margin-top: 10px;
    margin-bottom: 15px;
}


#exp .gmap {
    background: url('images/mapmarker.png') no-repeat scroll 0px 4px #ffffff;
    font-size: 16px;
    padding-left: 15px;
    padding-top: 0px;
     margin-top: 15px;
}

/*******************  footer *********************/

#foot-wrapper {
	padding: 0;
	margin: 0 auto;
	background: #ffffff;
	width: 100%;
}


#index #foot-wrapper {
	margin-top: 50px;
}

#footer {
	/*min-height: 260px;*/
	/*padding: 48px 0 0 0 ;*/
	background-color:#F9F9F9;
	border-top: 1px solid #ECEAEA;
	border-bottom: 1px solid #ECEAEA;
	width: 980px;
	margin: 0 auto;
}


#index #footer {
	background-color: #fff;
	border-top: none;
	padding-bottom: 20px;
}

#bottom-middle {
	padding: 8px 0 0 0;
	margin: 0 0 0 40px;
}

.bottom-contact {
	width: 330px;
	margin: 15px 50px 13px 20px ;
	float: right;
	padding: 0 0 0 10px ;
	text-align: left;
	color: #000000;
	font-size: 18px;
}

.bottom-contact p{
	line-height: 1;
}

.bottom-contact-head {
    font-size: 26px;
    margin: 0 0 4px 0;
    color: #555555;
    font-weight: 400;
}

#index .bottom-contact-head {
	font-family: Martel, serif;
	font-size: 22px;
}


#footer .bottom-contact-head a , #footer .bottom-contact-head a:visited {
	text-decoration: none;
	color: #444444;
	border-bottom:1px solid transparent;

	}

#footer .bottom-contact-head a:hover, #footer .bottom-contact-head a:active,  #footer .bottom-contact-head a:focus
{
	color:#000000;
	border-bottom: 1px solid #FFF9BA;
}



.left-contact {
	float: left;
	width: 30px;
	color: #000000;
/*	font-size: 17px;*/
	margin: 12px 0 0 0 ;
	
}

#bottom-middle .left-contact p {

	height: 24px;
	margin: 16px 0 10px 0;

}

.phoneicon {
	background: transparent url("images/icon.png") no-repeat 0 -64px;
}


.emailicon {
	background: transparent url("images/icon.png") no-repeat 0 -90px;
}

.fbicon {
	background: transparent url("images/icon.png") no-repeat 0 -115px;
}

.right-contact {
	float: left;
	width: 290px;
	margin: 10px 0 0 10px ;
}

#bottom-middle .right-contact p {
	color: #000000;
	height: 24px;
	margin: 17px 10px 12px 0;
}


#footer .right-contact a , #footer .right-contact a:visited {
	text-decoration: none;
	color: #000000;
	border-bottom: 1px solid transparent;
	}

#footer .right-contact a:hover, #footer .right-contact a:active,  #footer .right-contact a:focus
{
	border-bottom: 1px solid #D9ADD1;
}



#footer-links-wrapper{
	margin:0 auto;
	padding: 0;
	width: 100%;
	min-height: 46px;
	background-color: #ffffff;
}

#footer-links{
	margin:0 auto;
	width: 970px;
	min-height: 46px;

}

#footer-links p {
	margin: 14px 0 0 0 ;
	padding: 0;
	line-height: 1;

}



#footer-links .left, #footer-links .foot-designer  {
	font-size: 11px;
	text-align:left;
	float: left;
	padding: 0 0 1px 0; /* need bottom 1px so borders show in links in ie  */
	color: #848484;  
}
#footer-links .left{
	width: 200px;
}

 #footer-links .foot-designer {
 	padding-right: 2%;
 }


#footer-links .left a,  #footer-links .foot-designer a {
	border-bottom: 1px solid transparent;
	color:#848484; 
}


#footer-links .left a:hover, #footer-links .left a:active, #footer-links .left a:focus,  
#footer-links .foot-designera:hover,  #footer-links .foot-designer a:active,  #footer-links .foot-designer a:focus{
	color:#848484;  
	border-bottom: 1px solid #D9ADD1;

}


#footer-rightcol a {
	border-bottom: 1px solid transparent;
	color: #333333;
}


#footer-rightcol a:hover, #footer-rightcol a:active, #footer-rightcol a:focus{
	color:#333333;  
	border-bottom: 1px solid #D9ADD1;

}


.link-divider {
	font-size: 10px;
	color: #888888;
}

#footer-rightcol {
	font-size: 12px;
	float: right;
}


/**** newsletter signup in footer  ********/



.bottom-news {
	width: 290px;
	margin: 10px 10px 18px 20px ;
	float: left;
	padding: 0 0 0 10px ;
	text-align: left;
}

.bottom-news p {

	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 15px 5px;
}


.news-box input {
	width: 260px;
	border: 1px solid #DFD8E6;
	padding: 7px 10px 7px 10px;
	margin: 0 0 9px 0;
}



form .input-prompt {
    position: absolute;
    font-style: italic;
    color: #777777;
    font-size: 14px;
    font-weight: 300;
    width: 250px;
    display: block;
    margin: 7px 10px 7px 10px;
    background-color: #ffffff;
}



.subscribe-button {
    float: right;
    margin: 7px 10px 0px 0px;
    padding: 0px;
    width: 112px;
    height: 32px;
    cursor: pointer;
    border: 1px solid #888;
    vertical-align: middle;
    color: #222;
    font-family: "Open Sans",Arial,sans-serif;
    font-size: 18px;
    background-color: #ffffff;
    font-weight: 300;
    border-radius: 2px;
}



.subscribe-button:hover {
    /*border: 1px solid #000000;*/
    color: #fff;
    background-color: #555;

}


.bottom-news-home p {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.0;
	margin: 20px 0 8px 3px;
}

#footnewshome .input-prompt {
	width: 220px;
}

.news-box-home input {
	width: 230px;
	border: 1px solid #DFD8E6;
	padding: 5px 10px 6px 10px;
	margin: 0 0 9px 0;
	float: left;
}


.subscribe-button-home {
	cursor: pointer;
    border: 1px solid #DFD8E6;
    border-left: none;
    vertical-align: middle;
    color: #333;
    font-family: "Open Sans",Arial,sans-serif;
    font-size: 18px;
    background-color: #EBECED;
    float: left;
}


.subscribe-button-home:hover {
	color: #fff;
    background-color: #555;
}


.bottom-home {
    width: 350px;
    margin: 5px 10px 10px 0;
    float: left;
    padding: 0 0 0 10px;
    text-align: left;
}


.bottom-home h2 {
	margin-top: 0;
	font-size: 30px;
}

.bottom-home p {
	font-size: 17px;
	line-height: 1.7;
	color: #222;
}

.bottom-home-tag {
	font-weight: 400;
	/*font-style: italic;*/
}

.bottom-home-bullet {
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	height: 7px;
	width: 7px;
	margin: 0 4px 5px 4px ;
}


/*******************  tables  *************************/

td, th {
	vertical-align: top;
	padding: 10px 4px 10px 3px;
}
th {
	border-bottom: 1px solid #EFEFEF;
}

.tabhead th {
/*	padding-bottom: 20px;
*/}

.tabodd {
	background-color: #ffffff;
}

.tabeven{
	background-color: #f5f5f5;
}

.tablastcol {
	padding-left: 5px;
}



/******************   lists  **************************/



.bulletlist {
	margin: 15px 0 15px 20px;
	line-height: 1.4;
	list-style-type:none;
}
.bulletlist li {
	padding: 0 0 8px 15px;
	background: transparent url(images/bullet.gif) no-repeat 0 6px ;
	font-size: 15px;
}





.divider {
	padding: 0 0 20px 0;
	margin: 0 20px 0 20px;
	border-bottom: 2px solid #EAE0A5;
}






/*********************  images *******************/

.framed {
	border: 2px solid #736330;
}




/************************  gallery pages  **************/

.galcontainer {
	padding:  0 0 30px 0;
}

.gal-photo {
	float: left;
	margin: 30px 0 0 29px;
}

.gphoto {
	padding: 2px 2px 2px 2px;
	border: 1px solid #736330;
	width: 150px;
	height: 150px;
}


/*********************  miscellaneous  *******************/


.clearfloat { 
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
	}

.clearfix:after {
    clear: both;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}


/********************  header ******************/

.tophead {
    height: 58px;
    margin-bottom: 10px;
    margin-top: 5px;
    float: right;
    width: 530px;
}

#index .tophead{
	margin-top: 9px;
	width: auto;
	height: auto;
	margin-bottom: 0;
	padding-right: 1%;
}

.th-right {
	float: right;
}

.th-left {
    float: right;
    margin-right: 86px;
}

#index .th-left{
	margin-right: 14px;
}

.topphone, .topemail, .topfacebook, .toppinterest  {
	float: left;
	/*text-align: right;*/
}

.topgmap {
    background: url('images/mapmarker.png') no-repeat scroll 0px 0px transparent;
    font-size: 14px;
    padding-left: 15px;
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    clear: both;
}


#header .topgmap  a, #header .topgmap  a:visited, #header .topphone  a, #header .topphone  a:visited  {
	    border: none;
}

 #header .topgmap a:hover,  #header .topgmap a:active,  #header .topgmap a:focus,  #header .topphone a:hover,  #header .topphone a:active,  #header .topphone a:focus
{
	border-bottom: 1px solid #D9ADD1;  
}


.topemail p{
	font-size: 16px;
	margin:2px 0 0 0 ;
}

.topphone p {
	font-size: 16px;
	margin:2px 10px 0 0 ;
	padding: 0 0 0 30px;
	background: transparent url("images/icon.png") no-repeat 0 -1px;
}

.topemail p {
	padding: 0 0 0 30px;
	background: transparent url("images/icon.png") no-repeat 0 -27px;
}

#index .topemail {
	opacity: 0.7;

}


.topfacebook p {
	padding: 0;
	font-size: 10px;
	margin:3px 0 0 0 ;
}



.topfacebook p  a {
	background: transparent url("images/icon.png") no-repeat 0 -145px;
	display: block;
	height:30px;
	width: 34px;
    overflow:hidden;
    text-indent:100%;
    white-space:nowrap;
    border: none;
    text-decoration: none;
}

.toppinterest p {
	padding: 0 0 0 8px;
	font-size: 10px;
	margin:3px 0 0 0 ;
}

.toppinterest p  a {
	background: transparent url("images/icon.png") no-repeat 0 -175px;
	display: block;
	height:30px;
	width: 34px;
    overflow:hidden;
    text-indent:100%;
    white-space:nowrap;
    border: none;
    text-decoration: none;
}


#index .topfacebook, #index .toppinterest {
	/*opacity: 0.7;*/
}

#header .topemail a {
	border: none;
}

 #header .topemail a:hover,  #header .topemail a:active,  #header .topemail a:focus
{
	border-bottom: 1px solid #D9ADD1;  
}


/*********************  navigation *************************/

/*** ESSENTIAL STYLES ***/


#navbar {
    width: 520px;
    float: right;
    border-bottom: 1px solid #333333;
    border-top: 1px solid #333333;
    margin-top: 25px;
    padding: 0px 0px 6px;
    height: 40px;
}


#index #navbar{
	float: none;
	width: auto;
	margin-top:0;
	width: auto;
	border-top: none;
	padding-left: 3%;

}



.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 45px;
	left: 0;
	z-index: 99;
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu ul ul {
	top: 0px;
	left: 170px;
	padding-top: 5px;
}
.sf-menu li.dropfirst ul {
		top: 10px;
}


/*** SKIN ***/
.sf-menu {
	float: left;
	padding: 1px 0 0 0 ;
	font-size:15px !important;
	/*font-family: 'Merriweather Sans', Arial, sans-serif;*/
	/*font-weight:normal;*/
	line-height: 1.0;  /* this determines the height of the hover block on the main menu  and placement of menu marker*/
}

.sf-menu ul {
	margin: 0px 0 0 16px ;
	padding: 0;
	line-height:1.3;  
	border: 1px solid #777777;
	border-top: none;
	background-color: #ffffff;  /* background color of drop down menu item block  mostly overridden with li back colour*/
}


/* submenu top bar part way across */

.sf-menu > li > ul:after {
    content: "";
    border-top: 1px solid #333333;
    position: absolute;
    top: 0px;

}

 .sf-menu > .parent > ul:after {
    width: 180px;
    left: 50px;
}


.sf-menu .menuwider > ul:after  { 
	width: 100px;
	left: 120px;
}
.sf-menu .menuwide > ul:after  { 
	width: 116px;
	left: 60px;
}



.sf-menu a {
	border: none;
	text-decoration: none;
	padding: 16px 0 3px 0 ; /* margin for hover block */
	vertical-align: text-bottom;
 	border-bottom: 1px solid transparent ; /* add a dummy border so nothing moves when real border added to bottom of seleted item*/

}


.sf-menu a {
	color: #2e184e;
}

/* used for styling current menu item. */
.sf-menu a.selected {
	border-bottom: 1px solid #ddd ; 
}

/* top level menu bottom border hover colour  */
.sf-menu a:hover, .sf-menu .sfHover > a {
	border-bottom: 1px solid #ccc ; 
}


/* for top menu with sub menu need to extend it down to join the submenu and also white out the top border of the submenu  */
.sf-menu .parent > a:hover,
.sf-menu .sfHover > a
 {
    border-bottom: 1px solid #fff;
    padding-bottom: 14px;
}


.sf-menu li {
	white-space: nowrap; /* no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
	/* these two lines 'transition' the background in if you have one - useful for solid background hover don't work in ie7 ie 8  */
	/*-webkit-transition: background .2s;*/  
	/*transition: background .2s;*/
    padding: 0px 29px 0px 18px; /* margin for hover block */
	margin: 0;  /* move space between items to li rather than a so that hover marker is only as wide as the text */
	background: transparent url("images/div-circle.gif") no-repeat right 18px ;
}

#index .sf-menu li {
	background-image: none;
	padding-left: 12px;
}


.sf-menu li.lastnav {
	padding: 0 0 0 18px; /* last item - no right padding */
	background-image: none;  /* no circle divider after last item */
}

#index .sf-menu li.lastnav{
	padding-left: 12px;
}


.sf-menu li.firstnav, #index .sf-menu li.firstnav {
	padding: 0 29px 0 2px; /* first item smaller left padding */
}


.sf-menu li li {  
	width:144px;  
	padding: 0;
	margin: 0;
	background: transparent;
	}

.sf-menu li.menuwide li { 
	width: 176px;
}

.sf-menu li.menuwider li {  
	width: 204px;
}


.sf-menu li li.dropfirst { /* extra top padding on first item in drop down  */
	/*padding-top: 15px;*/
}

.sf-menu li li.droplast { 
	border-bottom: none;
}


.sf-menu li li a, .sf-menu li li a:hover, .sf-menu li li a:focus  {
	padding:10px 3px 10px 15px;  /* top and bottom padding for height of drop down hover block and left and right padding  */
	width:126px;  /* this width should match width of submenu minus padding and borders  */
	font-size:15px;  /* font size on drop down  */
	color:#444444;  /* link text colour - should be same as hover color - is used on mouseout when dropdown delays closing */
	border-bottom: none ; 
	background-color: #ffffff;
	}


.sf-menu li.menuwide li a {
	width: 158px;
}

.sf-menu li.menuwider li a {
	width: 186px;
}

/* background colour of dropdown menu item  */
.sf-menu ul li {
	background-color: #ffffff;
	border-bottom: 1px solid #eeeeee;
}



/* 2nd level menu padding top and bottom  */
.sf-menu ul ul {
	border-top: none;
	background-color: #ffffff;
}



/* 2nd level menu background colour  */
.sf-menu ul ul li {
	/*width:170px;  subtract the border widths here from the width above */
	padding: 0px 0 0px 0;
	margin: 0;
	border-bottom: 1px solid #ed93da;
	background-color: #ffffff;

}


/* top level hover background color need angle brackets to stop colour being used on mouseout on lower level items */
.sf-menu > li:hover,
.sf-menu > li:focus,
.sf-menu > li.sfHover {
	/*background: transparent url("images/div-circle.gif") no-repeat right 18px ;*/
	/* only transition out, not in */
/*	-webkit-transition: none;
	transition: none;*/
}


.sf-menu li.lastnav:hover, li.lastnav:focus {
	background-image: none;  /* no circle divider image on last item on hover  */
}


.sf-menu li:hover a, 
.sf-menu li:focus a, 
.sf-menu li.sfhover a {
	color:#000000 ;  /* top level font hover colour  */
	}



.sf-menu li li:hover a,
.sf-menu li li:focus a,
.sf-menu li li.sfhover a {
	background: #F9F9F9;  /* hover background colour in dropdowns   */
	border-bottom: none;

}




/*
    ColorBox Core Style:  The following CSS should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#222222;}
#colorbox{outline:0; }
    #cboxTopLeft{width:21px; height:21px; background:url(images/border1.png) no-repeat 0 0;}
    #cboxTopCenter{height:21px; background:url(images/border1.png) repeat-x 0 -50px;}
    #cboxTopRight{width:21px; height:21px; background:url(images/border1.png) no-repeat -29px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(images/border1.png) no-repeat 0 -29px;}
    #cboxBottomCenter{height:21px; background:url(images/border1.png) repeat-x 0 -79px;}
    #cboxBottomRight{width:21px; height:21px; background:url(images/border1.png) no-repeat -29px -29px;}
    #cboxMiddleLeft{width:21px; background:url(images/border2.png) repeat-y 0 0;}
    #cboxMiddleRight{width:21px; background:url(images/border2.png) repeat-y -29px 0;}
    #cboxContent{overflow:hidden;background-color: #fff;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:52px;}
        #cboxTitle{position:absolute; bottom:8px; left:0; text-align:center; width:100%; color:#222222;}
        #cboxCurrent{position:absolute; bottom:6px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.gif) no-repeat -61px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-61px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.gif) no-repeat -36px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-36px -25px;}
        #cboxLoadingOverlay{background:#fff;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.gif) no-repeat -11px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-11px -25px;}
        button {border:none;} /* I added this to stop the default button border showing on the X control that closes the window  */


       /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

		#cboxContent img {  max-height: 100%;} /* added for max width properties to work as set in js */


/****************************************************************************************************************/

@media(max-width: 1060px) {

	#index #header {
		height: auto;
	}

	#index .tophead {
		width: 100%;
		margin: 5px 0 6px 0;
		padding-top: 0;

	}


	#index .th-left {
		float: left;
		padding-left: 1%;
	}

	.home-menu-clear {
			clear:both;
	}

	#index #navbar {
		border-top: 1px solid #333333;
		padding-left: 0;

	}

	#index .sf-menu {
		width: 520px;
		margin: 0 auto;
		float: none;
	}

}




/****************************************************************************************************************/

@media(max-width: 1000px) {

	#wrapper {
		width: 98%;
		max-width: 980px;
	}

	#header {
	    background: url('images/bespokes-logo-410x102.gif') no-repeat scroll 0px 10px transparent;
	    height: auto;
	    max-width: 980px;
	    width: 100%;
	    padding-bottom: 15px;
	}


	#header.header_cobbler  {
	    background: url('images/shoemakers-cobblers-logo-410x102.gif') no-repeat scroll 0px 10px transparent;
	 }

	.tophead {
	    height: auto;
	    margin-top: 20px
	}

	.topgmap {
	    margin: 15px 0 0 12px;
	}

	#index .topgmap {
	    margin: 5px 0 0 10px;
	}

	#navbar {
	    width: 100%;
	    margin-top: 30px;
	}

	.sf-menu {
		margin-left: 1%;
	}

	#middle-wrapper, #middle, #index #middle {
		width: 100%;
	}

	#rightcol {
		max-width: 570px;
		width: 60%;
	}
	#index #rightcol {
		max-width: 980px;
		width: 100%;
	}

	#leftcol {
		max-width: 410px;
		width: 40%;
	}

	#shoesgallery #right-inner {
		padding: 24px 0px 20px 50px;
	}


	#right-inner {
		padding: 24px 0px 20px 50px;
	}


	#index #middle {
/*	    max-height: 647px;
	    height: auto;*/
	    width: 100%;
	    max-width:980px;
	    /*height: auto;*/
/*	    background: url('images/front-photo.jpg') no-repeat scroll 0px 0px #FFF;
	    background-size: cover;*/
	}

	.d_mainphoto {
	    width: 96%;
	    max-width: 390px;
	    border-width: 8px;
	}

	h1 {
	    padding: 16px 10px;
	    font-size: 46px;
	}

	#pagetitle {
	 padding-top: 30px;
	}

	.shoegallery {
		margin-top: 40px ;
	}

	#shoedetail h2 {
		border-bottom: none;
	}

	.d_pricediv {
		max-width: 470px;
		width: 98%;
		border-top: 5px solid #F1EFEF;
	}

	.shoerow {
	    width: 95%
	 }


	.leftphoto {
	    max-width: 410px;
	    width: 100%;
	}

	.leftphoto img {
	    border-width: 8px;
	    height: auto;
	    width: 95%;
	}


	.rightphoto {
	    margin: 60px 0px 20px 25px;
	}

	.rightphoto img {
		max-width: 420px;
	    border-width: 8px;
	    height: auto;
	    width: 100%;
	}

	#middle-inner .left-div {
		width: 20%;
	}

	#middle-inner .right-div {
		padding-left: 10%;
	}

	#footer {
		max-width: 980px;
		width: 100%;
	}

	#footer-links-wrapper {
	    width: 98%;
	}

	#footer-links {
	    max-width: 970px;
	    width: 100%;
	    text-align: center;
	}



}

/****************************************************************************************************************/
/****************************************************************************************************************/



@media(max-width: 950px) {

	.th-left {
	    margin-right: 10px;
	}

	#middle-inner .right-div {
		width: 65%
	}
}

/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/


@media(max-width: 900px) {

	#header {
		padding-bottom: 0;
	}
	.tophead {
		margin-left: 62%;
		width: 260px;
		float: none;
		margin-top: 0;
		padding-top: 15px;
	}


	.th-left, .th-right {
			float: none;
	}

	#index .th-right {
		float: right;
		margin-bottom: 6px;
	}


	#navbar {
	    margin-top: 12px;
	}

	#breadcrumb {
	    margin: 25px 0px 0px 40px;
	}

	.bottom-contact {
		margin: 15px 10px 13px 10px;
	}


	#left-inner {
	    padding-top: 35px;
	}

	#right-inner {
	    padding: 24px 20px 50px 30px;
	}

	#exp #right-inner {
    	padding: 24px 20px 50px 50px;
	}

	h1 {
	    padding: 16px 8px;
	    font-size: 44px;
	}

	.shoegallery {
		margin-top: 10px ;
	}


	#shoedetail #right-inner {
		padding-left: 50px;
	}

	 #pagetitle {
    padding-top: 4px;
	}


#contact #pagetitle {
    padding-top: 14px;
}



	.d_mainphoto {
		border-width: 8px;
	}

	.d_thumbdiv {
	    width: 88%;
	    padding-left: 5%;
	    padding-right: 5%;
	}


	.shoegallery {
	    width: 90%;
	}

	.shoerow {
	    width: 99%
	 }

	 .home-banner {
		font-size: 32px;
	}

	
}


/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/


@media(max-width: 800px) {

	#header {
		border-bottom: 1px solid #F8F3F4;
	}

	h1 {
	    padding: 14px 8px;
	    font-size: 40px;
	}

	.bottom-home h2 {
		font-size: 28px;
	}

	#shoedetail #right-inner {
	    padding-left: 30px;
	}

	.d_mainphoto {
	    border-width: 7px;
	}


	#middle-inner .contact-box {
	    margin-left: 3%;
	}

	#middle-inner .right-div {
		padding-left: 7%;
	}


	.video-play {
		padding: 14px 18px 16px 18px;
		font-size: 28px;
	}

	.video-play img {
	    max-width: 44px;
	    max-height: 44px;
	}


	.shoerow {
	    width: 80%;
	}


	.home-banner {
		padding: 16px 8px;
		font-size: 29px;
		word-spacing: 1px;
		margin-bottom: 8px;
	}

	#bottom-middle {
		width: 96%;
	    margin: 0px auto 0px auto;
	}

	.bottom-news, .bottom-home {
	    margin-left: 5px;
	    padding-left: 0;
	}

	.bottom-home {
		width: 344px;
	}

	.bottom-contact {
	    margin-right: 0;
	    margin-left: 0;
	    width: 300px;
	}

	.right-contact {
	    width: auto;
	}

	#footer-rightcol {
	    width: 100%;
	    float: none;
	}
	#footer-rightcol p{
	    line-height: 2.0;
	}


	#footer-links .foot-designer  {
	 	float: right;
	 	margin-top: 15px;
	}
	#footer-links .left  {
	 	margin-top: 15px;
	}
	#footer-links {
		margin-bottom: 15px;
	}

}


/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/


@media(max-width: 700px) {


	.tophead {
	    width: 80%;
	    padding-top: 125px;
    	margin: 0 auto;
	}

	#index .tophead {
 	   margin-top: 2px;
	}

	#header {
	    background: url('images/bespokes-logo-510x102.gif') no-repeat scroll 50% 10px #ffffff;
	}

	#header.header_cobbler  {
	    background: url('images/shoemakers-cobblers-logo-510x102.gif') no-repeat scroll 50% 10px #ffffff;
	 }

	#navbar {
	    margin-top: 0;
	}

	#index #navbar {
		padding: 0;
	}

	.th-left {
		float: left;
	}

	.th-right {
		float: right;
	}

	.topemail p {
	  margin-top: 0;
	  font-size: 15px;
	}


	#rightcol {
		max-width: none;
		width: 100%;
	}
	#leftcol {
		max-width: none;
		width: 100%;
	}
	#right-inner, #exp #right-inner  {
	    padding: 24px 2% 50px 2%;
	}

	#right-inner {
		padding-top: 4px;
	}

	.home-banner {
		padding: 14px 6px;
		font-size: 25px;
	}

	.home-banner span {
		height: 7px;
		width: 7px;
		margin: 0 4px 4px 4px ;
	}


	#shoesgallery #right-inner, #shoedetail #right-inner, #contact #right-inner {
	    padding: 10px 2% 20px 2%;
	}


	.shoerow {
	    width: 86%;
	}

	#left-inner {
		text-align: center;
		padding-top: 15px;
	}
	.leftphoto {
	    max-width: none;
	    text-align: center;
	    margin-top: 20px !important; 
	}
	.leftphoto img {
		max-width: 390px;
	}


	.rightphoto {
	    margin-top: 20px !important; 
	    text-align: center;
	}
	.rightphoto img {
		max-width: 420px;
	}

	.services .leftphoto .pcaption {
		display: none;
	}


	.services .leftphoto {
		display: none;
	}

	.services .serv-mainphoto {
		display: block;
	}



	#contact .leftphoto {
		display: none;
	}

	#breadcrumb {
	    margin: 25px 0px 0px 10px;
	}

	#pagetitle {
	    display: block;
	    height: auto;
	    width: 100%;
	    padding-top: 0;
	}

	h1 {
		padding: 5px 0 5px 0;
		font-size: 38px;
	}

	#index h1 {
	    font-size: 26px;
	}

	.firsthead {
	    margin-top: 0px;
	}
	.front-box {
	    width: 68%;
	    border-top-width: 8px;
	    border-left-width: 8px ;
	    border-bottom-width: 8px;
	}



	.d_pricediv {
		max-width: none;
	}

	.d_mainphoto {
	    width: 100%;
	    border-width: 10px;
	}

	.d_thumbdiv {
	    width: 96%;
	    padding: 0;
	}



	.shoegallery {
	    width: 99%;
	}

	.shoegallery img {
	    border-width: 8px ;
	}

	.shoephoto {
		margin: 0 10px 20px 10px;
	}


	#bottom-middle {
		width: 98%;
	}

	.bottom-contact {
	    width: auto;
	}


 .bottom-home, #index .bottom-contact  {
		width: 94%;
		margin-right: 2%;
		margin-left: 3%;
		float: none;
		clear: both;
		max-width: 600px;
	}


	#index .bottom-contact {
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		float: none;
		clear: both;
		margin-top: 40px;
		margin-bottom: 20px;
		max-width: 350px;
	}

	#index  .bottom-contact-head {
		margin-bottom: 0;
	}

	.bottom-home h2 {
		font-size: 26px;
	}

	.bottom-home-bullet {
		height: 6px;
		width: 6px;
		margin: 0 4px 4px 4px ;
	}


	#cboxCurrent { bottom: 2px;}
	#cboxPrevious { background-position: -61px 2px;}
	#cboxPrevious:hover{background-position:-61px -23px;}
	#cboxNext { background-position: -36px 2px;}
	#cboxNext:hover{background-position:-36px -23px;}
	#cboxClose { background-position: -11px 2px;}
	#cboxClose:hover{background-position:-11px -23px;}
	#cboxLoadedContent{margin-bottom:32px;}
	#cboxTopLeft {background-position: 0px -10px; height: 10px; }
	#cboxTopCenter {background-position: 0px -60px ;  height: 10px;}
	#cboxTopRight {background-position: -29px -10px; height: 10px;}
	#cboxBottomLeft {height: 10px; }
	#cboxBottomCenter {height: 10px;}
	#cboxBottomRight {height: 10px; }
}


/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/


@media(max-width: 600px) {

	.tophead {
	    width: 100%;
	}


	#index h1 {
	    font-size: 22px;
	}

	.front-box {
	    border-top-width: 7px;
	    border-left-width: 7px ;
	    border-bottom-width: 7px;

	}

	.home-banner {
	    padding: 10px 6px;
	}

	.home-banner-break {
		display: block;
		font-size: 0;
	}

	.video-play {
		padding: 12px 16px 14px 16px;
		font-size: 24px;
	}

	.video-play img {
	    max-width: 42px;
	    max-height: 42px;
	}

	.shoegallery {
	    text-align: center;
	    max-width: 400px;
	}


	.shoerow {
	    width: 96%;
	}


	.bottom-news, .bottom-contact {
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		float: none;
		clear: both;
		max-width: 290px;
	}

	.bottom-contact {
		margin-top: 40px;
		margin-bottom: 20px;
	}

	.bottom-contact-head {
		margin-bottom: 0;
	}


	.bottom-home h2 {
		font-size: 24px;
	}


	.right-contact {
		margin-top: 6px;
	}
	.left-contact {
		margin-top: 8px;
	}


}


/****************************************************************************************************************/
/****************************************************************************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/


@media(max-width: 500px) {

.tophead {
    width: 250px;
    margin: 0 auto;
}

	.th-left, .th-right {
	    float: none;
	}


	h1 {
	    font-size: 38px;
	}

	#index h1 {
	    font-size: 20px;
	    padding: 16px 8px 0px 26px
	}

	.front-box {
	    width: 74%;
	    border-top-width: 6px;
	    border-left-width: 6px ;
	    border-bottom-width: 6px;
	}

	.home-banner {
	    font-size: 20px;
	}


	.bottom-home-bullet {
		height: 6px;
		width: 6px;
		margin: 0 3px 4px 3px ;
	}
	.d_mainphoto {
	    width: 96%;
	    border-width: 6px;
	}

	.d_thumbdiv {
    width: 96%;
    margin: 20px auto 20px;
	}

	.shoerow {
	    width: 99%;
	    max-width: 400px;
	    text-align: center;
	}

	#shoesgallery #right-inner {
		padding-top: 0;
	}

	#middle-inner .contact-box {
	    margin: 40px 0px 0px 1%;
	}


	#middle-inner .right-div {
		padding-left: 3%;
	}


	#rightcol .rightphoto .pcaption {
	    font-size: 15px;
	    line-height: 1.2;
	    margin: 5px 0 30px 0;
	}

	.rightphoto {
	   margin-left: 10px;
	   margin-right: 10px;
	}

	.rightphoto img {
		max-width: 420px;
	    height: auto;
	    width: 100%;
	}



}

/*****************************************************************************************************************/
/*****************************************************************************************************************/



@media(max-width: 450px) {

	#middle-inner .contact-box {
	    font-size: 14px;
	}

	.home-image {
		margin-top: 15px;
	}

	#index .tophead {
		text-align: center;
		margin-top: 0;
		padding-bottom: 6px;
	}

	#index .th-right {
	    float: none;
	    display: inline-block;
	    margin-bottom: 0;
	}


	#index .th-left {
	    float: none;
	    padding: 0;
	    margin: 0 ;
	}

/*	#index .topemail {
		float: none;
	}

	#index .topemail p {
	    padding: 0;
	    background: none;
	}
	#index .topemail a {
	    background: transparent url("images/icon.png") no-repeat 0 -27px;
	    padding-left: 30px;
	}*/


	#index .topgmap  {
		float: none;
	    padding: 0;
	    background: none;
	    margin: 0;
	}
	#index .topgmap a {
    	background: url('images/mapmarker.png') no-repeat scroll 0px 0px transparent;
	    padding-left: 16px;
	}

	#index .toppinterest p a, #index .topfacebook p a {
		/*height: 24px;*/
	}

	.video-play {
		padding: 10px 14px 12px 14px;
		font-size: 22px;
	}

	.video-play img {
	    max-width: 38px;
	    max-height: 38px;
	}

}

/****************************************************************************************************************/
/****************************************************************************************************************/


@media(max-width: 400px) {

	#header {
	    background: url('images/bespokes-logo-410x82.gif') no-repeat scroll 50% 10px #ffffff;
	}

	#header.header_cobbler  {
	    background: url('images/shoemakers-cobblers-logo-410x82.gif') no-repeat scroll 50% 10px #ffffff;
	 }

	.tophead {
	    padding-top: 110px;
	}


	#index h1 {
	    font-size: 20px;
	    padding: 16px 8px 0px 26px
	}

	.front-box {
	    width: 100%;
	    border-top-width: 5px;
	    border-left-width: 0 ;
	    border-bottom-width: 5px;
	}


	#footer-links .foot-designer , #footer-links .left  {
		width: 100%;
		text-align: center;
	}
}

/****************************************************************************************************************/
/****************************************************************************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/
/*****************************************************************************************************************/


@media(max-width: 360px) {

	.d_thumbdiv {
	    width: 88%;
	    padding-left: 5%;
	    padding-right: 5%;
	    margin: 20px auto;
	}
}

/**********************   narrow screen alternative menu  *******************/
/************************* from astuteo  ***************************************/
.nav-button { display: none; } /* hide the navigation button by default */

@media only screen and (min-width: 0px) and (max-width: 700px) {

  /* Navigation Button
  -------------------------------------------------------- */

  .nav-button {
    display: block;
    position: absolute;
    top: 4px;
    left: 12px;
    width: 110px;
    height: 32px;

    background: url('images/menu-icon-small.png');  /*modified wf as wasn't working in iphone 4 */

    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 999;
    text-indent: -9999px;
  }
  .nav-button:hover { 

  }
  .nav-button.open {
    background: url('images/close-icon-large.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 21px, 100%;
  }

  /* Navigation Bar
  -------------------------------------------------------- */

  body { padding-top: 50px; } 

  .menu, #navbar, #index #navbar {height: 0px; border: none;}

  .sf-menu, #index .sf-menu  {
    width: 100%;
    float: none;
    background-color: #efefef; /* change the menu color */
/*    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
    background-image:    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
    background-image:     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
    background-image:      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));*/
    display: block;
    height: 42px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 998;
    clear: both;
  }


  .sf-menu li, #index .sf-menu li{ 
    display: none;
    width: 100%;
    /*font-family: Arial;*/
    font-size: 18px;
    padding: 0;
    margin: 0;
    height: auto;
    background-image: none;
    line-height: 1.38em;
    white-space: normal;
    text-align: left;
  }



.sf-menu ul {
  position: relative;
  border: none;
  top: auto;
  left: auto;
  box-shadow: none;
  border-radius: 0 ;
}


.sf-menu ul ul {
  position: relative;
  top: auto;
  left: auto;
}

.sf-menu ul li {
  height: auto;
  font-size: 15px;
  padding: 0;
  background: #F9F9F9;
  border-top: 1px solid #eee;
  border-bottom: none;
}



.sf-menu ul li a {
    margin-top: 0;
      border-bottom: 1px solid transparent;
  }


  .sf-menu li a {
    display: block;
    width: 90%;
    padding: 8px 5%;
    margin-top: 0;
    font-size: 18px;
    /*font-weight: bold;*/
    /*text-shadow: -1px -1px 0 rgba(0,0,0,.15);*/
    color: #000000;
    text-decoration: none;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.2);
    border-top: 1px solid rgba(255,255,255,.1); 
    box-sizing: content-box;
    -moz-box-sizing: content-box; /* these were set in standardize - need to override for this mobile menu */
  }

.sf-menu li.firstnav, .sf-menu li.lastnav, #index .sf-menu li.firstnav, #index .sf-menu li.lastnav {
	padding-left: 0;
}


/* wf override orig menu */
.sf-arrows > li > a.sf-with-ul
{
  padding: 8px 5%;
}


  .sf-menu > li:first-child {
    border-top: 1px solid rgba(0,0,0,.2); 
    /*border-bottom: 1px solid rgba(0,0,0,.2); */
  }


.sf-menu > li > ul:after {
  content: none;
}


.sf-arrows .sf-with-ul {
/*  border-bottom: 1px solid #800000;*/
}

.sf-arrows .sf-with-ul:after {
  content: none;
}

.sf-menu a.selected {
    /*border-bottom: 1px solid transparent;*/
    border-bottom: 1px solid rgba(0,0,0,.2); 

}

.sf-menu .selected > a {
    background-color: #005296;
    border: none;
    border-bottom: 1px solid transparent;
    /*color: #ffffff;*/
}

.sf-menu .selected > a:hover {
    /*color: #ffffff;*/
}


.sf-menu li:hover,
.sf-menu li.sfHover {
    background-color: #F9F9F9;
}

.sf-menu ul li:hover,
.sf-menu ul li.sfHover {
  background: #F9F9F9;
}


.sf-menu li li.dropfirst {
    /*padding-top: 0;*/
}

.sf-menu li a:hover {
    border-color: transparent;
  }



.sf-menu a:hover,
.sf-menu .sfHover > a,
.index .sf-menu a:hover,
.sf-menu .parent > a:hover,
.index .sf-menu .sfHover > a
 {
    color: #000;
    padding: 8px 5%;
  	border-bottom: 1px solid transparent;
}


  /* Toggle the navigation bar open  */

  .sf-menu.open, #index .sf-menu.open { 
    height: auto; 
    padding-top: 50px;
  }
  .sf-menu.open li, #index .sf-menu.open li { 
    display: block; 
  }

  /* Submenus – optional .parent class indicates dropdowns */

  .sf-menu > li:hover > a {
    /*background: rgba(0,0,0,.5);*/
    border-bottom-color: transparent;
  }
  .sf-menu li.parent > a:after {
    content: "▼";
    color: rgba(0,0,0,.4);
    float: right;
    padding-right: 2.5em;
  }
  .sf-menu li ul {
    display: none;
    background: #f9f9f9;
    border-top: 1px solid #F9F9F9;
    padding: 0 0 0 4%;
  }
  .sf-menu li ul a, .sf-menu li ul a:hover, .sf-menu li ul a:focus {
    border: none;
    font-size: 16px;
    padding: 10px 5%;
    width: auto;
    color: #555555;
    background-color: #F9F9F9;
  }


  .sf-menu li ul a:hover {
    background-color: #ffffff;
  }

  .sf-menu li:hover ul {
    display: block;
    /*border-top: 0 none;*/
    background-color: #f9f9f9;
  }


.sf-menu li li, .sf-menu li.menuwide li, .sf-menu li.menuwide li a, .sf-menu li.menuwider li, .sf-menu li.menuwider li a  {
	width: auto;
}

} /* End Mobile Styles */






/******************  print overrides  *******************/


 @media print {
	
	body {background:#ffffff;}
	
	#header, #navbar, #footer-links, .bottom-news { display : none; } 
	#pagetitle, #middle, #photoback, #player, #gallery #rightcol  {
		background: #ffffff;  
	}

	#middle-wrapper {
		border: none;
	}
	#wrapper {
		background: #ffffff;
		border: none;
	}
}