/* * OpenSlides template styles of web interface */ * { /* set margin/padding for all (block) elements to null */ margin: 0; padding: 0; } body { font-family: "open_sansregular",Helvetica,Arial,sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; color: #222; text-align: center; background: #e8eaed; } div { text-align: left; } h1, h2, h3, h4, h5, h6 { font-family: "Roboto Condensed",Helvetica,Arial,sans-serif; font-weight: 400; line-height: 1.1; } h1 { font-size: 36px; color: #317796; padding-bottom: 8px; } h2 { font-size: 22px; color: #9a9898; padding-bottom: 14px; } h3 { font-size: 22px; color: #222; padding-bottom: 14px; } p { padding-bottom: 14px; } a { text-decoration: none; color: #2b6883; } a:hover { text-decoration: underline; } img { border: none; } #wrapper { float: left; width: 100%; margin: 0 auto 0 auto; } /** Header **/ #header { float: left; width: 100%; height: 40px; background: #002c42; color: #999; } #header a.headerlink { text-decoration: none; } #header a.headerlink { color: #999; } #header a.headerlink:hover, #header a.headerlink:active, #header a.headerlink.active { color: #e8eaed; } #header .title { float: left; margin: 2px 0 0 -5px; font-family: "Roboto Condensed",Helvetica,Arial,sans-serif; font-weight: 400; color: #fff; } #header .user { float: right; margin: 5px 0 0 0; height: 100%; } #header .user .inline { display: inline; } #nav { float: left; width: 100%; height: 99px; background: #317796; color: #fff; overflow-y: hidden; } #header .containerOS, #nav .containerOS, #content .containerOS { max-width: 1300px; height: 100%; margin: 0 auto 0 auto; padding: 0 30px; } #nav .navbar { float: left; border: none; margin: 0; } #nav .navbar .button { float: left; display: none; } #nav .navbar .button i { padding-top: 33px; font-size: 28px; opacity: 0.5; } #nav .navbar .button a i { display: block; color: #fff; } #nav .navbar .button a:hover i { opacity: 1; } #nav .navbar ul { list-style: none; margin: 0; } #nav .navbar ul li { float: left; text-align: center; } #nav .navbar ul li.active { background: url('/static/img/nav_dark-bg.png'); } #nav .navbar ul li.active a { background: url('/static/img/nav_active.png') no-repeat bottom; } #nav .navbar li a { display: block; color: #fff; padding: 22px 15px; } #nav .navbar li a:hover { background: url('/static/img/nav_dark-bg.png'); text-decoration: none; } #nav .navbar li i { font-size: 28px; display: block; margin-bottom: 6px; margin-right: 0; opacity: 0.5; } #nav .navbar li.active i, #nav .navbar li a:hover i { opacity: 1; } #nav .searchbar { float: right; margin-top: 35px; } .searchbar .input-medium { float: left; height: 28px; width: 200px; border: 1px solid #ccc; padding: 0 5px; font-size: 14px; } .searchbar .btn { float: left; height: 30px; width: 30px; background: #e8eaed; border: 1px solid #ccc; border-left: none; font-size: 14px; color: #555; } /** Content **/ #content { float: left; width: 100%; margin-top: 20px; } #content .containerOS { height: 30px; } /** Main column **/ #content .col1 { float: left; } #content .col1.min { /*with maximized sidebar*/ width: calc(100% - 330px); } #content .col1.max { /*with minimized sidebar*/ width: calc(100% - 70px); } .col1 .header { background: #fff; border: 1px solid #d3d3d3; } .col1 .title { padding: 0 20px; width: auto; background: #fff; } .col1 .header .submenu { float: right; } .col1 .meta { padding: 0 20px 10px 20px; width: auto; min-height: 30px; background: #bed4de; } .col1 .meta h3 { padding-bottom: 0; margin-bottom: 5px; } .col1 .details { padding: 20px; width: auto; margin-top: 20px; background: #fff; padding: 20px; border: 1px solid #d3d3d3; } .col1 ul, .col1 ol { margin-left: 20px; } /** Projector sidebar column **/ #content .col2 { float: right; } #content .col2.max { width: 330px; } #content .col2.min { width: 70px; } #content .col2 h4 { font-size: 22px; line-height: 24px; font-family: 'Roboto Condensed Light'; font-weight: 300; } #content .col2 a h4 { color: #444; } #content .col2 a:hover h4 { text-decoration: none; } .col2 .projector_min { background: url('/static/img/nav_projector_sidebar_min.png') no-repeat left 17px; width: 50px; padding-left: 8px; float: right; } .col2 .projector_min .icon { float: left; color: #fff; font-size: 24px; width: 50px; text-align: center; padding: 7px 0; background: #317796; } .col2 .projector_min .icon a i { opacity: 0.5; } .col2 .projector_min .icon a:hover i { opacity: 1; } .col2 .projector_min .icon a { color: #fff; display: block; } .col2 .projector_full { margin-left: 30px; width: auto; } .col2 .projector_full .title { width: 100%; color: #fff; height: 50px; background: #317796; cursor: pointer; } .col2 .projector_full .title i { margin-right: 10px; } .col2 .projector_full .title .name { float: left; padding: 8px 0 0 20px; font-size: 22px; font-weight: 400; } .col2 .projector_full .title .icon { float: right; width: 50px; text-align: center; padding-top: 7px; font-size: 24px; opacity: 0.5; } .col2 .projector_full .title a, .col2 .projector_full .title a:hover { color: #fff; text-decoration: none; display: block; } .col2 .projector_full .details { clear: both; width: 100%; background: #d3d3d3; } .col2 .projector_full .details .section { padding: 10px 20px; width: auto; border-bottom: 1px solid #c2c2c2; } #content .col2 .section a:hover { text-decoration: none; opacity: 0.5; } #content .toggle-icon { font-size: 20px; float: right; } /* countdown and message controls */ .col2 .countdown.panel, .col2 .message.panel { margin-bottom: 7px; } .col2 .countdown .panel-heading { padding: 3px 15px; } .col2 .countdown .panel-body { padding: 5px 15px; } .col2 .message .panel-body { padding: 10px 15px; } .col2 .countdown_timer { font-size: 2.2em; font-weight: bold; } .col2 .countdown .editicon, .col2 .message .editicon { padding-right: 10px; } .col2 .notNull { color: red; font-weight: bold; } /* iframe for live view */ .col2 #iframe { width: 1024px; height: 768px; -moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0 0; -moz-transform: scale(0.25); -webkit-transform: scale(0.25); -o-transform: scale(0.25); transform: scale(0.25); /* IE8+ - must be on one line, unfortunately */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.25, M12=0, M21=0, M22=0.25, SizingMethod='auto expand')"; } .col2 #iframewrapper { width: 256px; height: 192px; position: relative; overflow: hidden; border: 1px solid #D5D5D5; margin-bottom: 10px; } .col2 #iframeoverlay { width: 256px; height: 192px; position: absolute; top: 0px; left: 0px; display: block; z-index: 1; } /** Footer **/ #footer { float: left; height: 50px; padding-top: 15px; font-size: 90%; } /** General helper classes **/ .btn-primary { background-color: #317796; } .spacer, .spacer-top { margin-top: 7px; } .spacer-right { margin-right: 5px; } .hoverActions { font-size: 85%; } .hiddenDiv { visibility: hidden; } .vcenter { vertical-align: middle; } .white-space-pre-line { white-space: pre-line; } .slimlist { padding-left: 20px; } .smallhr { margin-top: 5px; margin-bottom: 5px; border-color: #cccccc; } .nobr { white-space: nowrap; } .optional { /* show optional column */ display: auto; } .login-logo { width: 250px; } .modal-header { padding: 5px; } /* user details */ .user_details fieldset { margin-bottom: 10px; } .user_details legend { margin-bottom: 5px; } .user_details label { font-weight: bold; margin: 10px 0 0 0; display: block; } .user_details label:after { content: ":"; } /* ngDialog: override ngdialog-theme-default */ .ngdialog.ngdialog-theme-default { padding-top: 40px; } .ngdialog.ngdialog-theme-default.wide-form .ngdialog-content { width: 650px; } .ngdialog h2 { margin-top: 5px; } /* angular-ui-tree style */ .angular-ui-tree-handle { background: none repeat scroll 0 0 #f8faff; border: 1px solid #dae2ea; color: #7c9eb2; padding: 10px; } .angular-ui-tree-handle:hover { background: none repeat scroll 0 0 #f4f6f7; border-color: #dce2e8; color: #438eb9; } .angular-ui-tree-placeholder { background: none repeat scroll 0 0 #f0f9ff; border: 2px dashed #bed2db; box-sizing: border-box; } /* ngAnimate classes */ .animate-item.ng-enter { -webkit-animation: fade-in 1s linear; animation: fade-in 1.5s linear; } .animate-item.ng-leave { -webkit-animation: fade-out 1s linear; animation: fade-out 1.5s linear; } @keyframes fade-out { 0% { opacity: 1; background: none; } 25% { opacity: 1; background: #f8efc0; } 100% { opacity: 0; background: none; } } @keyframes fade-in { 0% { opacity: 0; background: none; } 25% { opacity: 1; background: #dff0d8; } 100% { opacity: 1; background: none; } } /* override bootstraps's progress bar for poll results */ .pollresults .progress { height: 12px; margin-bottom: 0; } /* voting results */ .result_label { margin-top: 5px; } /* Chatbox */ #chatbox { position: fixed; top: 40px; right: 0; width: 40%; border-color: #dddddd; border-width: 1px; box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2); height: 200px; padding: 0 10px 10px 10px; z-index: 99; } #chatbox-text { overflow-y: scroll; height: 190px; } /* tables */ .minimum { width: 1px; } .deleteColumn { text-align: center; background-color: #ff9999 !important; } th.sortable:hover, tr.pointer:hover, .pointer { cursor: pointer; } /* background colors for table rows */ tr.hiddenrow td { background-color: #e5e5e5; } tr.activeline td, li.activeline, .projected { background-color: #bed4de; } tr.selected td { background-color: #ff9999; } /** Colors **/ .grey { /*h2 grey*/ color: #9a9898; } /*//////////////////////////////////////// =MEDIA QUERIES (RESPONSIVE DESIGN) ////////////////////////////////////////*/ /* display for 900 to 1200px resolutions */ @media only screen and (max-width: 1200px) { body { font-size: 12px;} h1 { font-size: 30px; padding-bottom: 6px; } h2 { font-size: 22px; padding-bottom: 10px; } h3 { font-size: 18px; padding-bottom: 10px; } } /* display for resolutions smaller that 880px */ @media only screen and (max-width: 880px) { #nav .navbar li a { padding: 24px 5px; } } /* display for resolutions smaller that 480px */ @media only screen and (max-width: 480px) { h1 { font-size: 22px; padding-bottom: 4px; } h2 { font-size: 16px; padding-bottom: 4px; } h3 { font-size: 14px; padding-bottom: 4px; } #header { height: 80px; } #header .title { width: 100%; text-align: center; margin-top: 5px; } #header .user { float: left; width: 100%; } #nav { height: 60px; } #nav .navbar ul { display:none;} #nav .navbar .button { display: block;} #nav .navbar .button i { padding-top: 15px;} #nav .searchbar { margin-top: 15px; } .searchbar .input-medium { width: 150px; } #chatbox { width: 100%; top: 130px; } .optional { /* hide optional column */ display: none; } }