/* General settings */

html
{
   height: 100%;
}

.copyright
{
   font-size: 8pt;
   margin-bottom: 5px;
}

#content
{
    width:80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

body
{
   font-size:14pt;
   color:#000000;
   font-family:Sans-Serif;
   background-color:#FFFFFF;
   overflow: auto;
   margin: 10px;
}

h1, h2, h3, h4, h5
{
   font-weight: bold;
}

h1
{
   font-size: 24pt;
   color: #1d61b1;
}

h2
{
   font-size: 20pt; 
   color: #800040;
}

h3
{
   font-size: 16pt; 
   color: #000080;
}

h4
{
   font-size: 12pt; 
   color: #000080; 
}

h5
{
   font-size: 8pt; 
   color: #000080; 
}

b, strong
{
   font-weight: bold;
   color: #000080; 
}

li.nosymbol
{
   list-style-position: outside;
   list-style-type: none;
}

ul.a li
{
   list-style-position: outside;
   color: #000080;
}

ul.a li span
{
   color: #000000;
}

ol.a li
{
   list-style-position: outside;
   color: #000080;
}

ol.a li span
{
   color: #000000;
}

td
{
   font-size: 14pt;
}

a
{
   font-family: Sans-Serif; 
   text-decoration: none;
   transition: color 1s;
   color: #1d61b1;
   word-wrap: break-word;
}

a:hover
{
   transition: color 1s;
   color: #800040;
}

hr
{
   width: 100%;
   /* color: #800040; */
   background-color: #800040;
   height: 1px;
   border: none;
}

#cn_photo
{
   float: left;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   padding-top: 0px;
   padding-right: 20px;
   padding-bottom: 0px;
   padding-left: 20px;
}

#container
{
   margin-bottom: 100px;
}

.cn_photo
{
   height: 161px;
}

#tabla_photo
{
   width: 140px;
   height: 80px;
   float: right;
}

textarea
{
   resize: none;
}

/* Navigation stuff */

#navigation
{
   position: fixed;
   left: 1%;
   top: 0;
   width: 98%;
   font-size: 16pt;
   background-color: white;
   border: 10px solid white;
}

ul.nav
{
   list-style-type: none;
}

nav ul
{
   margin: 0;
   padding: 0;
   background-color: white;
}

nav ul li ul li ul
{
   position: absolute;
   top: 100%;
}

nav ul li ul li
{
   float: left;
   /* margin: 10px; */
}

nav ul li ul li ul li
{
   float: none;
   margin: 10px;
}

li.divider
{
   border-bottom: solid 2px #800040;
   margin-top: 5px;
   margin-bottom: 5px;
}

li.space
{
   margin: 10px;
}

.mobile_menu
{
   display: none;
}

.mobile_menu + input[type=checkbox]
{
   display: none;
}

.navtree_label
{
   cursor: pointer;
   transition: color 1s;
   color: #1d61b1;
}

.navtree_label:hover
{
   transition: color 1s;
   color: #800040;
}

.navtree_label + input[type=checkbox]
{
   display: none;
}

.navtree_label + input[type=checkbox] + ul
{
   display: none;
}

/* Scripts stuff */

textarea.code
{
   display: block;
   margin: 0 auto;
   width: 100%;
   height: 10em;
}

/* Swarm stuff */

img.plan
{
   float: left;
   width: 10%;
   margin-left: 5pt;
   margin-right: 5pt;
   margin-top: 10pt;
   margin-bottom: 10pt;
}

img.swarm
{
   margin-left: 10pt;
   margin-right: 10pt;
   margin-top: 1.5pt;
   margin-bottom: 1.5pt;
}

#robots
{
   float: right;
   height: 180px;
}

#nxt
{
   float: left;
   height: 200px;
}

#dongle
{
   float: right;
   height: 150px;
   border: none;
}

#flowchart
{
   float: left;
   border: none;
   height: 230px;
}

div.results
{
   text-align: center;
   margin: 0 auto;
}

#spiral
{
   width: 410px;
}

#paths
{
   width: 400px;
}

#video
{
   width: 640px;
   height: 390px;
   border: none;
}

/* Video stuff */

div.videoPlayback
{
   width: 675px;
   height: 380px;
   margin: auto;
}

iframe.ytembed
{
   width: 100%;
   height: 100%;
}

.vidlist
{
   cursor: pointer;
   transition: color 1s;
   color: #1d61b1;
}

.vidlist:hover
{
   transition: color 1s;
   color: #800040;
}

.vidlist + input[type=checkbox]
{
   display: none;
}

.vidlist + input[type=checkbox] + div
{
   display: none;
}

.vidlist + input[type=checkbox]:checked + div
{
   display: block;
}

ul.videoList
{
   list-style-type: disc;
}

/* LaTeX stuff */

table.latex
{
   width: 100%;
   text-align: center;
   margin: 0 auto;
}

td.code
{
   width: 50%;
   vertical-align: middle;
   text-align: center;
}

/* US vs USSR stuff */

sup.cite::before
{
   content: '[';
}

sup.cite::after
{
   content: ']';
}

/* NIMS stuff */

img.nimsfig
{
   width: 50%;
}

/* Photo stuff */

img.photogallery
{
   width: 50%;
   max-height: 500px;
}

div.gallery
{
   text-align: center;
   /* width: 10%; */
}

table.gallery
{
   width: 75%;
   margin: 0 auto;
}

div.gallerycaption
{
   text-align: center;
   /* margin: 0 auto; */
   width: 100%;
   color: #800040;
}

div.photosidebar
{
   width: 10%;
   text-align: center;
   height: 80%;
   overflow: auto;
}

img.photosidebar
{
   width: 90%;
}

img.newgallery
{
   margin-left: 25%;
}

/* Desktop stuff */

@media screen and (min-width: 1050px)
{
   .navtree_label:hover + input[type=checkbox] + ul,.navtree_label + input[type=checkbox]:hover + ul,.navtree_label + input[type=checkbox] + ul:hover
   {
      display: block;
   }

   .navtree_label + input[type=checkbox] + ul > li:hover
   {
      display: block;
   }

}

/* @media screen and (min-width: 1050px) */
/* { */
/*     #navigation */
/*     { */
/* 	font-size: 16pt; */
/*     } */
/* } */

/* @media screen and (min-width: 1152px) */
/* { */
/*     #navigation */
/*     { */
/* 	font-size: 9pt; */
/*     } */
/* } */

/* @media screen and (min-width: 1280px) */
/* { */
/*     #navigation */
/*     { */
/* 	font-size: 10pt; */
/*     } */
/* } */

/* @media screen and (min-width: 1366px) */
/* { */
/*     #navigation */
/*     { */
/* 	font-size: 11pt; */
/*     } */
/* } */

/* @media screen and (min-width: 1920px) */
/* { */
/*     #navigation */
/*     { */
/* 	font-size: 16pt; */
/*     } */
/* } */

/* Resize the embedded Youtube video based on size of screen */

@media screen and (min-width: 260px)
{
   div.videoPlayback
   {
      width: 200px;
      height: 113px;
      margin: auto;
   }
}

@media screen and (min-width: 310px)
{
   div.videoPlayback
   {
      width: 250px;
      height: 141px;
      margin: auto;
   }
}

@media screen and (min-width: 360px)
{
   div.videoPlayback
   {
      width: 300px;
      height: 169px;
      margin: auto;
   }
}

@media screen and (min-width: 410px)
{
   div.videoPlayback
   {
      width: 350px;
      height: 197px;
      margin: auto;
   }
}

@media screen and (min-width: 460px)
{
   div.videoPlayback
   {
      width: 400px;
      height: 225px;
      margin: auto;
   }
}

@media screen and (min-width: 510px)
{
   div.videoPlayback
   {
      width: 450px;
      height: 253px;
      margin: auto;
   }
}

@media screen and (min-width: 560px)
{
   div.videoPlayback
   {
      width: 500px;
      height: 281px;
      margin: auto;
   }
}

@media screen and (min-width: 610px)
{
   div.videoPlayback
   {
      width: 550px;
      height: 309px;
      margin: auto;
   }
}

@media screen and (min-width: 660px)
{
   div.videoPlayback
   {
      width: 600px;
      height: 338px;
      margin: auto;
   }
}

@media screen and (min-width: 700px)
{
   div.videoPlayback
   {
      width: 640px;
      height: 360px;
      margin: 10px auto;
   }
}

/* Mobile stuff */

@media screen and (max-width: 1050px)
{
   body
   {
      font-size: 100%;
   }
   #content
   {
       width: 100%;
   }
   nav ul li ul li ul
   {
      position: relative;
   }
   nav ul li ul li
   {
      float: none;
   }
   nav ul li ul
   {
      height: 100%;
      max-height: 100%;
      overflow: auto;
   }
   .mobile_menu
   {
      display: block;
      text-align: center;
      color: #1d61b1;
   }
   .mobile_menu + input[type=checkbox] + ul > li
   {
      display: none;
   }
   .mobile_menu + input[type=checkbox]:checked + ul > li
   {
      display: block;
   }
   .navtree_label + input[type=checkbox]:checked + ul
   {
      display: block;
   }
   #navigation
   {
      max-height: 90%;
      overflow: auto;
      width: 100%;
      left: 0;
      /* font-size: 100%; */
   }
   #content
   {
      margin-top: 100px;
   }
   #cn_photo
   {
      float: none;
      text-align: center;
   }
   .cn_photo
   {
      display: block;
      width: 50%;
      height: auto;
      margin: auto;
   }
   /* h1, h2, h3, h4, h5 */
   /* { */
   /*    font-size: 120%; */
   /* } */
   /* .copyright */
   /* { */
   /*    font-size: 75%; */
   /* } */
   #container
   {
      margin-bottom: 50px;
   }
}