/*  
FILE NAME: global.css 
DATE MODIFIED:12 AUGUST 2015 10:00
DESCRIPTION: HTML 5 global.css
VERSION:1.0.3
/*HTML 5, 2015_3_3*/


html { height: 100%; }

body {
	margin:0;
	padding:0;
	height: 100%;
	line-height:1.4;
	color:#000;
	font-family:Verdana, helvetica, Arial, sans-serif;
	font-size:75%;
	/*background:#E3E5E6 url(graphics/bkgrndGradient.png) repeat-x left 60px;*/
	background-color: #E3E5E6;
}

#popup,
#feedback,

#show #content {
	width:95%; 
	position:inherit;
	margin:1em auto;
}
#popup #nonFooter{min-height: 94%;}
#popup #content{ 
	margin-top:1em;
	width:90%
	}

#nonFooter {
	position: relative;
	min-height: 100%;
}


#globalNav {
	float:left;
	left:0;
	width:11em;
	padding:0;
	margin:10px 10px 0 10px;
	font-size:1.1em;
	
}

nav {
	float:left;
	padding:1em 0 0;
	margin:0 25px;
	max-width: 900px;
}

#popup nav,
#show nav,
#feedback nav {
	float:right;
	top:0;
	padding:0;
	margin:0 10px 0 0;
}

#content {
	float:left;
	position:relative;
	vertical-align:top;
	padding:1em;
   	background: none repeat scroll 0 0 #fff;
    margin: 0em 1em;
   /* width: 60%;*/
	border-radius:10px;
	border:none;
}
.textContain {
	padding:0;
	margin:0;
	max-width:60em;
	overflow: hidden;
}

/* - - - - - - - - - - - - - - - navigation - - - - - - - - - - - - - - - */

/* ----- global navigation - 1st level ----- */

#globalNav ul {
	padding:0;
	margin:0;
}

#globalNav li {
	padding:0;
	margin:0;
	list-style:none;
}

#globalNav li span {
	font-weight:bold;
	display:inline;
	color:#333;
	margin-left: -0.7em;
}

/*#globalNav li a {
	display:block;
	padding:0.1em 0 0.1em 1em;
	margin: 2px 0 0 0;
	
	color:#000;
	background:#E6E6E6 ;
	border:1px solid #BBB;
	border-left:5px solid #BBB;
	text-decoration:none;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	font-size:90%;
}
*/
#globalNav li a {
	background-color:#fff;
	border-left:5px solid #FFFFFF;
    color: #000;
    display: block;
    font-size: 100%;
    margin: 2px 0 0 2px;
    padding: 0.3em 0 0.3em 1em;
    text-decoration: none;

}

#globalNav li a:focus,
#globalNav li a:hover,
#globalNav li a:active {
	border-left:5px solid #6D879F;
	background-color:#fff;
	background-image:none;
}

#globalNav li.selected a { color:#000; }

#globalNav li.selected a li a { background-image:none; }

#globalNav li.selected ul li a { background-image:none; }

#globalNav li.current a {
	color:#223b4a;
	background-color:#fff;
	background-image:none;
	border-left:5px solid #35506C;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

#globalNav ul li a.ui-state-active {
	border-left:5px solid #999;
	background-position:50% 71%;
	border-right: 5px solid #bbb;
	border-left: 5px solid #35506c;
    border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	margin-right: 5px;
	
}

#globalNav .ui-accordion-content {
	padding:0;
	margin:0;
	overflow:visible;
	position: static;/* fixes bug in ie6 which prevent 2nd level nav from displaying */
}

#globalNav .ui-accordion-content a { /*text-indent:1em;*/ 
padding-left:0.9em;}

#globalNav .ui-widget { /*font-size:100%; */}

#globalNav .ui-widget-content { border:none; }

/* ----- global navigation - 2nd level ----- */

#globalNav ul ul.ui-accordion-content {
	background: #BBB;
	margin: -1px 5px 2px 5px;
	padding:0 0 2px 0;
	display:static;
}

#globalNav li li a {
	margin: 0 5px;
	padding: 0.1em 0 0.5em;

}

/* ----- global navigation - 3rd level ----- */

#globalNav ul ul ul.ui-accordion-content {
	background: #ccc;
	margin: -1px 10px 2px 10px;
	padding:0 0 2px 0;
}

#globalNav li li li a {
	margin: 0 5px;
	padding:0.1em 0 0.1em 0em;
	border-left:5px solid #E6E6E6;
}

/* ----- global navigation - 4th level ----- */

#globalNav ul ul ul ul.ui-accordion-content { margin: -1px 5px 0 5px; }

#globalNav li li li li a {
	margin: 0 5px;
	padding:0.1em 0 0.1em 0em;
	border:0;
	background:none;
}

#globalNav li li li li a:hover,
#globalNav li li li li a:focus,
#globalNav li li li li a:active,
#globalNav li li li li.current a {
	margin: 0 5px;
	padding:0.1em 0 0.1em 0em;
	border:0;
	background:none;
}

/* --------------------------------------------- Non-integrated navigation - Secondary --------------------------------------------- */

nav ul {
	position:relative;
	display:inline;
	padding:0 0 4px 0;
	margin: 1em 0;
	/*top:0.7em;
	background:#e4e5e6;*/
}

#popup nav ul { background:transparent }

nav li {
	list-style:none;
	margin-left:1em;
	display:inline;
	font-size:1em;
	color:#333;
}

#popup nav li,
#show nav li {
	border:1px solid #000;
	padding:1px 2px 2px 2px;
}
#show nav li a, #popup nav li a{
    background-color:transparent;
	
}
	
	
	
nav li.current a:link,
nav li.current a:visited,
nav li.current a:focus,
nav li.current a:hover,
nav li.current a:active {
	/* This indicates "where you are" */
	color:#000;
	text-decoration:none;
	background-color:#fff;
	padding:7px 7px 15px 7px;
	
	font-weight:bold;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}

nav li a {
	background-color: #ccc;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    padding:7px 7px 15px 7px;
	text-decoration:none;
	margin-left: -4px;
}

nav li a:link,
nav li a:visited { color:#000; }

nav li a:focus,
nav li a:hover,
nav li a:active {
	color: #000066;
	text-decoration:underline;
}

/* ------------------------- Headings ----------------------- */

h1 {
	margin:15px 0;
	color:#11476C;
	font-size :130%;
	clear:both;
}

#title {
	background: #000 url(graphics/title_bg.png) repeat-x left bottom;
	padding:10px 0 10px 15px;
	margin:0;
}

#feedback #title {/* feedback title */
	background: #000 url(graphics/title_bg.png) repeat-x left bottom;
	padding:5px 0 5px 15px;
	margin:0;
}

#show #title { display:none; }

#feedback #title h1 { font: normal 180%/80% "Lucida Grande", Arial, sans-serif; }

#title h1 {
	font: normal 300%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #fff;
}

#title h1 span {
	display: block;
	width: 100%;
}

h2 {
	margin:15px 0 5px 0;
	color:#003366;
	font-size:115%;
	clear:both;
}

h3,
p.activityHead {
	margin: 15px 0 5px 0;
	color: #575757;
	font-size:110%;
}

h4 {
	margin:15px 0;
	font-size:100%;
	font-weight: bold;
	font-size:100%;
}

#content p {
	margin:5px 0;
	line-height:1.3;
}

#content p sub { line-height:1.5; }

/* --- Graphics --- */

p.figure img { /* Positions graphics in main content */ margin:0.3em 0 0 0; }

a img {/* ensure linked images do not display a border */ border:0; }

#content p.figure {
	border:0;
	margin:0.5em;
	padding:0.3em;
	text-align:center;
	clear:both;
}

#content p.figure span {
	display:block;
	background-color:#efefef;
}

#content p.figure.centre { padding:0; }

#content p.figure.centre img {
	text-align:center;
	margin:0 auto;
}

#content table div.ft,/* IE7 needs the specificity of table and textContain */
#content .textContain div.ft { height:auto; }

#content table div.ft p,
#content .textContain div.ft p {
	background-color:#efefef;
	padding:0;
}

#content div.ft + p { /* the paragraph immediately after the copyright and caption */ clear:both; /*  IE 7 seems to require this */ }

#content div.figure_text_right_wrap + p,
#content div.figure_text_left_wrap + p { clear:none; /* needed to counteract the global effects of clearing #content div.ft + p */ }

#content div.figure_text_left {
	width:98%; /* 98% needed to position correctly in IE6.  Width needed for FF 3 & Safari 3 */
	float:left;
	clear:left;
}

#content .figure_text_left p.caption,
#content .figure_text_left p.copyright {
	text-align:left;
	margin:0;
	padding:0.3em 0;
	float:left;
	clear:both;
}

#content div.figure_text_left_wrap {
	margin:0 0.3em 0 0;
	padding:0 0.3em;
	float:left;
	clear:left;
}

#content .figure_text_left_wrap p.caption,
#content .figure_text_left_wrap p.copyright {
	text-align:left;
	margin:0 0.3em 0 0;
	float:left;
	clear:left;
}

#content div.figure_text_centre {
	width:98%; /* 98% needed to position correctly in IE6.  Width needed for FF 3 & Safari 3 */
	margin:0 auto;
	padding:0 0.3em;
	float:none;
	clear:both;
}

#content .figure_text_centre p.caption,
#content .figure_text_centre p.copyright {
	text-align:center;
	margin:0 auto;
	padding:0.3em 0;
	float:none;
	clear:both;
}

#content div.figure_text_right {
	width:98%; /* 98% needed to position correctly in IE6.  Width needed for FF 3 & Safari 3 */
	margin:0;
	padding:0 0.3em;
	float:right;
	clear:right;
}

#content .figure_text_right p.caption,
#content .figure_text_right p.copyright {
	text-align:left;
	margin:0;
	padding:0.3em 0;
	float:right;
	clear:both;
}

#content div.figure_text_right_wrap {
	margin:0;
	padding:0 0.3em;
	float:right;
	clear:right;
}

#content .figure_text_right_wrap p.caption,
#content .figure_text_right_wrap p.copyright {
	text-align:left;
	margin:0;
	padding:0.3em 0;
	float:right;
	clear:right;
}

#content p.figure.right {
	text-align:left;
	float:none;
	clear:both;
	margin:0.5em 0 0 0;
}

#content p.figure.left {
	text-align:left;
	float:none;
	clear:both;
	margin:0.5em 0 0 0;
	padding:0;
	display:inline;
}

#content p.figure.right.wrap {
	float:right;
	clear:both;
	margin:0;
}

#content p.figure.left.wrap {
	float:left;
	clear:none;
	margin:0 0.5em 0 0;
}

#content p.figure.right.wrap +p { clear:none; }

#content p.figure.left.wrap +p { clear:none; }

#content p.figure.right +p { clear:right; }

#content p.figure.left +p { clear:left; }

#content p.figure.left +p.figure.left,
#content p.figure.right +p.figure.right { zoom:1 }

p.caption {
	/* Caption text style for graphics rendered in main content */
	color:#204162;
	font-size:90%;
	max-width:100%;
}

#content p.copyright {
	color:#4B6075;
	font-size:80%;
	max-width:100%;
}

/* end of graphics styles */

#content p.backToTop { clear:both; }

strong,
b { /* Used to emphasise text within a paragraph */ font-weight: bold; }

blockquote {
	/* Positions the text style for quotations and extracts.
	IMPORTANT: the text is styled with 'blockquote p' */
	margin:5px 10px 5px 50px;
	max-width:345px;
}

blockquote p {
	/* Renders the text styles for quotations and extracts */
	margin:5px 0;
	font-size:95%;
	color:#003366;
}

cite { }

em,
i { /* Used for any italicised texts in a paragraph. 
Its recommended that the values are inherited from 'p' 
as it could conflit visually with 'strong' */ }

/* popups and audio pages already have a print link so remove this second one in the footer */
#popup a.printLink,
#audio a.printLink { display:none; }

#audio { margin-top:1em; }

abbr,
acronym {
	cursor:help;
	border-bottom:1px dashed #000;
}

code {
	font-family:Courier, "Courier New", monospace;
	font-size:110%;
	display: block;
	white-space: pre;
}

pre { margin:0; }

/* --------------------- Standard lists --------------------- */
#content ul,
#content ol {
	max-width:40em;
	padding-left:2.5em; /* left padding needed if max-width is used. */
	margin:0;
}

#content li {
	margin:0;
	color:#000;
}

li p {
	/* Positions a list item's second or subsequent paragraph(s) */
	margin:5px 0;
	color:#000;
	vertical-align:text-top;
}

ul li ul li {
	/* Unordered list nested once */
	list-style-type:circle;
	margin:0.3em 0 0.3em 0em;
	display:list-item;
}

ol li ol li {
	/* Ordered list nested once */
	list-style-type: lower-alpha;
	margin :5px 5px 5px 35px;
	display:list-item;
}

ol li ol li ol li {
	/* Ordered list nested twice */
	list-style-type:lower-roman;
	margin :5px 5px 5px 35px;
	display:list-item;
}

dl {
	border:1px solid #5A5A5A;
	padding:0;
	margin:0;
	width:96%;
	max-width:600px;
}

dt {
	border-bottom:1px solid #5A5A5A;
	background-color:#EDF1F5;
	font-weight:bold;
	color:#003366;
	padding:3px;
	margin:0;
}

dd {
	padding:3px;
	margin:0;
}

/* --------------------- Table of content classes --------------------- */
#content div.toc { border:solid 1px #efefef; }

#content div.toc h2.tochead {
	border-bottom: 1px dotted #999;
	background-color:#efefef;
	margin:0;
	padding:0 0 0 0.5em;
}

#content div.toc ul { padding:0.5em; }

#content div.toc li { list-style-type:none; }

#content div.toc a.tocLink:link { }

/* --------------------- Pseudo classes --------------------- */

/* --- Standard links --- */

a:link { color:#000; }

a:visited { color:#575757; }

a:focus { color:#003366; }

a:hover { color:#003366; }

a:active { color:#575757; }

#popup #content a:link { display: inline-block }

a.wikipedia {
	background: url(graphics/wikipedia.png) no-repeat center right;
	padding-right:18px;
	text-decoration:none;
	border-bottom:dotted 1px #999;
}

a.dictionary {
	background: url(graphics/dict.gif) no-repeat center right;
	padding-right:18px;
	text-decoration:none;
	border-bottom:dotted 1px #999;
}

p.expand { clear:both; }

#content div.toggle p.expand,
#content div.toggle div.toggle { margin-left:1em; }/* nested expandable #nonFooters */

a.expandable {
	padding-left:18px;
	display:inline-block; /* fixes an IE bug where the first plus is not clickable */
}

a.closed { background: url(graphics/plus.png) no-repeat top left; }

a.open { background: url(graphics/minus.png) no-repeat top left; }

/* --------------------- footer --------------------- */
footer {
	display:block;
	position: relative;
	clear:both;
	width: 100%;
	margin: -5.5em 0 0 0;
	padding: 1.1em 0;
	height:3em;
	border-top:0.2em solid #e7e4ff;
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color: #333;
	background: #fff;
}

.push { /*ensures content layer clears footer*/
	height:5em;	/*must equal the same height as the footer*/
	clear:both;
}

#feedback footer { }

#show footer { margin-top:-5.5em; }

#popup footer p,
#show footer p { width:90%; }

#feedback footer p { width:380px; }

footer p {
	position:absolute;
	margin:0;
	width:100%;
	height:20px;
	top:20px;
	background:url(graphics/neals.gif) no-repeat 5px top;
}

footer p#secondaryFooterInfo {
	max-width:100%;
	padding:0.5em 0;
}

footer #copyright {
	position:absolute;
	top:8px;
	padding-left:70px;
}

footer #print { }
a:hover {
	/*border: 0.5px #0232DF dotted;*/
	

}

footer a, footer a:hover, footer a:focus  {
	color: blue;
	padding:1em 1em 0 2em;
}

footer p#pagination {
	position:absolute;
	margin:0 0 0 -225px;
	width:450px;
	left:50%;
	top:10px;
	background-image:none;
}

footer p#pagination span {
	width:18%;
	float:left;
}

footer p#pagination span#start { }

footer p#pagination span#back { }

footer p#pagination span#location { text-align:center; }

footer p#pagination span#next { text-align:right; }

footer p#pagination span#end {
	float:right;
	text-align:right;
}

a.printLink { margin-left:1.5em; }

a.printLink:link,
a.printLink:visited { color:#575757; }

a.printLink:focus,
a.printLink:hover,
a.printLink:active { color:#003366; }

/* ----------------- Activity styles ---------------- */

.actdiv {
	background-color:#fff;
	padding:0.5em;
	width:90%;
	border:1px #5A5A5A dashed;
	margin:0.5em 0;
}

.actdiv p {
	/* Paragraph text style for activity. 
	Questions are tagged within strong tags and rendered using the the style for 'strong' */
	margin:0.5em;
	color:#000;
	font-size:100%;
}

.activityTitle { font-weight:bold; }

label.activityLabel { }

input { }

.actinput,
textarea {
	/* Renders the text styles for 'input' box (missing word activities) and 
	'textarea' (short answer question activities). */
	font-family:Arial, Verdana, helvetica, sans-serif;
	font-size:95%;
	color:#000;
}

.shortAnswerTextarea { width:95%; }

.actinput {
	/* Renders the margins either side of the 'input' box */
	margin:0;
	padding:0;
	width:3em;
	display: block;
	float: left;
}

p.actbutton {
	padding:1em 0;
	margin:0.1em 0;
}

p.actbutton a {
	/* These attributes render the look and feel of the feedback buttons */
	/* top, right, bottom, left */
	margin:0;
	font-family:Verdana, helvetica, Arial, sans-serif;
	font-size:90%;
	text-decoration:none;
	font-weight:bold;
	padding:0.3em;
	border-bottom:2px #5A5A5A solid;
	border-right:2px #5A5A5A solid;
	background-color:#e5e5e5;
}

p.actbutton a:link { color:#000; }

p.actbutton a:visited { color:#575757; }

p.actbutton a:focus { color:#003366; }

p.actbutton a:hover { color:#003366; }

p.actbutton a:active { color:#000; }

/* --- Table style for JavaScript activities --- */

table.activity {
	/* If this table is not rendered in the '.actfieldset' then 
	its recommended that the width not exceed 96% */
	margin:0 0 15px 0;
	width:100%;
	border-collapse:collapse;
}

table.activity td {
	/* Contains the text style for JavaScript activities */
	font-family:Verdana, Helvetica, Arial, sans-serif;
	color:#000;
	background-color:transparent;
	padding:0;
	border:0 #000 solid;
	vertical-align:middle;
}

/* -------------------- Styles for tables ------------------- */

/* --- Tabular table styles --- */

table.tabular {
	/* Its recommended that the width not exceed 96% */
	/*width:96%;*/
	margin:10px 0 10px 0;
	border-collapse:collapse;
	min-width:0;
	max-width:600px;
	font-family:Verdana, Helvetica, Arial, sans-serif;
	padding:0;
	margin:0;
	border-collapse:collapse;
	clear:both;
}

caption {
	/* Accessibility related captions for tabular tables */
	padding:1em 0 0.5em 0;
	color:#000;
	font-weight:bold;
	text-align:left;
}

table.tabular th {
	color:#003366;
	font-weight:bold;
	padding:3px 5px;
	background-color:#EDF1F5;
	border:1px #5A5A5A solid;
	vertical-align:top;
}

table.tabular td {
	/* Contains the default text style for tabular data. 
	IMPORTANT: Its recommended that text within tabular tables 
	appear within p tags and styled with 'td p' */
	color:#000;
	font-size:90%;
	text-align:left;
	padding:3px 5px;
	background-color:#fff;
	border:1px #5A5A5A solid;
	vertical-align:top;
}

table.tabular th.ta,
table.tabular td.ta,
table.layout th.ta,
table.layout td.ta { vertical-align:top; }

table.tabular th.ma,
table.tabular td.ma,
table.layout th.ma,
table.layout td.ma { vertical-align:middle; }

table.tabular th.ba,
table.tabular td.ba,
table.layout th.ba,
table.layout td.ba { vertical-align:bottom; }

table.tabular p {
	/* Paragraph text style for tabular tables */
	margin:5px 5px 5px 0;
	color:#000;
}

table.tabular li {
	/* Ordered and unordered list style for tabular tables */
	color:#000;
	margin:0 5px 5px -10px;
	display:list-item;
	text-align:left;
}

table.tabular ol li ol li {
	/* Nested ordered list for tabular tables */
	list-style-type:lower-alpha;
	margin:5px 0 0 -10px;
}

table.tabular p.caption {
	/* Caption text style for graphics rendered in tabular tables */
	margin:5px;
	color:#204162;
	text-align:left;
	/* Positions graphics inserted in tables */
	margin:0;
}

table.tabular img { }

/*-----the first element after a layout table should be cleared  ------- */
table.layout {
	padding:0;
	margin:0;
	border-collapse:collapse;
	clear:both;
}

table.layout tr { vertical-align:top; }

.layout + * { clear:both; }

/* --------------- Feedback styles ------------------- 
IMPORTANT: These styles render the texts in the feedback windows */

h1.feedback,
p.feedback { margin:15px; }

/*---------------Audio styles -------------------------- */
.transcript { visibility:visible; }

.audio { padding:0.5em }

/*---------------End of audio styles -------------------------- */

form {
	margin:0;
	padding:0;
}

.right { float:right; }

.left { float:left; }

.wrap { }

.forty { width:40%; }

.clear { clear:both; }

.clearLeft { clear:left; }

.qStem { font-weight:bold; }/*stem for a question */

.printOnly {
	display:none;
	font-size:1px;
}/* for footnoteLinks */

/*skip links */
p.skip,
p.skip a {
	position:absolute;
	left: 0;
	top:-20px;
	padding: 0 0.5em;
	margin:0;
	width: 13.2em;
	z-index: 0;
	background-color:#000;
}

.skip a:focus,
.skip a:active {
	display: inline;
	z-index: 2;
	border: solid black 1px;
	color: #cc0;
	text-decoration: none;
	position: absolute;
	top:20px;
	left: 0
}

.skip a#cont {
	position: absolute;
	top: -1000px;
	width: 13.2em;
}

.skip a#cont:focus,
.skip a#cont:active {
	top:0;
	left:0;
	z-index: 2
}

.skip a:hover { cursor: default }

/*--------------- Tab styles -------------------------- */
.ui-tabs .ui-tabs-hide { display: none !important; }

#tabs div > h3:first-child { display:none; }

.ui-widget-content {
   overflow:hidden;
}

/*--------------- Misc -------------------*/

p.noscript {
	color:#000;
	Background:#fff;
}

/*------------- Image Gallery ----------------------------*/
.imagelist {list-style:none;}
.imageitem {display:inline;}

/*------------External link icon--------------------------------------*/
a.external{
	background: url("graphics/Icon_External_Link.png") no-repeat right;
	padding-right:12px;
}
a span.sr{
	position:absolute;
	left:40px;
	width:100px;
}
/*-------external link exemptions --------*/
#footer a.external, footer a.external {background:none!important;}


/*------------newWindow--------------------------------------*/

.newWindow #content{
	margin-top: 3em;


}
/*---------audio description toggle buttons---------------*/
.posterPrintOnly {display:none;}
.audioDescription{
	background: url("graphics/audio_description_off.png") right no-repeat;
    float: right;
    height: 23px;
    width: 53px;
}

.audioDescription:hover {
                background: url("graphics/audio_description_off_hov.png") right no-repeat;
}
.audioDescription:focus {
                background: url("graphics/audio_description_off_hov.png") right no-repeat;
}


.standardVideo {
	background: url("graphics/audio_description_on.png") right no-repeat;
	float: right;
   	height: 23px;
   	width: 53px;
}

.standardVideo:hover {
                background: url("graphics/audio_description_on_hov.png") right no-repeat;
}
.standardVideo:focus {
                background: url("graphics/audio_description_on_hov.png") right no-repeat;
}


.videocontainer{
	max-width:53em;

}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}


=            Bootstrap 3 Media Queries             =
==================================================*/

    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }
	/* Landscape phone to portrait tablet */
	@media (max-width: 767px) { 
	#content{
		top:10px;
		width:80%;
	}
 	}
	

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
	#content{
	margin-top:-4px;
	border:1px white solid;
	width: 80%;
	margin:0;
	}
	nav {
   	 float: none;
    }
	nav li {
   	 margin-left:5px;
	 font-size:0.9em;
    }
	}
    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }



    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {


    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        
    }