/* * Font definitions for OpenSlides site */ @font-face { font-family: 'Roboto Condensed'; src: url('../fonts/Roboto-Condensed-Regular.woff') format('woff'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Roboto Condensed Light'; src: url('../fonts/Roboto-Condensed-Light.woff') format('woff'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Roboto Medium'; src: url('../fonts/Roboto-Medium.woff') format('woff'); font-weight: 400; font-style: normal; } body { font-family: "Roboto", sans-serif; } strong, b, .os-table .title { font-family: "Roboto Medium"; font-family: "Roboto Medium", sans-serif; font-weight: normal; } h1, h2, h3, h4, h5, h6, #header .title { font-family: "Roboto Condensed", sans-serif; font-weight: 400; } #content .col2 h4 { font-family: 'Roboto Condensed Light'; font-weight: 300; } #content .col1 .meta .heading .drop-down-name, #content .col1 .meta h3 { font-family: 'Roboto Condensed Light'; } /* * Template styles for OpenSlides site */ * { /* set margin/padding for all (block) elements to null */ margin: 0; padding: 0; } body { font-size: 14px; line-height: 1.5; color: #222; text-align: center; background: #e8eaed; } div { text-align: left; } blockquote { font-size: inherit; } h1, h2, h3, h4, h5, h6 { 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; } h4 { font-size: 18px; color: #222; } .heading a { color: #444; } .heading a:hover { color: #2b6883; text-decoration: none; } 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 div.unconnected { border: 1px solid red; position: fixed; width: 100%; z-index: 1000; } #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; color: #fff; } #header .user { float: right; margin: 5px 0 0 0; height: 100%; } #header .user .inline { display: inline; } #nav { float: left; width: 100%; height: auto; 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 { width: 100%; float: left; border: none; margin: 0; } #nav .navbar-toggle { padding: 5px 0; } #nav .navbar-toggle i { font-size: 28px; color: #fff; opacity: 0.5; } #nav .navbar-toggle:hover i { opacity: 1; } #nav .navbar-collapse { padding: 0; } #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; text-decoration: none; } #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; display: inline-table; } #nav .searchbar input { width: 150px; } #nav .searchbar .btn { background: #e8eaed; 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 .title { width: 100%; cursor: pointer; height: 30px; color: #fff; background: #317796; padding: 5px 20px 0 20px; } .col1 .meta .title .name { float: left; font-size: 14px; } .col1 .meta .title .icon { float: right; } .col1 .meta .detail { padding: 0 20px 10px 20px; width: 100%; min-height: 30px; background: #d3d3d3; color: #444; } .col1 .details { padding: 20px; width: auto; margin-top: 20px; background: #fff; border: 1px solid #d3d3d3; } .col1 .details .motion-toolbar .toolbar-left { margin-top: 0; margin-bottom: 55px; margin-left: 15px; } .col1 .details .motion-toolbar .toolbar-left > * { margin-right: 5px; float: left; } .col1 .details .motion-toolbar .toolbar-left .btn.disabled { cursor: default; opacity: 1; background-color: #eee; } .col1 .details .motion-toolbar .toolbar-left .goto-line-number { max-width: 220px; } .col1 .details .inline-editing-activator { margin-right: 13px; } .col1 .details img { max-width: 100%; height: auto; } .col1 ol, .col1 ul { margin-left: 15px; } .ballot-tabs ul { margin-left: 0px; } .ballot-tabs li.active a { background-color: #f5f5f5 !important; } .ballot-tabs .tab-content { background-color: #f5f5f5; border: 1px solid #ddd; border-width: 0px 1px 1px 1px; padding: 15px; } /* Toolbar to save motion in inline editing mode */ .motion-save-toolbar { position: fixed; bottom: 0; left: 50%; height: 75px; width: 300px; background: rgba(242, 222, 222, 0.9); color: black; text-align: center; padding: 5px; z-index: 10; display: none; border: 1px solid #d3d3d3; margin-left: -150px; border-bottom: none; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); } .motion-save-toolbar.visible { display: block; } .motion-save-toolbar .changed-hint { display: block; line-height: 16px; text-align: center; margin-bottom: 10px; font-weight: bold; } .motion-save-toolbar label { font-weight: normal; line-height: 16px; text-align: left; padding-left: 16px; margin-top: 5px; margin-left: 15px; } .motion-save-toolbar label input { margin-left: -16px; } /*** Line numbers ***/ .motion-text .highlight { background-color: #ff0; } .motion-text ins { color: green; text-decoration: underline; } .motion-text del { color: red; text-decoration: line-through; } .motion-text.line-numbers-outside { padding-left: 40px; position: relative; } .motion-text.line-numbers-outside .os-line-number { display: inline-block; font-size: 0; line-height: 0; width: 22px; height: 22px; position: absolute; left: -20px; padding-right: 55px; } .motion-text.line-numbers-outside .os-line-number:after { content: attr(data-line-number); position: absolute; left: 20px; top: 10px; vertical-align: top; color: gray; font-size: 12px; font-weight: normal; } .motion-text.line-numbers-inline .os-line-break { display: none; } .motion-text.line-numbers-inline .os-line-number { display: inline-block; } .motion-text.line-numbers-inline .os-line-number:after { display: inline-block; content: attr(data-line-number); vertical-align: top; font-size: 10px; font-weight: normal; color: gray; margin-top: -3px; margin-left: 0; margin-right: 0; } .motion-text.line-numbers-none .os-line-break { display: none; } .motion-text.line-numbers-none .os-line-number { display: none; } .os-line-number { position: relative; user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } .os-line-number:after { position: relative; user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } .line-numbers-outside .os-line-number.selectable:hover:before, .line-numbers-outside .os-line-number.selected:before { cursor: pointer; content: "\f067"; display: inline-block; position: absolute; width: 14px; height: 14px; border-radius: 0.25em; top: 4px; left: 43px; cursor: pointer; font-family: FontAwesome; font-size: 12px; color: white; line-height: 16px; text-align: center; background-color: #337ab7; } .tt_change_recommendation_create_help { display: none; max-width: 150px; left: -45px; margin-top: -8px; } .tt_change_recommendation_create_help.opened { display: inherit; opacity: 0.8; } /** Styles for annotating the original motion text with change recommendations */ .motion-text-holder { position: relative; } .motion-text-holder .change-recommendation-list { position: absolute; top: 0; left: -10px; width: 4px; list-style-type: none; margin: 0; } .motion-text-holder .change-recommendation-list > li { position: absolute; width: 4px; cursor: pointer; } .motion-text-holder .change-recommendation-list > li.insert { background-color: #00aa00; } .motion-text-holder .change-recommendation-list > li.delete { background-color: #aa0000; } .motion-text-holder .change-recommendation-list > li.replace { background-color: #0333ff; } .motion-text-holder .change-recommendation-list .tooltip { display: none; } /** Diff view */ .change-recommendation-overview { background-color: #eee; border: solid 1px #ddd; border-radius: 3px; margin-bottom: 5px; margin-top: -15px; padding-top: 5px; } .change-recommendation-overview { margin-bottom: 50px; padding: 10px; } .change-recommendation-overview h2 { margin-top: 0; } .change-recommendation-overview ul { list-style: none; display: table; } .change-recommendation-overview li { display: table-row; cursor: pointer; } .change-recommendation-overview li:hover { text-decoration: underline; } .change-recommendation-overview li > * { display: table-cell; padding: 4px; } .change-recommendation-overview .status { color: gray; font-style: italic; } .change-recommendation-overview .status > *:before { content: '('; } .change-recommendation-overview .status > *:after { content: ')'; } .change-recommendation-overview .no-changes { font-style: italic; color: grey; } .diff-box { background-color: #f9f9f9; border: solid 1px #eee; border-radius: 3px; margin-bottom: 0; margin-top: -25px; padding-top: 0; padding-right: 155px; } .motion-text-with-diffs .original-text { min-height: 30px; // Spacer between .diff-box, in case .original-text is empty } .motion-text-with-diffs .original-text ul:last-child { padding-bottom: 16px; } .motion-text-with-diffs.line-numbers-inline .diff-box, .motion-text-with-diffs.line-numbers-none .diff-box { margin-right: -220px; } .diff-box:hover { background-color: #f0f0f0; } .diff-box .action-row { font-size: 0.8em; padding-top: 5px; padding-bottom: 5px; float: right; width: 150px; text-align: right; margin-right: -150px; opacity: 0.5; } .diff-box:hover .action-row { opacity: 1; } .diff-box .action-row .btn-delete { margin-left: 5px; color: red; } .diff-box .action-row .btn-edit { margin-left: 5px; } .diff-box .status-row { font-style: italic; color: gray; } .diff-box .status-row > *:after { content: ':'; } .motion-text-diff .delete { color: red; text-decoration: line-through; } .motion-text-diff .insert { color: green; text-decoration: underline; } .motion-text-diff p { padding-bottom: 0; margin-top: 0; margin-bottom: 0; } .motion-text-diff.line-numbers-outside .insert .os-line-number { display: none; } .motion-text-diff.line-numbers-inline .insert .os-line-number { display: none; } /** Projector sidebar column **/ #content .col2 { float: right; position: relative; display: inline-flex; z-index: 3; margin-bottom: 20px; } #content .col2.max { width: 330px; } #content .col2.min { width: 70px; } #content .col2 h4 { font-size: 22px; line-height: 24px; color: #444; } #content .col1 .meta .heading, #content .col1 .meta h3 { font-size: 22px; line-height: 24px; font-weight: 300; color: #444; padding-bottom: 0; margin-top: 20px; margin-bottom: 5px; } #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; margin-left: 20px; 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; } .col2 .projector_full .title a, .col2 .projector_full .title a:hover { color: #fff; text-decoration: none; display: block; } .meta .title:hover, .col2 .projector_full .title:hover { color: #d3d3d3; } .col2 .projector_full .details { clear: both; width: 100%; background: #d3d3d3; } .col2 .projector_full .details .section { padding: 1px 20px; width: auto; border-bottom: 1px solid #c2c2c2; } .col2 .projector_full .details .section div.in.collapse { padding-bottom: 15px; } #content .col2 .section a:hover { text-decoration: none; } #content .toggle-icon { font-size: 20px; float: right; margin-top: 10px; } /* 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-heading { padding: 3px 15px; } .col2 .message .panel-body { padding: 10px 15px; } .col2 .message projector-button { float: left; width: auto; margin: 5px 10px 5px 0px; } .col2 .message .innermessage { float: left; width: 180px; max-width: 170px; overflow: hidden; } .col2 .message .panel-input { width: 228px; float: left; margin-top: 10px; } .col2 .countdown_timer { font-size: 2.2em; font-weight: bold; } .col2 .countdown .editicon, .col2 .message .editicon { padding-right: 10px; } .col2 .countdown_timer.warning { color: #ed940d; } .col2 .countdown_timer.negative { color: #CC0000; } .notNull { color: red; font-weight: bold; } /* iframe for live view */ .iframe { -moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0 0; } .iframewrapper { width: 256px; position: relative; overflow: hidden; border: 1px solid #D5D5D5; margin-bottom: 10px; } .iframeoverlay { width: 256px; position: absolute; top: 0px; left: 0px; display: block; z-index: 1; } /** Motion **/ .motion-toolbar, .speakers-toolbar { background-color: #f5f5f5; border-bottom: 1px solid #ddd; padding: 12px 0 10px 0; height: 54px; margin: -20px -5px 50px -5px; } .motion-toolbar:first-child { margin-bottom: 20px; } .speakers-toolbar { margin: -20px -20px 30px -20px; padding: 12px 15px 10px 15px; } /** OS-Table **/ .os-table small { color: #555; } .os-table .row { border: 1px solid #ddd; border-top: 0px; } .os-table .data-row:hover { background-color: #f5f5f5; } .os-table .data-row > div { padding: 10px 0px 10px 0px; } .os-table .id-col { width: 50px; min-height: 1px; } .os-table .id-col-space { width: calc(100% - 50px); } .os-table .header-row { border-top: 1px solid #ddd; background-color: #f5f5f5; } .os-table .header-row > div { padding: 10px; } .os-table .main-header { width: calc(100% - 50px); float: right; } .os-table .main-header .form-inline { margin-left: 15px; } .os-table .content > div { /* horizontal blocks */ display: inline-block; float: left; } .os-table .content > div > div { /* vertival blocks */ margin-bottom: 3px; } .os-table .content > div > div:last-child { margin-bottom: 0px; } .os-table .row .centered { text-align: center; } .os-table .row .col-xs-1 { width: 50px; } .os-table .projector { width: 70px !important; } .os-table .row .col-xs-4 { padding-right: 10px; } .os-table .header-row .dropdown > span, .os-table .sort-spacer { padding: 5px 10px 5px 10px; } .os-table .title { font-size: 115%; margin-right: 3px; padding: 0; background-color: transparent; } /** Config **/ .input-comments > div { margin-bottom: 5px } /** Pojector sidebar **/ .col2 .projectorSelector { margin-top: 10px; margin-bottom: 10px; } .col2 .projectorSelector > div > div { width: 65%; padding-right: 5px; float: left; } .col2 .projectorSelector > div > div > button { width: 100%; } .col2 .projectorSelector .manageBtn { width: 35%; } .col2 .projectorSelector .btn-group { margin-left: auto; margin-right: auto; display: table; } .col2 .projectorSelector > div { margin-bottom: 10px; } /** manage-projectors **/ .projectorContainer > div { display: inline-table; width: 256px; margin: 10px 20px 35px 10px; } .projectorContainer > div > div { margin-bottom: 10px; } .projectorContainer .middle { width: 100%; } .projectorContainer .middle > div { margin-left: auto; margin-right: auto; display: table; } .projectorContainer .dropdown { width: 65%; padding-right: 5px; float: left; } .projectorContainer .dropdown > button { width: 100%; } .projectorContainer .btn-danger { width: 35%; } .projectorContainer .resolution { display: inline-block; width: 120px; } /** Footer **/ #footer { float: left; height: 50px; padding-top: 15px; font-size: 90%; } /** General helper classes **/ .disabled { color: #555; cursor: not-allowed !important; } .bold { font-weight: bold; } .btn-primary { background-color: #317796; } .dropdown-menu { margin-left: 0px !important; } .slimDropDown { padding-left: 4px !important; padding-right: 4px !important; } .btn-slim { padding-left: 6px; padding-right: 6px; } .spacer, .spacer-top { margin-top: 7px; } .spacer-top-lg { margin-top: 25px; } .spacer-bottom { margin-bottom: 7px; } .spacer-right { margin-right: 5px; } .spacer-left { margin-left: 5px; } .spacer-left-lg { margin-left: 10px; } .no-padding { padding: 0px; } .lead-div { margin-bottom: 20px; } .lead-div .lead { margin-bottom: 0; } .italic { font-style: italic; } .hoverActions { font-size: 85%; } .hiddenDiv { visibility: hidden; } .vcenter { vertical-align: middle; } .white-space-pre-line { white-space: pre-line; } .slimlabel.label { padding: 0px 10px; } .indentation, .indentation20 { margin-left: 20px !important; } .indentation-lg { margin-left: 35px !important; } .halfWidth { width: 50%; } .badge-info { background-color: #f0ad4e; } .smallhr { margin-top: 5px; margin-bottom: 5px; border-color: #cccccc; } .nobr { white-space: nowrap; } .optional { /* show optional column */ display: auto; } .login-logo { width: 250px; } .loginForm .input-group-addon i { width: 15px; } .modal-header { padding: 5px; } .no-padding { padding: 0 !important; } .no-padding-left { padding-left: 0 !important; } .no-padding-right { padding-right: 0 !important; } /* 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: ":"; } /* group list */ #groups-table { table-layout: fixed; text-align: center; } #groups-table > thead > tr > th { vertical-align: top; text-align: center; min-width: 40px; } #groups-table .perm-head { width: 300px; } #groups-table > thead > tr > th > div { text-align: center; } #groups-table > tbody > tr:hover { background-color: #f5f5f5 !important; } #groups-table > tbody > tr:first-child { background-color: #f9f9f9; } #groups-table > tbody > tr > td:first-child { text-align: left; } #groups-table .optional-show { /* hide optional-show column */ display: none; } /* List of speakers view */ .fullscreendiv-title { border-bottom: 5px solid #d3d3d3; margin-bottom: 40px; } .lastSpeakers { color: #9a9898; } .lastSpeakers .indentation { margin-left: 27px; } .currentSpeaker { font-weight: bold; } .currentSpeaker i { padding-right: 5px; } .nextSpeakers { margin-left: 8px; } .nextSpeakers li { line-height: 150%; } /* search results */ .searchresults li { margin-bottom: 12px; } .searchresults li .subtitle { color: #999999; } /* ngDialog: override ngdialog-theme-default */ .ngdialog.ngdialog-theme-default { padding-top: 40px; } .ngdialog.ngdialog-theme-default.wide-form .ngdialog-content { width: 750px; line-height: 1em; } .ngdialog h2 { margin-top: 5px; } .ngdialog .row:after, .ngdialog .row:before { display: table-cell !important; } .help-block { font-size: 85%; margin-top: 2px; margin-left: 2px; } /* angular-chosen: override default width of select fields in quickmode */ .chosen-container { width: 100% !important; font-size: 14px; } .chosen-container .chosen-choices { border: 1px solid #ccc; border-radius: 4px; } .chosen-container-active .chosen-choices { border-color: rgba(82,168,236,.8); box-shadow: 0 0 8px rgba(82,168,236,.6); } .chosen-container .chosen-choices li.search-choice { margin: 6px 5px 0 0 !important; } .chosen-container input { margin: 4px 0 !important; } /* 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 0.5s linear; animation: fade-in 0.5s linear; } .animate-item.ng-leave { -webkit-animation: fade-out 0.25s linear; animation: fade-out 0.25s linear; } /* xeditable */ .editable-click { border: none; cursor: pointer; color: #555; } .editable-click:hover { color: #555; } .popover-wrapper .editable-hide { display: inline !important; } @keyframes fade-out { 0% { opacity: 1; background: none; } 100% { opacity: 0; background: none; } } @keyframes fade-in { 0% { opacity: 0; background: none; } 100% { opacity: 1; background: none; } } /* override bootstraps's progress bar for poll results */ .pollresults .progress { height: 12px; margin-bottom: 0; } /* override booststrap's label class to fix linebreak and add spacing */ .label { display: inline-block; padding: .4em .6em; margin-right: .2em; } /* for angular-csv-import form */ .import { margin-left: 15px; } .import .label { color: #333 !important; font-size: 100%; font-weight: normal; width: 100px; text-align: left; display: inline-block; } .import .label::after { content: ': '; } /* voting results */ .result_label { margin-top: 5px; } .pollresults table { margin-bottom: 0; } .pollresults table td{ border: none !important; padding: 5px 2px !important; vertical-align: middle !important; } .pollresults table .icon { color: #636363; } .pollresults table tr.total td { border-top: 1px solid #444 !important; } /* 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: 234px; padding: 0 10px 10px 10px; z-index: 5; } #chatbox-text { overflow-y: scroll; height: 190px; color: #222; } /* tables */ .minimum { width: 1px; } .minimumTable { width: auto; } .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: #F5DCDC; } tr.activeline td, li.activeline, .projected { background-color: #bed4de !important; } 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; } .col-md-4 { float: left; width: 50%; } .motion-text.line-numbers-outside .os-line-number:after { font-size: 10px; top: 9px; } } /* display for resolutions smaller that 900px */ @media only screen and (max-width: 900px) { #nav .navbar li a { padding: 24px 5px; } #groups-table .perm-head { width: 200px; } /* hide text in groups-table earlier */ #groups-table .optional { display: none; } /* show replacement elements, if any */ #groups-table .optional-show { display: block !important; } } /* display for resolutions smaller that 760px */ @media only screen and (max-width: 760px) { h1 { font-size: 22px; padding-bottom: 4px; } h2 { font-size: 16px; padding-bottom: 4px; } h3 { font-size: 14px; padding-bottom: 4px; } .user i { font-size: 16px; padding: 3px; } #nav .navbar { box-shadow: none; } #nav .navbar ul li a { padding: 10px 15px; } #nav .searchbar { margin: 15px 0; } #chatbox { width: 100%; top: 40px; } .badge { font-size: 10px; } /* show replacement elements, if any */ .optional-show { display: block !important; } /* hide marked element / column */ .optional, .hide-sm { display: none !important; } } /* display for resolutions smaller that 560px */ @media only screen and (max-width: 560px) { #content .containerOS { padding: 0; } #content .col2.max { width: 100%; position: absolute !important; left: 0; } #content .col1.min { width: calc(100% - 70px); } .col2 .projector_full { margin-left: 0px; } #groups-table .perm-head { width: 150px; } }