/*@font-face { font-family: "Avenir"; src: url('../fonts/AvenirLTStdBook.eot'); src: url('../fonts/AvenirLTStdBook.eot') format('embedded-opentype'), url('../fonts/AvenirLTStdBook.woff2') format('woff2'), url('../fonts/AvenirLTStdBook.woff') format('woff'), url('../fonts/AvenirLTStdBook.ttf') format('truetype'), url('../fonts/AvenirLTStdBook.svg#AvenirLTStdBook') format('svg'); } @font-face { font-family: "Avenir"; src: url('../fonts/AvenirNextLTProBold.eot'); src: url('../fonts/AvenirNextLTProBold.eot') format('embedded-opentype'), url('../fonts/AvenirNextLTProBold.woff2') format('woff2'), url('../fonts/AvenirNextLTProBold.woff') format('woff'), url('../fonts/AvenirNextLTProBold.ttf') format('truetype'), url('../fonts/AvenirLTStdHeavy.svg#AvenirNextLTProBold') format('svg'); font-weight: bold; } @font-face { font-family: "Avenir"; src: url('../fonts/AvenirLTStdBookOblique.eot'); src: url('../fonts/AvenirLTStdBookOblique.eot') format('embedded-opentype'), url('../fonts/AvenirLTStdBookOblique.woff2') format('woff2'), url('../fonts/AvenirLTStdBookOblique.woff') format('woff'), url('../fonts/AvenirLTStdBookOblique.ttf') format('truetype'), url('../fonts/AvenirLTStdBookOblique.svg#AvenirLTStdBookOblique') format('svg'); font-style: italic; }*/ /* main elements */ * {margin: 0; padding: 0;} body, input, button, select, option, textarea {font-family: 'Source Sans Pro', helvetica, sans-serif; } body {font-size: 11pt; background-color: #f0f0f0; margin: 0 0 0 0;min-width: 1000px;} header {position: absolute; z-index: 100;} input, button, select, option, textarea {font-size: 100%;} input {height: 22px;} .normal-radio {display: none;} .normal-radio {-webkit-appearance: none;background: transparent;border: 2px solid #333;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);padding: 8px;border-radius: 30px;display: inline-block;position: relative; height:15px;} .normal-radio:checked:after {content: ' ';width: 10px;height: 10px;border-radius: 50px;position: absolute;top: 3px;background: #0070b8;box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);text-shadow: 0px;left: 3px;font-size: 22px;} .normal-radio + label[for] {top: -8px; position: relative; padding-left: 5px;} /*.normal-checkbox {display:none;} .normal-checkbox {-webkit-appearance: none;background: transparent;background-color: #ffffff; border: 1px solid #cacece;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);padding: 9px;border-radius: 3px;display: inline-block;position: relative; margin-top: 3px} .normal-checkbox:active, .normal-checkbox:checked:active {box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);} .normal-checkbox:checked {background-color: #e9ecee;border: 1px solid #adb8c0;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);color: #99a1a7;} .normal-checkbox:checked:after {content: '\X';font-size: 14px;position: absolute;top: 0px;left: 3px;color: #0070b8; font-weight: bold; font-size: 17px;}*/ h1 {font-size:16pt; margin: 0; padding: 0; } h2 {text-transform: uppercase; font-size:14pt; margin: 0 0 5px 0; padding: 0; } h3 {font-size:10pt; margin: 0 0 5px 0; padding: 0; } p {margin: 0;} /* Lean Modal */ #lean_overlay { position: fixed; z-index:10999; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none; } /* Common / Layout */ .clarification {font-style: italic;} .clearfloat {clear: both;} .noborder {border:solid 1px transparent !important;} .mask {padding: 2px; } .innercontainerGrey {background-color:#e7e7e7; padding: 10px 15px 10px 15px; } .regel {padding: 2px 0 1px 0; } .greenline {height: 22px; background: transparent url("../Images/line.png") repeat-x center left;} .noborderContainer {padding: 10px; margin: 10px 20px 10px 20px;} .searchbox {float: right;} .searchbutton {margin: 0 0 -7px 0; cursor: pointer;} .datepicker {width: 90px;margin: 0 5px 0 0;} .ui-datepicker-trigger { width: 20px;height: 22px;margin-bottom: -6px;} .editContainer {padding: 10px; margin: 10px 20px 10px 20px;border: solid 1px #000; background-color: #fff; box-shadow: 2px 2px 5px #B0B0B0; } .editContainerLabel {float: left;padding: 5px; font-weight: bold;} .editContainerLabelboven {float: left; font-weight: bold; padding:8px 2px 2px 2px;} .error {color:red; font-weight:bold} .hide {display:none !important;} /* Header */ .headerContainer {width: 100%; padding: 0; background-color: #333; height: 60px; position: relative; z-index: 10; position: fixed;} .headerContainer p {color: #fff;} .accountContainer {padding: 5px 24px 5px 5px; width: 300px; height: 42px; float: right; text-align: right; margin: 4px; background-color: #1a1a1a; background-image: url(../images/arrow-white-down.png); background-position: top right; background-repeat: no-repeat;} .accountContainer p {cursor: pointer;} .accountContainer p.Administrator {background-image: url(../Images/icon_adminprofile.png?w=30); background-position: top left; background-size: 30px auto; background-repeat: no-repeat;} .userInformation {text-align: right; position: absolute; top: 61px; right: 4px; padding: 5px; background-color: #1a1a1a; width: 319px;} .userInformation a {color: #fff;background-image: url(../images/arrow-white-left.png);background-position: right center;background-repeat: no-repeat;padding-right: 20px;} /* User change form*/ #userChangeForm {width: 706px; background-color: #fff; border: 3px solid #333;} #userChangeForm .header {width: 700px; background-color: #0070b8; text-align: center; color: #fff; height: 30px; line-height: 30px;} #userChangeForm .arrow {width: 100%; height: 10px; background-image: url(../images/arrow-down.png); background-position: top center; background-repeat: no-repeat} .organisationInformation .organisation {float: left; width: 300px; padding-left: 20px;} .organisationInformation .organisationContact {float: left; width: 200px;} .personalInformation {width: 690px; height: 95px; margin: 5px; padding: 10px; background-color: #e2e2e2;} .personalInformation .formLabel label {float: left; width: 30%; padding-left: 20px; font-weight: normal !important; font-size: 12px} .personalInformation .formField {float: left; width: 70%; padding: 3px;} .loginInformation {width: 690px; height: 145px; margin: 5px; padding: 10px; background-color: #e2e2e2;} .loginInformation .formLabel label {float: left; width: 30%; padding-left: 20px; font-weight: normal !important;} .loginInformation .formField {float: left; width: 70%;} .loginInformation .information {float: left; padding-left: 30%;font-size: 12px; font-style: italic;} /* Media form */ #mediaUploadForm, #youtubeSelector {width: 806px; min-height: 680px; height: auto; background-color: #fff; border: 3px solid #333;} #screensForm {width: 806px; height: 600px; background-color: #fff; border: 3px solid #333;} #addSlidePopup {width: 806px; height: 730px; background-color: #fff; border: 3px solid #333;} #bookSelectionForm {width: 806px; height: 650px; background-color: #fff; border: 3px solid #333;} #userChangeInformation { width: 806px; min-height: 680px; height: auto; background-color: #fff; border: 3px solid #333; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; } .header {width: 100%; background-color: #0070b8; text-align: center; color: #fff; height: 30px; line-height: 30px;} .label {float: left; width: 750px;} .field {float: left; width: 500px;} .submitbutton {float: right;} .searchfields {float: left; width: 745px; padding: 10px; margin-bottom: 10px; background-color: #f1f1f1;} .leftfilters {float: left; width: 400px; margin-right: 20px;} .leftfilters .label {float: left; width: 400px; font-size: 14px; margin-bottom: 10px;} .leftfilters .searchfield {float: left; width: 400px;} input#search {background-image: url(../images/btn_search.png); background-size: auto 24px; background-position: center right; background-repeat: no-repeat; width: 360px; height: 26px; border: 1px solid #cccccc; font-size: 14px; padding: 0 35px 0 5px;} input.search {background-image: url(../images/btn_search.png); background-size: auto 24px; background-position: center right; background-repeat: no-repeat; width: 360px; height: 26px; border: 1px solid #cccccc; font-size: 14px; padding: 0 35px 0 5px;} input#slideDates {background-image: url(../images/btn_date.png); background-size: auto 31px; background-position: center right; background-repeat: no-repeat; width: 360px; height: 34px; border: 1px solid #cccccc; font-size: 14px; padding: 0 35px 0 5px;} .rightfilters {float: left; width: 320px;} .rightfilters .label {float: left; width: 320px; font-size: 14px;} .rightfilters .OwnFiles {float: left; width: 270px; height: 21px; line-height: 21px; background-image: url(../images/icon-upload.png); background-position: center left; background-repeat: no-repeat; padding-left: 25px; padding-right: 5px; font-weight: bold; text-transform: uppercase;} .rightfilters .OwnFilesCheckbox {float: left; width: 20px; height: 21px; line-height: 21px; bottom: 5px; margin-bottom: 5px;} .rightfilters .SharedFiles {float: left; width: 270px; height: 21px; line-height: 21px; background-image: url(../images/icon-share.png); background-position: center left; background-repeat: no-repeat; padding-left: 25px; padding-right: 5px; font-weight: bold; text-transform: uppercase;} .rightfilters .SharedFilesCheckbox {float: left; width: 20px; height: 21px; line-height: 21px; bottom: 5px;} .fileResults .mediaItems { float: left; padding: 10px; position: relative; } .fileResults .mediaItem { float: left; margin-right: 10px; margin-bottom: 10px; width: 150px; height: 167px; overflow: hidden; text-align: center; padding-left: 5px; padding-right: 7px; position: relative; } .fileResults .mediaItem a { display: block; overflow: hidden; } .fileResults .mediaItem img { border: 2px solid #ffffff; margin-top: 5px; } .fileresults .mediaItem img.selected { border: 2px solid #9b005d; } .foundfiles { float: left; width: 740px; height: 196px; overflow: auto; padding-bottom: 10px; padding-right: 10px; border: 2px solid #cccccc; background-color: #ffffff; } .foundfiles .mediaItem { width: 95px; height: 105px; font-size: 10pt; } .foundfiles .mediaItem img { height: 60px; } .fileResults { float: left; width: calc(100vw - 417px); height: auto; padding: 0 0 10px 0; background-color: #fff; } .foundfiles .fileResults, .foundfiles .categoryBar, .foundfiles .organisationName { width: 100%; } .mediaClick { text-decoration: none;} .content-fields {float: left; width: 400px; margin-right: 50px;} .content-fields label {float: left; width: 400px; font-size: 12px; margin-top: 10px;} .image-preview-container { float: left; width: 308px; height: 379px; background: white; border: solid 2px #666; } .image-preview { height: 349px; width: 308px; line-height: 349px; text-align: center; } .image-preview a { line-height: normal; vertical-align: middle; display: inline-block; } .image-preview a img { max-height: 320px; max-width: 260px; } .image-tools { height: 30px; width: 298px; background-color: #f1f1f1; line-height: 30px; padding: 0 5px; } .image-tools span { float: left; font-size: 12px; } .image-tools .image-button { float: left; background-color: #0070bb; background-size: 12px; background-position: center; background-repeat: no-repeat; width: 22px; height: 22px; margin-left:5px; margin-top: 4px; cursor: pointer; } .image-tools .image-button.rotate-left { background-image: url('../Images/icon_rotateleft.png') } .image-tools .image-button.rotate-right { background-image: url('../Images/icon_rotateright.png'); } .image-tools .image-button.fullscreen { float: right; background-image: url('../Images/icon_fullscreen.png'); } .image-rotation { display: none; } .submitButtons {float: right;margin-right: 10px;} .shareContainer {float: left; width: 390px; background-color: #d1d1d1; padding: 5px;} .SharedFile {float: left; width: 345px; height: 21px; line-height: 21px; background-image: url(../images/icon-share.png); background-position: center left; background-repeat: no-repeat; padding-left: 25px; font-weight: bold; text-transform: uppercase;} .SharedFileCheckbox {float: left; width: 20px; height: 21px; line-height: 21px; bottom: 10px;} /*.SharedFileCheckbox .normal-checkbox {-webkit-appearance: none;background: transparent;background-color: #ffffff;border: 1px solid #cacece;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);padding: 9px;border-radius: 3px;display: inline-block;position: relative;top: -9px;}*/ .fileInformation {float: left; width: 380px; background-color: #666; color: #fff; font-size: 12px; padding: 10px; margin: 10px 0;} .ui-autocomplete .ui-corner-all, .ui-autocomplete { border-radius: 0 !important; } .ui-autocomplete { font-size: 13px !important; color: #000 !important; } .ui-autocomplete .ui-state-focus { background: #dddce8 !important; } /* Back */ .backContainer {padding: 10px; margin: 7px 20px 0 20px; height: 60px; border: solid 1px #000; background-color: #fff; box-shadow: 2px 2px 5px #B0B0B0;} .backLinkContainer {margin: 35px 0 5px 0;float: right;} .backLinkContainer a {background: transparent url("../Images/button_mid_left.png") no-repeat top left; text-decoration: none; color: #fff; text-align: right; white-space: nowrap; display: block; width: 126px; height: 21px; padding: 4px 10px 0 56px;} .backLinkContainer a:hover {text-decoration: underline; background-position:0 -25px;} /* Login */ .Logincontainer {width: 500px; margin: 0 auto;padding-top: 100px;} .login {width: 500px; margin: 0 auto; border: solid 3px #333; background-color:#eee; box-shadow: 2px 2px 5px #B0B0B0;} .loginForm {width: 94%; padding: 7px;} .loginForm h2 {text-transform: uppercase; font-size: 14px; font-weight: bold;} .loginForm p {color: #333; font-size: 12px; margin-bottom: 20px;} .loginForm .formData {background-color: #e2e2e2; padding: 7px 7px 20px 7px; width: 100%;} .loginForm .formData h2 {text-transform: uppercase; font-size: 14px;} .loginForm .formData .formLabel {float: left; width: 30%; font-size: 12px; height: 34px; line-height:30px;} .loginForm .formData .formField {float: left; width: 68%;} .logo {float: left;height: 60px; border: none; width: 60px; margin-left: 5px; margin-top: 2px; margin-right: 3px; display: block;} .logo a {height: 60px; border: none; width: 60px; background: url('../images/logo.gif') no-repeat left top; display: block;} .logo a:hover { background-image: url('../images/logo_loop.gif'); } .logoText {width: 200px; float: left; height: 60px;} .logoText a {padding: 0 10px 0 0; width: 140px; display: block;} .logoText a:first-of-type {height: 30px; padding-top: 5px;} .logoText a:first-of-type img {height: 30px; border: none;} .logoText a:last-of-type {height: 25px; line-height: 25px; color: #fff; text-decoration: none;} .loginHeader {width: 100%; background-color: #0070b8; text-align: center; color: #fff; height: 30px; line-height: 30px;} .loginbuttoncontainer {margin: 0 auto;height: 50px; } .loginsubmitContainer {margin: 10px 10px 10px 280px; } .messageContainer {color: red; width: 240px;margin: 0;float: left;display: block; } .messageContainer ul {list-style: none; padding: 0; margin: 0;} .messageContainer li {list-style: none; padding: 0;} #UserName {width: 100%; } #Password {width: 100%; } /* Buttons (Input) */ .buttons {float: right; width: 200px; margin: 5px 10px 0 0;} .button {background-color: #0074c5; text-decoration: none; border-style: none; color: #fff; text-align: right; padding: 0 0 0 5px; height: 30px; line-height: 30px; display: block; padding-right: 30px;} .button:hover {background-color: #28aee6; text-decoration: underline; cursor: pointer;} .buttonneg {background-color: #28aee6; text-decoration: none; border-style: none; color: #fff; text-align: right; padding: 0 0 0 5px; height: 30px; line-height: 30px; display: block; padding-right: 30px;} .buttonneg:hover {background-color: #0074c5; text-decoration: underline; cursor: pointer;} a.button:hover {color: #ffffff;} .LoginButton {width: 200px; background-image: url(../images/vinkje.png); background-position: right center; background-repeat: no-repeat; text-align: right; } .ConfirmButton {width: 170px; background-image: url(../images/vinkje.png) !important; background-size: 25px auto !important; background-position: right center; background-repeat: no-repeat; text-align: right; } input[type="button"].ConfirmButton {width: 200px; background-image: url(../images/vinkje.png) !important; background-size: 25px auto !important; background-position: right center; background-repeat: no-repeat; text-align: right; } input[type="button"].ShowAllButton {width: 220px; background-image: url(../Images/btn_overview.png); background-size: 25px auto; background-position: right center; background-repeat: no-repeat; text-align: right; border-right: 5px solid transparent;} .arrowButton { width: 155px; background-image: url(../images/arrow-white-right.png); background-position: right center; background-repeat: no-repeat; border-right: 10px solid transparent; } .deleteButton { width: 155px; background-image: url(../images/cross2.png); background-position: right center; background-repeat: no-repeat; border-right: 10px solid transparent; } .stopButton { width: 155px; background-image: url('../Images/icon_stop.png'); background-position: right center; background-repeat: no-repeat; background-size: 15px; border-right: 10px solid transparent; } .calendarButton { width: 203px; background-repeat: no-repeat; background-image: url('../Images/btn_calendar_active.png'); background-position: right 10px center; padding-right: 30px; background-size: 15px; margin-left: 10px; } #viewButtonAll { background-image: url('../Images/btn_calendar_all.png'); display: none; } input[type="button"].arrowButton {width: 200px; background-image: url(../images/arrow-white-right.png); background-position: right center; background-repeat: no-repeat; border-right: 10px solid transparent;} .UploadButton {width: 200px; background-image: url(../images/upload-icon.png); background-position: right center; background-repeat: no-repeat; text-align: right;border-right: 10px solid transparent; } .CancelButton {width: 200px; background-color: #4d4d4d; background-image: url(../images/cross.png); background-position: right center; background-repeat: no-repeat; text-align: right;} .addButton {min-width: 155px; background-image: url(../images/btn_add.png); background-size: auto 15px; background-position: right center; background-repeat: no-repeat; border-right: 10px solid transparent;} input[type="button"].CancelButton {width: 200px; background-color: #4d4d4d; background-image: url(../images/cross.png) !important; background-size: 25px auto !important; background-position: right center; background-repeat: no-repeat;} input[type="button"].RemoveButton {width: 150px; border: 0; text-align: left; background-color: #4d4d4d; background-image: url(../images/cross.png) !important; background-size: 25px auto !important; background-position: right center; background-repeat: no-repeat; color: #fff; text-align: left; padding: 0 0 0 5px; height: 27px; } .CancelButton:hover {background-color: #a4a4a4; text-decoration: underline; cursor: pointer;} .add-to-presentation, .preview-screen, .btn-screen, .presentation-overview {padding-right: 35px; background-position-x: right 5px !important; width: 240px} .add-to-presentation {background-image: url('../Images/btn_add.png') !important; } .preview-screen {background-image: url('../Images/btn_addtopresentation.png') !important; margin-bottom: 20px !important; width: 200px;} .btn-screen {background-image: url('../Images/btn_edit.png') !important; width: 200px;} .editButton {width: 161px; background-image: url(../Images/btn_edit.png); background-size: 25px auto; background-position: right center; background-repeat: no-repeat; text-align: right; border-right: 5px solid transparent; } .plugin-button { float: right; } .plugin-button a, .plugin-button span { width: 135px; padding: 5px; margin-top: 3px; margin-right: 0; border-right: 5px solid transparent; color: #fff; background-color: #9b005d; background-image: url(../images/arrow-white-right.png); background-position: 97% 50%; background-repeat: no-repeat; text-decoration: none; display: block;} .plugin-button a:hover {text-decoration: underline;} /* MainMenu Items */ .mainMenu {background-color: #0070bb; color: #ffffff; width: 100%; top: 60px;position: fixed; padding-bottom: 20px;} .mainMenuItems {width: 1000px; margin: 0 auto;} .mainMenuItems a { float: left; display: block; background-position: center center; background-repeat: no-repeat; text-align: center; vertical-align: bottom; padding-top: 130px; color: #ffffff; font-size: 14px; text-decoration: none; line-height:20px; height: 20px; width: 250px; } .mainMenuItems > a:hover { text-decoration: underline; } .btnManagePresentations { background-image: url(../images/icon_presentations.png); background-size: 134px auto; } .btnManageScreens { background-image: url(../images/icon_screens.png); background-size: 114px auto; } .btnManageSlides { background-image: url(../images/icon_slides.png); background-size: 146px auto; } .btnAddSlide { background-image: url(../images/icon_addslide.png); background-size: 114px auto; } .btnSharedSlides { background-image: url(../Images/icon_sharedslides.png); background-size: 114px auto; } .btnManageUsers { background-image: url(../images/icon_users.png); background-size: 60px auto; } .btnManageOrganisations { background-image: url(../Images/icon_organisations.png); background-size: 114px auto; } .btnManageMedia { background-image: url(../Images/icon_media.png); background-size: 70px auto; } .btnAddMedia { background-image: url(../images/icon_upload.png); background-size: 70px auto; } .mainMenuThinBar { background-color: #0071b8; color: #fff; width: 100%; height: 33px; line-height:33px; top: 60px; position: fixed; z-index: 10; } .mainMenuThinBar .AddSlide {width: 150px;position: fixed;left: 50%;margin: 0 0 0 -60px;background-image: url(../images/icon_addslide.png?w=30); background-size: 30px auto; background-position: center left; background-repeat: no-repeat; padding-left: 45px;} .mainMenuThinBar .OverviewSlides {width: 200px;position: fixed;left: 50%;margin: 0 0 0 -60px;background-image: url(../images/icon_slides.png?w=60); background-size: 60px auto; background-position: center left; background-repeat: no-repeat; padding-left: 75px;} .mainMenuThinBar .OverviewUsers {width: 200px;position: fixed;left: 50%;margin: 0 0 0 -60px;background-image: url(../images/icon_users.png?h=20); background-size: auto 20px; background-position: center left; background-repeat: no-repeat; padding-left: 25px;} .mainMenuThinBar .OverviewOrganisations {width: 200px;position: fixed;left: 50%;margin: 0 0 0 -75px;background-image: url(../images/icon_organisations.png?h=20); background-size: auto 20px; background-position: center left; background-repeat: no-repeat; padding-left: 40px;} .mainMenuThinBar .GoBackLink {position: fixed; top: 65px; left: 20px; width: 100px; height: 20px; line-height: 20px; background-image: url(../images/arrow-white-left.png); background-position: center left; background-repeat: no-repeat; padding-left: 15px;} .mainMenuThinBar .GoBackLink a {color: #fff;} .mainMenuArrow {z-index: 10; width: 100%; height: 10px; top: 93px; position: fixed;} .arrow { margin: 0 auto; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 10px solid #0071b8; } /* Content styles */ #existingslide div.akordeon-item-body { height: 340px !important; } .leftBarContent { position: relative; width: 420px; height: calc(100vh - 90px); color: #333; top: 90px; float: left; padding-bottom: 10px; } .rightBarContent { overflow-x:hidden; position: absolute; width: calc(100vw - 437px); min-height: 100vh; left: 420px; background-color: #fff; color: #333; top: 90px; margin-top: 3px; } .slideInformation {float: left; width: 380px; padding: 10px;} .slideInformation .pluginIcon {float: left; width: 60px; height: 60px; margin-right: 10px;} .slideInformation .pluginTitle {float: left; width: 310px; height: 30px;} .slideInformation .slideTitle {float: left; width: 310px; height: 30px;} .leftBarContent p {font-size: 14px;} .searchBlock {float: left; width: 400px; padding: 10px;} .screenSelection {float: left; width: 400px; padding: 10px;} .vestigingSelectie {float: left; width: 400px; padding: 10px;} .locationPresentation {float: left; width: 400px; height: 30px; line-height: 30px; background-color: #c8c8c8; color: #000000;} .locationPresentation .locationLabel {float: left; width: 360px; height: 30px; line-height: 30px; text-transform: uppercase; font-weight: bold; padding-left: 10px;} .locationPresentation .locationCheckBox {float: left; width: 20px; height: 30px; line-height: 30px; } .nonLocationPresentation {float: left; width: 400px; height: 30px; line-height: 30px; background-color: #afafaf; color: #000000; margin-top:4px;} .nonLocationPresentation .locationLabel {float: left; width: 360px; height: 30px; line-height: 30px; text-transform: uppercase; font-weight: bold; padding-left: 10px;} .nonLocationPresentation .locationCheckBox {float: left; width: 20px; height: 30px; line-height: 30px; } .show {float: left; text-align: right; padding-right: 40px; padding-top: 4px; width: 340px; background-image: url(../images/visline.png); background-size: auto 10px; background-position: center right; background-repeat: no-repeat; border-right: 10px solid transparent;} .sortBlock { float: left; width: 400px; padding: 10px 10px 20px 10px; margin-top: 30px; position: fixed; bottom: 0; background-color: #f0f0f0; } .radio {float: left; width: 23px; height: 23px; line-height: 23px; margin-right: 10px;} .label {float: left; width: 340px; height: 30px; line-height: 30px;} .sortBlock .label {height:23px; line-height:23px;} .detailsBlock {float: left; width: 380px; padding: 10px; margin: 10px; background-color: #e2e2e2; } .detailsBlock h3 {text-transform: uppercase;} .detailslabel {float: left; width: 170px;} .detailsvalue {float: left; width: 210px; font-weight: bold;} .addPresentation {float: right; margin-top: 20px;} .typesSlide {float: left; width: 400px; padding: 10px;} .slideTypeBlock { float: left; width: 390px; height: 212px; display: block; overflow-y: scroll; background-color: #ffffff; padding: 5px; border: 1px #cccccc solid; } .slideTypeBlockContainer { width: 354px; margin: auto; } .slideTypeBlock .icon { float: left; width: 60px; height: 60px; margin: 0 10px 10px 0; background-size: cover; } .slideTypeBlock .icon:hover { cursor: pointer; } .usedSelection {float: left; width: 400px; padding: 10px;} .UsedActiveSlides, .UsedInactiveSlides, .unUsedSlides { float: left; width: 340px; height: 30px; line-height: 30px; background-color: #c8c8c8; background-position: center left; background-repeat: no-repeat; padding-left: 25px; font-weight: bold; text-transform: uppercase; border-left: 5px solid transparent; margin-bottom:1px; } .UsedInactiveSlidesCheck, .UsedActiveSlidesCheck, .unUsedSlidesCheck { float: left; width: 30px; height: 27px; line-height: 27px; padding-top: 3px; background-color: #c8c8c8; } .UsedActiveSlides { background-image: url(../images/icon_active.png); } .UsedInactiveSlides { background-image: url(../images/icon_inactive.png); } .unUsedSlides { background-image: url(../images/icon_unused.png); } .sideBlock {float: left; margin: 5px 10px; padding: 10px; width: 380px; background-color: #e6e6e6;} .sideBlock.screentypes { background-image: url(../images/bottom-screentypes.png); background-color: #cccccc; background-position: bottom left; background-repeat: no-repeat; margin-bottom: 0; } .sideBlock.layoutBlock { margin-top: 0; } .sideBlock.shareblock {background-color: #cccccc;} #exceptions { float: left; width: 360px; height:60px; background-color: #ffffff; border: 1px solid #cccccc; padding: 10px; overflow-x: hidden; overflow-y: auto; } .exceptionRow {float: left; width: 360px; height: 20px; line-height: 20px; cursor: pointer;} .exceptionRow:hover {} .exceptionRow.selected {background-color: #f1f1f1;} .exceptionDate {float: left; width: 85px;padding-right: 10px;} .exceptionDescription {float: left; width: 90px; padding-right: 10px; height: 20px; overflow: hidden;} .exceptionResult {float: left; width: 160px; padding-right: 5px;} .exceptionBlock {background-color: #cccccc; margin-top:10px; padding:5px;} .exceptionLabel {float: left; width: 90px; height: 25px; line-height: 25px;} .exceptionField {float: left; height: 25px; line-height: 25px;} .exceptionFromDate { float: left; height: 25px; line-height: 25px; width: 45px; } .exceptionFromDate input { width: 40px !important; } .exceptionToDate { float: left; height: 25px; line-height: 25px; width: 45px; } .exceptionToDate input { width: 40px !important; } .exceptionFromDate2 {float: left; height: 25px; line-height: 25px; width: 45px;} .exceptionFromDate2 input {width: 40px !important;} .exceptionToDate2 {float: left; height: 25px; line-height: 25px; width: 45px;} .exceptionToDate2 input {width: 40px !important;} .exceptionClosedLabel {float: left; width: 66px; text-align: right; height: 25px; line-height: 25px; padding-right: 5px;} .exceptionClosedCheckbox {float: right; margin-top: 2px;} .sideBlock h2 {text-transform: uppercase; font-size: 14px; font-weight: bold;} .sideBlock div {font-size: 14px;} .screenTypeTabs {float: left; width: 360px;} .tab, .tabActive {float: left; width: 60px; height: 85px; padding-top: 2px; margin-right: 5px; text-align: center; } .screenTypeTabs .tabActive { background-color: #E6E6E6; border-top: 1px solid #333; border-left: 1px solid #333; border-right: 1px solid #333; border-bottom: 1px solid #E6E6E6; } .screenTypeTabs .tab:hover { cursor: pointer; background-color: #E6E6E6; } .layoutContainer { display: none; } .tab .icon-container, .tabActive .icon-container {float: left; width: 60px; height: 60px; margin: 0 auto;} .icon-landscape {margin: 0 auto; width: 50px; height: 28px; background-color: #000; border: 1px solid #ccc;} .icon-portrait {margin: 0 auto; width: 28px; height: 50px; background-color: #000; border: 1px solid #ccc;} .icon-ipad {margin: 0 auto; width: 40px; height: 30px; background-color: #000; border: 1px solid #ccc;} .icon-ipad-portrait {margin: 0 auto; width: 30px; height: 40px; background-color: #000; border: 1px solid #ccc;} .icon-pc {margin: 0 auto; width: 40px; height: 32px; background-color: #000; border: 1px solid #ccc;} .icon-pc-portrait {margin: 0 auto; width: 32px; height: 40px; background-color: #000; border: 1px solid #ccc;} .icon-galaxy {margin: 0 auto; width: 40px; height: 25px; background-color: #000; border: 1px solid #ccc;} .icon-galaxy-portrait {margin: 0 auto; width: 25px; height: 40px; background-color: #000; border: 1px solid #ccc;} .description {float: left; margin: 0 auto; width: 60px; height: 25px; font-size: 12px !important; text-transform: uppercase; overflow: hidden;} .layouts { float: left; width: 380px; } .layouts .layout { float: left; width: 110px; margin-right: 10px; margin-top: 10px; background: #fff; border: #333 solid 1px; padding: 2px; text-align: center; } .layouts .layout:hover, .layouts .layout.selected { background: #dddce8; } .layouts .layout .layoutImage { line-height: 110px; } .layouts .layout .layoutImage img { border: #888 solid 1px; max-width: 106px; max-height: 106px; vertical-align: middle; display: inline-block; } .layouts .layout .layoutDescription { height: 20px; line-height: 20px; font-size: 12px; white-space: nowrap; overflow: hidden; } .layouts .layout .layoutDescription span { overflow: hidden; display: inline-block; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; animation-iteration-count: 0; } .layoutDescription.truncated span:hover { overflow: auto; display: inline-block; animation: textScrollLeft ease-in-out 7s; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-play-state:running; } .RemoveButton {background-image:url(../images/cross.png)!important; background-size:20px; background-color: #4d4d4d!important; text-align:left; float:right; margin-right:0!important;} .RemoveButton.selected {border: 2px solid red;} .button.disabled {background-color: #ccc!important;} .previewImage {float: left; width: 100px; margin-right: 5px; margin-top: 10px} .previewImage img {width: 100px;} .previewImage img[src=''] { display: none; } .previewImageInformation {float: right; bottom: 0; padding: 5px; background-color: #666666; color: #ffffff; font-size: 9px; width: 260px;} #ChangePositioning > div { margin-top: 5px; } .SharedSlide {float: left; width: 335px; height: 21px; line-height: 21px; background-image: url(../images/icon-share.png); background-position: center left; background-repeat: no-repeat; padding-left: 25px; font-weight: bold; text-transform: uppercase;} .SharedSlideCheckbox {float: left; width: 20px; height: 21px; line-height: 21px; bottom: 5px;} .FooterSlide {float: left; width: 360px; height: 21px; line-height: 21px; font-weight: bold; text-transform: uppercase;} .FooterSlideCheckbox {float: left; width: 20px; height: 21px; line-height: 21px; bottom: 5px;} .line {float: left; margin: 5px 10px; width: 400px; height: 1px; background-color: #666666;} .commonInformation {float: left; width: 400px; margin: 10px;} .screens {float: left; width: 400px; margin: 10px; background-color: #e6e6e6;} .presentationDetails { float: left; width: 400px; margin: 10px; background-color: #e6e6e6; overflow: hidden; } .mediaDetails {float: left; width: 380px; margin: 10px 0; background-color: #e6e6e6; padding: 10px;} /* Right bar */ .rightBarContent h1 {font-size: 2.5vw; text-transform: uppercase; font-weight: normal;} .categoryBar { width: calc(100vw - 437px); height: 35px !important; line-height: 35px; float: left; background-color: #c8c8c8 !important; color: #333; font-weight: bold; text-transform: uppercase; font-size: 14px; padding-left: 10px; } .subCategoryBar { height: 30px; line-height: 30px; font-size: 11pt; color: #666666; font-weight: bold; background-color: #e6e6e6; padding-top: 0 !important; } .subCategoryBar .akordeon-heading { font-size: 11pt !important; color: #666666 !important; text-transform: capitalize; } .organisationName {width: calc(100vw - 427px); height: 25px; line-height: 25px; float: left; background-color: #f1f1f1; color: #333; text-transform: uppercase; font-size: 14px; padding-left: 10px;} .categoryItems {width: calc(100vw - 437px); padding: 10px; float: left;} .categoryItems .slide {float: left; width: 120px; height: 200px; margin: 0 10px 10px 0px; cursor: pointer;} .categoryItems .slide .icon {float: left; width: 120px; height: 120px; background-size: cover;} .categoryItems .slide .description {float: left; width: 120px; height: 75px; font-size: 12px;text-transform: none !important; margin-top: 4px; } .slidesOverview, .expiredSlides { float: left; width: calc(100vw - 437px); padding: 10px; } .expiredSlides { padding-left: 35px; } .expiredSlides ul { list-style-type: none; } .expiredSlides .slideLi { width: 160px; float: left; margin-right: 25px; } .expiredSlides h3 { text-transform: uppercase; } .slideOverview {float: left; width: 100%; margin: 10px;} .slideContainer { float: left; padding: 10px 5px 20px 5px; background-color: transparent; position: relative; } .slideContainer:hover, #slideList li.slideActive .slideContainer, .selected { background-color: #dddce8; cursor:pointer; } .slideLi.future, .slidePast { opacity: 0.4; } .slide { background-color: #eeeeee; padding: 5px; position: relative; } .slideContainer:hover .slide, #slideList li.slideActive .slide { background-color: #cfced9; } #slideOverview .slideIcons .resolutions div { position: absolute !important; } .slide .typeIcon { position: absolute; left: 5px; top: 5px; background-size: cover; background-repeat: no-repeat; background-position: center; height: 30px; width: 30px; } .slide .slideIcons .resolutions { position: absolute; left: 5px; top: 115px; width: 30px; height: 30px; } #slideSelected .allResolutions { display: none; } .slideContainer .slideIcons:hover .allResolutions { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; animation-name: resolutionAnimation; } .slideIcons .allResolutions { font-size: 10px; padding-left: 5px; width: 145px; margin-left: -5px; background: #c8c8c8; height: 75px; position: absolute; margin-top: 5px; } @-webkit-keyframes resolutionAnimation { 0% { -webkit-transform: translateY(0px); } 100% { -webkit-transform: translateY(-70px); } } @keyframes resolutionAnimation { 0% { transform: translateY(0px); } 100% { transform: translateY(-70px); } } .slideIcons .resolutions > div, .slideIcons .allResolutions .resolutionContainer > div div { position: relative; background-color: #000; border: 1px solid #ccc; bottom: 0; } .slideIcons .resolutions .landscape, .slideIcons .allResolutions .landscape { width: 30px; height: 17px; } .slideIcons .resolutions .ipad-landscape, .slideIcons .allResolutions .ipad-landscape { width: 20px; height: 15px; } .slideIcons .resolutions .portrait, .slideIcons .allResolutions .portrait { width: 17px; height: 30px; } .slideIcons .resolutions .ipad-portrait, .slideIcons .allResolutions .ipad-portrait { width: 15px; height: 20px; } .slideIcons .allResolutions .landscape { margin-left: 4px; margin-top: 3px; } .slideIcons .allResolutions .ipad-landscape { margin-left: 10px; margin-top: 12px; } .slideIcons .allResolutions .portrait { margin-left: 6px; margin-top: 3px; } .slideIcons .allResolutions .ipad-portrait { margin-left: 12px; margin-top: 10px; } .slideIcons .slideUsedActive { background-color: #00c400 !important; } .slideIcons .slideUsedInactive { background-color: #006400 !important; } .slide .slideSnapshot { background-position: center 54%; width: 140px; height: 140px; background-repeat: no-repeat; background-size: contain; } .slide .slideSnapshot.slidePortrait { background-position: top right; } .slideInfo { width: 140px; padding: 5px; float: left; height: 32px; } .slideInfo .slideName { font-size: 14px; font-weight: bold; white-space: nowrap; overflow: hidden; width: 140px; } .slideInfo .slideName span { overflow: hidden; display: inline-block; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; animation-iteration-count: 0; } .slideInfo .slideName.truncated span:hover { overflow: auto; display: inline-block; animation: textScroll ease-in-out 7s; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-play-state:running; } @keyframes textScroll{ 0% { transform: translate(0px,0px); } 30% { transform: translateX(-100%) translateX(140px); } 50% { transform: translateX(-100%) translateX(140px); } 80% { transform: translate(0px,0px); } } @keyframes textScrollLeft{ 0% { transform: translate(0px,0px); } 30% { transform: translateX(100%) translateX(-140px); } 50% { transform: translateX(100%) translateX(-140px); } 80% { transform: translate(0px,0px); } } .slideInfo .slideAuthor, .slideInfo .slideDate { font-size: 12px; } .slideCopy { position: absolute; bottom: 5px; right: 10px; } .slideCopy img { height: 18px; width: 18px; } .slideDescription { float: left; padding: 5px 0; width: 145px; } #slideList { list-style: none; padding-left: 25px; } #slideList li { height: 192px; width: 150px; margin: 5px; margin-right: 25px; margin-bottom: 10px; float: left; position: relative } #slideList li:after { content: url('../images/arrow-grey.png'); display: block; width: 25px; height: 12px; position: absolute; top: 79px; right: -25px; } #slideList li.slidePlaceholder { background: none; border: 2px dotted #4a4a4a; width: 146px; height: 188px; } #slideList.isSorting li:after, #slideList.isSorting li:before, #slideList li.slidePlaceholder:after, #slideList li.slidePlaceholder:before, .ui-sortable-helper:after, .ui-sortable-helper:before, #slideList li:last-of-type:after, #slideList li.seperator:after { height: 0; width: 0; content: ''!important; } #slideList.isSorting li.seperator { display: none; } #slideList li.last-of-line:after { content: url('../images/arrow-grey-last.png'); height: 105px; width: 25px; top: 85px; } #slideList.isSorting li { margin-bottom: 30px; } #slideList li.seperator { height: 5px; width: 100%; display: block; background: url('../Images/arrow-seperator.png') repeat-x center center; } #slideList li.seperator + li:before { content: url('../images/arrow-grey-newline.png'); display: block; height: 114px; width: 25px; position: absolute; top: -20px; left: -25px; } #slideList .addSlideLi { background: #eeeeee url('../images/btn_plus_grey.png') no-repeat center center; height: 150px; margin-bottom: 42px; } #slideList .addSlideLi a { cursor: pointer; display: block; width: 100%; height: 100%; cursor: pointer; } #slideList .addSlideLi a span { position: absolute; color: #949494; top: 115px; font-weight: bold; width: 100%; text-align: center; } #slideList .slideContainer { padding: 0; } #slideList .slideContainer .resolutions { top: 120px; } .slideOverview .slideDescription { width: 100%; } .slideOverview .slideDescription > div { float: left; width: 120px; } #slideDuration { float: left; line-height: 13px; } #slideWarning, #slideHasDate { display: none; float: right; height: 13px; margin-left: 5px; } .slideInfo.incomplete #slideWarning { display: block; } .slideLi[data-alwaysvisible=False] #slideHasDate, .slideLi[data-alwaysvisible=false] #slideHasDate { display: block; } .slideDescription .descriptionContainer { float: left; width: 195px; overflow:hidden; } .slideDescription .descriptionContainer b {white-space:nowrap;} .slideDuration { font-size: 11px; text-transform: uppercase; } .slideDurationEdit { display:none; float: left; position: relative; width: 135px; height: 32px; padding: 5px; background-color: #0071b8; background-image: url(../images/btn_stopwatch.png); background-size: 20px auto; background-position: center right; background-repeat: no-repeat; border-right: 5px solid transparent; } .slideDurationEdit input { float: left; width: 110px; margin-top: 5px; background-color: #328cc5; color: #ffffff; text-align: right; border: 0; padding-right: 5px; } .slideDescription .slideTitle {float: left; height: 35px; overflow: hidden; font-size: 14px; font-weight: bold;} .slideDescription .slideCreated { float: left; height: 15px; font-size: 12px; font-weight: normal; } .slideOverview .slideCreated { overflow: visible; } #expiredSlidesCount, #removeExpiredSlides { float: left; } #removeExpiredSlides { font-weight: normal; text-decoration: underline; margin-left: 5px; cursor: pointer; } .content {width: 1000px; margin: 0 auto;position: relative; top: 220px; } /* Location screens overview */ .Location {width: 100%; float: left;} .Location .LocationHeader {width: 100%; height: 30px; line-height:30px; background-color: #cccccc; color: #000000; font-size: 15px; text-transform: uppercase;font-weight: bold; padding: 0 0 0 10px;} .Location .LocationSubLocation {width: 200px; float: left; font-size: 12px; padding: 10px 0 10px 10px;} .Location .LocationScreens {float: left; width: 80%; padding: 10px 0 10px 10px;} .LocationScreens .LocationScreen {float: left; margin-right: 20px; height: 120px;} .LocationScreen .LocationScreenImage {float: left; height: 100px;} .LocationScreen .LocationScreenDescription {float: left; height: 20px; line-height: 20px;} .radiobutton {float: left; width: 30px;} .text {float: left; font-size: 11px; margin-top: 5px;} .URLBar {float: left; width: 350px;} #slidePreview {border: 1px solid #cccccc; box-shadow: 5px 5px #cccccc; -webkit-box-shadow: 5px 5px 5px #cccccc; -moz-box-shadow: 5px 5px 5px #cccccc;} .input-validation-error {border: solid 1px red !important; background-color: #ffc8c8 !important;} .img-validation-error {border: solid 1px red !important; min-height: 25px; background-color: #ffc8c8 !important;} .tabSlide .icon-landscape, .tabSlide .icon-portrait {background-color: yellow;} .tabError .icon-landscape, .tabError .icon-portrait {background-color: red;} .leftBarContent .checkboxes > div > label {display:inline-block; width:355px; text-transform:uppercase; font-weight:bold;} .leftBarContent .chooseOrganisations > div:not(:last-child) {background-color: #ffffff; border: 1px solid #666666; padding: 1px 0px 2px 3px;} .leftBarContent .chooseOrganisations > div > div > label {display:inline-block; width:350px; font-weight:bold;} .leftBarContent .chooseOrganisations > div > div > input { height: auto; } .sideBlock div.interactive {padding-left:40px; background:url(../images/icontype_interactive.png) no-repeat 5px 7px; background-size:22px; min-height:30px; text-transform:uppercase; font-weight:bold; display:inline-block;} .sideBlock div.interactive > label {width:315px; display:inline-block; vertical-align:super;} .sideBlock .twitter-results { background: #ccc url(../images/icon_tweets.png) no-repeat 9px; } .twitter-types div { height: 28px; } .twitter-types input, .twitter-types label { float: left; height: 28px; line-height: 28px; } .twitter-types label { margin-left: 5px; } .sideBlock div.interactive.gids {background-image:url(../images/icon_gids.png); background-color:#ccc;} .sideBlock div.interactive.fill {background-image:url(../images/icon_fill.png);} .sideBlock #imagePositioning.hide {display:none;} .sideBlock #imagePositioning { padding-top:5px; display: inline-block; width: 100%; } .sideBlock #imagePositioning > div { float: left; width: 70px; } .sideBlock #imagePositioning > div > img { width:59px; } .sideBlock #imagePositioning div .positionButton, #previewButtons .positionButton { width:27px; height: 27px; margin-right: 5px; border: none; background-position: center center; background-repeat: no-repeat; background-size: 11px; float: left; cursor: pointer; } .sideBlock #imagePositioning .resetPositioning { width: 150px; height: 78px; float: right; position: relative; } .sideBlock #imagePositioning .resetPositioning .plugin-button { position: absolute; bottom: 0; cursor: pointer; } .positionButton.min { background-image: url('../Images/btn_min.png'); } .positionButton.plus { background-image: url('../Images/btn_plus.png'); } .positionButton.left { background-image: url('../Images/btn_left.png'); } .positionButton.right { background-image: url('../Images/btn_right.png'); } .positionButton.down { background-image: url('../Images/btn_down.png'); } .positionButton.up { background-image: url('../Images/btn_up.png'); } .lastblock { border-bottom: 1px solid #666666; margin-top: -5px; height: 0; padding: 0 10px; } /* Add slide to presentation */ #selectPresentation { position: absolute; left: -1000px; top: -1000px; background-color:#fff; border: 3px solid #333; } #selectPresentation .arrow { border-top: 10px solid #0070bb; } #selectPresentation .newPresentationContainer, #selectPresentation .existingPresentationContainer { background: #e6e6e6; margin: 10px; padding: 5px 10px; } .newPresentationContainer { height: 40px; line-height: 40px; padding-right: 0 !important; } .newPresentationContainer span { color: rgb(51, 51, 51); text-transform: uppercase; font-weight: bold; float: left; } #selectPresentation input[type=checkbox] { border-color: #ccc; } .existingPresentationContainer { height: 400px; } .existingPresentationContainer p { color: #333; text-transform: uppercase; font-weight: bold; } #selectPresentation .searchBar { padding: 0; background-color: #e6e6e6; margin-top: 10px; width: 772px; } #selectPresentation .searchBar > input { float: right; margin-top: 2px; } #selectPresentation .searchBar > label { float: right; margin-right: 5px; line-height: 25px; } #selectPresentation div.search { margin-bottom: 10px; } #selectPresentation #presentations { height: 270px; max-height: 270px; background: #fff; } #selectPresentation .buttons { margin-bottom:10px; width: auto; } #selectPresentation > .buttons { padding-right: 10px; margin-top: 0; } .searchBar .buttons { margin-right: 0; margin-top: 10px } #selectPresentation .button:disabled:hover { text-decoration:none !important; background-color: gray!important; } #presentations { overflow-y:auto; max-height:200px; border:solid 1px #ccc; } #searchPresentations > div { margin-top: 5px; } #searchPresentations .inPresentation { opacity: 0.4; } #searchPresentations > div input, #searchPresentations > div label, #searchPresentations > div span { margin-left: 10px; float: left; } #searchPresentations > div label { line-height: 22px; height: 22px; margin-left: 10px; width: 395px; } #searchPresentations > div .presentationStatus { width: 60px; text-align:right; } #searchPresentations > div .screenCount, #searchPresentations > div .slideCount { width: 120px; text-align: right; } /* dialog styles (Slide Add/Edit, ..) */ #dialog_overlay {height:100%;width: 100%; background-color: gray; top:0; left:0; opacity:0.9; position: fixed; z-index: 10000;} #dialog {background-color: #e6e6e6; border: 3px solid #333; left: 430px; width: 430px; position: absolute; z-index: 10001;} #dialog .close {float: right; height: 20px; width:20px; background: url('../images/btn_close.png') no-repeat; background-size:20px; margin: 8px; cursor:pointer; border: none;} #dialog h2 {text-transform: uppercase; font-size: 11pt; font-weight: bold; padding: 15px 5px 0 10px;} #dialog h2:empty {display:none;} #dialog h2.valid {background: url('../images/msg_saved.png') no-repeat right 10px; background-size:20px; display: inline-block; padding-right: 25px;} #dialog .message {min-height: 30px; padding: 5px; padding-left: 10px; width: 390px; display: inline-block; font-size: 14px;} #dialog .message span {width: 100%;display:block; padding-bottom:5px;} #dialog .message ul {list-style-type: none;} #dialog .message ul > div:first-child {position: absolute;left: 5px;width: 60px;overflow: hidden; display:inline-block; } #dialog .message ul .icon-container {top: 0;height:auto;background: none no-repeat 15px 5px; background-size: 30px;} #dialog .message ul .description {top: 20px; text-align: center;} #dialog .message ul ul {padding: 5px 5px 5px 65px; min-height: 60px; background-color: #ccc; margin-bottom:5px;} #dialog .message ul a.plugin-button {background-image: none; background-color: #4d4d4d; text-align: right; width: 4.5vw;} #dialog .buttons {width: 390px; padding: 5px 0 5px 0;} #dialog .buttons .button {float:right; min-width:200px; background-image: url(../images/btn_next.png); background-repeat: no-repeat; background-position: right center; background-size: 20px; text-align: right; margin-bottom: 5px;} #dialog .buttons .button.cancel {background-image: url(../images/btn_prev.png);} #dialog .buttons .button.remove-layout {background-image: url(../images/cross.png); background-size: inherit;} #dialog .buttons .button.to-slide-list {background-image: url(../images/btn_overview.png);} #dialog .buttons .button.to-presentation {background-image: url(../images/btn_next.png);} #dialog .buttons .button.to-overview {background-image: url(../images/btn_overview.png); border-right: 5px solid transparent; padding-right: 25px !important} #dialog .buttons .button.edit {background-image: url(../images/btn_prev.png);} #dialog .icon-container .image {background:url(../images/slide_empty.png) no-repeat center; background-size:contain; height:inherit;} /* dialog styles for screens*/ #dialog.screen-dialog {position: fixed;} #dialog.screen-dialog .close {float: right; height: 20px; width:100%; background: url('../Images/btn_cancel.png') no-repeat right top; background-size:20px; margin: 6px; cursor:pointer; border: none;} #dialog.screen-dialog .message {width: 140px;} #dialog.screen-dialog .buttons {width: 240px; padding-top: 0;} .presentation div.slide:before{} .youtube {float: left; background-color: #ffffff; border: 1px solid transparent;} .youtube:hover {cursor: pointer; background-color: #f0f0f0; border: 1px solid #cccccc;} .active {background-color: #f0f0f0; border: 1px solid #cccccc;} .active:hover {background-color: #f0f0f0; border: 1px solid #cccccc;} .next {visibility:hidden;} .next a {display:block; background-color: #0074c5; text-decoration: none; border-style: none; color: #fff; text-align: left; padding: 0 0 0 5px; height: 30px; line-height: 30px; display: block; padding-right: 40px; width: 145px; background-image: url(../images/arrow-white-right.png); background-position: right center; background-repeat: no-repeat; border-right: 10px solid transparent;} .prev {visibility:hidden;} .prev a:empty, .next a:empty { display: none; } .prev a {display: block; background-color: #0074c5; text-decoration: none; border-style: none; color: #fff; text-align: right; padding: 0 5px 0 0px; height: 30px; line-height: 30px; display: block; padding-left: 40px; width: 145px; background-image: url(../images/arrow-white-left.png); background-position: left center; background-repeat: no-repeat; border-left: 10px solid transparent;} /* Selected slide for slide overview */ #selectedFile {display: none; background-color: #0071b8; position: fixed; bottom: 10px; right: 10px; padding: 10px; float: left;} #fileSelected {float: left; margin-right: 10px; width: 100px;} #fileInformation {float: left; width: 300px; color: #ffffff;} #fileInformation .infolabel {float: left; width: 150px;} #fileInformation .infofield {float: left; width: 150px;} #selectedSlide { visibility: hidden; background-color: #0071b8; position: fixed; bottom: 10px; right: 10px; padding: 10px; float: left; display: flex; } #slideSelected {float: left; margin-right: 10px;} #slideSelected .slide {float: left;} #slideSelected .slide.multi { -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.100), 3px 3px 0 rgba(238, 238, 238, 1.0), 4px 4px 0 rgba(0, 0, 0, 0.125), 6px 6px 0 rgba(238, 238, 238, 1.0), 7px 7px 0 rgba(0, 0, 0, 0.150); -moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.100), 3px 3px 0 rgba(238, 238, 238, 1.0), 4px 4px 0 rgba(0, 0, 0, 0.125), 6px 6px 0 rgba(238, 238, 238, 1.0), 7px 7px 0 rgba(0, 0, 0, 0.150); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.100), 3px 3px 0 rgba(238, 238, 238, 1.0), 4px 4px 0 rgba(0, 0, 0, 0.125), 6px 6px 0 rgba(238, 238, 238, 1.0), 7px 7px 0 rgba(0, 0, 0, 0.150); } #slideButtons { float: left; height: auto; width: 185px; display: flex; -ms-flex-direction: column; flex-direction: column; justify-content: flex-end; } #selectedSlide #slideButtons > span { color: white; font-size: 12px; width: 100%; text-align: right; align-self: flex-start; } #selectedSlide #slideButtons > div { background-color: rgba(255, 255, 255, 0.3); background-size: 20px auto; background-position: center right; background-repeat: no-repeat; margin-top: 2px; align-self: flex-end; border-right: solid 5px transparent; } #selectedSlide #slideButtons > div a { text-align: right; display: block; width: 150px; height: 25px; line-height: 25px; font-size: 12px; color: #fff; text-decoration:none; padding: 0 25px 0 5px; } #slideButtons > div a:hover { text-decoration: underline; } #buttonPresentation { background-image: url('../images/btn_addtopresentation.png'); } #buttonSlideEdit { background-image: url('../images/btn_edit.png'); } #buttonSlideCopy { background-image: url('../Images/btn_add.png'); } #buttonSlideDelete { background-image: url('../Images/btn_cancel.png'); margin-bottom: 25px; cursor: pointer; } ul#slides {float: left; list-style-type: none; margin:0 0 10px 0;} ul#slides li {float: left; width: 220px; background-image: url(../images/arrow-grey.png); background-repeat: no-repeat; background-position: right center; background-size: 25px auto; margin-right: 10px;margin-top: 15px;} ul#slides li#addSlide {float: left; width: 150px;} ul#slides li:first-child {margin-left: 15px;} ul#slides li.first {background-image: url(../images/arrow-grey-newline.png), url(../images/arrow-grey.png); background-size: 13px auto, 25px auto; background-position: top left, center right; background-repeat: no-repeat, no-repeat; padding-left: 15px;} ul#slides li.last {width: 208px;background-image: url(../images/arrow-grey-last.png); background-size: 13px auto; background-position: bottom right; background-repeat: no-repeat; padding-bottom: 15px;} ul#slides li.next-row {padding-top:15px; margin-top: 0px;} ul#slides li div.slideWrapper {float: left; height:205px;} ul#slides li div.addSlideWrapper {float: left; cursor:pointer;} ul#slides li div.slide {float: left; width: 185px; height: 135px; background-size: contain; background-position: center; background-repeat: no-repeat;} ul#slides li.dragging {background-image: url(../images/slide-dragging.png); background-size: 145px 145px; background-position: top left; background-repeat: no-repeat;} .slideDescription { float: left; width: 191px; } .slideDescription span {color: #cccccc; font-size: 11px; text-transform: uppercase;} .seperator {float: left; width: calc(100vw - 487px); height: 2px; background-color: #7e7e7e;} .displayDates { width: 377px; } .datepicker {width: 160px;} .entireWeek { float: right; margin-bottom: 5px; margin-top: 5px; font-size: 12px; line-height: 22px; } .entireWeek label { display: block; margin-right: 5px; float: left; } .entireWeek .normal-checkbox { top: 6px !important; float: left; } .days { float: left; width: 390px; } .dayContainer { float: left; width: 390px; } .day {float: left; width: 120px; font-size: 12px; color: #666666; height: 24px; line-height: 24px;} .fromTime {float: left; width: 60px;} .time {width: 50px; border: 1px solid #666; color: #666;} .toTime {float: left; width: 60px;} .entireDay { float: left; width: 119px; font-size: 12px; padding-right: 5px; text-align: right; color: #666666; height: 24px; line-height: 24px; } .entireDayCheck {float: left; width: 20px;} .entireDayCheck .normal-checkbox {top: 0px !important;} #presentationBar span:first-of-type { float: left; } #presentationBar img { float: right; height: 29px; margin-top: 3px; margin-right: 3px; cursor: pointer; } #presentationBar img:first-of-type { margin-right: 20px; } #presentationBar #viewDescription { float: right; font-weight: normal; margin-right: 10px; display: none; } .searchBar {float: left; width: 745px; padding: 10px; background-color: #efefef;} .searchBarLabelWide {float: left; width: 400px; margin-right: 10px;} .searchBarLabel {float: left; width: 335px;} .search {float: left; width: 400px; margin-right: 10px;} .searchLocations {float: left; width: 335px;} input#searchLocations {background-image: url(../images/arrow-down-grey.png); background-size: auto 11px; background-position: center right; background-repeat: no-repeat; width: 300px; height: 34px; border: 1px solid #cccccc; font-size: 14px; padding: 0 35px 0 5px; text-align: right;} .scrollableScreens {float: left; margin: 10px 0; width: 765px; height: 300px; overflow-y: auto; background-color: #ffffff; border: 2px solid #666666;} .locationBar {padding: 0px 10px; height: 30px; line-height: 30px; color: #000000; text-transform: uppercase; background-color: #e6e6e6;} .sublocation {float: left; width: 150px; min-height: 130px; padding: 10px; clear:left; } .sublocationName {float: left; width: 150px; font-size: 14px; font-weight: bold; } .sublocationSelectAll {float: left; position: relative; padding-top: 1px; font-size: 11px;} .sublocationScreens {float: left; width: 550px; padding: 10px;} .sublocationScreenContainer {float: left; text-align: center; width: 120px; border: 1px solid transparent;} .sublocationScreenContainer:hover {float: left; background-color: #e6e6e6;} .sublocationScreen {float: left; width: 120px; height: 100px;} .sublocationScreen div {border: solid 3px #B8B8B8; margin: 0 auto; background: black;} .sublocationScreen .screenActive {background: yellow;} .sublocationScreen img {display: block; margin: 0 auto;} .sublocationScreenDescription {float: left; width: 120px; text-align: center;} .amountSelected {float: left; padding: 0 10px;} .locationsDropdown {position: relative; width: 450px; z-index: 999; top: 40px; left: -110px; border: 1px solid #e6e6e6; background-color: #ffffff;} .newSlideButton {float: right;} .chooseOtherSlide {float: right;} .screensAvailable {float: left; width: 380px;} .screen {float: left; margin-right: 5px; height: 100px;} .screen div {border: solid 3px #B8B8B8; margin: 0 auto; background: black;} .rightBarContent #screens.akordeon {width: calc(100vw - 437px);} .rightBarContent #screens .akordeon-item {margin-left: 0;} .rightBarContent #screens .akordeon-icon span {left:98%} div.slides {float: left; width: calc(100vw - 700px); min-width: calc(100vw - 680px);} div.slides .slide {float: left; width: 60px; height: 60px; background-size: contain; background-repeat: no-repeat; background-position: center center; margin: 5px; border: solid 5px #eeeeee;} .addSlideWrapper .slide { background-color: #e2e2e2; } div.presentationInformation {float: right; width: 220px;} .informationlabel {float: left; width: 120px;} .informationvalue {float: left; width: 100px; font-weight: bold;} #selectedSlide2 { display: none; background-color: #0071b8; position: absolute; bottom: 50px; right: 10px; padding: 10px; padding-right: 0; float: left; } #selectedSlide2 #slideSelected {float: left; margin-right: 10px;} #selectedSlide2 #slideSelected .slideSnapshot { float: left; width: 120px; height: 120px; background-color: black; background-size: contain; background-position: center; background-repeat: no-repeat; border: 1px solid #ffffff; margin-top: 21px; } #selectedSlide2 #slideButtons { float: left; height: 100%; width: 250px; margin-right: 10px; margin-top: 22px; } #selectedSlide2 .slideButtonRow { margin-bottom: 5px; height: 22px; } #selectedSlide2 .slideButtonRow:last-of-type { margin-top: 10px; } #selectedSlide2 .slideButtonRow span { float: left; color: #fff; text-transform: uppercase; font-size: 9pt; line-height: 22px; } #selectedSlide2 .slideButtonRow input { float: right; border: 1px solid #666666; } #selectedSlide2 .slideButtonRow .datepicker { background: #fff url('../Images/btn_date.png') no-repeat right 5px center; background-size: 18px; margin: 0; font-size: 14px; } #selectedSlide2 .slideButtonRow .datepicker:disabled { background-color: #E5E5E5 } #selectedSlide2 .slideButtonRow input[type=text] { width: 96px; padding-left: 5px; padding-right: 5px; } #selectedSlide2 .ui-datepicker-trigger { display: none; } #selectedSlide2 .closeButton { width: 20px; height: 20px; background: url(../Images/cross2.png) no-repeat left top; background-size: 20px; position: absolute; top: 5px; right: 10px; cursor: pointer; } .slideTime {float: right; position: absolute; bottom: 100px; width: 160px; padding-right: 25px; background-image: url(../images/btn_stopwatch.png); background-size: 20px auto; background-repeat: no-repeat; background-position: center right; border-right: 5px solid transparent; height: 25px; line-height: 25px; color: #ffffff; font-size: 12px; text-align: right;} .editSlideTime {float: right; text-align: right; position: absolute; bottom: 70px; width: 185px;} .editSlideTime input, #slideTime { width: 75px; border: 1px solid #666666; text-align: right; padding-right: 5px; } #selectedSlide2 #buttonSlideRemove {float: right; bottom: 40px; background: rgba(255, 255, 255, 0.3); background-image: url(../images/cross2.png); background-size: 20px auto; background-position: center right; background-repeat: no-repeat; border-right: 5px solid transparent;} #selectedSlide2 #buttonSlideRemove a {text-align: right; display: block; width: 80px; height: 25px; line-height: 25px; font-size: 12px; color: #ffffff; text-decoration:none; padding: 0 25px 0 5px; } #selectedSlide2 #buttonSlideRemove a:hover {text-decoration: underline;} #selectedSlide2 #buttonSlideEdit {float: right; bottom: 8px; margin-bottom: 3px; margin-right: 10px; background: rgba(255, 255, 255, 0.3); background-image: url(../images/btn_edit.png); background-size: 20px auto; background-position: center right; background-repeat: no-repeat; border-right: 5px solid transparent;} #selectedSlide2 #buttonSlideEdit a {text-align: right; display: block; width: 90px; height: 25px; line-height: 25px; font-size: 12px; color: #ffffff; text-decoration:none; padding: 0 25px 0 5px; } #selectedSlide2 #buttonSlideEdit a:hover {text-decoration: underline;} .allPresentations {float: left; width: 365px; height: 30px; line-height: 30px; padding-left: 35px; background-image: url(../Images/btn_overview.png); background-position: center left; background-repeat: no-repeat; background-size: 25px auto; border-left: 5px solid transparent; text-transform: uppercase; color: #666666; font-weight: bold; } .selectUserType {float: left; width: 400px;} .userTypeSelection {float: left; width: 400px;} .typeLabel {float: left; width: 335px; height: 30px; line-height: 30px; background-color: #c8c8c8; padding-left: 30px; font-weight: bold; text-transform: uppercase; border-left: 5px solid transparent; margin-bottom:2px;} .super {background-image: url(../Images/icon_admin.png); background-size: auto 15px; background-position: center left; background-repeat: no-repeat;} .user {background-image: url(../Images/icon_user.png); background-size: auto 20px; background-position: center left; background-repeat: no-repeat;} .limited {background-image: url(../Images/icon_limiteduser.png); background-size: auto 20px; background-position: center left; background-repeat: no-repeat;} .typeCheckbox {float: left; width: 30px; height: 29px; line-height: 29px; padding-top: 1px; background-color: #c8c8c8;} .usersDetails {margin: 10px; padding: 10px; width: 380px; position: absolute; left: 0px; bottom: 10px; background-color: #e2e2e2;} .userProfile, .userProfileHeader { float: left; width: calc(100vw - 437px); height: auto; line-height: 40px; } .userProfile {border-top: 1px solid #cccccc;} .userProfile:first-child { border: none; } .userProfileColumn { display: block; padding-left: 10px; float: left; } .userRole { width: 2%; background-repeat: no-repeat; background-size: 20px; background-position: center; } .screenName { width: 15%; } .userName { width: 15%; } .lastLoggedIn { width: 15%; } .email { width: 25%; } .userEdit { width: 70px; float: right; margin-top: 5px; } .userEdit a { width: 70px; float: right; margin-right: 10px; } .columnheader.userEdit { margin-top: 0; } .columnheader {background-color: #e2e2e2; color: #666666; font-weight: bold; height: 25px; line-height: 25px;} .userLabel {float: left; width: 180px; font-size: 14px; height: 30px; line-height: 30px; margin-left: 20px;} .userField {float: left; width: 540px; font-size: 12px; height: 30px; line-height: 30px;} .userField input[type=text], .userField input[type=email] {width: 540px;} .userField select {width: 543px; height:22px;} .userItalic {float: right; width: 566px; font-size: 12px; font-style: italic; padding: 5px 0;} .checkboxLabel {float: left; width: 507px; height: 30px; line-height: 30px; background-color: #c8c8c8; padding-left: 5px; font-weight: bold; text-transform: uppercase; margin-bottom:2px;} .checkboxCheckbox {float: left; width: 30px; height: 29px; line-height: 29px; padding-top: 1px; background-color: #c8c8c8;} .admin {background-image: url(../Images/icon_admin.png); background-position: center right; background-size: 30px auto; background-repeat: no-repeat; border-right: 5px solid transparent;} .gebruiker {background-image: url(../Images/icon_user.png); background-position: center right; background-size: auto 20px; background-repeat: no-repeat; border-right: 5px solid transparent;} .beperkt {background-image: url(../Images/icon_limiteduser.png); background-position: center right; background-size: auto 20px; background-repeat: no-repeat; border-right: 5px solid transparent;} .slideTypes {float: left; width: 400px;} .slideType {float: left; width: 335px; height: 30px; line-height: 30px; background-color: #c8c8c8; padding-left: 30px; font-weight: bold; text-transform: uppercase; border-left: 5px solid transparent; margin-bottom: 2px;} .slideType label {display: block; width: 335px; height: 30px;} .slideTypeCheckbox {float: left; width: 30px; height: 29px; line-height: 29px; padding-top: 1px; background-color: #c8c8c8;} .chooseOrganisations { float: left; width: 380px; margin: 10px; padding: 10px; background-color: #c8c8c8; display: none; } .empty {background-image: url(../Images/icontype_manual.png); background-position: center left; background-repeat: no-repeat; background-size: 25px auto;} .shared {background-image: url(../Images/icontype_shared.png); background-position: center left; background-repeat: no-repeat; background-size: 25px auto;} .ownuploads {background-image: url(../Images/icontype_uploaded.png); background-position: center left; background-repeat: no-repeat; background-size: 25px auto;} .automatic {background-image: url(../Images/icontype_auto.png); background-position: center left; background-repeat: no-repeat; background-size: 25px auto;} .sharedContainer {float: left; margin-top: 10px; width: 380px; padding: 10px; background-color: #c8c8c8; display: none;} .labelShared { float: left; width: 360px; font-weight: bold; text-transform: uppercase; height: 30px; line-height: 30px; margin-bottom: 2px; background-color: #c8c8c8; } .checkboxShared {float: left; width: 20px; height: 29px; line-height: 29px; padding-top: 1px; background-color: #c8c8c8;} .bookInformation {float: left; width: 400px;} .bookCoverSelected {float: left; width: 345px;} .bookContainer {float: left; width: 100px; margin-right: 10px; margin-bottom: 10px;} .bookContainer .bookCover {float: left; width: 100px;} .bookContainer .bookAuthor {float: left; width: 100px; height: 16px; overflow: hidden; font-size: 12px; font-style: italic;} .bookContainer .bookTitle {float: left; width: 100px; height: 30px; overflow: hidden; font-size: 12px;} .rss-list {display:inline-block; vertical-align:top; overflow:hidden; border:solid grey 1px; width: 380px; background-color: #fff; height: 120px; overflow-y: auto;} .isCopied { opacity: 0.4; } .isCopyIcon { position:absolute; top:0; margin-left:2px; } .isCopyIcon img { width:18px !important; height:18px !important; } .slideDescription .isCopyIcon { position: static; float: left; padding-right: 5px; } .previewPane, #slidePreview { position: relative; } .previewLoader { width: 100%; height: 100vh; position: absolute; text-align: center; display: none; } .previewLoader img { margin-top: 20%; width: 32px; height: 32px; } .resizeContainer { background: #E6E6E6; opacity: 0.4; position: absolute; height: 100px; width: 100px; z-index: 0; } .resizeContainer.nobg { background: transparent; } .resize-handle { position: absolute; width: 16px; height: 16px; border: solid 2px #222; opacity: 0.85; background-color: white; margin: -8px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; pointer-events: auto; z-index: 100; pointer-events: none; } .noPointer { pointer-events: none; } .hasTransition { -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; } #leftSideBarContainer input[type=text], #leftSideBarContainer textarea { width: 380px; } #leftSideBarContainer textarea { height: auto; min-height: 100px; overflow: hidden; } #colorsetBlock .colorset { width: 70px; padding: 10px; height: 70px; margin-right: 6px; float: left; } #colorsetBlock .colorset.selected { border: 2px solid #666666; padding: 8px; } #colorsetBlock .colorset:last-of-type { margin-right: 0; } #colorsetBlock .colorset div { width: 28px; margin-right: 5px; margin-bottom: 5px; height: 28px; border-radius: 3px; float: left; } #colorsetBlock .colorset div:nth-child(even) { margin-right: 0; } .optionRow { height: 28px; line-height: 28px; } .optionRow.checked, .optionRow:hover { background-color: #cbcbcb; } .optionRow input, .optionRow span { float: left; height: 28px; } .optionRow input { padding-left: 5px; } .optionRow span { padding-left: 10px; } .youtube-player { margin-top: 5px; } .youtube-player span { width: 30px; height: 30px; display: block; float: left; background-size: 16px !important; margin-right: 5px; cursor: pointer; } .youtube-player .button-play { background: url('../images/icon_video.png') center center no-repeat; } .youtube-player .button-pause { background: url('../images/icon_pause.png') center center no-repeat; } .youtube-player .button-stop { background: url('../images/icon_stop.png') center center no-repeat; } #listItems.isSorting { list-style-type: none; } /* DIALOGS */ .dialogWindow { position: absolute; display: none; background: #e6e6e6; border: 3px solid #333; width: 430px; } .dialogWindow h2 { text-transform: uppercase; font-size: 11pt; font-weight: bold; padding: 10px 5px 0 10px; } .dialogWindow h2:empty { display:none; } .dialogWindow .message { min-height: 30px; padding: 5px; padding-left: 10px; width: 390px; display: inline-block; font-size: 14px; } .dialogWindow .message .span { width: 100%; display:block; padding-bottom:5px; } .dialogWindow .message ul { list-style-type: none; } .dialogWindow .message ul > div:first-child { position: absolute; left: 10px; width: 60px; overflow: hidden; display:inline-block; } .dialogWindow .message ul .icon-container { top: 0; height:auto; background: none no-repeat 15px 5px; background-size: 30px; } .dialogWindow .message ul .description { top: 20px; text-align: center; } .dialogWindow .message ul ul { padding: 5px 5px 10px 65px; min-height: 60px; background-color: #ccc; margin-bottom:5px; } .dialogWindow .message ul a.plugin-button { background-image: none; background-color: #4d4d4d; text-align: right; width: 4.5vw; } .dialogWindow .close { float: right; height: 20px; width:20px; background: url('../images/btn_close.png') no-repeat; background-size:20px; margin: 8px; cursor:pointer; border: none; } .dialogWindow .dialogBar { background: #0071b8; color: #fff; width: 100%; height: 33px; line-height: 33px; text-align: center; } .dialogWindow .buttons { margin: 5px 10px 10px 0; } #contentDialog { width: 795px; background-color: #f0f0f0; } #contentDialog .message { width: 770px; } #themeList .spacer { width: 100%; height: 70px; } #pluginList, #themeList { padding: 10px; } #pluginList p, #themeList a, #pluginDetails li { margin-top: 5px; border-bottom: dotted 1px #666; padding-bottom: 5px; cursor: pointer; display: block; } .pluginBlock { background-color: rgba(102, 102, 102,0.7); } .pluginBlock a { width: 130px; float: right; margin-right: 10px; text-align: center; padding: 5px; } #pluginDetails form { padding: 10px; } #pluginDetails li { margin-right: 10px; line-height: 28px; height: 28px; width: 290px; float: left; list-style: none; } #pluginDetails li input { float: left; margin-top: 5px; margin-right: 10px; } #pluginDetails li label { float: left; } #pluginDetails li a { float: right; } #pluginDetails .addTemplateButton { float: right; margin-top: 10px; margin-right: 33px; } #pluginDetails .savePluginButton { margin-right: 33px; text-align: center; padding: 5px; line-height: normal; float: right; margin-bottom: 30px; } #pluginDetails .pluginDetailsInfo div { margin-bottom: 20px; } #pluginDetails .pluginDetailsInfo label { width: 200px; float: left; margin-right: 10px; } #pluginDetails .pluginDetailsInfo input[type=text], #pluginDetails .pluginDetailsInfo textarea { width: 300px; } #pluginDetails .pluginDetailsInfo textarea { height: 50px; }