/* Basic styles for ICON AAC website 
   [www.]everyonecommunicates.[org|com|net]
   Much of the commenting is to help me remember the CSS structure

colors:
  #ffffff (white) body background, menubar text
  #000000 (black) body text
  #6f8eab (medium blue) breadcrumb links, background on menus
  #25446b (dark blue) inlinetitle class in the body (e.g. the
individuals' names on the AAC Users Stories page), links, h2 and h3 in
the body, links & h2 in the "landinglinks", background on hover on the
menubar, divider in the body (used only in the personal stories pages),
and links in the footer
  #122338 (nearly black) 1-pixel border on the menubar
  #89c63b (bright green) h1 in body
  #f1f0f1 shadow-container.shadow1
  #dbdadb shadow-container.shadow2
  #b8b6b8 shadow-container.shadow3
  #848284 shadow-container 1px border
  #e7e7e7 shadow-container background

*/

html, body {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0;
}
body, p, td, th, div, blockquote, dl, ul, ol {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em; 
  letter-spacing: .03em;
  line-height: 1.75;
  background-color: #FFFFFF;
  color: #000000;
}
.inlinetitle { color: #25446b; font-weight: bold; }
.book { text-decoration: underline; }
.periodical { font-style: italic; }
.article { font-style: italic; }
.poem { font-style: italic; }
.quotesource { font-size: smaller; font-style: italic; }

a { color: #25446b; }
a:visited { color: #808080; }
a:hover { color: #89c63b; }

h1, h2, h3 {
  color: #25446b;
  background-color: #FFFFFF;
  line-height: 1.5;
  letter-spacing: 0em;
}

h1 {
  color: #89c63b;
  font-weight: bold;
  font-size: 170%;
}

h2 {
  font-weight: bold;
  font-size: 150%;
}

#container {
  max-width: 875px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2%;
  padding-right: 2%;
}

#header {
  min-width: 850px;
  margin-top: 2em;
  margin-left: 24px;
}
#breadcrumbs {
  clear:both;
  display:block;
  margin-top: 40px;
  font-size:85%;
  font-style:italic;
}
#breadcrumbs a {
  font-size: 1em;
  text-decoration: none;
  color: #6F8EAB;
  background: #FFFFFF;
}
#landinglink {
  text-decoration: none;
  color: #6F8EAB;
  font-style: italic;
  background: #ffffff;
  padding-bottom: .5em; 
}
#landinglink a {
  color: #25446b;
  text-decoration: none;
  font-style: italic;
}
#landinglink h2 {
  color: #25446b;
  background-color: #FFFFFF;
  line-height: 1.5;
  font-weight: bold;
  font-size: 150%;
  text-decoration: none;
  letter-spacing: 0em;
}


#multi_drop_menus * {
  margin:0; 
  padding:0;
}
#multi_drop_menus {
/*  border:1px solid #122338;*/
  float:left;
  font-size: 80%;
  font-weight: bold;
  min-width:810px;
}
#multi_drop_menus ul {
  float:left;
}
#multi_drop_menus li {
/*  border-left:1px solid #122338;*/
  border-right:1px solid #122338;
  border-left:none;
  border-top:1px solid #122338;
  border-bottom:1px solid #122338;
  list-style-type:none;
  float:left;
  width:10.25em;
  position:relative;
  background-color:#6f8eab;
  text-align:center;
}
#multi_drop_menus li:first-child {
  border-left:1px solid #122338;
}
#multi_drop_menus a {
  display:block;
  padding:.15em 6px;
  color:#FFFFFF;
  text-decoration:none;
}
#multi_drop_menus a:hover {
  color:#FFFFFF;
  background-color:#25446b;
}
#multi_drop_menus li ul {
  position:absolute;
  display:none;
  left:-1px;
}
#multi_drop_menus li:hover ul {
  display:block;
}
#multi_drop_menus li ul li {
  width:16em;
  text-align:left;
  border-right:1px solid #122338;
/*  border-bottom:1px solid #122338;*/
/*  border-bottom:none; */
  border-top:none;
  border-left:1px solid #122338;
}
#multi_drop_menus li ul li:first-child {
/*  border-left:1px solid #122338;*/
/*  border-top:1px solid #122338;*/
  border-top:none;
}

#content {
  max-width: 812px;
}

#divider {
  margin-top: 4em;
  margin-bottom: 2em;
  color: #25446b;
  background-color: #FFFFFF;
  border-top-style: solid;
  border-top-width: 2px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
}

#footer {
  font-size: 75%;
  margin-top: 5em;
  border-top-style: solid;
  border-top-width: 1px;
  max-width: 812px;
}
#footer a {
  color:#25446b;
  text-decoration:none;
}
#footer a:hover {
  color:#89c63b;
}

ul {
  list-style-type: square;
}
ul li ul {
  list-style-type: disc;
}

#sitemap {
}
#sitemap ul {
  list-style-type: none;
}



#shadowbox {
  width: 80%;
  margin-left:auto;
  margin-right:auto;
  margin-top:2em;
  margin-bottom: 2em;
}
#shadow-container {
  position: relative;
  left: 5px;
  top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}
#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container {
    position: relative;
    left: -2px;
    top: -2px;
}
#shadow-container .shadow1 {
  background: #F1F0F1;
}

#shadow-container .shadow2 {
  background: #DBDADB;
}

#shadow-container .shadow3 {
  background: #B8B6B8;
}

#shadow-container .container {
  border: 1px solid #848284;
  padding: 10px;
  background: #e7e7e7;
}
#shadow-container p {
  background: #e7e7e7;
}
#shadow-container ul {
  background: #e7e7e7;
}
#shadow-container h3 {
  background: #e7e7e7;
}

.shadowtitle {
  display:block;
  color: #25446b;
  background-color: #e7e7e7;
  font-size: 120%;
  font-weight: bold;
}