/* HTML5 ? Boilerplate
 * ==|== normalize ==========================================================
 */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 16px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ffffff; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/* ------ Section 1 - Global Page Structure ------- 
Colours 
#638B9A light teal
#304F54 darker teal

#999900 lighter green
#333300 darker green
*/

.wrapper{
	width:90%;
	margin:0 5%;
}

#header-container{border-bottom: .35em solid #304F54;} /* dark teal */
/* To do edit image to just a small logo */
/* background-image: url(../images/header-image.jpg); */ 

#footer-container{ border-top: .25em solid #304F54;
                            border-bottom: .125em solid #304F54;
                            text-align:center; }     /* dark teal */

#BottomPageReturns {
	margin-top: .5em;
}

#main aside      { border-top: 1em solid #304F54;     /* dark teal  */
                          border-right: .2em solid #304F54;
                          border-left: .2em solid #304F54;
                          border-bottom: .2em solid #304F54;
                          }

#main .side-bar-nav      { border-top: 1em solid #304F54;     /* dark teal  */
                                    border-right: .2em solid #304F54;
                                    border-left: .2em solid #304F54;
                                    border-bottom: .2em solid #304F54;
                                    font-size: .9em;
                                   }

#main .side-bar-nav a     { text-decoration: none;
                                   }
                          
#main-container{
	background: #ffffff;
	}
	
#header-container,
#footer-container{
	background:#638B9A   /* lighter teal */
}

#article-wrapper {
	background:#FFFFFF;
	border: .15em solid #FFFFFF;     /* this was the dark orange wrapper around all pages, article-wrapper needs to be removed from all pages. Set to white here. */
     border-radius: 2em 2em 2em 2em;
     padding-top: 1.4em;
     padding-right: 2em;
     padding-left: 2em;
     padding-bottom: 2em;
}

#title{ color:white; }

::-moz-selection { background: #A5C8DF; color: #fff; text-shadow: none; }
::selection      { background: #A5C8DF; color: #fff; text-shadow: none; }



/* ===================================================
    Section 2 - Initial styles
   =================================================== */


/* ------ Global Body, Font and Link Settings ------ */

body {
#f0f5fb;  /* pale color for browser window background color and footer top border */
  margin:0;
  padding:0;
  font: Verdana, Geneva, Arial, Helvetica, sans-serif;
  color:#000;
  }
  
   
h1 {
background-color: transparent;
color: #000;
clear: both;
font:1.2em Georgia,Serif;
text-transform:uppercase;
text-align: center;
padding-bottom:.25em;
margin:0;
font-weight:normal;
}

h2, h3, h4, h5, h6 {
margin-top: 1em;
}

h2      {
        font-size:1.3em;
        line-height:1.4em;
         }

h3	{
	font-size:1.2em;
	 }

h4	{
	font-size:1.1em;
	 }

blockquote {
margin: 12px 56px;
color: #006;
font-size: 1em;
line-height: 2em;
font-family: 'Courier New', Courier, monospace;
}

code {
color: navy;
}


/* Image Styling */

img {
border: 0 solid #ddd;
}

.imgWithMargin {
margin: .25em;
}

a:link img {
border: 0;
}

/* List Styling */

li.Indent {
  margin-left: 1.1em;
  padding-left: 0px
}

li.IndentRound {
  list-style-type: disc;
  margin-left: 1.1em;
  padding-left: 0px
}

ul.BulletIndent {
  text-align: left;
  margin-left: 2em;
  padding-left: 0px
}

ul.NoBulletNoIndent {
  text-align: left;
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px
}

ul.NoBulletIndent {
  text-align: left;
  list-style-type: none;
  margin-left: 2em;
  padding-left: 0px
}

ul.SquareBulletNoIndent {
  list-style-type: square;
  margin-left: 2em;
  padding-left: 0px
}

ol.NoIndent {
  text-align: left;
  list-style-type: decimal;
  margin-left: 2em;
  padding-left: 0px
}


/* -- General Link Styling -- */

a:link {
color: blue; 
text-decoration: underline;
}

a:visited {
color: purple;
text-decoration: underline;
}

a:hover {
color: red;
text-decoration: underline;
}


/* General Footer Styling
----------------------------------------------- */

.footer em {
  font: 1em Georgia,Serif;
  text-transform:uppercase;
  font-style:normal;
  color:#fff;
  }

/* Global Text Styles
----------------------------------------------- */

.note {
	font-weight: bold;
	font-size: 1em;
}

/* Global Table Styling */

   

table {
	font-size: 1em;
	border-width: 1px;
	border-spacing: 1px;
	border-style: solid;
	border-color: black;
	border-collapse: collapse;
	background-color: white;
}

table th {
	border-width: 1px;
	padding: 4px;
	border-style: solid;
	color: white;
	border-color: #304F54;
	background-color: #638B9A;
	vertical-align:top;
}

table td {
	border-width: 1px;
	padding: 5px;
	border-style: solid;
	color: black;
	border-color: #304F54;
	background-color: white;
	vertical-align:top;
}

/* Google Ad Styling
----------------------------------------------- */

.AdBox {
	margin: 0em;
}


/*  On Page Navigation Boxes

----------------------------------------------- */

#OnThisPage {

padding: 0px 0px 0px 0px;
margin: 0em 2em 2em 0em;
text-decoration: none;
}

.ReturnToNavBox {
background-color: #fff;
width: 90%;
/* border-top: 1px solid #7788BE; */
border-bottom: 1px solid #7788BE;
margin: 0 auto 12px auto;
padding: 4px;
}

/* ------ Section 7 - Frequently Used Styles ------ */

.Clear {
clear: both;
}

.Caption {
font-size: .75em;
font-weight: bold;
color: #000;
display: block;
line-height: 1.5em;
margin-bottom:4em;
}

.PhotoCredit {
font-size: .75em;
font-weight: normal;
color: gray;
display: block;
line-height: 1.5em;
margin-bottom:.75em;
text-align: center;
}

/* -- Floats -- */

.ItemRight {
float: right;
margin: 2px 0 12px 18px;
text-align: center;
}

.ItemRightClear { 
float: right; 
clear: right; 
margin: 2px 0 12px 18px;
text-align: center;
}

.ItemCenter {
margin: 2px auto 12px auto;
text-align: center;
clear: both;
}

.ItemCenter img {display:block ; margin:0 auto ;}

.ItemLeft {
float: left;
max-width: 100%;
margin: 0em 3em 3em 0em;
}

.ItemLeftClear {
float: left;
clear: left;
max-width: 100%;
margin: 0em 3em 3em 0em;
}

/* Blog Styling
----------------------------------------------- */

/* -- Blog title and description ids -- */
#blog-title {
  margin:0 0 .25em;
/*  font-size:200%; */
  font-weight:normal;
  }
#blog-title a {
  color:#678;
  text-decoration:none;
  }
#description {
  margin:0;
  max-width:600px;
  font-size:80%;
  line-height:1.8em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#678;
  padding-bottom:20px;
  }

/* Blog Post Styling
----------------------------------------------- */
.date-header {
  margin:2em 0 .5em;
  font:small Georgia,Serif;
/*  font:78%/1.4em Georgia,Serif; */
  color:#933;
  }
.post {
  margin:.5em 0 1.5em;
  line-height:1.6em;
  padding-left:30px;
  }
.post-title {
  margin:.25em 0 0;
  padding:0 0 4px;
  width: 100%;
/*  font-size:100%;  */
  font-weight:normal;
  line-height:1.4em;
  }

.post-title1 {
  margin:.25em 0 0;
  padding:0 0 4px;
  width: 50%;
/*   font-size:100%;  */
  font-weight:normal;
  line-height:1.4em;
  border-bottom: 1px solid #8f8fb3;
  }

.post-title a, .post-title strong {
  display:block;
  padding-left:20px;
  text-decoration:none;
  color:#368;
  font-weight:normal;
  }
.post-title strong {
  color:#000;
  }
.post-title a:hover {
  color:#933;
  }
.post-body {
  padding-top:6px;
  }
.post p {
  margin:0 0 .75em;
  }
p.post-footer {
  color:#999;
  }
.post-footer em, .comment-link {
  font:78%/1.4em Georgia,Serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
.post-footer em {
  font-style:normal;
  color:#666;
  margin-right:.4em;
  padding-top:8px;
  }

.post img-caption {
  margin-top:4px;
  margin-bottom:4px;
  text-align:center;
  }

.post img {
  padding:4px;
  border:1px solid #8f8fb3;
  margin-top:4px;
  margin-bottom:4px;
  align:center;
  }
  
  /* -- Image-with-Caption Navigation -- */

.ImageLink {
max-width: 100%;
text-align: center;
margin: 1em;
}

.ImageLink .LinkCaption {
text-align: left;
font-size: .75em;
}

.ImageLink a:link {
text-decoration: none;
color: blue;
}

.ImageLink a:link .LinkCaption {
text-decoration: none;
color: blue;
}

.ImageLink a:hover .LinkCaption {
text-decoration: none;
color: red;
}

.ImageLink a:visited .LinkCaption {
text-decoration: none;
color: purple;
}


/* -- Thumbnail-with-Caption Navigation -- */

.ThumbnailLink {
text-align: center;
}

.ThumbnailLink a:link {
text-decoration: none;
color: blue;
}

.ThumbnailLink a:link .LinkCaption {
font-size: 90%;
text-decoration: none;
color: blue;
}

.ThumbnailLink a:hover .Caption {
text-decoration: underline;
color: red;
}

/* =============================

BEGINNING OF STYLES FOR MULTI-SCREEN each section below gives the styling for different device screen sizes

*/


/* ======================
    MOBILE: MENU -- styles for any screens up to 30em (480px)
    
    There is no media query here, these are the default styles. Each screen size higher has styles changed as necessary by media queries as listed in the subsequent sections.
    
   ============== */

#menu {
display: block;
}

#menu  ul {
    list-style: none outside none;
    padding: 0;
} /* no bullets */

#menu a:link {
text-decoration: none;
color: #FFFFFF;
} /* no underlining */

#menu a:focus { 
outline: thin solid;
}

#menu li {
    float: left;
    display: block;
    list-style: none outside none;
    margin: 0;
    position: relative;
    z-index: 3;
}

#menu li a, #menu li a:visited {
    border-left: 1px solid #304F54;
    border-right: 1px solid #304F54;
    display: block;
    color: #FFFFFF;
    font-size: 0.8em;
    font-weight: 500;  
    letter-spacing: 0.045em;
    line-height: 1em;
    padding: 1.2308em 1em;
    text-decoration: none;
    text-transform: uppercase;
}
/*
#menu li:first-child a, #menu li:first-child a:visited { border-radius: 1em 0 0 0;  }
	#menu li:last-child a, #menu li:last-child a:visited { border-radius: 0 1em 0 0; }	
*/

#menu li a:hover {
    background: -moz-linear-gradient(center top, #638B9A, #304F54) repeat scroll 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 5px white inset;
    border-left: 1px solid #333300;
    color: #ffffff;
}

#nav-menu {
    display: none;
} /* Menu Button that appears only for smaller screen sizes */

#main-navigation {
    display: block;
/*  background: -moz-linear-gradient(center top, rgba(204, 102, 0, 0.6) 0%, rgba(255, 151, 0, 0.6) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-top: 1px solid #304F54;
    border-radius: 1em 1em 0 0; */
    clear: both;
    max-width: 100%;
    min-height: 2.8em;
    margin-top: .4em;
} /* styling for background and size of main nav bar */

#main-navigation ul {
    list-style: none outside none;
    padding: 0;
} /* no bullets */

#main-navigation a:link {
text-decoration: none;
color: #FFFFFF;
} /* no underlining */

#main-navigation a:focus { 
outline: thin solid;
}

#main-navigation li {
    float: left;
    list-style: none outside none;
    margin: 0;
    position: relative;
    z-index: 3;
}

#main-navigation li a, #main-navigation li a:visited {
/*    border-left: 1px solid #304F54;    */
    display: block;
    color: #FFFFFF;
    font-size: 0.8em;
    font-weight: 500;  
    letter-spacing: 0.045em;
    line-height: 1em;
    padding: 1.2308em 1em;
    text-decoration: none;
    text-transform: uppercase;
}
/*
#main-navigation li:first-child a, #main-navigation li:first-child a:visited { border-radius: 1em 0 0 0;  }
	#main-navigation li:last-child a, #main-navigation li:last-child a:visited { border-radius: 0 1em 0 0; }	
*/
#main-navigation li a:hover {
    background: -moz-linear-gradient(center top, #638B9A, #304F54) repeat scroll 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 5px white inset;
    border-left: 1px solid #333300;   
    color: #ffffff;
}

/* ----- Navigation Drop Down Menu Styling ------- */

#main-navigation li ul {
    display: none;
}  /* without this displays expanded menu */


#main-navigation li:hover ul {
    display: block;
    position: absolute;
}   /* this makes the drop down items appear when you hover over a main menu item*/
 
#main-navigation li li a, #main-navigation li li a:visited, #main-navigation li li a:hover {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
    border-color: -moz-use-text-color #ccc #ccc;
    border-image: none;
    border-right: 1px solid #ccc;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    letter-spacing: 0;
    padding: .8em .5em;
    text-transform: none;
    width: 15em;
}
#main-navigation li li a:link, #main-navigation li li a:visited {
    background: none repeat scroll 0 0 #FFFFFF; /* i made it to here  screen shifts though postion relative something ??? */
    color: #000000;
}
#main-navigation li li a:hover {
    background: none repeat scroll 0 0 #638B9A; /* drop down hover */
    box-shadow: none;
    color: #fFFFFFF;
}

#main-navigation li li:first-child a, #main-navigation li li:first-child a:visited { border-radius: 0 0 0 0;  }
	
/*
#main-navigation li li:last-of-type a {
    border-radius: 0 0 1em 1em;
    }
*/



/* Table Styling */

table.basic {
	font-size: .25em;
    }

table.narrow {
	font-size: .65em;
    }

table.med-width {
	font-size: .7em;
    }
    
table.wide {
	font-size: .65em;
    }

table.centered {
     font-size: .3em;
  }

table.centered th {
	font-size: smaller;
	text-align: center;
}

table.centered td {
	font-size: smaller;
	text-align: center;
}

table.noborder {
	border-width: 0px;
	background-color: white;
}

table.noborder th {
	border-width: 0px;
	padding: 4px;
	text-align: center;
}

table.noborder td {
	border-width: 0px;
	font-size: .8em;
	padding: 3px;
	text-align: center;
}

/* Form Styling */

select {
	font-size: .55em;
}


/* ==============
    MOBILE: Main
   ============== */
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* only for ie8 */
}

#large-header {
	display: none;
}

#main{
	padding:30px 0;
}

#main article h1{
	font-size: 1.2em;
}

#main article h2{
	font-size: 1.0em;
}

#main aside{
	color:black;
	padding:0em 1em 0em 1em;
}

#main .side-bar-nav{
	color:black;
	padding:0em 1em 0em 1em;
}

#footer-container footer{
	color:white;
	padding:20px 0;
}

#OnThisPageRightOrAbove {
      text-decoration: none;
}

   #OnThisPageRightOrAbove li {
	padding-top: .25em;
	padding-bottom: .25em;
         }

/* ==============
    MOBILE: Classes
   ============== */
 
 .note-cell {
	display: block;
	font-weight: bold;
	font-size: 1em;
}
 
.ImgArticleFirst{ 
   display: none;
   text-align: center;
   margin: 0em 0em .5em .5em;
   }

.ItemRightOrAbove{ 
   display: block;
   text-align: center;
   margin: 0em 0em .5em .5em;
   }
 
 /* in class below there is no float to clear (from an ItemRightOrAbove) but this class needs to be here or items using this class will not appear as display: block otherwise */
.ItemRightOrAboveClear{ 
   display: block;
   text-align: center;
   }
   
   .ItemLeftOrAbove{ 
   display: block;
   text-align: center;
   margin: 0em .5em .5em 0em;
   }
 
 /* in class below there is no float to clear (from an ItemLeftOrAbove) but this class needs to be here or items using this class will not appear as display: block otherwise */
.ItemLeftOrAboveClear{ 
   display: block;
   text-align: center;
   }
   
   /* used to have a  width */
 .AdLeftOrBelow {
       margin: 2em 3em 3em 0em;
       text-align: center;
      }
      
.AdRightOrBelow {
       margin: 2em 0em 3em 2em;
       display: block;
       text-align: center;
      }
      
/*  Mobile Responsive Ad Styling  */

   .medium { width: 180px; height: 150px; }
   .large { width: 200px; height: 200px; }
   .banner { width: 200px; height: 60px; }


/* ===============
    ALL: IE Fixes
   =============== */

.ie7 #title{ padding-top:20px; }


/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* ==|== media queries ====================================================== */

@media only screen and (min-width: 30em) {

/* ====================
    480 px +: Menu
    
    No Changes to 320px menu
    
   ==================== */

/* ==============
    480 px +: Main  
   ============== */

/* can be slightly bigger than for mobile */
#main article h1{
	font-size: 1.4em;
}

#main article h2{
	font-size: 1.0em;
}

/* ====================
    Table Styling - larger fonts for tables than 320px
   ==================== */

table.basic {
	font-size: .7em;
}

table.narrow {
	font-size: .8em;
    }

table.med-width {
	font-size: .8em;
    }
    
table.wide {
	font-size: .7em;
    }

table.centered {
     font-size: .5em;
     }
     
table.noborder td {
	font-size: .9em;
}

/* Form Styling */

select {
	font-size: .9em;
	padding: .1em;
}

	/* ====================
    480 px +: Classes
   ==================== */
   
   /* Use the note-cell class to provide notes to small screen (<480px) users only. This class is not visible for larger screens. */
  .note-cell {
	display: none;
    }
   
   .ImgArticleFirst{ 
   display: inline;
   float: right;
   max-width: 100%;
   height: auto;
   width: auto\9; /* only for ie8 */
   text-align: center;
   }
   
   /* ========================
    480 px +: Responsive Ad Styling 
   ======================== */
   
            .medium { width: 300px; height: 250px; } 
            .large { width: 300px; height: 250px; }
            .banner { width: 320px; height: 50px; }
	
	
/* ========================
    480 px +: IE Fixes 
   ======================== */

	#main-navigation ul li{
		display:inline;
	}	
	.oldie #main-navigation a{
		margin:0 0.7%;		
	}
}

@media only screen and (min-width: 37.5em) {

/* ====================
    INTERMEDIATE: 600 px Menu (Large Logo Text and Button show now --but still not the whole nav bar)
   ==================== */

#large-header {
	display: block;
}

#small-header {
	display: none;
}


/* ==============
    INTERMEDIATE: 600 px Main 
   ============== */

/* Table Styling */

table.basic {
	font-size: 1em;
}

table.centered {
     font-size: .7em;
     }
     
table.noborder td {
	font-size: 1em;
}


/* can be bigger than for mobile */
#main article h1{
	font-size:1.6em;
}

#main article h2{
	font-size:1.1em;
}

	.ItemRightOrAbove {
        float: right;
        display: inline;
        margin-top: .5em;
        text-align: center;
        }      
        
   /* class below is to use after an ItemRightOrAbove when two items need to float right and appear one above the other as opposed to side by side */
	.ItemRightOrAboveClear {
        float: right;
        clear: right;
        display: inline;
        margin-top: .5em;
        text-align: center;
        }        

	.ItemLeftOrAbove {
        float: left;
        display: inline;
        margin-top: .5em;
        text-align: center; 
        }      
        
   /* class below is to use after an ItemRightOrAbove when two items need to float left and appear one above the other as opposed to side by side */
	.ItemLeftOrAboveClear {
        float: left;
        clear: left;
        display: inline;
        margin-top: .5em;
        text-align: center;
        }        
	
	/* ====================
    INTERMEDIATE: Classes -- Check these
   ==================== */

.AdLeftOrBelow {
       float: left;
       margin: 2em 3em 3em 0em;
       text-align: center;
      }
      
.AdRightOrBelow {
       float: right;
       margin: 2em 0em 3em 2em;
       text-align: center;
      }
      
/*  ---------- Responsive Ad Styling  */

            .large { width: 336px; height: 280px; }
            .banner { width: 468px; height: 60px; }
	
}

@media only screen and (min-width: 48em) {

/* ====================
    WIDE (768 px): CSS3 Effects
   ==================== */

	#header-container,
	#main aside, .side-bar-nav{
		-webkit-box-shadow:0 .5em .75em #aaa;
		   -moz-box-shadow:0 .5em .75em #aaa;
		        box-shadow:0 .5em .75em #aaa;
	}


/* Table Styling */

table.basic {
	font-size: 1em;
}

table.narrow {
	font-size: 1em;
    }

table.med-width {
	font-size: 1em;
    }
    
table.wide {
	font-size: 1em;
    }

table.centered {
     font-size: 1em;
}

/* ============
    WIDE: Menu
   ============ */
	
	#title{
		float:left;
	}
	
	/* Menu Button that appears only for smaller screen sizes */  
#menu {
display: none;
}

#menu  ul {
    display: none;
} 

#menu a:link {
display: none;
} 

#menu a:focus { 
display: none;
}

#menu li {
    display: none;
}

#menu li a, #menu li a:visited {
    display: none;
}

#menu li:first-child a, #menu li:first-child a:visited { display: none;  }
	#menu li:last-child a, #menu li:last-child a:visited { display: none; }	

#menu li a:hover {
    display: none;
}

     #nav-menu {
    display: block;
              } 


============ */

/* ============
    WIDE: Main
   ============ */
   
   /*  ---------- Responsive Ad Styling  */

     .banner { width: 620px; height: 90px; }
            
	#main article{
	
	}
	
		
	#main aside{
		float:right;
		width:28%;
		margin-left: 2em;
	}      

	#main .side-bar-nav{
		float:right;
		width:20%;
		margin-left: 2em;
	}
      
       #OnThisPageRightOrAbove {
          float: right;
          margin: 0em 0em 0em 0em;
          }
	
}

@media only screen and (min-width: 64em) {

/* ====================
    Tablet (1024 px) --- wider banner ads
   ==================== */
   
     /*  Responsive Ad Styling  */
            
   .banner { width: 728px; height: 90px; }
   }

@media only screen and (min-width: 71.25em) {

/* ===============
    Maximal Width 1140px
   =============== */

	.wrapper{
		width:1026px; /* 1140px - 10% for margins */
		margin:0 auto;
	}
	
	/* added a right margin for wide screens */
  #OnThisPageRightOrAbove {
          float: right;
          margin: 0em 2em 0em 0em;
          }
   
}

/* ==|== print styles ======================================================= */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}