#nav
{
  margin: 0;
  margin-bottom: 20px;
  margin-left: -10px;
  margin-top: -22px;
  padding: 0;
  width: 100%;
  float: left;
  position: relative;
  z-index: 128;
  border-bottom: 0px;
}

#nav ul ul
{
  display: none;
  opacity: 0.95;
}

#nav ul li:hover > ul 
{
  display: block;
}

#nav ul
{
  background: #e9e9e9;
  background: linear-gradient(top, #efefef 0%, #bbbbbb 80%);
  background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 80%);
  background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 80%);
  box-shadow: 0px 0px 2px rgba(0,0,0,0.15);
  padding: 0 10px;
  padding-right: 10px;
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  list-style: none;
  position: relative;
  display: inline-table;
  width:100%;
}

#nav ul:after
{
  content: "";
  clear: both;
  display: block;
}

#nav ul li
{
  float: left;
  width: 128px;
  text-align: center;
}

#nav ul li:hover
{
  background: #405060;
  background: linear-gradient(top, #405060 0%, #607080 55%);
  background: -moz-linear-gradient(top, #405060 0%, #607080 55%);
  background: -webkit-linear-gradient(top, #405060 0%,#607080 55%);
}

#nav ul li a
{
  display: block;
  padding: 10px 40px;
  color: #757575;
  text-decoration: none;
  border-bottom: none;
}

#nav ul li:hover a
{
  color: #fff;
}

#nav ul ul
{
  background: #5f6975;
  padding: 0;
  position: absolute;
  border-radius: 0;
  text-align: center;
  width: 128px;
}

#nav ul ul li
{
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}

#nav ul ul li a
{
  padding: 10px 10px;
  color: #fff;
}

#nav ul ul li a:hover
{
  background: #4b545f;
}

#nav ul ul ul
{
  position: absolute;
  left: 100%; 
  top:0;
}

#quote
{
  font-family: Georgia, "Times New Roman", Times, serif;
  display: inline-block;
  border: 1px solid #aabbcc;
  background-color: #f5f5f5;
  quotes: "« " " »" "'" "'";
  margin: 10px;
  margin-left: 40px;
  padding: 10px;
}

#quote q
{
  font-size: 150%;
  font-style: italic;
}

#quote p
{
  text-align: right;
}


body
{
  background-image:url(../img/bg.png);
  background-color:#d5d5d5;
  font-size:12px;
  font-family:Liberation Sans, DejaVu Sans, Nimbus Sans, Verdana, Arial, Trebuchet MS, sans-serif;
  margin:0px;
  padding:12px 12% 12px 12%;
  text-align:justify;
  color:#2a2b2c;
}

img { border: 0 none; }

a img
{
  border: 0 none;
}

a:link, a:visited
{
  font-weight:bold;
  text-decoration:none;
  color:#455565;
}

a:active, a:hover
{
  border-bottom: 1px dotted;
  text-decoration:none;
  color:#197683;
}

a[href$=webp], a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif], a[href$="#"]
{
  text-decoration: none;
  border: 0 none;
}

h1
{
  color:#333333;
  font-weight:bold;
}

h2, h3
{
  color:#666666;
  border-bottom: none;
  margin:0px 0px 0px 20px;
  padding: 10px 0px 0px 0px;
  font-weight:bold;
  text-decoration:none;
}

h2
{
  font-size:20px;
}

h3
{
  font-size:16px;
}

#page
{
  position: relative;
  z-index: 1;
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  background-color:#e9e9e9;
  border: 1px double #bababa;
  opacity: .95;
  padding:10px;

  margin-left:auto;
  margin-right:auto;
  max-width: 800px;
}

#page img
{
  padding:10px 10px 10px 10px;
}

#img_link_list
{
  z-index: 1;
  position: relative;
  display: inline;
}

#img_link_list img
{
  opacity:0.5;
  filter:alpha(opacity=50);
}

#img_link_list img:hover
{
  opacity:1;
  filter:alpha(opacity=100);
  transition: all 0.5s linear;
}

#img_link_list a
{
  border: 0 none;
  border-bottom: 0 none;
  border-bottom-width: 0;
  border-bottom-style: none;
  text-decoration: none;
}

#code
{
  background-color:#d5d5d5;
  border:1px solid #7c7c7c;
  font-size:12px;
  font-family:Monospace;
  margin:20px;
  padding:3px 3px;
  text-align:justify;
  color:#2a2b2c;
}

#foot
{
  position: relative;
  z-index: -1;
  box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
  border-bottom-left-radius: 1em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  background-color:#e9e9e9;
  color: #121212;
  text-align: center;
  font-size: x-small;
  border: 1px double #aaaaaa;
  opacity: .4;
  padding:10px;
  margin:0px;
  margin:10px;

  margin-left:auto;
  margin-right:auto;
  max-width: 800px;
}

#foot p
{
  position: relative;
  margin: 0;
}

#article
{
  border: 1px solid #aabbcc;
  background-color: #f5f5f5;
  padding:5px;
  margin:20px;
  margin-right:200px;
}

#content
{
  margin:15px;
}

#content br
{
  display: block;
  margin: 7px 0;
}

#header
{
  margin:5px;
  border-bottom:1px dotted #2a2a2a;
}

#header a
{
  text-decoration: none;
  border-bottom:1px dotted;
}

#header h3
{
  color: #d6550a;
}

#header p
{
  color: #707070
}

#foot img
{
  vertical-align:middle;
}

div.float-right {
  float: right;
  width: 30%;
  margin: 0.5em;
  padding: 0.5em;
}
div.float-right p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
div.float-left {
  float: left;
  width: 30%;
  margin: 0.5em;
  padding: 0.5em;
}
div.float-left p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

@media (max-width: 900px)
{
  #nav ul li
  {
    width: 100px;
  }

  #nav ul li a
  {
    padding: 10px 10px;
  }

  #nav ul ul
  {
    width: 100px;
  }
}

@media (max-width: 750px)
{
  #nav ul li
  {
    width: auto;
  }

  #nav ul li:hover > ul
  {
    display: none;
  }

}

@media (max-width: 640px)
{
 body, element1, element2
 {
   width: auto;
   margin: 0;
   padding: 0;
 }

 #nav
 {
   position: fixed;
   width: 100%;
 }

 #nav ul
 {
   border-radius: 0;
 }

 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video 
 {
   max-width: 100%;
 }

 #head
 {
   margin-bottom: 40px;
 }

 #img_link_list img
 {
   height: 81px;
   width: 81px;
   opacity: 0.6;
 }

 #home_pic_left img
 {
   height: 128px;
 }

 img
 {
   height: auto; width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

 textarea, table, td, th, code, pre, samp
 {
   word-wrap: break-word;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
 }

 code, pre, samp
 {
   white-space: pre-wrap;
 }

 element1, element2
 {
   float: none;
   width: auto;
 }

 #page
 {
   border: 0;
 }

 #foot
 {
   border-radius: 0;
 }
}

@media (max-width: 300px)
{
  #nav
  {
    position: relative;
  }

  #head
  {
    margin: auto;
  }

  #nav ul li
  {
    float: none;
    display: block;
    width: auto;
  }
}

@media (max-device-width:768px) and (orientation: landscape)
{
  html
  {
    -webkit-text-size-adjust: 100%;
  }
}
