/**
 * Copyright 2015 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

html, body {width:100%;height:100%;margin:0px;font-family: 'Roboto', 'Helvetica', sans-serif;}
header {padding:0px;background-color:#FF3333;color:white;}
nav { margin:0;padding:8px;text-align:left;background-color:#0080FF;}
main {height:auto;padding:0px;}
main section { float:left;width:20%;min-height:800px;height:auto;background-color:#DCDCDC }
main article { float:left;width:80%;height:auto}
footer {clear:both;width:100%;height:48px;color:white;background-color:#778899;text-align:right;padding:8px;}

header h1 {display:inline-block;margin:16px;}
header div {float:right;margin:45px 8px 0px 0px;}

nav ul {list-style:none;padding:0;margin:0;}
nav li {display:inline-block;margin-left:24px;}
nav li a{color:white;font-weight:bold;text-decoration:none;}
nav li a:hover{color:#FF3333;text-decoration:underline;}

main section h5 {margin: 8px;}

main section ul li a {color:black;}
main section ul li:hover a {color:red;}

main form {
  width:200px;height:120px;border:2px solid #ccc;
  padding:8px 15px;
  margin:auto;
  margin-top:30%;
}

main form input{display:block;margin-top:16px;}
main form button {display:block;margin-top:16px;}

main table, th, td {
  padding:8px;border:1px solid gray;border-collapse:collapse;text-align:center;
}
/*
main table tr.colored:nth-child(even){
  background-color:#aaaaaa;
  color:#000000;
}

main table tr.colored:nth-child(odd){
  background-color:#444444;
  color:#FFFFFF;
}
*/

main table tr.colored:hover td{
  background-color:lightgray !important;
  color:#303f39 !important;
}

/* input focus control generally*/
main input:focus::-webkit-input-placeholder { color:transparent; }*/
main input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
main input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
main input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

label {font-size:13px;font-weight:bold;}

input[type="file"] {
  display: none;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}


/* select {width:50px;color:#000000;} */
#userinfo {display:block;}
#loader {
  /*display:none;*/
  border:16px solid #f3f3f3; /* Light grey */
  border-top:16px solid #3498db; /* Blue */
  border-radius:50%;
  width:50px;
  height:50px;
  -webkit-animation:spin 2s linear infinite; /* Safari */
  animation:spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform:rotate(0deg);}
  100% { transform:rotate(360deg);}
}

/*Posting Board*/
#posting {margin:24px;}
.column {display:flex;align-items:stretch;padding-top:8px;padding-bottom:8px;background-color:#789;}
.column div {color:white;text-align:center;font-weight:bold;}
.row {width:100%;padding-top:8px;padding-bottom:8px;margin-bottom:2px;text-align:center;}
.row span {display:inline-block;text-align:center;}

#pagination {margin-top:16px;text-align:center;font-size:15px;}
#page {margin:8px;font-size:15px;}

#imageFile {margin-bottom:16px;}
/* The thumbTag contains border that has to be added to the thumbTag width to align horizontally.*/
#thumbImage img {display:inline-block;margin:0px 5px auto;}
#thumbTag span {display:inline-block;margin:0px 5px auto;font-size:11px;}

#editor {width:100%;border:1px solid #C8C8C8;margin-top:16px;font-size:13px;}
#btnStyles {
  margin:0 auto;vertical-align:bottom;text-align:right;background-color:#e8e8e8;
}
#btnStyles input[type='button'] {
  width:32px;height:24px;background-color:#3399ff;border:none;outline:none;
  color:#fff;font-weight:bold;
}
#btnStyles input[type='color'] {
  width:32px;height:18px;margin-left:16px;
}
#btnStyles select{
  width:80px;margin:0 4px;padding:2px;font-family:inherit;color:#fff;
  background-color:#3399ff;border:none;
}
#content {
  width:100%; height:200px;padding:8px;border:none;outline:none;
  font-size:13px;overflow:auto;
}
#btnAction {width:100%;margin-top:8px;}
#btnAction input {color:#FFFFFF;font-size:15px;}

.markup {/*user-select:none;*/display:block;/*font-weight:bold;*/color:red;}

/** AutoData **/
#autoform {margin:24px;}
#autoform .subtitle {
  width:100%;padding-bottom:8px;margin-bottom:16px;vertical-align:middle;
  border-bottom:3px solid #ccc;
}
#autoform .subtitle span {font-size:16px;font-style:bold;}
#autoform .subtitle button {float:right;}
#autoform .container {display:inline-block;margin-right:16px;vertical-align:top;}
#autoform .container select {height:40px;padding:3px;font-size:13px;}
#autoform .container input {height:40px;padding:3px;margin:0px;font-size:13px;}
#autoform .container button {height:30px;}
#autoform .listbox {
  width:120px;height:120px;font-size:13px;padding:3px;margin:8px;
  overflow-y:auto;border:1px solid #ccc;
}
#autoform .listbox span {display:block;width:100%;}
#autoform input {height:30px;margin-top:24px;}