@font-face { font-family: 'hero'; src: url('../fonts/hero/hero_light-webfont.eot'); src: url('../fonts/hero/hero_light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/hero/hero_light-webfont.woff2') format('woff2'), url('../fonts/hero/hero_light-webfont.woff') format('woff'), url('../fonts/hero/hero_light-webfont.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'hero'; src: url('../fonts/hero/hero-webfont.eot'); src: url('../fonts/hero/hero-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/hero/hero-webfont.woff2') format('woff2'), url('../fonts/hero/hero-webfont.woff') format('woff'), url('../fonts/hero/hero-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'tinos'; src: url('../fonts/tinos/tinos-bold-webfont.eot'); src: url('../fonts/tinos/tinos-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/tinos/tinos-bold-webfont.woff2') format('woff2'), url('../fonts/tinos/tinos-bold-webfont.woff') format('woff'), url('../fonts/tinos/tinos-bold-webfont.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'tinos'; src: url('../fonts/tinos/tinos-bolditalic-webfont.eot'); src: url('../fonts/tinos/tinos-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/tinos/tinos-bolditalic-webfont.woff2') format('woff2'), url('../fonts/tinos/tinos-bolditalic-webfont.woff') format('woff'), url('../fonts/tinos/tinos-bolditalic-webfont.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'tinos'; src: url('../fonts/tinos/tinos-italic-webfont.eot'); src: url('../fonts/tinos/tinos-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/tinos/tinos-italic-webfont.woff2') format('woff2'), url('../fonts/tinos/tinos-italic-webfont.woff') format('woff'), url('../fonts/tinos/tinos-italic-webfont.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'tinos'; src: url('../fonts/tinos/tinos-regular-webfont.eot'); src: url('../fonts/tinos/tinos-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/tinos/tinos-regular-webfont.woff2') format('woff2'), url('../fonts/tinos/tinos-regular-webfont.woff') format('woff'), url('../fonts/tinos/tinos-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } html { overflow: auto; } body { font-family: "tinos", Georgia, sans-serif; background: #E9EAED; border: 0; font-size: 16px; margin: 0; } .title { font-family: "hero", "Franklin Gothic Book", sans-serif; font-weight: 300; } .subtitle { font-family: "hero", "Franklin Gothic Medium", sans-serif; font-weight: normal; } section#popup { position: absolute; display: none; width: 100%; height: 100%; z-index: 2; } section#info, div#admin-content, div#content, header, nav, footer { margin: 0 auto; max-width: 800px; } #content-header #ribbon { font-size: 16px !important; width: 50%; position: relative; background: #3399CC; color: #fff; text-align: center; float: left; box-sizing: border-box; margin-left: -49px; height: 80px; line-height: 80px; -webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2); box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2); } #content-header #ribbon #title { margin: 0; font-size: 2.5em; } #content-header #ribbon #title:before { content: ""; position: absolute; display: block; border-style: solid; border-color: #3079a9 transparent transparent transparent; bottom: -0.5em; left: 0; border-width: 0.5em 0 0 0.6em; } #content-header #logo { float: right; } #content-header #logo img { max-height: 80px; display: block; } div#content { padding: 25px; box-sizing: border-box; margin-top: 25px; } div#admin-content { margin-top: 25px; } .left { float: left; } .right { float: right; } .clear { clear: both; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .white-box { background: #fff; border-radius: 3px; border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5; } .btn { border: 0; padding: 7px 10px; background-color: #3399CC; transition: 0.3s; color: #fff; font-size: 1em; cursor: pointer; } a.btn { text-decoration: none; } .btn:hover { background-color: #3079a9; } .btn-cancel { display: inline-block; } footer { text-align: center; padding: 25px 0; } footer a { color: #000; } .loader { height: 128px; width: 128px; background-size: 128px; display: block; background: url('data:image/gif;base64,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'); } .action-btn { display: inline-block; margin-right: 5px; padding-left: 21px; background-size: auto 16px; background-repeat: no-repeat; background-position: 5px center; position: relative; } /* Page actions */ .page-actions { padding-bottom: 15px; } .page-actions .back::before { content: "\000AB"; background: none; left: 6px; top: 2px; font-size: 1.4em; position: absolute; } /* Form */ form ul.form-list { list-style: none; padding: 0; margin: 0; } form ul.form-list li { margin-top: 10px; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 10px 0; } form ul.form-list li > label > span { display: block; margin-bottom: 10px; } form ul.form-list li:first-child { margin-top: 0; } form ul.form-list li input[type="text"] { border-radius: 3px; padding: 7px; border: 1px solid #ddd; } form ul.form-list li input[type="text"], form ul.form-list li input[type="file"] { display: block; margin-top: 10px; } form .btn { margin-top: 10px; } input[type="text"], textarea { border-radius: 3px; padding: 7px; border: 1px solid #ddd; } /* Simple table */ .simple-table { width: 100%; border-collapse: collapse; text-align: left; margin-top: 20px; } .simple-table th { background: #3399CC; color: #fff; } .simple-table th, td { padding: 5px; border: 1px solid rgba(24, 78, 129, 0.1); } .simple-table tr:nth-child(odd) td { background: #F0F0F6; } .simple-table thead tr .header { background-image: url(../img/jq-table-bg.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; } .simple-table thead tr .headerSortUp { background-image: url(../img/jq-table-asc.gif); } .simple-table thead tr .headerSortDown { background-image: url(../img/jq-table-desc.gif); } .simple-table .actions a { display: block; text-decoration: none; color: #fff; } .simple-table .actions .btn { padding: 3px; display: inline-block; margin-right: 5px; height: 16px; width: 16px; background-size: auto 16px; background-repeat: no-repeat; background-position: center; } .simple-table .actions .send { background-image: url(../img/icons/icon-send-email.png); width: 38px; } .simple-table .actions .reminder { background-image: url(../img/icons/icon-reminder-email.png); width: 38px; } .simple-table .actions .reminder.disabled { opacity: 0.4; } .simple-table .actions .view { background-image: url(../img/icons/icon-view.png); } .simple-table .actions .edit { background-image: url(../img/icons/icon-edit.png); } .simple-table .actions .edit.disabled { opacity: 0.4; } .simple-table .actions .delete { background-image: url(../img/icons/icon-delete.png); } @media (max-width: 30em) { div#content { padding: 10px; margin-top: 0; } } .info { margin-top: 20px; position: relative; overflow: hidden; transition: 1s; height: 43px; } .info .info-content { padding: 5px; height: 32px; line-height: 32px; border-bottom: 1px solid; border-radius: 3px; } .info .information { background: #76afdc; border-color: #5c8db2; } .info .success { background: #8ec641; border-color: #80b23a; } .info .warning { background: #fddb55; border-color: #e8c64e; } .info .error { background: #F0947B; border-color: #d5684d; } .info img { height: 32px; width: 32px; border: 0; display: block; position: absolute; } .info span { font-weight: bold; vertical-align: middle; display: inline-block; font-size: 0.9em; line-height: normal; padding: 0 30px 0 40px; } .info .information span, .info .success span { color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } .info .warning span , .info .error span { color: #222; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); } .info .close-info { position: absolute; background: #555; border-bottom: 1px solid #333; height: 18px; width: 18px; line-height: 16px; text-align: center; top: 12px; right: 12px; color: #ddd; font-weight: bold; cursor: pointer; border-radius: 3px; } .info-small { margin-top: 10px; height: auto; } .info-small .info-content { padding: 4px 4px 3px; height: auto; line-height: normal; } .info-small span { font-weight: normal; padding: 0 30px 0 0; } .info-small .close-info { top: 3px; right: 3px; } #popup { } #popup .popup-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100% } #popup .popup-shadow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: rgba(0,0,0,0.6); } #popup .popup-container { padding: 2%; position: relative; top: 25px; z-index: 1; max-width: 800px; width: 100%; box-sizing: border-box; margin: 0 auto; background: #fff; border-radius: 3px; border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5; } #popup .popup-container-small { max-width: 500px; } #popup .popup-container .popup-close { position: absolute; right: 10px; top: 10px; border-radius: 3px; background: #76a1d4; color: #fff; padding: 2px 7px; cursor: pointer; font-weight: bold; } #popup .popup-container .popup-close:hover { background: #6990bc; } #popup h1 { font-size: 2.5em; font-weight: 300; color: #76a1d4; margin: 0; padding: 0 0 20px; border-bottom: 1px solid rgba(0,0,0,0.1); } #popup .action-popup h3 { margin-top: 0; } #popup .action-popup .btn { margin-right: 10px; } #popup #popup-block-edit ul { padding: 0; list-style: none; } #popup #popup-block-edit ul li { border-bottom: 1px solid rgba(0,0,0,0.1); padding: 10px 0; } #popup #popup-block-edit ul li h4 { margin-top: 0; } #popup #popup-block-edit ul li .mce-tinymce { margin: 10px 0; } #popup #popup-block-edit ul li .btn { padding: 5px 9px; } #user { margin-top: 25px; padding: 1%; } #user a { display: block; float: right; } #admin-wrapper { padding: 2%; } #admin-wrapper h2 { margin-top: 0; } #admin-wrapper label textarea { width: 100%; min-height: 250px; box-sizing: border-box; } #admin-project-edit-right, #admin-project-edit-left { width: 48%; } #admin-project-edit-left { float: left; padding-right: 2%; } #admin-project-edit-right { float: right; padding-left: calc(2% - 1px); border-left: 1px solid #eee; } #admin-type-table .admin-type-color { padding: 3px 5px; color: #fff; } .ui-datepicker-calendar{display:none} #admin-project-table th:hover {cursor : pointer} #admin-project-table th:last-child:hover {cursor : unset} #admin-project-table th:first-child {width: 35%} #admin-project-table th div,span {display: inline-block;} .arrow-up {width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid white;} .arrow-down {width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid white;} #login-box { text-align: center; } #login-box h2 { margin: 0; } #login-box input { margin-top: 20px; } #login-box input[type="text"], #login-box input[type="password"] { margin-top: 20px; padding: 7px; border: 1px solid #eee; border-radius: 3px; text-align: center; } #home-project-list {display: flex; flex-wrap: wrap; margin: 40px 0; width: 100%; } #home-project-list .home-project { display: block; flex: 1 0 31%; background: #000000; margin: 0 1% 2%; padding: 2%; color: #fff; box-sizing: border-box; position: relative; height: 9em; cursor: pointer; -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.1); -moz-box-shadow: 0 0 7px 0 rgba(0,0,0,0.1); box-shadow: 0 0 7px 0 rgba(0,0,0,0.1); } /*#home-project-list .home-project:nth-child(3n+1) { margin-left: 0; } #home-project-list .home-project:nth-child(3n+3) { margin-right: 0; } #home-project-list .home-project:hover::before { position: absolute; content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); top: 0; left: 0; }*/ #home-project-list .home-project .home-project-title { height: 100%; text-align: center; } #home-project-list .home-project .home-project-title h4 { font-size: 1.3em; display: inline-block; vertical-align: middle; } #home-project-list .home-project .home-project-title::before { content: ''; display: inline-block; height: 100%; width: 0; vertical-align: middle; } #home-project-list .home-project .home-project-type { position: absolute; font-size: 0.75rem; top: 0; right: 0; padding: 4px 6px; background: rgba(0,0,0,0.1); opacity: 0.75 } #home-project-list .home-project .home-project-description { display: none; padding: 10px; background: rgba(0,0,0,0.15); max-width: 500px; margin: 0 auto 25px; white-space: pre-wrap; } #home-project-list .home-project ul { display: none; margin: 0; padding: 5px; color: #000; width: 100%; box-sizing: border-box; list-style: none; } #home-project-list .home-project ul li { padding: 3px; } #home-project-list .home-project ul li:hover { padding: 0; } #home-project-list .home-project ul li a { display: block; padding: 5px 7px; background: #fff; text-decoration: none; color: #222; } #home-project-list .home-project ul li:hover a { padding: 8px 10px; font-weight: bold; } #home-project-list .home-project.active { flex-basis: 98%; height: auto; } #home-project-list .home-project.active .home-project-title { flex-basis: 98%; height: auto; } #home-project-list .home-project.active .home-project-type { opacity: 1; } #home-project-list .home-project.active .home-project-description { display: block; } #home-project-list .home-project.active ul { display: block; } #search-ribbon #home-search-wrapper { position: relative; height: 100%; } #sorting-search-bar #search-ribbon #home-search-wrapper label { position: absolute; left: 5px; top: 0; bottom: 0; margin: auto; width: 35px; height: 35px; transition: 0.3s; cursor: pointer; display: block; box-sizing: border-box; background: url(../img/icon-search.png) center left no-repeat; background-size: contain; } #sorting-search-bar #search-ribbon #home-search-wrapper label.hascontent, #sorting-search-bar #search-ribbon #home-search-wrapper label:hover { background-color: #3399CC; width: 95%; } #sorting-search-bar #search-ribbon #home-search-wrapper input { display: none; border: solid #fff; border-width: 0 0 3px; width: 80%; height: 100%; margin-left: 20%; box-sizing: border-box; background-color: transparent; border-radius: 0; color: #fff; vertical-align: middle; font-size: 1.3em; } #sorting-search-bar #search-ribbon #home-search-wrapper label.hascontent input, #sorting-search-bar #search-ribbon #home-search-wrapper label:hover input { display: block; } #sorting-search-bar #search-ribbon #home-search-wrapper:hover + .title{display: none;} #sorting-search-bar #search-ribbon { width: 250px; position: relative; background: #3399CC; color: #fff; text-align: center; box-sizing: border-box; height: 53px; } #sorting-search-bar #search-ribbon #title { margin: 0; font-size: 2.5em; } #sorting-search-bar {display: inline-flex; margin-top: 20px; justify-content: space-between; flex-wrap: wrap; width: 100%; padding: 0 1%; box-sizing: border-box;} #sorting-search-bar > div {flex: 1 0 50%;} #sorting-search-bar #search-ribbon .title {position: absolute;bottom : 5px; left : 40px;line-height: 0; margin-top: 0; width: 180px;} #sorting-header { width: 100%;text-align: right} .dropdown-button {color : white; background-color: #3399CC; padding: 16px; font-size: 1rem;border : none; height: 53px; cursor:pointer;font-family: "hero", "Franklin Gothic Book", sans-serif;} .dropdown {position: relative; display: inline-block;} .dropdown-content {display: none; position: absolute;background-color: #3399CC;min-width: 175px;z-index: 1;text-align: center; right : 0} .dropdown-content .sorting-options-option {color: white;padding: 6px 10px;text-decoration: none;display: block;} .dropdown-content div:hover {background-color: #f1f1f1; cursor: pointer} #sorting-content:hover .dropdown-content {display: block;} #sorting-content:hover .dropdown-button {opacity: 0.8} .arrow-up-home {width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid white; display: inline-block;margin-left: 5%;} .arrow-down-home {width: 0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 8px solid white;display: inline-block;margin-left: 5%;} @media (max-width: 40em) { #home-project-list {margin-top: 20px;} #home-project-list .home-project {flex: 1 0 48%;} #content-header #logo, #content-header #ribbon {width: 100%; margin-left: 0; float: none;} #content-header #logo img {margin: 20px auto; max-height: 60px; } #content-header #ribbon { height: 60px; line-height: 60px; } #content-header #ribbon #title { font-size: 2rem; } #content-header #ribbon #title:before { display: none; } #sorting-search-bar > div {flex: 1 0 100%;display: flex;justify-content: flex-end;margin: 0 0 5px 0;} #sorting-content, .dropdown-button, .dropdown-content, #sorting-search-bar #search-ribbon {width: 100%;} #sorting-search-bar #search-ribbon .title {width: 100%; left: 0;} } @media (max-width: 30em) { #home-project-list .home-project { flex-basis: 100% !important; } #content-header #logo img { max-height: 50px; } #content-header #ribbon #title { font-size: 1.5rem; } }