@charset "utf-8";

/**** GET LOST SKYPE! ****/span.skype_pnh_container {display:none !important;}span.skype_pnh_print_container {display:inline !important;}

/* eliminate page shift */ 
html { 
min-height: 100%; 
margin-bottom: 1px; 
/* For Firefox 3.5 or later */ 
overflow: -moz-scrollbars-vertical !important; 
overflow-y: scroll; 
} 

body {
	margin: 0;
	padding: 0;
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	background-color: #FFF;
	letter-spacing: -1px;
}

img {
border: 0;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 0px;
	padding-left: 0px;
}

h1 {
	color: #609;
	font-weight: normal;
	font-size: 24px;
	letter-spacing: -2px;
}
h2 {
	font-size: 16px;
	color: #333;
	line-height: normal;
	margin: 0px;
	font-weight: normal;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 6px;
	padding-left: 0px;
}
p {
}


/* This gets rid of dotted line in Firefox*/
a {   outline: 0;}


a img { 
	border: none;
}

a:link {
	color: #609;
	text-decoration: underline; 
}
a:visited {
	color: #609;
	text-decoration: underline;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
}


.container {
	width: 900px;
	background: #FFF;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}


.header {
	background-color: #FFF;
	background-image: url(assets/clifftop-boarding-kennels-and-cattery-lincoln-lincolnshire-gainsborough-market-rasen-kirton-lindsey-scunthorpe-header-bg.png);
	background-repeat: no-repeat;
	height: 225px;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
.clifftop_kennels {
}
.for_dogs {
}
.for_cats {
}
.feeding {
}


.header h1 {
	color: #FFF;
	font-size: 21px;
	font-weight: normal;
	letter-spacing: -1px;
	text-align: left;
	display: block;
	float: left;
	padding-top: 182px;
	padding-left: 65px;
	width: 650px;
	margin: 0px;
	padding-bottom: 0px;
}
.vaccinations {
	float: left;
}
.grooming {
}
.prices {
}
.bookings {
}
.location {
}
/* Menu styling */
.navbar {
	clear: both;
	padding-top: 10px;
	padding-bottom: 50px;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
#menu {
	padding: 0px;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	list-style-type: none;
}

ul#menu li {
 display: inline;
 }


#menu li a {
	background-image: url(assets/clifftop-boarding-kennels-and-cattery-navigation.png);
	text-indent: -9999px;
	display: block;
	float: left;
	height: 31px;
}
/* Menu standard */
#menu li a.clifftop_kennels {
	width: 150px;
	background-position: 0px 0px;
}
#menu li a.for_dogs {
	width: 87px;
	background-position: -150px 0px;
}
#menu li a.for_cats {
	width: 87px;
	background-position: -237px 0px;
}
#menu li a.feeding {
	background-position: -324px 0px;
	width: 83px;
}
#menu li a.vaccinations {
	background-position: -407px 0px;
	width: 119px;
}
#menu li a.grooming {
	background-position: -526px 0px;
	width: 98px;
}
#menu li a.prices {
	background-position: -624px 0px;
	width: 71px;
}
#menu li a.bookings {
	background-position: -695px 0px;
	width: 92px;
}
#menu li a.location {
	background-position: -787px 0px;
	width: 113px;
}

/* Menu hover state*/

#menu li a.clifftop_kennels:hover, #menu li a.clifftop_kennels:focus {
	width: 150px;
	background-position: 0px -32px;
}
#menu li a.for_dogs:hover, #menu li a.for_dogs:focus {
	width: 87px;
	background-position: -150px -32px;
}
#menu li a.for_cats:hover, #menu li a.for_cats:focus {
	width: 87px;
	background-position: -237px -32px;
}
#menu li a.feeding:hover, #menu li a.feeding:focus {
	background-position: -324px -32px;
	width: 83px;
}
#menu li a.vaccinations:hover, #menu li a.vaccinations:focus {
	background-position: -407px -32px;
	width: 119px;
}
#menu li a.grooming:hover, #menu li a.grooming:focus {
	background-position: -526px -32px;
	width: 98px;
}
#menu li a.prices:hover, #menu li a.prices:focus {
	background-position: -624px -32px;
	width: 71px;
}
#menu li a.bookings:hover, #menu li a.bookings:focus {
	background-position: -695px -32px;
	width: 92px;
}
#menu li a.location:hover, #menu li a.location:focus {
	background-position: -787px -32px;
	width: 113px;
}


/* Current Page nav highlight */

#menu li a.clifftop_kennels_current {
	width: 150px;
	background-position: 0px -32px;
}
#menu li a.for_dogs_current {
	width: 87px;
	background-position: -150px -32px;
}
#menu li a.for_cats_current {
	width: 87px;
	background-position: -237px -32px;
}
#menu li a.feeding_current {
	background-position: -324px -32px;
	width: 83px;
}
#menu li a.vaccinations_current {
	background-position: -407px -32px;
	width: 119px;
}
#menu li a.grooming_current {
	background-position: -526px -32px;
	width: 98px;
}
#menu li a.prices_current {
	background-position: -624px -32px;
	width: 71px;
}
#menu li a.bookings_current {
	background-position: -695px -32px;
	width: 92px;
}
#menu li a.location_current {
	background-position: -787px -32px;
	width: 113px;
}






/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/

.content {
	background-image: url(assets/page-background.jpg);
	background-repeat: repeat-y;
	clear: both;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
#top {
/*	background-image: url(assets/clifftop-boarding-kennels-for-day-car-and-holiday-boarding-in-lincoln-lincolnshire-gainsborough-market-rasen-kirton-lindsey-scunthorpe.png);*/
	background-repeat: no-repeat;
	background-position: right top;
	height: 310px;
	width: 100%;
}
#top h1 {
	display: block;
	width: 585px;
}



#top p {
	display: block;
	width: 445px;
}
.dogs_background {
	background-image: url(assets/clifftop-boarding-kennels-for-day-care-and-holiday-boarding-in-lincoln-lincolnshire-gainsborough-market-rasen-kirton-lindsey-scunthorpe.png);
}
.thank_you_background {
	background-image: url(assets/thank-you-dog-and-cat.png);
}

.location_background {
	background-image: url(assets/how-to-find-clifftop-boarding-kennels-from-lincoln-lincolnshire-gainsborough-market-rasen-kirton-lindsey-scunthorpe.png);
}

.booking_background {
	background-image: url(assets/dog_suitcase.png);
}

.prices_background {
	background-image: url(assets/dog_with_calculator.png);
}

.vaccination_background {
	background-image: url(assets/cat-and-dog-2.png);
}

.grooming_background {
	background-image: url(assets/blow_dry_bulldog.png);
}

.feeding_background {
	background-image: url(assets/dinner-time.png);
}

.homepage_background {
	background-image: url(assets/landing-page-background.png);
}

.cats_background {
	background-image: url(assets/clifftop-cattery-for-day-car-and-holiday-boarding-in-lincoln-lincolnshire-gainsborough-market-rasen-kirton-lindsey-scunthorpe.png);
}


#middle {
	clear: both;
	padding-top: 10px;
}

#middle h1 {
	display: block;
	width: 900px;
	padding-top: 0px;
}

#middle img {
	float: left;
	height: 242px;
	width: 250px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-top: 2px;
}
#middle .louisepic {
	float: left;
	height: 250px;
	width: 198px;
	padding-right: 15px;
	padding-bottom: 15px;
}


#bottom {
	clear: both;
	padding-top: 10px;
}
#photo_gallery {
	clear: both;
	text-align: center;
}

#bottom img {
}

hr {
	color: #CCC;
	background-color: #CCC;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	height: 1px;
}



#bottom h1 {
	display: block;
	width: 620px;
}
#bottom img {
	float: left;
	padding-left: 10px;
	padding-bottom: 0px;
}
.booking_footer {
	clear: both;
	padding-top: 10px;
	padding-bottom: 10px;
}
.booking_footer h2 {
	font-size: 33px;
	font-weight: bold;
	display: block;
	float: right;
	clear: both;
	margin: 0px;
	padding-top: 0px;
	padding-right: 2px;
	padding-bottom: 0px;
	padding-left: 0px;
	text-align: right;
	letter-spacing: -3px;
}
.booking_footer h3 {
	font-size: 14px;
	font-weight: normal;
	line-height: 1.2em;
	color: #999;
}
.booking_footer img {
	padding-top: 0px;
	padding-right: 5px;
}



.booking_footer h1 {
	display: block;
	float: right;
	margin: 0px;
	padding: 0px;
	text-align: right;
	color: #609;
}
.booking_footer p {
	text-align: right;
	clear: both;
	float: right;
	font-size: 16px;
	font-weight: normal;
	padding-top: 5px;
	padding-bottom: 20px;
}



/* ~~ The footer ~~ */
.footer {
	background-color: #FFF;
	background-image: url(assets/clifftop-boarding-kennels-and-cattery-lincoln-lincolnshire-gainsborough-market-rasen-kirton-lindsey-scunthorpe-footer-bg.png);
	height: 103px;
	width: 900px;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
	background-repeat: no-repeat;
	clear: both;
	text-align: center;
}
.footer p {
	color: #CCC;
	font-size: 14px;
	font-weight: normal;
	display: block;
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	padding-top: 20px;
	margin: 0px;
	padding-bottom: 0px;
}


/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	width: 50%;
}


.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	text-align: left;
	width: 50%;
}
#middle .fltrt {
	float: right;
	width: 45%;
}
#middle .fltlft  {
	float: left;
	width: 45%;
}

.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
p {
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	line-height: 20px;
}
#contactdetails {
	width: auto;
}
#contactdetails td {
	font-weight: normal;
	color: #333;
	font-size: 14px;
	border-bottom-width: 0px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	width: auto;
	vertical-align: top;
	padding-right: 30px;
}
#vaccinations {
	width: 70%;
}

#vaccinations td {
	font-weight: normal;
	color: #333;
	font-size: 18px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	width: 50%;
}

#vaccinations  h1 {
	width: auto;
	padding-top: 10px;
	padding-bottom: 5px;
	margin: 0px;
}

#booking  {
	width: 700px;
	font-size: 14px;
}
#booking td {
	vertical-align: tmiddle;
	text-align: left;
	padding-bottom: 5px;
}

.text_valign {
	vertical-align: top;
	text-align: left;
}
	
#top table {
	width: 50%;
}

#top td {
	font-weight: normal;
	color: #333;
	font-size: 18px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}


#top table h1 {
	width: auto;
	padding-top: 10px;
	padding-bottom: 5px;
	margin: 0px;
}


.button {
	padding-top: 10px;
}

#gallery {
	padding-top: 10px;
	width: auto;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
	height: 103px;
}
#gallery img {
	border: 1px solid #609;
	padding: 0px;
	margin-right: 8px;
	margin-left: 8px;
}

.gallery_header {
	color: #609;
	text-align: center;
	margin: 0px;
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}


/* Lightbox starts  */

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(./assets/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(./assets/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{
	background-color: #FFF;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 14px;
}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{
	font-weight: normal;
	color: #609;
}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/*  Lightbox ends  */