body	{	
	font-size:	1em;
	font-family: times, Times New Roman, times-roman, georgia, serif;	/***/
	font-size-adjust:	.52;
    background-color: #cae4db;
	color: black;
	}	

/*NOTE: A CSS preprocessor should be added but with a fairly small website I have not done so. To 'globally' change certain
 *things that apply to multipe areas of the pages I am currently using comments I can easily search for.
 *
 *      background-color: this is the background color for most of the doc.
 *      highlight: this is used for highlighting, including the Navigation indicator
 *      todo: these are reminders: I want to definitely notice that I still need to do. Sometimes style todos, sometime
 *      	just to take another look at and make a decision. Some may still remain for a later phase.
 *
*/

.wrapper {
    width: 100%;
    margin: 0 auto;
    background-color: #cae4db; /*background-color;*/
}


.phone_no {
	font-weight: bold;
}

header {
    width: 90%;
    background-color: #cae4db; /*background-color;*/
    height: 20%;
    display: inline-block;
    padding-top: 1%;
    }
    
.brand_head {
    width: 60%;
    float: left;
	margin-left: .5em;
}

p#todayinfo {
    font-style: italic;
    font-size: small;
    /*color: red;*/
}

h1, h2, h5, h6 {
        background-color: #cae4db;;  /*background-color*/
		font-variant: small-caps;
		text-transform: none;
		font-weight: 100;
		margin-bottom: 0;
}

h1, h2, h3 {
	font-weight: bold;
}

h1 {
    padding-top: 0em;
    padding-right: 0em;
    padding-bottom: .25em;
    padding-left: 0;
    margin: 0;
    font-size: 2.5em;
}

h2 {
	letter-spacing: .01em;
}

h3 {
	font-style: italic;
}

header p {
    padding-top: 0em;
    padding-right: 0em;
    padding-bottom: 0em;
    padding-left: 0em;
    margin: 0;
}

.brand_info {
    width: 15%;
    float: left;
    clear: right;
    font-size: small;
    display: inline-block;
    background-color: white; /*highlight*/
    border-radius: .5em;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.brand_logo {
    width: 15%;
    height: 18%;
    float: left;
    display: inline-block;
    padding-left: 4%;
}


.main_info {
    margin-left: 25%;
    margin-right: 25%; 
}

.main_info h3 {
    margin-bottom: 0;
}
.main_info p {
    margin-top: 0;
}

.notes_left {
    float: left;
    width: 16%;
    font-size: x-small;
    /*padding-left: 2%;*/
}

.notes_left img {
	/*box-shadow: 3px 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.08) inset;*/
	box-shadow: 4px -4px 4px rgba(0,0,0,.5);
}


.notes_left ul {
    /*border: thin solid blue;*/
    border-radius: .5em;
    background-color: white; 	/*highlight*/
	/*box-shadow:3px 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;*/
	/*box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;*/
	box-shadow: 4px -4px 4px rgba(0,0,0,.5);
}

.notes_left ul img {
	/*box-shadow: box-shadow: 4px -4px 2px rgba(0,0,0,.5);*/
	box-shadow: 3px 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.08) inset;
}

.notes_left ul li {
    display: inline-block;
    width: 40%;
    padding: 1%;
    margin: 2%;
	/*box-shadow:none;*/
}

.notes_right {
    float: right;
    width: 16%;
    font-size: x-small; 
}

.notes_right img {
	/*box-shadow: 3px 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.08) inset;*/
	box-shadow: -4px -4px 4px rgba(0,0,0,.5);
}

.notes_right ul {
    /*border: thin solid blue;*/
    border-radius: .5em;
    background-color: white; /*highlight*/
	/*box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;*/
	box-shadow: -4px -4px 4px rgba(0,0,0,.5);
}

.notes_right ul li {
    display: inline-block;
    width: 40%;
    padding: 1%;
    margin: 2%;
	/*box-shadow: none;*/
}

.notes_right ul img {
	/*box-shadow: box-shadow: 4px -4px 2px rgba(0,0,0,.5);*/
	box-shadow: 3px 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.08) inset;
}

.notes_bottom {
    float: left;
    width: 80%;
}


.tidbit {
    font-style: italic;
    font-size: small;
    font-weight: lighter;
}


img {
    max-width: 98%;
}

.banner {
    clear: both;
}

.banner img {
    max-width: 33.3%;
    float: left;
	padding-bottom: .5%;
}

#location_content {
    margin-right: 15%;
    margin-left: 15%;
}

section#loc_pic {
	float:left;
	width:80%;
	margin-left: 10%;
	margin-right: 10%;
	padding-bottom:1em;
}

section#loc_pic img {
	box-shadow: 3px 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.08) inset;
	width: 45%;
}

#map {
	width: 45%;
	height: 300px;
	float:right;
	padding-left:1em;
	box-shadow: none;
}

 div#map h1 {
	font-size: medium;
}

div#map img {
	box-shadow: none;
}

div#hideme img.printmap {
	display: none;
}

footer {
    clear: both;
}

/*
hr { 
    border : 0;
    height: 1px; 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    clear: both;
}*/

hr { 
    /*border-top : 3px double;*/
    height: 2px; 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    clear: both;
}
hr {
height: 3px;
	border: 0;
	box-shadow: 0 3px 3px -10px #8c8b8b inset;
	}

ul {
    padding-left: 1%;
}

section.twocol {
    display: inline-block;
    float: left;
    width: 50%;
}

li.listhead {
    font-weight: bold;
    list-style: none;
    
}


/* from notes slide 10 */
ul#sitenav {
  list-style: none;
  font-weight: bold;
  color: #1e1e1e;
  /*background-color: white;*/
  margin-top: 1em;
  margin-right: 5%;
  margin-left: 5%;
  width: 90%;
  padding-left: 1%;
}

ul#sitenav li {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 13%;
  border: none; 
  margin-right: 3px;
  text-align: center;
  font-variant: small-caps; text-transform: none; font-weight: 100; margin-bottom: 0;
  
}

ul#sitenav a {
  padding: 0.5em;
  margin-right: 0;
  /*background-color: white;*/
  width: 12%;
  
}

ul#sitenav a:link,
ul#sitenav a:visited {
  color: #4d635f;
  text-decoration: none;
}

ul#sitenav a:hover {
  color: #00303f;  
  text-decoration: underline;
}
ul#sitenav .active {  background-color: blue;}


ul#sitenav a.onthispage {
    background-color: white;
    border-radius: .5em;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.general_content {
    padding-left: 1%;
    padding-right: 1%;
}

footer #disclaimer {
    display: inline-block;
    font-weight: lighter;
    margin-top: 0;
    margin-right: 25%;
    margin-bottom: 0;
    margin-left: 25%;
}

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

@media print {
	
	.wrapper {
		background-color: white;
	}
	
	header {
		background-color: white;
		width: 80%;
		margin-top: 5%;
		margin-left: 5%;
		margin-right: 5%;
	}
	
	h1 {
		font-size: large; 
	}
	
	.brand_head {
		width: 50%;
	}
	
	.brand_head p {
		font-size: small;
	}
	
	p#todayinfo {
		display: none;
	}
	
	.brand_info {
		font-size: xx-small;
		width: 25%;
	}

   div#navigation {
      display: none;
   }
 
  
	div.general_content img {
		display:none;
	}
	
	div#map {
		display:none;
	}
	
	section#loc_pic h3 {
		margin-left: 5%;
		margin-right: 5%;
	}
	
	.notes_left ul {
		display: none;
	}
	.notes_right ul {
		display: none;
	}

/* Momentarily defeated by the maps api. Looks like I will have to use the Static Map API to print a google map.
 * 
 * todo		(my marker for things to revisit)
 * 
 * For now I display a static map that does allow printing. Will have to evaluate that going forward - not a great
 * idea to have to make 2 requests to google maps, but the other API does provide users a chance for zooming in/out,
 * etc. But it does not allow printing. There is probably a js or jQuery way I can trap the print event or media change
 * and then set the src attrib of the static map img tag, but I haven't found it yet.
 * Another alternativee would be to check out map APIs other than Google
*/
	div#hideme img.printmap {
		display: block;
		margin-left: 20%;
		margin-right: 20%;
	}

}