/*
 *
 *
 *
 *
 *
 * layout and nav
 * d
 */





/* layout */

header {
  grid-area: header;
}

nav#nav {
  grid-area: mainmenu;
}


#content {
  grid-area: mainbody;
}

footer#footer {
  grid-area: footer;
}

#outer {
    display: grid;
    min-height: 100vh;
    height: 100vh;
    grid-template-areas:
        "header"
        "mainmenu"
        "mainbody"
        "footer"
    ;
    grid-template-columns: 1fr;
}
/* 540 43em (688px) */
@media (min-width: 43em) {
  #outer {
        grid-template-areas:
            "header header"
            "mainmenu mainbody"
            "footer footer"
        ;
        grid-template-columns: 1fr 2fr;
        grid-template-columns: 14em 2fr;
        grid-template-columns: 186px 2fr;
  }
}

/* 800 62em (992px) */
@media (min-width: 62em) {

  #outer {
        grid-template-areas:
            "header header header"
            "mainmenu mainbody mainbody"
            "footer footer footer"
        ;
       	grid-template-columns: 1fr 3fr 1fr;
       	grid-template-columns: 15em 2fr;
		grid-template-rows:
			minmax(min-content, max-content)
			auto
			minmax(min-content, max-content)
		;
  }


}



/* 1600 82em (1312px) */
@media (min-width: 82em) {
#outer {margin: auto; max-width: 1600px;}
}


/* hp only */


#home #contentblock {
	display: grid;
	grid-gap: 0em;
	grid-template-columns: 1fr;
	}

	#welcomemsg {
		grid-column: 1;
		grid-row: 1;
	}

	#siteupdate2 {
		grid-column: 1;
		grid-row: 2;
		margin: 0 !important;
		width: auto !important;

	}

	#sidebarhm {
		grid-column: 1;
		grid-row: 3;
		margin: 0 !important;
		width: auto !important;
		margin-top: 1em !important;

	}



@media (min-width: 62em) {

#home #contentblock {
	display: grid;
	grid-gap: 1em;
	grid-template-columns: 2fr 1fr;
	}

	#welcomemsg {
		grid-column: 1 / 3;
		grid-row: 1;
	}

	#siteupdate2 {
		grid-column: 1;
		grid-row: 2;

	}

	#sidebarhm {
		grid-column: 2;
		grid-row: 2;
		margin-top: 0 !important;


	}

}



@media (min-width: 82em) {

#home #contentblock {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-columns: 2fr 1fr;
	}

	#welcomemsg {
		grid-column: 1 / 2;
		grid-row: 1;
	}

	#siteupdate2 {
		grid-column: 1 / 2;
		grid-row: 2;

	}

	#sidebarhm {
		grid-column: 2;
		grid-row: 1 / 3;
		margin-top: 1em !important;


	}

}









/* b style */

header, #header, footer#footer, #footer{
	background-color:#333;
	margin:0 0;
}

#content{
	background-color:#fefefe;

}
nav#nav, #nav{
	background-color:#111;
}

#pagetitle {margin-bottom:2em;}


#contentbody {padding-left: 0.5em; padding-right: 0.5em;}
#contentbody {padding-bottom: 1.5em; padding-top:0;}
 #urhere {padding-left: 0.5em !important;}

@media (max-width: 43em) {
 html, body {width: 100%; max-width: 100vw; min-width: 100%;}
 body {height:100vh; overflow-x: hidden;}
 #outer {
   overflow-x: hidden; 
   overflow-x: visible; 
   position: relative; 
   max-width: 100vw; 
   width: 100%; 
   min-width: 100%;
   }
 main {max-width: 100vw; width: 100%; }


}

@media (min-width: 43em) {
  #contentbody {padding-left: 1.5em; padding-right: 1.5em;}
}

@media (min-width: 62em) {
 #contentbody {padding-left: 2em; padding-right: 2em;}
}

@media (min-width: 43em) {
#urhere {padding-left: 1em !important;margin-bottom:-1px !important;}
}


nav, #nav {/*margin-top:-1px !important;*/}

  /* exps */
  body.sectab #outer, body#home #outer {
  	background-color: #000;
  }

body {
/*	background-repeat: repeat-x;
	background-position: bottom;
	background-attachment: fixed;
	*/
}

body.sectab, body#home {
        background: linear-gradient(to bottom, #000 calc(75vh - 175px), #1a1a1a) fixed;
}

body.secresource, body.secequip, body#e404 {
	background: linear-gradient(to bottom, #ccc calc(75vh - 175px), #8e8e8e) fixed;
}


body#e404 {
       background-color: #ccc;
}


#outer {
  min-width: 100%;
  height: 100%;
}

body.secequip, body.secresource {
	background-color: #ccc !important;
}


body.sectab #outer, body#home #outer {
  	background-color: #000;
  }

body.secequip #wrapper, body.secresource #wrapper {
  	background-color: #fcfcfc;
  }

body.secequip #outer, body.secresource #outer {
background-color: #fcfcfc;
}

@media (min-width: 82em) {

#outer {
	margin-left: auto;
	margin-right: auto;
	min-width: auto;
}

body#e404 #outer {

	border-left: 1px solid #666666;
	border-right: 1px solid #666666;
/*	border-bottom: 1px solid #666666; */

}

  body.sectab #outer, body#home #outer {
	border-left: 1px solid #333;
	border-right: 1px solid #333;

  }


body.secequip #outer, body.secresource #outer {

	border-left: 1px solid #666666;
	border-right: 1px solid #666666;

}



}


#contentfooter {padding: 0; margin: 4em 0 -1em;}
#contentfooter p {font-size: 86%;}

footer#footer {
  	background: #000 !important;
  }

  body.secequip footer#footer, body.secresource footer#footer,
  body.secequip #footer, body.secresource #footer {
  	background-color: #fff !important;
  }

footer hr, #footer hr {
  	display: none !important;
  }

  #footernav {
  	border: none;
  }



body.secequip div#footernav, body.secresource div#footernav {
	border-top:1px solid #ccc;
}

body.sectab div#parentsite, body#home div#parentsite {float: right;}

body.sectab #stmt1, body#home #stmt1 {

margin-right: 106px;
margin-left:auto;
	}

	/* table size fix for limited width */
body#ptgear table.equiptable td {
font-size: 86%;
}




/*
 *
 * media
 **************************
 */


 /* media width */

@media screen and (max-width: 62em) {
 /* equip dual lists */
div.innernav
div.innernavcol1 {
	float: none;
	width: auto;
	padding: 0;
}
div.innernav
div.innernavcol2 {
	float: none;
	width: auto;
	padding: 0em;
}

div#siteupdate2 {
 margin-right: 16.5em;
}

div#sidebarhm {
width: 15.5em;
}
}

@media screen and (max-width: 43em) {


div.mediaobject, img {max-width:100% !important; height: auto !important;}
div.photo, div.photo img {max-width: 100% !important; width: auto !important; height: auto !important;}


}

@media screen and (max-width: 43em) {

div#siteupdate2 {
 margin-right: 16em;
}

div#sidebarhm {
width: 15.0em;
}

}

@media screen and (max-width: 62em) {

div#siteupdate2 {
 margin-right: 15em;
}
div#sidebarhm {
width: 14.0em;
}

}




@media screen and (max-width: 43em) {

div#banner p#subtitle {font-size: 100%; }

#footernav ul li {padding: 0.25em !important;}
div#footernav ul li.first,
div#footernav ul li.last,
div#footernav ul li {display:list-item; border:none; float:none; text-align:left !important; list-style:none;}

.photo.r {margin:0 !important; float:none !important;}

}


/* media width */
@media screen and (max-width: 43em) {




div.mediaobject, img {max-width:100% !important; overflow:hidden; height: auto !important;}
div.photo, div.photo img {max-width: 100%; height: auto;}

#nav ul li a {padding-left:4px !important;}

#nav ul {margin:0;}
#banner {overflow:hidden;}
div#banner p#subtitle {font-size: 100%; font-weight:normal !important; }

div#sitetitle {float:none !important;}

p.abstract {margin:0 !important;}

.secequip div.sidebartable {float:none !important;margin:0 0 1em 0; width:auto; clear:both;}

div.equipnav ul li.first, div.equipnav ul li.last,
div.equipnav ul li,
div#footernav ul li.first,
div#footernav ul li.last,
div#footernav ul li {display:list-item; border:none; float:none; text-align:left !important;}
div#parentsite {display:none !important;}

#contentbody blockquote {margin-left: 0.5em; margin-right: 0.5em;}
#contentbody .secd ul {padding-left:1em;}
#contentbody .secd blockquote {margin-left: 0em; border-left: 2px solid #b4c3e2; padding-left: 0.5em;}
#contentbody .secd blockquote.callout {border-left: 1px solid #006; margin-left: 0.5em !important; margin-right: 0.5em !important;}
.narrow {width:auto; margin-right:0 !important;}
.photocoll, .photocontainer {float:none !important; width:auto !important;}

div#sitetitle a {margin:0; display:block !important; /*width:100% !important;*/ height:auto !important;}

div#stmt1 {width:auto !important; margin:0 !important;}
}












/* nav only */


@media screen and (max-width: 43em) {
#banner p#subtitle, #banner #subtitle_n {display:none;}

.thr header#banner {box-shadow:0px 0px 12px 0px rgba(0,0,0,0.75) }
.thd header#banner {box-shadow:0px 0px 12px 0px rgba(0,0,0,0.75); }

}




/* masthead */

		#banner {
			border-bottom: 1px solid #222;
			background-color: #222;
			clear:both;
			display:block;
			min-height:88px;
			min-height: 64px !important;
			background: linear-gradient(to right, #000 200px, #222, #111) fixed;


	}




		/* for restricted liquid width */


/* temp */

/*
#sitetitle_n {background: #111 url(whotabslogo_180.png) no-repeat 0 50%;}
#sitetitle_n {background: #111 url(whotabslogo_180.png) no-repeat 0 50%;}
#sitetitle_n a {display: block; width: 100%; height:100%; text-decoration:none; min-height:88px;}

#sitetitle_n {background: #111 url(whotabslogo_f.png) no-repeat 0 50%; background-size: 186px; }
#sitetitle_n a {display: block; width: 100%; height:100%; text-decoration:none; min-height:98px;}








#sitetitle_n {background: #111 url(whotabslogo_180.png) no-repeat 0 50%;}
#sitetitle_n {background: #111 url(whotabslogo_180.png) no-repeat 100% 50%;}

#sitetitle_n a {display: block; width: 100%; height:100%; text-decoration:none; min-height:88px; min-height: 100%;}
*/

#sitetitle_n {
  background-image: url(whotabslogo_f.png);
  background-repeat: no-repeat;
  background-position: 99.0% 50%;
  background-size: 150px;
  min-height: 100%;
  min-height: 64px;
  }

  #sitetitle_n a {display: block; width: auto; text-decoration:none; min-height: 100%; height: 64px; margin-left: 186px;}




#sitetitle_n p#subtitle {
        font-size: 1em !important;
}

@media (min-width: 43em) {
  #banner {min-height: 88px !important;}
  #sitetitle_n {background-size: 162px; background-position: 12px 50%; right: 0px; }
  #sitetitle_n a {height: 88px;  margin-left: 0;}
}

@media (min-width: 62em) {
    #banner {min-height: 108px !important;}
    #sitetitle_n {background-size: 186px; background-size: 220px;}
  #sitetitle_n a {height: 106px;}
}

@media (min-width: 82em) {
    #banner {min-height: 108px !important;}
    #sitetitle_n {background-size: 186px; background-size: 220px;}
  #sitetitle_n a {height: 106px;}
}




#sitetitle_n p#sitetitle-t {position: absolute; left: -999em;}

#sitetitle_n {
  min-height: 106px;
  min-height: 100%;

/*  display: flex;
  align-items: center;
    justify-content: center;
    */
 }


#sitetitle_n p#subtitle {
       display:none;
        font-size: 77%;
	padding: 0 0 0 0em;
	margin: 0;
}

#sitetitle_n p#subtitle span {
	  font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
         margin: 0;
	 padding:0;
	font-weight:bold;
	color:#0080FF;
	display:block;
	}

@media (min-width: 43em) {
        #sitetitle_n p#subtitle span {font-size: 86%; font-weight: normal; line-height: 1.2em; }

#sitetitle_n p#subtitle {
       display:block;
       font-weight: normal;
        font-size: 1em;
	margin-left: 16em;
	margin-left: 15em;
	margin-left: calc(186px + 1em);
/*	padding: 0 0 0 1em !important;*/
       padding: 0;
	align-self: center;


            height: 100%;
    display: flex;
    align-items: center;
}


        }
@media (min-width: 62em) {
        #sitetitle_n p#subtitle span {font-size: 96%; font-weight: bold; }

#sitetitle_n p#subtitle {
	margin-left: 16em;

}

/*
article#contentbody {display: flex; flex-direction: column; min-height: calc(100% - 2em)}
#contentbody #pagetitle {flex:none;}
#contentblock {flex: 1 0 auto; }
#contentfooter {flex-shrink: 0; max-height: 2em;}
*/

        }

@media (min-width:82em) {
        #sitetitle_n p#subtitle span {font-size: 120%;}

}


@media screen and (max-width: 43em) {

header {
  position: fixed;
  top: 0;
  left: 0;
  height: 64px;
  z-index: 11;
  width: 100%;
  box-shadow: 0 1px 0 rgba(12,13,14,0.1), 0 2px 6px rgba(59,64,69,0.1);
  transition: all .5s ease;
  transition: box-shadow cubic-bezier(.165, .84, .44, 1) .25s;
  }

main {padding-top: 64px !important;}

/*#sitenews {display:none;}*/
}












