/* ---------------------------------------------------------------------------------------------------------------------------------------------------*/
/* coquetcottages.css - this is the stylesheet which tells Firefox, Internet Explorer, Safari, Chrome etc how we want our HTML displayed on screen    */
/* Because Internet Explorer v 6 has a few bugs there is an additional stylesheet for that browser that overrides some of the instructions here       */
/* Because we don't want to show menus and slidewshows when printing there is a print stylesheet which overrrides (turns off) those just for printers */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------*/

/* THE BASICS */
/* First things first, let's clear all of the common styles in case any are cached by the browser from websites the user has visited earlier          */    
/* CSS Reset */
body, h1, h2, h3, h4, h5, h6, p, div, form, fieldset, dl, dt, dd, ul, li, ol, img, table
{
	border:0;
	margin:0;
	padding:0
}

/* Set our basic style, page background, default font and colour, this is how stuff will look unless it's overridden later in the sheet */

body
{
	background-image: url(../../northumberland_images/body_bg.jpg);
	background-color: #110d09;
	background-repeat: no-repeat;
	background-position:top center;
	background-repeat:no-repeat;
	font-family:"Trebuchet MS", Geneva, sans-serif;
	font-size:14px;
	line-height:100%;
	font-style:normal;
	font-weight:normal;
	color:#FFFCF8;
}

img
{
	margin-right: 0px;
	margin-left: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
}

.Bold
{          /* Our own custom class for bold & italic means we can do special versions for printing, mobiles & screenreaders */
	font-weight:500
}

.Italic
{
	font-style:italic
}

a
{                               /* The default colour and behaviour of links unless we specify otherwise */
	color:#FFC;
	text-decoration: none;
}

a:hover
{                         /* The default behaviour when someone moves their mouse pointer over a link */
	background-color:#000;
	color:#FFF;
	text-decoration:underline
}

/* THE DIVS /*
/* Now we define how big we want our divs (divisions, boxes basically) to be and how we want our HTML to appear */

#site_wrapper
{                  /* An empty colourless box to hold all of our stuff */
	height:auto;
	margin-bottom:20px;
	margin-left:auto;                /* Most browsers will centre our whole site on the page if we set these margins to auto */
	margin-right:auto;
	margin-top:0;
	width:960px
}

#header
{                        /* We have a header at the top of every page, the stylesheet tells the browser to make its background the castle photos, most pages set its foreground as the slideshow */
	background-image:url(../../slideshow_files/1.jpg);
	height:300px;
	margin:0;
	padding:0;
	width:960px;
	background-repeat: no-repeat;
}

#print_only_header
{             /* In the HTML at the top of nearly every page but as this is a screen stylesheet we will "turn this off" */
	display:none !important          /* by saying display:none telling browsers not to display it on screen                                    */
}

#main_nav
{                      /* This code styles the box below the header containing our horizontal navigation bar */
	background-color:#6F5D45;
	float:left;
	height:30px;
	margin:0 0 0 174px;
	width:786px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}

#content_and_side_bar_wrapper
{  /* An empty colourless box to hold the sidebar div and the content div */
	float:left;
	height:auto;
	margin:0;
	padding:0;
	width:960px
}

#sidebar
{                       /* The styling and sizing for the sidebar div */
	background-color:#110D09;
	background-repeat:repeat;
	border-right-color:#000;
	border-right-style:solid;
	border-right-width:1px;
	float:left;
	height:auto;
	margin:0;
	padding:0;
	width:173px;
	background-image: url(../../northumberland_images/navbarbackground.jpg);
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}

#content
{                       /* This controls the size and colours of the content division where our words and pictures go */
	background-color:#6F5D45;
	float:left;
	height:auto;
	margin:0;
	min-height:622px;
	padding:0 5px 0 5px;
	width:776px
}

#olbcontent
{                    /* This is a slightly different content division used on the Online Booking pages */
	background-color:#6F5D45;
	float:left;
	height:auto;
	margin:0;
	min-height:585px;
	padding:0 5px 0 1px;
	width:780px
}

#logo
{
	text-indent: -9999px;
}

#footer
{                        /* The size and shape of the footer area at the bottom of our pages */
	background-color:#6F5D45;
	float:left;
	height:140px;
	margin-left:174px;
	padding:0;
	width:786px
}

/* OUR BASIC TEXT STYLES AND COLOURS */

p
{
	font-size: 14px;
	line-height: 18px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0.7em;
	color: #F0ECE6;
	padding-left: 4px;
}

h1
{
	color:#FFFFD7;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:24px;
	font-weight:normal;
	margin-bottom:15px;
	margin-top:16px;
	font-style:italic;
	padding-left: 4px;
	line-height: 30px;
}

h2
{
	color:#FFC;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:20px;
	font-weight:normal;
	line-height:23px;
	margin-bottom:4px;
	margin-top:8px;
	font-style: italic;
	padding-left: 4px;
}

h3
{
	color:#FFC;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 1.3em;
	padding-top: 0.5em;
	padding-bottom: 0em;
	margin-top: 0em;
	margin-bottom: 6px;
	padding-left: 4px;
}

h4
{
	background-color:#362E23;   /* An h4 has a background colour */
	clear:both;
	color:#EEE6D3;
	font-size:12px;
	font-weight:normal;
	margin-bottom:0px;
	padding-bottom:5px;
	padding-top:5px;
	padding-left: 4px;
	font-family: Verdana, Geneva, sans-serif;
}

h4 a
{                     /* The colour of an h4 when it's also a link (this can't be left as the default because the default won't stand out from the background set above) */
	color:#F9F9F9
}

h5
{
	color:#FFC;
	font-size:10px;
	font-weight:lighter;
	padding-left: 4px;
	font-family: Verdana, Geneva, sans-serif;
}

h6
{
	color:#362C23;
	font-size:8px;
	font-weight:lighter;
	border-left: 4;
}

/* MAIN NAV STYLES */
/* These styles affect the behaviour of text and links inside the main_nav div */

#main_nav ul
{                  /* Instructions for how to display an unordered list in main_nav */
	display:inline;
	list-style-type:none;
	margin:0
}

#main_nav ul li
{               /* Instructions for how to display a list item within an unordered list within main_nav */
	float:left;
	margin:0;
	text-align:center;
	width:157px
}

#main_nav ul li a
{             /* Instructions for how to display a list item within an unordered list within main_nav that is an 'a' (a link) */
	background-color:#6F5D45;
	border-color:#1D120E;
	border-style:solid solid solid none;
	border-width:1px;
	color:#F7FFEB;
	;
	display:block;
	padding-bottom:6px;
	padding-top:6px;
	text-decoration:none
}

#main_nav ul li a.selected
{    /* Instructions for how to display a list item within an unordered list within main_nav that is an 'a' (a link) when a user selects it */
	background-color:#FFC;
	text-decoration:none
}

#main_nav ul li a:hover
{       /* Instructions for how to display a list item within an unordered list within main_nav that is an 'a' (a link) when a user hovers over it */
	background-color:#242424;
	color:#FFFDF8;
	text-decoration:none
}

#main_nav                       /* Instructions for how to display a list item with the class "last" within an unordered list within main_nav - this is used so that the last item doesn't have a border to the right */ 
ul li a.last
{
	border-right-width:0
}

/* SIDEBAR STYLES */
/* These styles affect the behaviour of text and links inside the sidebar div */

#sidebar ul
{                   /* Instructions for how to display an unordered list in the sidebar */
	display:block;
	font-weight:normal;
	line-height:16px;
	margin:0;
	padding:0 0 1px
}

#sidebar ul li
{                /* Instructions for how to display a list item within an unordered list within sidebar */
	border-bottom:solid thin;
	border-bottom-color:#3C3224;
	list-style:none
}

#sidebar ul li a
{              /* Instructions for how to display a list item within an unordered list within sidebar that is an 'a' (a link) */
	color:#F7FFEB;
	display:block;
	padding:4px 3px 4px 4px;
	text-decoration:none;
}

#sidebar ul li a.selected
{     /* Instructions for how to display a list item within an unordered list within sidebar that is an 'a' (a link) when a user selects it */
	background-color:#002c3e
}

#sidebar ul li a:hover
{        /* Instructions for how to display a list item within an unordered list within main_nav that is an 'a' (a link) when a user hovers over it */
	background-color:#242424;
	color:#FFFFFB
}

/* OUR CUSTOM CLASSES AND IDS */

/* Typekit Specials */


.GuestComments
{                   /*  Use inside a standard paragraph to give a 'quote effect' to guests' comments */
	color:#FAFAFA;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	font-style:normal;
	font-weight:400;
	line-height: 20px;
	padding-bottom: 15px;
	padding-top: 15px;
	letter-spacing: 0px;
	display: block;
	padding-left: 4px;
	padding-right: 4px;
}

.GuestCommentsB
{                  /* An alternate non-italic version for when one guest quote follows another */
	color:#FFD;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14px;
	font-style:normal;
	font-weight:400;
	line-height: 20px;
	padding-bottom: 18px;
	padding-top: 24px;
}

.intro_text
{                    /*  Different from a standard paragraph and used to make the first paragraph or sentence stand out a bit */
	color:#F4E0BF;
	font-size:15px;
	line-height:22px;
	font-style: italic;
}

.StandOutLink
{                  /*  Forces the browser to underline that link regardless of default  */
	text-decoration:underline
}


/* IMAGE PADDING AND MARGINS */

img.cameophotos
{
padding-right: 10px
}


img.floatLeft
{                  /*  How our images look when floated to the left  */
	float:left;
	padding-right: 12px;
	padding-top: 4px;
}

img.floatRight
{                 /*  How our images look when floated to the right  */
	clear:right;
	float:right;
	padding-left: 6px;
	padding-top: 4px;
}

/* OTHER CUSTOM UNDORDERED AND ORDERED LISTS */

ol.count
{                       /*  How we want to display ordered (numbered) lists */
	color:#FFF;
	list-style-position:inside;
	list-style-type:decimal;
	margin-left:12px;
	padding-bottom:8px;
	padding-top:6px
}

ol.count li
{                    /*  How we want to display list items within ordered (numbered) lists */
	padding-bottom:7px
}

ul.featurelist
{                 /*  How we want to display unordered lists which have the ID of "featurlist" */
	color:#FCFCFC;
	display:block;
	margin-bottom:12px;
	margin-right:0;
	margin-top:20px;
	padding-bottom:6px;
	padding-left:12px;
	padding-top:6px;
}

ul.featurelist li
{              /*  How we want to display list items within unordered lists which have the ID "featurelist" */
	line-height:19px;
	list-style-position:outside;
	list-style-type:disc;
	margin-left:12px;
	padding-bottom:4px;
	padding-left:5px;
	font-size: 14px;
	font-style:italic
}

ul.smallphoto
{              /*  How we want to display list items within unordered lists which have the ID "smallphoto" */
	margin:12px 0px 12px 0px;
	padding:0px 0px 0px 0px
}

ul.smallphoto li
{              /*  How we want to display list items within unordered lists which have the ID "smallphoto" */
	display:inline;
	margin:0;
	padding:0
}

ul.smallphoto li.last
{         /*  How we want to display list items within unordered lists which have the ID "smallphoto" and the class of "last" */
	display:inline;
	margin:0;
	padding:0
}

/* MISC */
.pricestable
{                   /* One of our few tables, used on the Prices page, this controls how it looks  */
	float:none;
	margin-left:2px;
	position:inherit;
	width:100%
}

.pricestable td, td a, th
{        /* Controls some of the cells within the Prices table */
}

.print_page_break
{              /* Forces a page break before the item contained in the class in order to better format printouts doesn't affect screen */
	page-break-before: always;
}

.clearfix:after
{                /* Clearfix - A CSS hack to help us deal with old browsers and get them to display stuff the same as the new browsers */
	clear:both;
	content:" ";
	display:block;
	height:0;
	visibility:hidden
}