/* ----- Dept. Arquitectura Computadores - UMA ----- */

body
{
  margin: 0;
  padding: 0;
  color: black;
  background-color: white;
  font-family: Verdana, Arial, sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 115%;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
}

h1 
{ 
  margin: 0 0 .5em;
  padding: 0 .25em .1em .25em;
  font-weight: 500;
  font-size: 1.3125em; /* 21px */
  color: #002d5d;
  background-color: #ccc;
  line-height: 1.3;
  border-bottom: 1px solid black;
} 

h2 
{ 
  margin: 0 0 .5em;
  padding: 0 .25em .1em .25em;
  font-weight: 500;
  font-size: 1.125em; /* 18px */
  color: black;
  background-color: white;
  line-height: 1.2;
  border-bottom: 1px solid black;
} 

h3 
{ 
  margin: 0 0 .5em;
  padding: 0 .25em .1em .25em;
  font-weight: 500;
  font-size: .9375em; /* 15px */
  color: black;
  background-color: #eee;
  line-height: 1.1;
  border-bottom: 1px solid #ccc;
} 

h4,h5
{
  margin: 0 0 .5em;
  font-weight: 500;
  line-height: 1.1;
}

h4 { font-size: .875em; }  /* 14px */
h5 { font-size: .875em; }  /* 14px */

p
{
  margin: 0 0 1em;
  line-height: 1.5;
  font-size: .75em;
}

blockquote
{
  padding: 1em 2em;
  margin: 0 0 2em;
  border-left: 5px solid #eee;
}

hr
{
  height: 0;
  margin-top: 1em;
  margin-bottom: 2em;
  border: 0;
  border-top: 1px solid #ccc;
}

.dash
{
  height: 0;
  margin-top: -.25em;
  margin-bottom: .4em;
  border: 0;
  border-top: 1px dashed #ccc;
}

/*
table
{
  font-size: .75em;
  background-color: transparent;
  border-spacing: 0;
  border-collapse: collapse;
  border-top: 1px solid #ccc;
}

th, td
{
  padding: .5em 1em;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid #ccc;
}
*/

table
{
  font-size: 1em;
  border-spacing: 0;
  border-collapse: collapse;
}

th, td
{
  padding: 0 0 .2em 0;
  vertical-align: top;
  text-align: left;
}

a { text-decoration: none; }
a:link { color: royalblue; }
a:visited { color: royalblue; }
a:focus { color: black; }
a:hover { color: green; }
a:active { color: red; }

/* -----------------------
Layout styles
------------------------*/

.container
{
  max-width: 60em;
  margin: auto;
}

.header
{
  color: black;
  background: white;
}

.header-logo 
{ 
  margin: 0 0 1.0em 0;
}

.hpc
{
  margin: 0;
  padding: 0 0 1em 0;
  background: white;
}

.header-title
{
  display: inline-block;
  vertical-align: top;
  padding-top: 0.4em;
  color: #036;
  font-size: 2.25em;
}

.header-title-c
{
  color: #09c;
}

.header-uma
{ 
  float: right;
  margin: 0; 
  padding: 0;
  text-align: right;
}

.personal-name
{
  color: #09c;
  font-size: 1.6em;
}

.personal-title
{
  font-size: 1.2em;
}

.content
{
  overflow: hidden;
  padding: 1em 1.25em;
  background-color: white;
}

.main, .aside
{
  margin-bottom: 1em;
}

.aside p
{
  font-size: 1em;
}

.footer
{
  margin: 0 0 1em 0;
  padding: 0.25em 2em 1.4em 2em;
  height: 0em;
  color: white;
  background: black;
}

.footer p
{
  margin: 0;
  padding: 0;
  font-size: .75em;
}

/* -----------------------
Horizontal Menu
------------------------*/

.hmenu 
{
  margin: 0;
  padding: 0;
  font-size: .75em;
  height: 3.1em;
  background: #002d5d;
}

/* Top Level Menu */
.hmenu ul 
{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Top level list items */
.hmenu ul li 
{
  position: relative;
  display: inline;
  float: left;
}

/* Top level menu items link style */
.hmenu ul li a, .hmenu ul li span 
{
  display: block;
  position: relative;
  background: #002d5d;
  color: white;
  padding: .875em .75em;
  border-right: 1px solid white;
  text-decoration: none;
}

.hmenu ul li a:link, .hmenu ul li a:visited 
{
  color: white;
}

/* Top level menu items link style on hover and when active */
.hmenu ul li:hover > a 
{
  background: white;
  color: #002d5d;
}

/* Sub ULs style */
.hmenu ul li ul 
{
  position: absolute;
  left: -5000px;
  top: auto;
  opacity: 0;
  width: 16em;
  visibility: hidden;
  box-shadow: 2px 2px 5px gray;
  -webkit-transition: opacity .3s, visibility 0s .3s, left 0s .3s;
  transition: opacity .3s, visibility 0s .3s, left 0s .3s;
}

/* First Sub Levels UL style on hover */
.hmenu ul li:hover > ul 
{
  visibility: visible;
  left: 0;
  opacity: 1;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

/* Sub level Menu list items (alters style from Top level List Items) */
.hmenu ul li ul li 
{
  display: list-item;
  float: none;
}

/* 2nd and beyond Sub Levels vertical offset after 1st level sub menu */
.hmenu ul li ul li ul 
{
  top: 0;
  left: 100%;
}

/* Sub Levels link style on hover and when active */
.hmenu ul ul li:hover > a 
{
  background: white;
}

/* Sub Levels UL style on hover */
.hmenu ul ul li:hover > ul 
{
  left: 100%;
}

/* Sub level menu links style */
.hmenu ul li ul li a 
{
  padding: 10px;
  margin: 0;
  background: #002d5d;
  border-right: none;
  border-top-width: 0;
  border-bottom: 1px solid gray;
}

/* LIs with a sub UL style */
.hmenu ul li > a 
{
  /* add padding to accomodate arrow inside LIs */
  padding-right: 25px;
}

/* LIs with NO sub UL style */
.hmenu ul li > a:only-child 
{
  /* undo padding for non submenu LIs */
  padding-right: 10px;
}

/* LIs with a sub UL pseudo class */
.hmenu ul li > a:after 
{
  /* add arrow inside LIs */
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top-color: white;
  top: 50%;
  right: 8px;
}

/* LIs with NO sub UL pseudo class */
.hmenu ul li > a:only-child:after 
{
  /* undo arrow for non submenu LIs */
  display: none;
}

/* Sub ULs' LIs with a sub UL pseudo class */
.hmenu ul li ul li > a:after 
{
  /* change arrow to right arrow inside sub UL LIs */
  border-top-color: transparent;
  border-left-color: white;
  top: 40%;
  right: 8px;
}

/* -----------------------
Single styles
------------------------*/

.img-responsive { max-width: 100%; }

.btn
{
  color: white !important;
  background-color: royalblue;
  border-color: #222;
  display: inline-block;
  padding: .5em 1em;
  margin-bottom: 0;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: .2em;
  text-decoration: none;
}

.btn:hover
{
  color: white !important;
  background-color: green;
}

.btn:focus
{
  color: white !important;
  background-color: black;
}

.btn:active
{
  color: white !important;
  background-color: red;
}

.table
{
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

.list-unstyled 
{
  font-size: .75em;
  padding-left: 0;
  list-style: none;
}

.list-unstyled li
{
  padding: .4em 0;
  border-top: 1px dashed #ccc;
}

.list-unstyled li:first-child 
{
  padding: .4em 0;
  border-top: 0;
}

.list-unstyled-pub
{
  padding-left: 2em;
  list-style: none;
}

.list-unstyled-pub li
{
  padding: .2em 0;
  border-top: 0;
}

.list-unstyled-pub li:first-child 
{
  padding: .2em 0;
}

.list-inline
{
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}

.list-inline > li
{
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}

/* -----------------------
Wide styles
------------------------*/

@media (min-width: 55em)
{
  .header { padding: 1.5em 3em; }
  .nav-bar { padding: 1em 3em; }
  .content { padding: 2em 3em; }

  .main
  {
    float: left;
    width: 65%;
    margin-right: 5%;
    margin-bottom: 1em;
  }

  .aside
  {
    float: left;
    width: 30%;
    margin-bottom: 1em;
  }

/*  .footer { padding: 1em 2em; } */
}

@media (max-width: 800px) 
{
  /* FIRST breaking point
     Last two top menu items' sub ULs should drop to the left (instead of right)
     Change 2 to a different number to exclude/include more top menu items based 
     on menu and max-width setting above
  */
  .hmenu ul li:nth-last-of-type(-n+2) ul li:hover > ul 
  {
    left: -100%;
  }
}

@media (max-width: 500px) 
{
  /* SECOND breaking point 
     For mobile and screen browser windows
     Get Sub ULs to expand entire width of document and drop down
     Changes menu reveal type from "visibility" to "display" to overcome bug. 
     See comments below
  */
  .hmenu ul li 
  {
    position: static;
  }

  .hmenu ul li ul 
  {
    width: 100%;
    border-top: 2px solid #eee;
    /* change menu reveal type from "visibility" to "display". 
       Former seems to cause browser to jump to top of page sometimes when 
       menu header is tapped on 
    */
      display: none;
  }

  .hmenu ul li:hover > ul 
  {
    display: block;
    left: 0 !important;
    top: auto;
  }

  .hmenu ul ul li:hover > ul 
  {
    left: 0 !important;
    top: auto;
  }
}