/* Style sheet for vintagewatchstraps.com */

@font-face { font-family: Baskerville; src: url( fonts/LibreBaskerville-Regular.ttf ); font-weight:normal; font-style:normal; } 
@font-face { font-family: Baskerville; src: url( fonts/LibreBaskerville-Italic.ttf ); font-weight:normal; font-style:italic; } 
@font-face { font-family: Baskerville; src: url( fonts/LibreBaskerville-Bold.ttf ); font-weight:bold; font-style:normal; } 

/* add invisible top offset for anchor targets to make room for the sticky menu */
:target:before {
   content: "";
   display: block;
   margin: -60px 0 0;
   height: 60px;
   width: 1px;
} 

.imglink {border:3px solid white;}
.imglink:hover { border:3px solid blue;}

.emphasis { color:darkred; font-weight:bold; }
img.centre {display:block; margin:0 auto;}
.centrecaption {font-size: 120%; line-height:100%; margin-bottom:50px; margin-top:0px; text-align:center; }

.indent { 
	margin-left:5%; 
}

.stockdiv {
	clear:both;
	text-align:center;
	max-width:90%;
	margin:0 auto;
}

.stockbutton {
	float:left;
	padding:0.5%;
	border:1px solid grey;
}

.textbox {
	border: 1px solid darkred; 

	margin:1%; 
	background:#e3e3e3; 
	padding:0 1%;
	max-width:100%; 
}

.menubox {
	border: 1px solid darkred; 
	border-radius: 2%; 
	background:#e3e3e3; 
	padding:1%; 
	float: right;  
	margin:1%;
	margin-right: 0px; 
	line-height:140%;
	font-family: verdana,arial,helvetica,sans-serif; 
	font-size:85%;
	width:200px;
	max-width:40%;
}

/* Use CSS ::after pseudo element to add an arrow to external links */
a.external::after {
content: "";
display: inline-block;
background: url("external.png") no-repeat top right;
width: 12px;
height: 10px;
}

li {
margin-bottom:10px;
}

body {
	margin:1% 2%;
	color: #222222;
	font-family: georgia,serif;
	font-size:100%;
	line-height:130%;
	background-color: #98AFC7;
}

p {line-height:130%;}

h1, h2, h3, h4 {font-family: verdana,arial,helvetica,sans-serif; }

h1 {font-size: 150%; }

h2 {font-size: 130%;}

h3 {font-size: 115%;}

h4 {font-size: 100%; margin-bottom: 0;}

hr { 
	color:navy;
	clear:both;
}

#wrapper {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	background: White;
	border-width: 3px;
	border-color: lightgray;
	border-style: outset;
	padding-top: 1%;
	background-color: #e8effc;
}
/*#header { 
	border-bottom: 1px solid #8889FF;
	float: left;
	width: 100%;
	margin-top: 5px;
  border-style:solid;
  border-color:red;
  border-width:1px;
}*/
#content {
	padding:1% 2%;
	clear: both;
	background: White;
}
.imgleft {
	float: left;
	border-style:solid;
	border-radius: 3%; 
	border-color:navy;
	border-width:1px;
	margin:1% 1% 1% 0; /* top right bottom left. Margin clears an area around an element (outside the border) */
	padding:1%; /* Padding clears an area around the content (inside the border) */
	font-size:90%;
	text-align:center;
	background:white;
	max-width:100%;
}
.imgright {
	float: right;
	border-style:solid;
	/*border-radius: 3%; */
	/*border-color:navy;*/
	border-width:1px;
	margin:1% 0 1% 1%;
	padding:1%;
	font-size:90%;
	text-align:center;
	background:white;
	max-width:100%;
}

img {max-width:100%;} /* <style type="text/css">img {max-width: initial;}</style> needed for lightbox until all images upgraded to responsive */

.imgcentre {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.imgcentred {
	display: block;
	clear:both;
	margin:1% 0;
	/*margin-left: auto;
	margin-right: auto;*/
	border-style:solid;
	border-radius: 3%; 
	border-color:navy;
	border-width:1px;
	padding:1%;
	font-size:90%;
	background:white;
	max-width:100%;
	text-align:center;
}

.quote {font-size:90%; margin-left:80px; margin-right:80px;}

.copy { border-top: 1px solid darkred; width:90%; }

.footer {
  /* background-color: $footerbackground; */
	border-top: 1px solid #darkred;
	padding: 1%;
	clear: both;
	background-color: #e8effc;
}

table.fine {
	border-collapse: collapse;
	border-style: solid;
	border-width: 1px;
	border-color: gray;
}
table.fine th {
	border-style: solid;
	border-width: 1px 1px 2px 1px;
	border-color: gray;
	padding:5px 10px;
	background-color:#E0E0E0;
}
table.fine td {
	border-style: solid;
	border-color: gray;	
    border-width: 1px;
	padding:5px 10px;
}

table.kew {
	border-collapse: collapse;
	border-style: solid;
	border-width: 1px;
	border-color: gray;
}
table.kew th {
	border-style: solid;
	border-width: 1px 1px 2px 1px;
	border-color: gray;
	padding:5px 10px;
	background-color:#E0E0E0;
}

table.list {
	width: 100%;
	border-collapse: collapse;
}
table.list th, td {
	border-top: 1px solid lightgray;
	border-bottom: 1px solid lightgray;
	padding: 0.5% 0;
}
table.list td:first-child {
	width:20%;
	text-align: right;
	font-weight: bold;
	padding-right: 1%
}
table.list td:first-child:after { content: ":";}

table.noborders {width:100%; border-collapse:collapse;}
table.noborders th, td {border:none;}

table.fineshaded {
	border-width: 1px;
	border-spacing: 2px;
	border-style: solid;
	border-color: gray;
	border-collapse: collapse;
	background-color: white;
	max-width: 100%;
}

table.fineshaded tr:nth-child(even) {background-color: #E0E0E0;}
table.fineshaded tr:nth-child(odd) {background-color: #F0F0F0;}
/* Setting background colour for th and td would override that set for tr */

table.fineshaded th {
	border-width: 1px 1px 2px 1px;
	border-spacing: 2px;
	border-style: solid;
	border-color: gray;
	border-collapse: collapse;
	padding:1px 10px;
/*	background-color: white; */
}

table.fineshaded td {
	border-width: 1px;
	border-spacing: 2px;
	border-style: solid;
	border-color: gray;
	border-collapse: collapse;
	border-width: 1px 1px 1px 1px;
	padding:1px 10px;
}

table.outline {
	border-width: 1px 1px 1px 1px;
	border-spacing: 2px;
	border-style: outset outset outset outset;
	border-color: gray gray gray gray;
	border-collapse: separate;
	background-color: white;
}
table.outline th {
	border-width: 0px 0px 0px 0px;
	padding: 1px 1px 1px 1px;
	border-style: inset inset inset inset;
	border-color: gray gray gray gray;
	background-color: white;
/*	-moz-border-radius: 0px 0px 0px 0px; */
}
table.outline td {
	border-width: 0px 0px 0px 0px;
	padding: 1px 1px 1px 1px;
	border-style: inset inset inset inset;
	border-color: gray gray gray gray;
	background-color: white;
/*	-moz-border-radius: 0px 0px 0px 0px; */
}

.googlead {
	float: right;
	padding: 10px;
  margin:0px 0px 0px 10px;
  border-style:solid;
  border-color:LightGray;
  border-width:1px;
}
.dropcap {
				 font-size: 32px;
				 line-height: 28px;
				 float: left;
				 margin-right: 2px;
				 }
sup {
		font-size: 70%;
		vertical-align: super;
		line-height: 0;
	}

a.info{
	position: relative; /*this is the key*/
	z-index: 24;
	color: Green;
	background-color: White;
	text-decoration: none;
}
a.info:hover {
	z-index: 25;
	color: Black;
	background-color: #EEE8AA;
}
a.info span{display: none}
a.info:hover span{
	/*the span will display just on :hover state*/
	display: block;
	position: absolute;
	top: 2em;
	left: 2em;
	width: 500px;
	border: 1px solid Black;
	background-color: #FFFF99;
	color: #000;
	text-align: center;
  padding:5px;
}

a.tooltip {outline:none; color: green; text-decoration: underline;}
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
	z-index:10;display:none; padding:14px 20px;
	margin-top:-30px; margin-left:28px;
	width:300px; line-height:16px;
}
a.tooltip:hover span{
	display:inline; position:absolute; color:#111;
	border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}

/*CSS3 extras*/
a.tooltip span
{
	border-radius:4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	-moz-box-shadow: 5px 5px 8px #CCC;
	-webkit-box-shadow: 5px 5px 8px #CCC;
	box-shadow: 5px 5px 8px #CCC;
}