/* ### This is used to show/hide ads for desktop/mobile pages ### */

.adslot_1 { display:inline-block } /* side ad for .ap pages */
@media (min-width: 768px) { .adslot_1 { width:160px;height:600px; } }
@media (max-width: 767px) { .adslot_1 { display: none } } /* hide for mobile */
.adslot_2 { display:block }
@media (max-width: 767px) { .adslot_2 { display: none } }  /* hide for mobile users */
.adslot_5 { display:block }
@media (max-width: 767px) { .adslot_5 { display: none } }  /* hide for mobile users */
@media (min-width: 768px) { .adslot_10 { display: none } }  /* hide for desktop users */
.adslot_11 { display:block }
@media (min-width: 768px) { .adslot_11 { display: none } }  /* hide for desktop users */
.adslot_12 { display:block }
@media (min-width: 768px) { .adslot_12 { display: none } }  /* hide for desktop users */

/* ################ */	
/* #### Desktop #### */
/* ################ */		
@media screen and (min-width: 768px){ /* >= 768px (includes iPads) */

.mobile-pg { display: none } 

/* This content is from "style-css.css" */

html, body {
	margin: 0;
	padding: 2px; /* Decreased from 4px to fit content on iPad without getting cut off on right side */
	background: #EEF;
	}

#presidents li, p {
	font-size: 12pt;
}

#index .adslot_1 {
  display:inline-block;width:160px;height:240px;
  }
	
h1 {	
	color: #00F;
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	border-bottom-color: #00F;
	margin-top: 0px;
	margin-bottom: 2px;
	}
	
a, p, h1, h2, h3, h4, ul, li {
	font-family: arial, helvetica, sans-serif;
	}

#page-container {
	background: white;
	width: 760px; /* 760px+4px+4px should fit on the iPad, but it doesn't. So, the padding is decreased to 2px. iPad width = 768px */
	margin: auto;
	/*box-sizing: border-box; adds padding within the original width of the element */
	/*border: 1px solid red;*/
	}

@font-face {
	font-family: 'OzHandRm';
	src: url('font/ozhandrm-webfont.eot');
	src: url('font/ozhandrm-webfont.eot?#iefix') format('embedded-opentype'),
		 url('font/ozhandrm-webfont.woff') format('woff'),
		 url('font/OzHandRm.ttf') format('truetype');
		 url('font/OzHandRm.svg#OzHandRm') format('svg');
	font-display: block;
	}
	
#logo {
    margin-left: 15px;
	}

#nav-bar { /*this section is used to center the nav-bar; i'm not sure of another way to do this */
	background-color: blue;
	padding-left: 20px; 
	padding-bottom: 0px;
	margin: 0;
	height: 29px; /*this is required so that the content below the nav bar is adequately spaced; otherwise, the nav bar will be zero height*/
	}

#nav-bar ul { 
	float: left;
	list-style-type: none;
	margin: 0; /* remove browser default settings*/
    padding: 0; /* remove browser default settings*/
	}
	
#nav-bar ul li {
	float: left;
	}

#nav-bar a {
	display: block; /* removes white space between some of the links */
	padding-left: 15px; /* adjusts spacing between each element */
	padding-right: 15px;
	padding-top: 0px;
	padding-bottom: 0px;
	}
	
#nav-bar ul ul{
    display: none; /* hides the drop-down links when not hovering over them */
	position:absolute; /* this makes the dropdown menu go on top of any text this is below it */
	}
	  
#nav-bar ul li:hover ul { display: block; padding-top: 0px; }	  
	
#nav-bar ul ul li{
	float: none; /* makes the dropdown list vertical */
	}
	
#nav-bar ul ul li a { /* makes the dropdown list centered in the dropdown */
	padding-left: 26px; /* adjusts spacing between each element */
	padding-right: 25px;	
	}

#nav-bar a, #nav-bar a:visited {  /*changed from a:link to a*/
	background-color: blue;
	color: white;
	font-size: 18pt;
	font-family: OzHandRm, arial;
	text-decoration: none;
	text-align: center;
}

#nav-bar a:hover, 
#nav-bar a:active, 
body#index a#nav-home,
body#ap a#nav-ap,
body#ap-15e a#nav-ap-15e,
body#ap-16e a#nav-ap-16e,
body#ap-17e a#nav-ap-17e,
body#presidents a#nav-presidents,
body#links a#nav-links,
body#fb a#nav-fb,
body#faq a#nav-faq,
body#exam a#nav-exam,
body#ad a#nav-ad,
body#contact a#nav-contact {
	background-color: rgb(86,140,205)
	}

#nav-ap {
	background-image: url('../images/menu-arrow-down.png');
	background-position: right center;
	background-repeat: no-repeat;
	}
	
#search-bar {
	float: right;
	margin-top: 7px;
	margin-right: 15px;
	padding: 0;
	width: 300px;
	}
	
#side-bar {
	float: right;
	padding-right: 15px;
	padding-left: 7px;
	padding-top: 40px; /*ensures clearance from dropdown menu */
	width: 160px;
	}

#content-top { 
	margin-left: 15px;
	margin-top: 0px; 
	/*border: 1px solid red;*/
	padding-top: 10px;
	align: left;
	width: 430px;
	}
		
#content { /* available width is 730px due to padding */
	margin-left: 15px;
	width: 563px; /* 760-15-x-7-160-15=563; 603px for 120x240 ad*/
	}

.content-noad { /* no side ad */
	width: 730px; /* 760-15-15=730px */
	}

#footer {
	margin-top: 20px; /* use this to make the page taller */
	clear: both; /* ensures that the sidebar doesn't extend into the footer */
	font-size: 10pt;
	font-family: arial, helvetica, sans-serif;
	margin-left: 16px; /* 760-728=32px */
	/*height: 400px;*/
}

#chapter {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-color: #00F;
	padding-bottom: 3px; 
	padding-top: 3px
	}
	
#prev-chapter {
	visibility: hidden;
	}
	
}

/* ################ */	
/* #### Exceptions for Tablets #### iPad width=768px */
/* ################ */	
@media (max-width: 900px) { /* Don't show dropdown menu for tablets; max-width of iPad is 768px */
	#nav-bar ul li:hover ul { display: none; }
	#nav-bar ul li:onclick ul { display: none; }
	
	@font-face {
	font-family: 'OzHandRm';
	src: url('font/ozhandrm-webfont.eot');
	src: url('font/ozhandrm-webfont.eot?#iefix') format('embedded-opentype'),
		 url('font/ozhandrm-webfont.woff') format('woff'),
		 url('font/OzHandRm.ttf') format('truetype');
		 url('font/OzHandRm.svg#OzHandRm') format('svg');
	font-display: block;
	}
	
	}

/* ################ */	
/* #### Mobile #### iPad width=768px */
/* ################ */	

/* Mobile ads */
/* According to Google, you can't use percent or em in defining the size of responsive AdSense ads 
/* Note that setting the size of the ad code via CSS in external style sheets is not officially supported. */

@media screen and (max-width: 767px) {
	.desktop-pg { display: none } 	
	
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.0em;
  margin: 0;
}

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: white;
  color: black;
}

.topnav {
  overflow: hidden;
  background-color: #003366;
  position: relative;
  margin-bottom: 5px;
}

.topnav #m-nav-links {
  display: none;
}

.topnav a {
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-decoration: none;
  font-size: 2.0em;
  display: inline-block;
}

.topnav a.logo-text {
  padding-top: 0px;
  }

#chapter_mobile-1 {
	background-color: rgb(235,235,235);
	padding-top: 0.4em; 
	padding-bottom: 0.4em
    }

#chapter_mobile-2 {
	background-color: white; 
	padding-top: 0.4em; 
	padding-bottom: 0.4em;
}

@font-face {
	font-family: 'OzHandRm';
	src: url('font/ozhandrm-webfont.eot');
	src: url('font/ozhandrm-webfont.eot?#iefix') format('embedded-opentype'),
		 url('font/ozhandrm-webfont.woff') format('woff'),
		 url('font/OzHandRm.ttf') format('truetype');
		 url('font/OzHandRm.svg#OzHandRm') format('svg');
	font-display: block;
	}
	
.logo-text {
	font-family: OzHandRm, arial;
	height: 1.25em;
	margin-right: 20px;
	width: 250px; /* make wide enough so that the top bar is generally clickable */
	}
	
.logo {
	vertical-align:middle;
	width: 1.5em;
	height: 1.5em;
	}

#m-nav-links a {
	font-size: 1.0em;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(235,235,235);
	padding-left: 16px;
	display: block;
    }

.main {
  margin-top: 2px;
  }

.nav-btn {
  display: inline-block;
  cursor: pointer;
  background: #003366;
  position: absolute;
  right: 0;
  top: 0;
  color: white;
  padding-right: 10px;
  padding-top: 10px
}

.bar1, .bar2, .bar3 {
  width: 20px;
  height: 3px;
  background-color: white;
  margin: 4px 0;
  transition: 0s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 4px) ;
  transform: rotate(-45deg) translate(-6px, 4px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -4px) ;
  transform: rotate(45deg) translate(-6px, -4px) ;
}

.footer {
font-size: 0.75em;
}

}