@font-face { font-family: 'abel';
             src: url('abel_regular.woff2') format('woff2'),
                  url('abel_regular.woff') format('woff'),
                  url('abel_regular.ttf') format('truetype');
             font-weight: normal;
             font-style: normal;
           }



html { width: 100%;
       height: 100%;
       -webkit-text-size-adjust: 100%;
     }





body { width: 100%;
       height: 100%;
       margin: 0px;
       padding: 0px;
       font-family: abel, 'Pathway Gothic One', arial, sans-serif;
       font-size: 16px;
       box-sizing: border-box;
     }





header { height: 40px;
         background: linear-gradient(#777, #777);
         box-sizing: border-box;
         padding: 5px;
         font-size: 25px;
         font-weight: bold;
         line-height: 30px;
         text-align: center;
         color: #fff;
       }

header a { color: #fff;
           text-decoration: none;
         }

header a:hover { color: #555;
               }


a { text-decoration: none;
    cursor: pointer;
  }



nav { background: linear-gradient(#333, #333);
      box-sizing: border-box;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      line-height: 20px;
      color: #ccc;
    }

nav a { color: #fff;
        text-decoration: none;
      }

nav a:hover { color: #00be00;
            }


main { height: calc(100% - 131px);
     }

main.viewer { height: calc(100% - 81px);
            }




form { position: absolute;
       top: 50%;
       left: 50%;
       width: 274px;
       height: 102px;
       margin-top: -51px;
       margin-left: -137px;
       text-align: center;
       font-size: 20px;
     }

input,
select { -webkit-appearance:none;
         display: inline-block;
         font-family: abel, 'Pathway Gothic One', arial, sans-serif;
         font-size: 20px;
         font-weight: bold;
         line-height: 20px;
         border-radius: 0px;
         border: 0px solid #ddd;
         height: auto;
         box-sizing: border-box;
         padding: 0px 0px 0px 0px;
         margin: 0px;
         color: #777;
         background: none;
         cursor: pointer;
       }

input[type='submit'] { float: right;
                       width: 70px;
                       height: 102px;
                       border: 2px solid #0a0;
                       background-color: #0a0;
                       color: #fff;
                     }


input { display: block;
         font-size: 20px;
         line-height: 28px;
         border-radius: 0px;
         border: 2px solid #ddd;
         width: 200px;
         height: 50px;
         box-sizing: border-box;
         padding: 12px;
         margin: 0px 2px 2px 0px;
         color: #333;
       }




#cam_list { float: left;
            width: 150px;
            height: 100%;
            margin-right: 1px;
            background: linear-gradient(#777, #777);
          }

#cam_list div { padding: 10px;
                font-size: 16px;
                font-weight: bold;
                background-color: #777;
                transition: background-color 0.3s ease-in-out 0s;
                cursor: pointer;
              }



#cam_list div a { display: inline-block;
                  color: #fff;
                }

#cam_list div:hover { transition: background-color 0.3s ease-in-out 0s;
                      background-color: #00be00;
                    }



#files { position: relative;
         height: 100%;
         margin: 1px 0px 0px 150px;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
       }

#files.viewer { position: relative;
                height: 100%;
                background-color: #000;
              }

#cam_list.viewer { height: 100%;
                 }







footer { height: 50px;
         padding: 10px;
         background: linear-gradient(#777, #777);
         line-height: 30px;
         color: #fff;
         text-align: center;
         box-sizing: border-box;
         border-top: 1px solid #fff;
         clear: left;
       }

footer a { display: block;
           box-sizing: border-box;
           width: 50px;
           height: 30px;
           line-height: 30px;
           color: #fff;
           text-decoration: none;
           text-align: center;
           float: left;
           background-color: #00be00;
           border-radius: 5px;
         }

footer a:last-of-type { float: right;
                      }

footer a:hover { background-color: #0da;
               }
         








.list_file { display: block;
             float: left;
             width: calc(12.5% - 1px);
             height: 150px;
             box-sizing: border-box;
             border: 0px;
             margin: 0px 1px 1px 0px;
             text-align: center;
             background-color: #eee;
             font-size: 14px;
             line-height: 14px;
           }





.list_file a { 
               color: #000;
               text-decoration: none;
               cursor: pointer;
             }


.switch,
.cube,
.cam,
.dir,
.jpg { display: block;
       width: 100%;
       height: 120px;
       margin-bottom: 2px;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
     }

.dir { height: 110px;
       margin-top: 10px;
       background-image: url(icon_dir.png);
       background-size: contain;
     }

.cam { height: 110px;
       margin-top: 10px;
       background-image: url(icon_cam.png);
       background-size: contain;
     }

.cube { height: 110px;
        margin-top: 10px;
        background-image: url(icon_cube.png);
        background-size: contain;
      }

.switch { background-image: url(icon_switch.png);
          background-size: contain;
        }


#viewer { position: relative;
          width: calc(100% - 40px);
          height: calc(100% - 40px);
          margin: 20px auto;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
        }

#viewer_background { position: absolute;
                     width: 100%;
                     height: 100%;
                     background-size: cover;
                     opacity: 0.1;
                   }

#filename { position: absolute;
               bottom: 0px;
               display: block;
               padding: 20px;
               color: #fff;
               text-shadow: 0px 0px 3px #000;
               font-size: 20px;
             }

#next,
#last { position: absolute; z-index: 100; top: 0px; display: block; width: 20%; height: 100%;
        background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.1));
        opacity: 0.2;
        transition: all 0.5s ease-in-out 0s;
      }
#last { background: linear-gradient(90deg, rgba(0,0,0,0.1), rgba(0,0,0,0));
      }



#next:hover,
#last:hover { transition: all 0.5s ease-in-out 0s;
              opacity: 1;
            }

#last strong,
#next strong { position: relative;
               display:block;
               top: 50%;
               transform: translateY(-50%);
               margin: 0px 15px;
               font-size: 50px;
               text-align: left;
               color: rgba(255,255,255,0.8)
             }
#next strong {text-align: right;
             }


#zoom { position: absolute;
        z-index: 50;
        width: 60%;
        height: 100%;
        margin: 0px 20%;
      }

#fullscreen { position: fixed;
              z-index: 100;
              top: 0px;
              left: 0px;
              right: 0px;
              display: none;
              width: 100%;
              height: 100%;
              text-align: center;
              background: rgba(0,0,0,0.85);
              overflow: auto;
            }
#fullscreen_view { width: 100%;
                   max-width: 1000px;
                   height: 100%;
                   margin: auto;
                   background-size: contain;
                   background-position: center;
                   background-repeat: no-repeat;
                 }




#save { position: absolute;
        z-index: 100;
        bottom: 20px;
        right: 20px;
        font-size: 20px;
        color: #fff;
        cursor: pointer;
      }

         










/*
+------------------------------------------------------------+
| 1180px wide or less                                        |
+------------------------------------------------------------+
*/

@media (max-width: 1180px)
    {

    header { 
           }

    nav { 
        }


    main { position: relative;
           display: flex;
           flex-direction: column-reverse;
         }


    #cam_list { float: none;
                width: 100%;
                height: auto;
              }

    #cam_list div { display: inline-block;
                    height: 25px;
                    padding: 5px;
                    font-size: 12px;
                    line-height: 15px;
                    box-sizing: border-box;
                  }

    #files { width: 100%;
             margin: 1px 0px 0px 0px;
           }

    .list_file { width: calc(12.5% - 1px);
               }



    #files.viewer { height: 100%;
                  }

    #cam_list.viewer { height: 50px;
                     }



    .viewer { width: 100%;
              height: 100%;

            }

    footer { 
           }

    }










/*
+------------------------------------------------------------+
| 990px wide or less                                         |
+------------------------------------------------------------+
*/

@media (max-width: 990px)
    {

    .list_file { width: calc(20% - 1px);
               }
    }










/*
+------------------------------------------------------------+
| 770px wide or less (most tablets)                          |
+------------------------------------------------------------+
*/

@media (max-width: 770px)
    {

    body { font-size: 16px;
         }

    header  { font-size: 25px;
            }

    select,
    nav { font-size: 15px;
        }

    .list_file { width: calc(25% - 1px);
               }

    }










/*
+------------------------------------------------------------+
| 600px wide or less                                         |
+------------------------------------------------------------+
*/

@media (max-width: 600px)
    {

    .list_file { width: calc(33.33% - 1px);
               }

    }










/*
+------------------------------------------------------------+
| 450px wide or less (most phones)                           |
+------------------------------------------------------------+
*/

@media (max-width: 450px)
    {
    body { padding: 0px;
         }

    header { margin: 0px;
           }

    select,
    nav { font-size: 12px;
        }
    nav { margin: 0px 0px 0px 0px;
          font-size: 12px;
          padding: 10px;
        }

    #cam_list div { padding: 5px;
                    font-size: 11px;
                  }

    .list_file { width: calc(50% - 1px);
               }


    .viewer { width: 100%;
              margin: 0px;
            }

    }