/* DEFAULT CSS SHEET */
#page-container {
    margin:auto;
    width:1002px;
    max-width:1002px;
    font-size:medium;
    background:#996644;
}

/*This is to colour the page correctly in order to have the cottage side bar coloured properly. */
body.maps #page-container {background:#ffffcc;}

html {padding:0; margin:0;}

body {
  margin:0;
  padding: 0 0 20px 0;
  color:#663333; /*font colour */
  font-size:medium;
  background:#668866; /* background color for entire page viewable in browser */

}

#header {width:1002px; height:100px;background: #996644 url(horizon6.jpg);} /* the header*/

/*create a left and right pane, equal in size for front page. */
#leftpane {width:501px;margin-right:501px;padding:0;margin:0;}
#rightpane{float:right;width:501px;text-align:center;} /*text-align:center to center image*/

.headerimg {width:1002px;padding:0;margin:0;} /*The horizon header*/

/*The title text in the page headers */
.headertitle {font-size:x-large;font-weight:bold;color:#3a5fcd;z-index:10;position:relative;top:10px;left:10px;}

/*front page iamge properties */
.frontimg {width:400px}

/*The generic page footer*/
#contact_bar {
  display: none; /* This makes the bar not render. It is not used on this website atm. */
  clear: both;
  width: 1002px;
  padding: 0;
  text-align: center;
  height: 1.15em;
}
/*The front page uses the footer so I made a different class.*/
#contact_bar2 {
  clear: both;
  width: 1002px;
  padding: 4px;
  text-align: center;
  height: auto;
  font-size: small;
  background-color: #c59060;
}
/*A Class for caption text under Images*/
.image_caption {font-size:smaller;}

/*Generic containers so I can color the backgrounds properly.*/
.container_div {background:#ffffcc; }
.container_div2 {background:#996644;}

/*These are "padding" containers used throughoutthe site. */
.padding {padding:25px;background:#ffffcc;}
.padding2 {padding:5px 30px 5px 5px;background:#ffffcc;}
.padding_small {padding:5px 0 5px 0;}

/*******************/
/* Navigation       */
/******************/

#navigation {
    background:red; /* colour of the navigation background */
    font-size:larger;
    width:1002px;/*1002*/
    height:1.15em; /* base the nav bar height on the given font */
    text-align:center;
    padding:0;
    margin:0;
}
/*The navigation bar is just a <ul> organized differently*/
#navigation ul {margin:0;padding:0;list-style-type:none;overflow:hidden;width:1002px}

/*The <li> items for the nav bar. */
#navigation li {float:left;width:167px;/* 6 buttons span over the page width */}

/*Link properties for the nav bar. */
#navigation li a:link {
display:block;
color:#ffffff;
text-align:center;
text-decoration:none;
background-color:#c59060; /* colour of the navigation tabs */}

#navigation li a:visited {color:#ffffff;background-color:#c59060; /* colour of the navigation tabs */}
#navigation li a:hover, a:active {background-color:#ddaa77; /* colour when you hover/click on a nav tab */}

/* These are to make the appropriate page have its navigation tab lit up. */
body.home #navigation li.homebutton a {background-color:#ddaa77;color:#ffffff;}
body.northstar #navigation li.northstarbutton a {background-color:#ddaa77;color:#ffffff;}
body.cottages #navigation li.cottagesbutton a {background-color:#ddaa77;color:#ffffff;}
body.contacts #navigation li.contactsbutton a {background-color:#ddaa77;color:#ffffff;}
body.maps #navigation li.mapsbutton a {background-color:#ddaa77;color:#ffffff;}
body.pictures #navigation li.picturesbutton a {background-color:#ddaa77;color:#ffffff;}

/* Make the cottages button stay lit on cottage sub-pages */
/* The body tag will be altered on each sub-page in order to use */
/* the cottage name as a variable for the page */
body.balsam #navigation li.cottagesbutton a {background-color:#ddaa77;color:#ffffff;}
body.cedars #navigation li.cottagesbutton a {background-color:#ddaa77;color:#ffffff;}
body.juniper #navigation li.cottagesbutton a {background-color:#ddaa77;color:#ffffff;}
body.grandview #navigation li.cottagesbutton a {background-color:#ddaa77;color:#ffffff;}
body.maples #navigation li.cottagesbutton a {background-color:#ddaa77;color:#ffffff;}
body.mountainview #navigation li.cottagesbutton a {background-color:#ddaa77;color:#ffffff;}
body.redpine #navigation li.cottagesbutton a {background-color:#ddaa77;color:#ffffff;}
body.shadynook #navigation li.cottagesbutton a {background-color:#ddaa77;color:#ffffff;}
body.springbrook #navigation li.cottagesbutton a {background-color:#ddaa77;color:#ffffff;}
body.spruce #navigation li.cottagesbutton a {background-color:#ddaa77;color:#ffffff;}
body.whitepine #navigation li.cottagesbutton a {background-color:#ddaa77;color:#ffffff;}


/* Small side bar for cottage names & navigation. */
#smallpane {color:#ffffff;float:left;width:167px;text-align:center;padding:0;margin:auto;background-color:#996644;}/*167.33px*/

/*Make the cottage bar float down/up as you scroll on the long pages.*/
/*body.northstar #smallpane {position:fixed;}*/
/*body.cottages #smallpane {position:fixed;}*/
body.northstar #smallpane {position:static;}
body.cottages #smallpane {position:static;}

/*The "Rental Units" title bar property. */
#smallpane .barred_title {/*background-color:#ddaa77;*/width:90%;margin:auto;}

/* classes for each image in sidebar, i.e., the cottage name images. Set default border as well */
.smallpaneimg_bal {border:2px solid #996644;padding:0;margin:auto;width:90%;}
.smallpaneimg_ced {border:2px solid #996644;padding:0;margin:auto;width:90%;}
.smallpaneimg_gran {padding:0;margin:auto;width:90%;border:2px solid #996644;}
.smallpaneimg_jun {padding:0;margin:auto;width:90%;border:2px solid #996644;}
.smallpaneimg_mapl {padding:0;margin:auto;width:90%;border:2px solid #996644;}
.smallpaneimg_red {padding:0;margin:auto;width:90%;border:2px solid #996644;}
.smallpaneimg_shad {padding:0;margin:auto;width:90%;border:2px solid #996644;}
.smallpaneimg_spri {padding:0;margin:auto;width:90%;border:2px solid #996644;}
.smallpaneimg_spru {padding:0;margin:auto;width:90%;border:2px solid #996644;}
.smallpaneimg_whi {padding:0;margin:auto;width:90%;border:2px solid #996644;}
.smallpaneimg_mount{padding:0;margin:auto;width:90%;border:2px solid #996644;}

/*Make these snazzy. Turn the border red when you hover.*/
.smallpaneimg_bal:hover {border:2px solid red;}
.smallpaneimg_ced:hover {border:2px solid red;}
.smallpaneimg_gran:hover {border:2px solid red;}
.smallpaneimg_jun:hover {border:2px solid red;}
.smallpaneimg_mapl:hover {border:2px solid red;}
.smallpaneimg_red:hover {border:2px solid red;}
.smallpaneimg_shad:hover {border:2px solid red;}
.smallpaneimg_spri:hover {border:2px solid red;}
.smallpaneimg_spru:hover {border:2px solid red;}
.smallpaneimg_whi:hover {border:2px solid red;}
.smallpaneimg_mount:hover {border:2px solid red;}

/*make the cottage buttons permanently outline red when on appropriate page. */
body.balsam .smallpaneimg_bal {border:2px solid red;}
body.cedars .smallpaneimg_ced {border:2px solid red;}
body.grandview .smallpaneimg_gran {border:2px solid red;}
body.juniper .smallpaneimg_jun {border:2px solid red;}
body.maples .smallpaneimg_mapl {border:2px solid red;}
body.mountainview .smallpaneimg_mount {border:2px solid red;}
body.redpine .smallpaneimg_red {border:2px solid red;}
body.shadynook .smallpaneimg_shad {border:2px solid red;}
body.springbrook .smallpaneimg_spri {border:2px solid red;}
body.spruce .smallpaneimg_spru {border:2px solid red;}
body.whitepine .smallpaneimg_whi {border:2px solid red;}
body.balsam .smallpaneimg_mount {border:2px solid red;}

.smallpane_list {padding:0;margin:auto;list-style-type:none;}

/****************************/
/*End the navigation stuff*/
/****************************/

/*****************/
/* Central pane */
/*****************/

.centralpane {/*width:66.8%;*/width:800px; padding:25px 0 0 0; margin:auto;}

/* Boxed Title for central pane pages */
.barred_title {display:block; /*background-color:#ddaa77;*/width:100%;margin:auto;}
.barred_title h3 {padding:2px;/*border: 1px solid #c59060;*//*padding:5px 10px 5px 10px;*/}
.bluepane h4 {padding:0;}

/**************************************/
/* Contacts page Table formatting */
/*************************************/

.centralpane table {width:100%; max-width:600px;margin:auto; border-collapse:collapse;border-bottom:1px solid #996644;}
.centralpane table td {padding:5px;}
table thead th {padding:5px;border:0; border-bottom: 1px solid #996644;border-top: 1px solid #996644;/*background-color: #deb887;*/}
table tbody tr.tabletitle {font-weight:bold; font-size:larger;}
/*.alternate {background-color:#f5deb3;} */ /* Alternate row color */

/* Cottage Page Tables*/
.cottagetables {/*border:1px solid #c59060;*/border-collapse:collapse;width:55%;border-bottom: 1px solid #996644;}
.cottagetables_contact {/*border:1px solid #c59060;*/border-collapse:collapse;width:55%;border-bottom:0;}
.cottagetables_contact th {text-align:left;font-size:large;}
.cottagetables_contact thead th {border-bottom:0;}
.cottagetables_contact td {padding:5px;}
.cottagetables th {text-align:left;font-size:large;}
.cottagetables td {padding:5px;}
.cottagetables thead th {border-bottom:0;}

/* Calendar Tables */
.calendartable{/*border:1px solid #c59060;*/border-collapse:collapse;border-bottom: 1px solid #996644;}
.open {font-weight:bold; background-color:#FFEE99;}
.caldiv {float:right;display:none}
.bookingblurb {float:left;width:60%;}

/*****************/
/* HTML LINKS*/
/*****************/

/* what do links look like on the pages */
a, a:visited, a:active {text-decoration:underline;color:#663333;}

/* Links on the tables */
 table a, a:visited, a:active {text-decoration:none;color:#663333;}
 table a:hover {border-bottom: 1px solid #000000;}

/*************************************************************/
/*Create More Specialized Containers For The Webpage.*/
/************************************************************/

/* The pane for content beside the cottage side bar */
#bigpane {margin:auto;padding:0;margin-left:167.33px;background:#ffffcc; /*border-left:1px solid #c59060;*/}  /*150px*/

/* Coloured boxes for rules etc... */
.bluepane {background-color:#bbd3ff;padding:10px;margin:auto;width:700px;}
.rulespane {background-color:#eecc99;padding:10px;line-height:1em;margin:auto;width:700px;}
.bluepane p {padding:0.2em; margin:0; line-height:1em;}
.bluepane h4 {padding:0;margin:10px 0 10px 0;}

/**********************************/
/*SPECIFIC COTTAGE PAGES*/
/*********************************/

/* Make the "booked message" for cottage pages. */
/* .booked {color:red;font-style:italic;} */
.booked {display:none;}
.available {display:none;}

/* Container for cottage and map pictures on cottage pages.*/
.cottagepic {float:right; width:350px;margin:auto;}

/* map and cottage image properties. */
.mappic {float:right;width:325px;}
.cotpic{float:right;width:325px;padding:0 0 5px 0;}

/*View full map text*/
.viewfull {font-size:x-small;float:right;}

/* Google Map and image-map settings on MAPS page*/
.mapholder {margin:auto;float:left;background:#ffffcc;}
.deeprivermap {width:250px;height:250px;float:left;padding:2px 20px 2px 2px;margin:auto;}
.bigmapobject {width:634px;height:400px;padding:0em 1em;}
#smallmap {width:300px;height:200px;}

/*Google Calendar Settings*/
.google_cal {width:100%;height:400px;}

/* define bold and Italic tags*/
b {font-weight:bold;}
i {font-style:italic;}

/* Image settings for North Star "Locations and Features" page */
.northstarimg {width:250px; padding:2px 20px 2px 2px;margin:auto;float:left;}

/* paragraphs */
p {width:auto; max-width:66em;text-indent:1em;}
p+p {text-indent:0;}
.bluepane p {text-indent:0;}
.printbutton {text-align:center;}

/***********************************************************/
/* Creating the Cottage Floor Map                          */
/***********************************************************/

/*Page properties for the floormap*/
#page-container2 {
    margin:auto;
    width:1300px;
    /*max-width:1002px;*/
    font-size:medium;
    background:#996644;
}

/*Generic name for the div holding the floormap*/
.mapcontainer {
text-align:center; width:100%;position:relative; margin:auto;
}

.gallerycontainer {
  width: 100%;
  margin: auto;
}

/*Basic option and name for the floormap image*/
mapimage {
  width:100%;
}

.galleryimage {
  width: 100%;
}

/***************/
/* Gallery CSS */
/***************/

div.gallery {
  display: inline-block;
  border: 1px solid #ccc;
  width: 32.99%;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

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