/* CSS Document for Screens */

@import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic);

body { font-family: 'Lato', sans-serif;font-size:18px;font-weight:400;color:#000;margin:0;padding:0}

#page { max-width:1200px; margin:0 auto; position: relative }

/* Text */

h1 {margin:0 0 0.5em 0; font-size:2.8em; font-weight:700;}
h2 {margin:0 0 .5em 0; font-size:1.6em; font-weight:700; line-height:1.1em}
h3 {margin:0 0 .5em 0; font-size:1.3em; font-weight:700}
h4 {margin:0 0 1.5em 0; font-size:1em; font-weight:700}

p { margin: 0 0 1em 0}
b {font-weight:bold;}
a { color:#007eff; }
sup { vertical-align: top; font-size: 0.6em; }

a.btn {font-size:1.2em; text-decoration:none;color:#fff;
       border:1px solid #fff;padding:4px 15px;
       transition: background-color .5s;}
a.btn:hover {background-color: rgba(0,0,0,.3); }

/* Header */

header { height:250px; background: url(../images/dreams_ttl.gif) no-repeat left top; position: relative; text-align:right;}

header div.hero h2 {margin: 0 10px 0 0;}
header div.hero h3 {margin:0 10px 0 0;}
header div.hero {width:100%; position:absolute; top:128px;}

header div.links { position:absolute; top:5%; right:2%;}
header div.links aside {float:right; margin-right:0px;}
header div.links aside .box {padding: 8px 8px 8px 8px;text-align:center;}
header div.links aside .box img {display:block; margin-left:auto; margin-right:auto; margin-bottom:0px;width:45px;}

/* Section All */

section {padding:0 0px; }
section::after { content:''; display:block; clear:both; }

/* Section Main */

section.mainchunk {width:100%;}

section.boxes {width:75%; float:left; margin-top:20px;margin-bottom:0px;padding:0; }
section.boxes aside {width:50%;float:left; text-align:left;}
section.boxes aside a {text-decoration:none; color:#000;}

section.boxes .content {margin:0px 20px 20px 0; height:370px; padding-top:0px;background-color:#cccccc; border: 1px solid black;}

section.boxes .content img {width:100%;}
section.boxes .content p {margin:10px 10px 10px 10px;}

section.boxes aside h3 {margin:5px 10px 5px 10px;text-align:center; }
section.boxes aside h3 a {color:#000; text-decoration:none;}
section.boxes aside h3 a:hover {text-decoration:underline;}

section.newsitem {width:75%; float:left; margin-top:20px;margin-bottom:30px;padding:0; }
section.newsitem aside {margin-left:5px; margin-right:20px;}
section.newsitem aside p {clear:both;color:#000;}
section.newsitem aside img {display:block; float:none; max-width:100%;margin:20px auto 20px auto;}
section.newsitem aside img.flotg {display:block; float:center; max-width:100%;margin:20px auto 20px auto;}
section.newsitem aside img.leftfloat {display:block; float:left; max-width:100%; margin:20px 10px;}
section.newsitem aside .quoteblock {display:block; float:none; width:90%; background-color: #999; margin:20px auto 20px auto; padding: 10px 10px 2px 10px;}
section.newsitem aside iframe {display:block; float:none; max-width:100%; margin:20px auto 20px auto;}
section.newsitem aside table {margin-top:2em; margin-bottom:2em;margin-left:auto;margin-right:auto;	border-collapse: collapse;}
section.newsitem aside table td {padding:2px 7px;margin:0;text-align:left; border: 1px solid black;}

/* section.boxes aside .content.trending {background-image: url(../images/icon_star.svg);}
section.boxes aside .content.find-it {background-image: url(../images/icon_marker.svg);}
section.boxes aside .content.tools {background-image: url(../images/icon_gear.svg);}                */

/* Section Atmosphere */

section.indepth {width:25%; float:left; margin:20px 0 0 0; color:#fff}
section.indepth .sidecontent {padding: 20px 20px 20px 20px;background-color:#222}
section.indepth aside img {max-width:100%;}
section.indepth aside a {text-decoration:none; color:#fff;}
section.indepth .sidebox {padding:0;}

/* Navigation */

nav {background-color:rgba(0,0,0,.65);
   position:absolute;
   top:210px; left:0px;
   padding: 0px 0 0 0 ;
   width:100%;

}

nav::after{content:''; display:block;clear:both;}

nav ul{list-style:none; margin:0; padding:0px;}
nav ul li:hover {background-color: #2b0306;}
nav ul li:hover > ul {display:block;}

nav ul li a {
	display: inline-block;
	color:#fff;
	padding: 10px 20px;
	text-decoration:none;
	width:225px;
	position:relative;
}
nav ul li a:visited{color:#fff;}
nav ul li a:hover{background-color:#6d0911;}

nav ul ul {position:absolute; top:100%;background-color:#2b0306;
	display:none;}
nav ul ul li {position:relative; }
nav ul ul ul {left:100%; top:0px;}


/*  Top Level  */

nav > ul {padding-left:20px;}
nav > ul > li {float:left;}
nav > ul > li > a {width:auto; padding: 10px 20px 15px 20px;}

nav a[aria-haspopup="true"]::after{
	content: '';
	display:black;
	width:0px; height:0px;
	position:absolute;
	top:16px; right:15px;
	border-top:4px solid transparent;
	border-bottom:4px solid transparent;
	border-left: 4px solid #fff;
}

nav > ul > li > a[aria-haspopup="true"]::after {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #fff;
	left:20px; right:auto;
	bottom:6px;
	top:auto;
}

/* Footer */

footer {font-size:.8em; margin:0 0 10px 0; color:#999;float:none;}
footer .content {display:inline; }

/*  Media Queries    */

@media screen and (max-width:1200px) {

  section.mainchunk {margin-left:5px; margin-right:5px; width:auto;}

}

@media screen and (max-width:900px) {

  section.boxes { width:100%; float:none;}
  section.newsitem { width:100%; float:none;}
  section.indepth {width:100%; float:none;}
  section.newsitem aside {margin-left:0px; margin-right:0px;}
  section.boxes .content.l {margin:0px 10px 20px 0;}
  section.boxes .content.r {margin:0px 0px 20px 10px;}

  section.indepth aside {float:left;margin-right:10px;}
  header div.hero h2 {font-size:1.4em;}
  header div.hero h3 {font-size:1.0em;}
  header div.hero {width:100%; position:absolute; top:135px;}
}

@media screen and (max-width:720px) {

header { height:125px; background-size:720px;}
header div.hero {display:none;}
header div.links {top:45%;}

nav {position:static; width:auto; padding:20px 15px; background-color: #4b0a0c;
   margin-left:5px; margin-right:5px;margin-top:5px;}

nav ul,
nav ul ul,
nav ul ul ul {display:block;position:static;}

nav > ul {padding:0;}
nav > ul > li {float:none;margin-top:8px;}

nav ul li:hover {background:none;}
nav ul li a {
     width:auto;
     font-size:0.75em;
     display:block;
     margin:4px 10px;
     padding: 4px 15px;
     border:1px solid rgba(255,255,255,.25);
}
nav ul li a:hover {background-color:rgba(255,255,255,.2);}

nav ul ul {background:none;}
nav ul ul li a {margin-left:30px;}
nav ul ul ul li a {margin-left:60px;}

nav a[aria-haspopup="true"]::after {display: none;}

}

@media screen and (max-width:464px) {

   h1 { font-size:1em;}
   h3 { margin-bottom:0px;}
   a.btn {font-size:.9em;}

   section.boxes aside {width:100%; float:none; text-align:left;}
   section.boxes .content {height:auto; padding-bottom:10px;}

   section.boxes .content.l {margin:0px 0px 20px 0;}
   section.boxes .content.r {margin:0px 0px 20px 0px;}

   footer div.content {display:block;margin-top:15px;}
   footer div.content a {margin: 0 20px 0 0;}
}


@media screen and (max-width:425px) {

    footer::after {content:''; display:block; clear:both;}

    footer div.content a {
    	display:inline-block;
        margin: 0 0 10px 0;
        float:left;
        clear:both;}
}