@font-face { font-family: 'Roboto'; src: url('roboto.ttf') format('truetype'); } /* Responsive */ /* Standard */ @media screen { body { font-size: 10pt; } } /* Desktop - Laptop 1360x768 */ @media (max-resolution: 119dpi) and (min-device-width: 1340px) and (max-device-width: 1899px) { body { font-size: 10pt; } } /* Desktop - FHD 1920x1080 */ @media (max-resolution: 119dpi) and (min-device-width: 1900px) { body { font-size: 13pt; } } /* Mobile - Low DPI */ @media (min-resolution: 120dpi), (-webkit-min-device-pixel-ratio: 1.5) { body { font-size: 9pt; } } @media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) { body { font-size: 11pt; } } /* Mobile - Normal DPI */ @media (max-device-width: 383px) and (min-resolution: 192dpi), (max-device-width: 383px) and (-webkit-min-device-pixel-ratio: 2) { body { font-size: 10pt; } } @media (min-device-width: 384px) and (min-resolution: 192dpi), (min-device-width: 384px) and (-webkit-min-device-pixel-ratio: 2) { body { font-size: 11pt; } } /* Mobile - High DPI */ @media (max-device-width: 411px) and (min-resolution: 249dpi), (max-device-width: 411px) and (-webkit-min-device-pixel-ratio: 3) { body { font-size: 10pt; } } @media (min-device-width: 412px) and (min-resolution: 249dpi), (min-device-width: 412px) and (-webkit-min-device-pixel-ratio: 3) { body { font-size: 11pt; } } /* Global */ body { font-family: 'Roboto', 'Verdana', 'Sans'; background-color: #EEE; color: #333; position: absolute; height: 100%; width: 100%; margin: 0; overflow: auto; z-index: -2; } label, button, input, select, textarea, option { font-size: inherit; font-family: inherit; color: inherit; } iframe { border: none; } fieldset { margin: 0; } form { padding: 0; margin: 0; } table { width: 100%; } a:link, a:visited, a:active { color: inherit; text-decoration: none; } a:hover { text-decoration: none; cursor: pointer; } a img { padding: 1px; } a img:hover { opacity: 0.9; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: .2em 0; } h1 { font-size: 1.5em; } h2 { font-size: 1.2em; } p { margin: 0.8em 0; } /* Focus outline */ a:focus, input:focus, button:focus { outline: 1px solid rgba(1, 1, 1, 0.15); -moz-outline-radius: .1em; } button::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=button]::-moz-focus-inner, input[type=reset]::-moz-focus-inner { border: none; } select:-moz-focusring { /* color: transparent; text-shadow: 0 0 0 #333;*/ } /* Inputs */ input[type=text], input[type=password], input[type=file], input[type=number], textarea, select, .input { border: none; border-bottom: 1px solid #999; margin: .2em 0; box-sizing: border-box; color: #333; border-radius: 0; text-align: left; width: 100%; } input[type=text], input[type=password], input[type=number], textarea, .input { padding: 0 .2em; } input[type=text], input[type=password], input[type=file], input[type=number], select, .input { height: 2.2em; } textarea { height: 3.5em; width: 20em; } input[type=text]:focus, input[type=password]:focus, input[type=file]:focus, input[type=number]:focus, textarea:focus, .input:focus { border-color: #333; } input[type=checkbox], input[type=radio] { cursor: pointer; margin: .2em; padding: .3em; } select { background-color: white; -moz-appearance: none; appearance: none; } option { padding: .4em; border-width: 0; font-weight: normal; font-size: 1em; } select, option { cursor: pointer; } /* Buttons */ input[type=submit], input[type=button], input[type=reset], button, .button { border: none; background-color: transparent; padding: .5em; cursor: pointer; border-radius: 0.1em; margin: -0.5em; } input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, button, .button { background-color: rgba(1, 1, 1, 0.1); } /* Flat button */ button.flat, .button.flat { border: none; border-radius: 0.1em; box-shadow: 0 0.2em 0.2em #DDD; background-color: #AD4; color: black; } button.flat:hover, .button.flat:hover { background-color: #9C3; cursor: pointer; } button.flat:disabled, .button:disabled { color: gray; } /* Thin button */ input[type=submit].thin, input[type=button].thin, input[type=reset].thin, button.thin, .button.thin { color: #008D77; text-transform: uppercase; } input[type=submit].thin:disabled, input[type=button].thin:disabled, input[type=reset].thin:disabled, button.thin:disabled .button.thin:disabled { color: gray; } /* Image */ img.editable { cursor: pointer; } /* Button */ .htk-button img { height: 1.5em; } /* Float */ .clear { clear: both !important; } /* Box */ .box { background-color: white; margin: 0 auto; border-radius: 0.1em; box-shadow: 0 0.2em 0.2em #CCC; } .box .header { padding: 0.6em 0.8em; margin: 0; background-color: #009688; color: white; } .box .header > h1 { color: white; text-align: left; font-size: 1.6em; line-height: 2em; font-weight: normal; display: inline; } .box .body { padding: 2em; } /* Form */ .form { margin: 0 auto; } .form-group { margin-bottom: 1.2em; } .form-group:last-child { margin-bottom: 0; } .form-group > label { display: block; margin: 0; margin-bottom: .2em; font-size: .9em; color: #222; } .form-group > input[type=text], .form-group > input[type=password], .form-group > input[type=file], .form-group > input[type=number], .form-group > select, .form-group > textarea { margin: 0; width: 100%; } /* Form */ table.form { padding: 1em; border-collapse: separate; border-spacing: 0.3em; } table.form td.label { width: 45%; text-align: right; } table.form tr { height: 2.8em; } /* Icon */ img.icon { height: 1.5em; } /* Masonry */ .masonry { margin: 0 auto; text-align: left; } .masonry-box { width: 100%; display: inline-block; vertical-align: top; } @media screen and (min-width: 1000px) and (max-width: 1399px) { .masonry-box { width: 50%; display: block; float: left; clear: left; } .masonry-box:nth-child(2n+0) { float: right; clear: right; } } @media screen and (min-width: 1400px) { .masonry-box { width: 33.3%; } } @media screen and (min-width: 2000px) { .masonry-box { width: 25%; } } /* Social bar */ .htk-social-bar { text-align: center; } .htk-social-bar a { display: inline-block; margin: 0 .1em; } .htk-social-bar img { height: 1.8em; width: 1.8em; }