/*************************************************/
/* Paradise ~ centerkey.com/paradise             */
/* GPLv3 ~ Copyright (c) individual contributors */
/*************************************************/

/* CSS Reset */
/* Do not add customizations to this file -- edit the CSS in: gallery/~data~/custom-style.css */

/* Core */
* { box-sizing: inherit; }
html { font-size: 100%; font-family: geneva, tahoma, sans-serif; box-sizing: border-box; overflow-y: scroll; }
html, body { min-height: 100%; }
body { color: dimgray; }
h1, h2, h3, h4, h5, h6 { padding: 0px; margin: 0px 0px 0.2em 0px; }
p { padding: 0px; margin: 0px 0px 0.8em 0px; }
img { border: none; }
ul, ol { font-size: 90%; margin-top: 2px; }
table { border-collapse: collapse; border-spacing: 0px; }
td { vertical-align: top; }
th, td { padding: 2px 10px; }
fieldset { border: 1px solid silver; }
legend { border: 1px solid silver; padding: 0.0em 0.5em; }
button, input[type=checkbox], input[type=radio], input[type=file], select { cursor: pointer; }
*:disabled { cursor: default; }
pre, code { font-family: monaco, terminal, monospace; font-style: normal; }
hr { border: none; border-top: 1px solid silver; }
aside { float: right; font-size: 0.9rem; margin: 0px 0px 20px 20px; }

/* Links */
a { text-decoration: none; color: dimgray; }
:not(.plain) >a:not(.plain):not(.image-link) { border-bottom: 1px dotted; }
:not(.plain) >a:not(.plain):not(.image-link):visited { color: darkgray; }
:not(.plain) >a:not(.plain):not(.image-link):hover { color: white; outline: 2px solid; }
:not(.plain) >a:not(.plain) img, :not(.plain) >a:not(.plain) i.fa { opacity: 0.8; }
:not(.plain) >a:not(.plain) img:hover, :not(.plain) >a:not(.plain) i.fa:hover { opacity: 1.0; }
a, a img, a i.fa { transition: all 0.3s; }
i.fa { font-size: 150%; }

/* Links color */
:not(.plain) >a:not(.plain):not(.image-link) { border-color: steelblue; }
:not(.plain) >a:not(.plain):not(.image-link):hover { background-color: steelblue; outline-color: steelblue; }

/* Button and forms */
button, input[type=checkbox], input[type=radio], input[type=file], select { cursor: pointer; }
button, input, select, textarea, optgroup, option, fieldset { transition: 0.3s opacity; }
input, textarea { font-size: 1.1rem; background-color: aliceblue; border: 1px solid silver; border-radius: 5px; padding: 0.3em; outline: none; }
select { font-size: 1.1rem; outline: none; }
label { display: block; margin-bottom: 0.5em; }
label >span:first-child { display: inline-block; width: 100px; vertical-align: top; text-align: right; padding-top: 0.5em; }
label select { margin: 0.4em 0.0em 0.0em 0.2em; }
label input[type=checkbox] { margin: 0.0em 0.4em 0.3em 0.3em; }
label input[type=radio] { margin: 0.55em 0.4em 0.0.0em 0.3em; }
label+button { margin-left: 108px; }

/* Flat buttons */
.flat button          { font-size: 1.1rem; font-weight: bold; color: white; border: none; border-radius: 0.4em; padding: 0.6em 1.2em; outline: none; transition: background-color 0.4s; }
.flat button i.fa     { vertical-align: middle; font-size: 120%; padding-right: 0.2em; }
.flat button:disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.flat button          { background-color: steelblue; }
.flat button:hover    { background-color: royalblue; }

/* Utilities */
.hide-me              { display: none !important; }
.block-indent         { display: block; margin-left: 40px; }
i.fa[data-href]       { opacity: 0.8; transition: all 0.5s; }
i.fa[data-href]:hover { opacity: 1.0; }

/* Video container */
.video-container {
   position: relative;
   height: 0px;
   padding-bottom: 56%;  /* 16:9 */
   overflow: hidden;
   }
.video-container iframe,
.video-container object,
.video-container embed {
   border: 5px solid black;
   position: absolute;
   top:  0px;
   left: 0px;
   width:  100%;
   height: 100%;
   }

/* Social buttons */
#social-buttons span i.fa {
   display: inline-block;
   width: 24px;
   height: 24px;
   line-height: 24px;
   font-size: 18px;
   vertical-align: top;
   text-align: center;
   color: dimgray;
   background-color: white;
   border: 1px solid silver;
   border-radius: 0.2em;
   margin-left: 8px;
   transition: 0.5s;
   }
#social-buttons span i.fa:hover {
   color: cornflowerblue;
   box-shadow: 0px 0px 0.4em skyblue;
   }