@font-face { font-family: 'Poppins'; src: url('poppins.ttf') format('truetype'); } /* Global */ body { font-family: 'Poppins', 'Verdana', 'Sans'; background-color: #FAFAFA; 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 { outline: 1px solid rgba(1, 1, 1, 0.15); -moz-outline-radius: .1em; } input:focus, button:focus { outline: 0; } 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;*/ } input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0px 9999px white; } /* Inputs */ input[type=text], input[type=password], input[type=file], input[type=number], textarea, select, .input { border: 1px solid #ddd; transition: border-color 100ms ease-in; margin: .2em 0; box-sizing: border-box; color: #333; border-radius: 0; text-align: left; width: 100%; &:focus { border-color: #333; } } input[type=text], input[type=password], input[type=number], textarea, .input, select { padding: .8em; } input[type=text], input[type=password], input[type=file], input[type=number], select, .input { height: 2.8em; } textarea { height: 3.5em; width: 20em; } input[type=text]:disabled { background-color: #f3f3f3; } input[type=checkbox], input[type=radio] { cursor: pointer; padding: .3em; margin-right: .6em; } 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; font-weight: bold; } .button { display: inline-block; text-align: center; box-sizing: border-box; } input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, button:hover, .button:hover { 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.flat:disabled { color: gray; } /* Thin button */ input[type=submit].thin, input[type=button].thin, input[type=reset].thin, button.thin, .button.thin { color: #008D77; border-radius: 1.4em; padding: .5em 1.4em; background-color: rgba(255, 255, 255, .1); font-weight: bold; } input[type=submit].thin:disabled, input[type=button].thin:disabled, input[type=reset].thin:disabled, button.thin:disabled .button.thin:disabled { color: gray; } input[type=submit].thin:hover, input[type=button].thin:hover, input[type=reset].thin:hover, button.thin:hover .button.thin:hover { background-color: rgba(0, 0, 0, .1); } /* 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: .6em; box-shadow: .05em .05em .2em rgba(0, 0, 0, .1); overflow: hidden; } .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 > h2 { margin-bottom: .8em; } .form-group { margin-bottom: 1.2em; } .form-group:last-child { margin-bottom: 0; } .form-group > label { display: block; margin: 0; margin-bottom: .2em; 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; }