/* DEFAULT SITE CSS - Defines the Master Site parameters
----------------------------------------------------------*/

html {
    background: url('../Images/MMEDLogo_bw_20opacity.png') no-repeat center;
}
body {
    background: rgba(255,255,255, .45);
    background-size: 100% auto;
    font: normal 90% Arial, 'Arial Black', Helvetica, Verdana, sans-serif;
    height: 95em; /*95em is 1200 pixels  twice the normal screen size*/
}
/*The CSS box-sizing property allows us to include the padding and border in an element's total width and height.
 width + padding + border = actual width of an element
 height + padding + border = actual height of an element

* {
    box-sizing: border-box;
}
*/
/* Website Default Colors are: 
    color: #d8deee;  {216, 222, 238} Pail Blue
    color: #92a9d5;  {146,169,213} ) Sky Blue
    color: #666666;  {102, 102, 102} Dark Grey
    color: #3c7898;  {60, 120, 152} Dark Teal
    color: #C4C4C4;  {196,196,196}  Light Gray
    color: #ffffff;  White
*/

/*************Wrapper and Global Variables*************/
/*paragraph styles*/
#wrapper p {
    padding: 0 .9375em;
}
/*Define DropdownList, Textbox width size */
.fieldHeight {
    height: 2.5em;
}
.multiline_fieldHeight {
    height: 10em;
}
.width5 {
    width: 12.5%;
}
.width7 {
    width: 17.5%;
}
.width10 {
    width: 25%;
}
.width12 {
    width: 31.25%;
}
.width17 {
    width: 43.75%;
}
.width20 {
    width: 50%;
}
.width25 {
    width: 75%;
}

.width35 {
    width: 90%;
}
.loginWidth {
    width: 50%;
    height: 2em;
}
/*******************************************************/

/*****************Header Variables**********************/
/* desire-font-size / default-browser size = .em size
              i.e. (h1) - 24px / 16px = 1.5em-*/
h1, h2, h3, h4, h5, h6 {
    color: #ffffff; /* White*/
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    padding: .125em .9375em 0 .9375em;
}
/*style the heading text*/
h1 {
    font-size: 120%;
}

h2 {
    font-size: 100%;
    border-bottom-width: .0625em;
    border-bottom-color: #ffffff; /* White*/
    background-color: #e9e2ce;
}

h3 {
    font-size: 160%;
    color: #666666;
    border-bottom-width: .0625em;
    border-bottom-style: solid;
    border-bottom-color: #ffffff;
    width: 70%;
}

h4 {
    font-size: 120%;
    color: #3c7898;
    font-weight: bold;
    width: 94.5%;
    margin: 0;
}
h5 {
    font-size: 140%;
    color: #000000;
    font-weight: bold;
    width: 94.5%;
    margin: 0;
}
h6 {
    font-size: 120%;
    color: #000000;
    font-style:italic;
    width: 94.5%;
    margin: 0;
}
a:link, a:visited {
    color: #92a9d5; /* Sky Blue*/
}
a:hover, a:link:hover {
    color: #d8deee; /* Pal Blue*/
    text-decoration: none;
}
a:active, a:link {
    color: #666666; /* Dark Grey */
}
p {
    line-height: 120%;
    font-size: 90%;
}
ol {
    line-height: 120%;
    font-size: 90%;
    margin-right: 2em;
    text-decoration: none;
}
.space {
    margin-right: 2em;
}

/*
    The layout of this Website forms 3 main sections contained in a 'wrapper' container
    ************************************************
    *  ==========================================  *
    *  =             Navigation                 =  *
    *  =----------------------------------------=  *
    *  =               Header                   =  *
    *  =----------------------------------------=  *
    *  =                                        =  *
    *  =                Body                    =  *
    *  =                                        =  *
    *  =----------------------------------------=  *
    *  =               Footer                   =  *
    *  ==========================================  *
    *************************************************
*/

/*                     Navigation
       =----------------------------------------=  
       =  logo  |  login        nav             = 
       =----------------------------------------=  
*/
#navbar {
    width: 100%;
    height: 4.813em;
    background: #3c7898;
    border-bottom: .0975em solid #fff;
}

/*  LOGO
------------------------------------------------------------ */
#logo {
    margin-top: .5em;
    /* margin-left: .5%;*/
    width: .5em;
    float: left;
    border: .0975em solid #fff; /**/
}
#DefaultLogo {
    margin-top: .5em;
    margin-left: 2%;
    width: 25%;
    float: left;
}
.defaultHeaderLogo {
    width: 70%; /*This is for the Default Page MMED Logo*/
}
.headerLogo {
    float: left;
    width: 20%; /*This is for the MMED Logo*/
}
.logo {
    float: left;
    width: 15%; /*This is for the IAT Logo*/
}
.MMEDVerbiage {
    float: left;
    width: 20%;
    margin-top: 3%;
    margin-left: 2%;
}

/* Content Navigation Links  
----------------------------------------------------------*/
#contentNavigationLinks {
    float: left;
    width: 50%; /*This width is minus the combination of Logo and Login Sections, part of the Navigation Bar*/
    margin-left: .5%;
    margin-top: 1%;
    /* border: .0975em solid #fff;*/
}
#contentNavigationLinks ul {
    line-height: 160%;
    font-size: 110%;
    text-decoration: none;
    list-style:none;
}
ul#topnav {
	width: 100%;  /*This is shorter than the actual navigation bar because the search bar needs to fit in properly.*/
	list-style: none;	
    margin: 0 auto;
    /*border: .0975em solid #fff; */
}
ul#topnav li {
    float: left;
    display: block;
    width: 10em;
    padding: .3375em .5em;
    text-align: center;
    margin-right: .25em;
    margin-top: 0px;
}
ul#topnav li a {
   width: 100%;
   display: block;
   color: #ffffff;
   text-decoration: none;
}
ul#topnav li a:hover {
    color: #ffffff; /*White*/
    background: rgba(146,169,213, .75);
}
#InteractiveLinks {
    float: left;
    width: 2.5em; /*This width is minus the combination of Logo and Login Sections, part of the Navigation Bar*/
    /*margin-left: .5%;*/
    margin-top: .5%;
    /*border: .0975em solid #fff;*/
}
.contributeBtn {
    padding: .3375em .5em;
    color: #fff;
    background: #3c7898;
    text-decoration: none;
}
.contributeBtn:hover {
    color: #fff;
    background: rgba(146,169,213, .75);
}
ul#InteractiveLinks {
    width: 100%; /*This is shorter than the actual navigation bar because the search bar needs to fit in properly.*/
    list-style: none;
    margin: 0 auto;
}
ul#InteractiveLinks li {
    float: left;
    display: block;
    width: 10em;
    padding: .3375em .5em;
    text-align: center;
    margin-right: .25em;
}
ul#InteractiveLinks li a {
    width: 100%;
    display: block;
    color: #ffffff;
    text-decoration: none;
}
    ul#InteractiveLinks li a:hover {
        color: #ffffff; /*White*/
        background: rgba(146,169,213, .75);
    }
#subnav li a {
    width: 100%;
    display: block;
    color: #C4C4C4; /*Light Grey*/
    text-decoration: none;
}
#subnav li a:hover {
    color: #666666; /*Dark Grey*/
}
ul#subnav {
    font-size: 100%;
    list-style: none;
    width: 15%;
}
ul#subnav li {
    float: left;
    margin: 0;
    width: 100%;
}
ul#subnav li a {
    padding: .5625em .9375em;
    color: #fff; /*white*/
    display: block;
    background-color: rgba(60, 120, 152, .70); /* Dark Teal */
}
ul#subnav li a:hover {
    background: rgba(102, 102, 102, .25); /* Dark Grey - w/Transperency */
}
/*So instead of 'display: none' we use left: -999em to propel 
the dropdown list out of view and then left: auto (rather than left: 0) to bring it back*/
ul#topnav li ul#subnav {
    position: absolute;
    left: -999em;
}

ul#topnav li a:hover ul#subnav {
    left: auto;
}

#topnav li:hover ul#subnav, #topnav li.sfhover ul#subnav {
    left: auto;
}
/*                     Header
       =----------------------------------------=  
       =             |                          = 
       =             |                          =
       = thumbnail   |   Picture Slideshow      =
       =             |                          =
       =             |                          =
       =----------------------------------------=  
*/
/*20% of the Whole Browser Page*/
#header {
    width: 100%;  
    height: 10em;  /*Total height defined in body is 100em - 1200 pixel */
    margin: 0 auto;
    left: 0em;
    /*background: #ffffff;  white- w/Transperency */
}


/* Thumbnail Content Boxes--------------------------------*/
#thumbnailSection {
    float: left;
    width: 72.5%;
    height: 100%;
}
/*No need to CSS for Thumbnail and Slideshow.  EmbedSocial 
    Handles all of these Parameters.
*/


/* Website Default Colors are: 
    color: #d8deee ;  {216, 222, 238} Pail Blue
    color: #92a9d5 ;  {146,169,213} ) Sky Blue
    color: #666666;  {102, 102, 102} Dark Grey
    color: #C4C4C4 (196,196,196)  Light Gray
    color: #ffffff;  White
*/

/*                     Body
      =----------------------------------------=  
      = -------------------------------------- =  
      = -            Inner Body              - =  
      = -             content                - =  
      = -------------------------------------- =  
      =----------------------------------------=  
*/

#body {
    width: 100%;
    height: 77.5em; /*Total height defined in body is 75em - 1200px - split between Header, Body & Footer */
    padding-top: .5em;
}

#innerbody {
    width: 100%;
    height: 100%;
}

summary {
    display: block;
}

#motto {
    width: 100%;
    height: 3em;
    display: block;
    margin: 1em auto;
    text-align: center;
}

/*                    Footer
      =----------------------------------------=  
      =              Footer Body               =  
      =  logo |       Site Map                 =  
      =  btmTextNav                 copyright  =  
      =----------------------------------------=  
*/

#footer {
    width: 100%;
    margin: 0 auto;
    height: 12.750em; /*Total height defined in body is 75em - 1200px - Holds site map & Social Media Links*/
    font-size: 100%;
    color: #fff;
    position: fixed;
    left: 0em;
    bottom: 0em;
    background: rgba(102, 102, 102, .50);
}

#footer a:link, #footer a:visited {
    color: #fff;
    text-decoration: none;
}

#footer a:hover {
    color: #ffffff; /*Green*/
    text-decoration: none;
}

#footer a:active {
    color: #fff;
}

.center {
    text-align: center;
}

#footerBody {
    width: 100%;
    height: 12em;
}

#IATLogo {
    float: left;
    margin-top: .5em;
    margin-left: 2.5em;
    width: 10%;
    /*border: .0975em solid #fff;*/
}
.iatlogo {
    width: 100%;
}
#SocialMedia {
    width: 100%;
    margin: 0 auto;
    padding-top: 1em;
}
.socialMediaNav {
    width: 100%; /*This is shorter than the actual navigation bar because the search bar needs to fit in properly.*/
    list-style: none;
    margin: 2% auto;
    text-decoration: none;
}
#siteMap {
    float: left;
    width: 60%;
    margin: 0 auto;
}
.siteMapColumnShrt {
    float: left;
    width: 18%;
    margin-right: .5%;
}
.siteMapColumn {
    float: left;
    width: 27.5%;
    margin-right: .5%;
}

ul#leftSiteMapNav {
	list-style: none;	
    margin: auto auto;

}
ul#leftSiteMapNav li {
        /*border: .0975em solid #fff;*/
   width: 100%;
}
ul#leftSiteMapNav li a {

   display: block;
   color: #fff;
   text-decoration: none;
}
ul#leftSiteMapNav li a:hover  {
    color: #eee;
}

ul#centerLeftSiteMapNav, ul#centerRightSiteMapNav {
	list-style: none;	
    margin: auto auto;
}
ul#centerLeftSiteMapNav li, ul#centerRightSiteMapNav li {
        /*border: .0975em solid #fff;*/
   width: 100%;
}
ul#centerLeftSiteMapNav li a, ul#centerRightSiteMapNav li a {

   display: block;
   color: #fff;
   text-decoration: none;
}
ul#centerLeftSiteMapNav li a:hover, ul#centerRightSiteMapNav li a:hover  {
    color: #eee;
}

ul#rightSiteMapNav {
	list-style: none;	
    margin: auto auto;
}
ul#rightSiteMapNav li {
        /*border: .0975em solid #fff;*/
   width: 100%;
}
ul#rightSiteMapNav li a {

   display: block;
   color: #fff;
   text-decoration: none;
}
ul#rightSiteMapNav li a:hover  {
    color: #eee;
}

#btmTextNav {
    width: 100%;
    text-align: left;
}

#copyright {
    text-align: right;
    float: right;
    padding-right: 1.5em;
}
#PhysicalAddress {
    width: 100%;
    margin: 1em auto;
}
.ftrAddress {
    font-size: 140%;
    margin: 1em auto;
}