/* style-sheet for layout of SWAD */ /* SWAD (Shared Workspace At a Distance), is a web platform developed at the University of Granada (Spain), and used to support university teaching. This file is part of SWAD core. Copyright (C) 1999-2021 Antonio CaƱas Vargas This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General 3 License as published by the Free Software Foundation,either version 3 of the License,or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not,see . */ /********************************* Body **************************************/ body { margin:0; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:1em; overflow-y:scroll; /* force vertical scrollbar */ } .BODY_BG_WHITE {background-color:white;} .BODY_BG_GREY {background-color:white;} .BODY_BG_PURPLE {background-color:white;} .BODY_BG_BLUE {background-color:white;} .BODY_BG_YELLOW {background-color:white;} .BODY_BG_PINK {background-color:white;} .BODY_BG_DARK {background-color:#383838;} input { font-size:12pt; } select { font-size:12pt; } textarea { font-size:13pt; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; } .INPUT_WHITE {} .INPUT_GREY {} .INPUT_PURPLE {} .INPUT_BLUE {} .INPUT_YELLOW {} .INPUT_PINK {} .INPUT_DARK {border-color:#505050;background-color:#1f1f1f;color:white;} table { box-sizing:border-box; border-width:0; border-style:none; border-spacing:0; } table th { box-sizing:border-box; padding:0; color:#4D88A1; font-weight:bold; } table td { box-sizing:border-box; padding:0; } img { border-width:0; border-style:none; } form { display:inline; margin:0; } address { font-style:normal; } /*********************** Text decoration of links ****************************/ a { color:#4D88A1;text-decoration:none; } a:link, a:visited, a:active { text-decoration:none; } a:hover /* Default ==> underlined */ { text-decoration:underline; } /****************** Layout (the whole page with a background) ****************/ #whole_page { display:table; box-sizing:border-box; width:100%; } /************************* Layout (first heading row) ************************/ #head_row_1 { display:table; box-sizing:border-box; width:100%; height:40px; } .HEAD_ROW_1_WHITE { background-color:black; } .HEAD_ROW_1_GREY { background-image:-webkit-linear-gradient(#383838 0,#404040 100%); /* Safari */ background-image:linear-gradient(#383838 0,#404040 100%); background-repeat:no-repeat; } .HEAD_ROW_1_PURPLE { background-image:-webkit-linear-gradient(#812b5a 0,#874c80 100%); /* Safari */ background-image:linear-gradient(#812b5a, #874c80 100%); background-repeat:no-repeat; } .HEAD_ROW_1_BLUE { background-color:#3781c1; } .HEAD_ROW_1_YELLOW { background-image:-webkit-linear-gradient(#292229 0,#302830 100%); /* Safari */ background-image:linear-gradient(#292229 0,#302830 100%); background-repeat:no-repeat; } .HEAD_ROW_1_PINK { background-image:-webkit-linear-gradient(#bf667f 0,#c86b85 100%); /* Safari */ background-image:linear-gradient(#bf667f 0,#c86b85 100%); background-repeat:no-repeat; } .HEAD_ROW_1_DARK { background-image:-webkit-linear-gradient(#303030 0,#383838 100%); /* Safari */ background-image:linear-gradient(#303030 0,#383838 100%); background-repeat:no-repeat; } #head_row_1_left { display:table-cell; text-align:left; vertical-align:middle; } @media only screen and (max-width: 1024px) { /* For mobile-phones */ #head_row_1_logo_small { display:inline-block; } #head_row_1_logo_big { display:none; } #head_row_1_tagline { display:none; } } @media only screen and (min-width: 1024px) { /* For tablets and desktop */ #head_row_1_logo_small { display:none; } #head_row_1_logo_big { display:inline-block; } #head_row_1_tagline { display:inline-block; box-sizing:border-box; padding:0 4px; font-size:11pt; font-weight:bold; line-height:110%; white-space:nowrap; text-align:left; vertical-align:middle; } } .TAGLINE_WHITE {color:#b0b0b0;} .TAGLINE_GREY {color:#e0e0e0;} .TAGLINE_PURPLE {color:#e0e0e0;} .TAGLINE_BLUE {color:#bad2da;} .TAGLINE_YELLOW {color:#b3b0b3;} .TAGLINE_PINK {color:#e8e8e8;} .TAGLINE_DARK {color:#e0e0e0;} #head_row_1_search { display:inline-block; padding:0 10px; } @media only screen and (max-width: 1280px) { /* For mobile phones and tablets */ #head_search_text { display:none; } } @media only screen and (max-width: 480px) { /* For mobile phones */ .SEL_ROLE {width:55px;} .HEAD_USR { display:inline-block; box-sizing:border-box; max-width:200px; text-align:left; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } @media only screen and (min-width: 480px) { /* For mobile phones */ .SEL_ROLE {width:130px;} .HEAD_USR { display:inline-block; box-sizing:border-box; max-width:320px; text-align:left; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } .USR_WHITE {color:#b0b0b0; font-size:15pt; font-weight:bold; white-space:nowrap;} .USR_GREY {color:#e0e0e0; font-size:15pt; font-weight:bold; white-space:nowrap;} .USR_PURPLE {color:#e0e0e0; font-size:15pt; font-weight:bold; white-space:nowrap;} .USR_BLUE {color:white; font-size:15pt; font-weight:bold; white-space:nowrap;} .USR_YELLOW {color:#b3b0b3; font-size:15pt; font-weight:bold; white-space:nowrap;} .USR_PINK {color:white; font-size:15pt; font-weight:bold; white-space:nowrap;} .USR_DARK {color:#e0e0e0; font-size:15pt; font-weight:bold; white-space:nowrap;} #head_row_1_right { display:table-cell; text-align:right; vertical-align:middle; } #login_box { display:inline; padding:0 10px; } /************************ Layout (second heading row) ************************/ #head_row_2 { display:table; box-sizing:border-box; width:100%; vertical-align:top; } .HEAD_ROW_2_WHITE { background-image:-webkit-linear-gradient(#cfcfce 0,white 40px,white 100%); /* Safari */ background-image:linear-gradient(#cfcfce 0,white 40px,white 100%); } .HEAD_ROW_2_GREY { background-color:#404040; } .HEAD_ROW_2_PURPLE { background-image:-webkit-linear-gradient(#874c80 0,#a070a1 100%); /* Safari */ background-image:linear-gradient(#874c80 0,#a070a1 100%); background-repeat:no-repeat; } .HEAD_ROW_2_BLUE { background-image:-webkit-linear-gradient(#3781c1 0,#4f90c8 100%); /* Safari */ background-image:linear-gradient(#3781c1 0,#4f90c8 100%); background-repeat:no-repeat; } .HEAD_ROW_2_YELLOW { background-color:#302830; } .HEAD_ROW_2_PINK { background-image:-webkit-linear-gradient(#ab5c84 0,#c86b85 100%); /* Safari */ background-image:linear-gradient(#ab5c84 0,#c86b85 100%); background-repeat:no-repeat; } .HEAD_ROW_2_DARK { background-color:#383838; } /******************************* Current time ********************************/ #head_row_2_time { display:table-cell; box-sizing:border-box; width:160px; text-align:center; vertical-align:middle; } #current_date { box-sizing:border-box; background-color:rgba(255, 255, 255, 0.8); width:80px; margin-left:6px; border-radius:2px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 2px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12); } #current_month { border-radius:2px 2px 0 0; background-color:rgba(222, 33, 33, 0.8); color:white; font-size:10pt; font-weight:bold; white-space:nowrap; overflow:hidden; } .CURRENT_MONTH { color:white; } #current_day { color:#404040; margin:2px 0 -2px 0; font-size:20pt; font-weight:bold; line-height:100%; } .CURRENT_DAY { color:#404040; } #current_time { border-radius:0 0 2px 2px; color:#404040; font-size:12pt; font-weight:bold; } @media only screen and (max-width: 1024px) { /* For mobile phones */ #head_row_2_time { display:none; } } /****** Breadcrumb (platform/country/institution/center/degree/course) *******/ #head_row_2_hierarchy { display:table-cell; text-align:center; vertical-align:middle; } .TOP_LOGO /* Institution / Center / Degree logo in top title */ { height:40px; margin-right:10px; text-align:left; vertical-align:top !important; } @media only screen and (max-width: 480px) { /* For mobile-phones */ #breadcrumb { display:table; margin:0 auto; font-size:6pt; font-weight:bold; white-space:nowrap; } .BC { display:table-cell; max-width:28px; overflow:hidden; } } @media only screen and (min-width: 480px) and (max-width: 800px) { /* For mobile-phones */ #breadcrumb { display:table; margin:0 auto; font-size:8pt; font-weight:bold; white-space:nowrap; } .BC { display:table-cell; max-width:60px; overflow:hidden; } } @media only screen and (min-width: 800px) and (max-width: 1024px) { /* For tablets */ #breadcrumb { display:table; margin:0 auto; font-size:10pt; font-weight:bold; white-space:nowrap; } .BC { display:table-cell; max-width:100px; overflow:hidden; } } @media only screen and (min-width: 1024px) { /* For desktop */ #breadcrumb { display:table; margin:0 auto; font-size:12pt; font-weight:bold; white-space:nowrap; } .BC { display:table-cell; max-width:150px; overflow:hidden; } } .BC_SEMIOFF {opacity:0.7;} .BC_OFF {opacity:0.3;} .BC_WHITE {color:#707070;} .BC_GREY {color:#ffb42e;} .BC_PURPLE {color:#ffc040;} .BC_BLUE {color:#ffc040;} .BC_YELLOW {color:#ffb42e;} .BC_PINK {color:#ffc040;} .BC_DARK {color:#ffb42e;} .BC_ICON { display:inline-block; width:20px; height:20px; vertical-align:middle; margin:-1px 0 1px 0; } /******** Big name of country, institution, center, degree or course *********/ #main_title { margin:0; padding:0; font-size:24pt; font-weight:normal; line-height:100%; white-space:nowrap; } #big_name_container { display:inline-block; } @media only screen and (max-width: 1024px) { /* For mobile-phones */ #big_short_name { display:table-cell; max-width:560px; height:40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 auto; vertical-align:middle; } #big_full_name { display:none; } } @media only screen and (min-width: 1024px) { /* For tablets and desktop */ #big_short_name { display:none; } #big_full_name { display:table-cell; max-width:899px; height:40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 auto; vertical-align:middle; } } .MAIN_TITLE_WHITE {color:#4d88a1;} .MAIN_TITLE_GREY {color:#f7f6f5;} .MAIN_TITLE_PURPLE {color:white;} .MAIN_TITLE_BLUE {color:white;} .MAIN_TITLE_YELLOW {color:white;} .MAIN_TITLE_PINK {color:white;} .MAIN_TITLE_DARK {color:#f7f6f5;} #my_courses { width:130px; margin:1px; } /******************************** Search *************************************/ .WHAT_TO_SEARCH { width:186px; } /***************************** Notifications *********************************/ #msg /* Notifications, used for AJAX based refresh */ { display:table-cell; box-sizing:border-box; width:160px; text-align:center; vertical-align:top; padding-top:10px; } @media only screen and (max-width: 1024px) { /* For mobile phones */ #msg { display:none; } } @media only screen and (min-width: 1024px) and (max-width: 1280px) { /* For tablets */ #notif_all { display:none; } } .NOTIF_WHITE {color:#707070; font-size:12pt; white-space:nowrap;} .NOTIF_GREY {color:#e0e0e0; font-size:12pt; white-space:nowrap;} .NOTIF_PURPLE {color:#e0e0e0; font-size:12pt; white-space:nowrap;} .NOTIF_BLUE {color:white; font-size:12pt; white-space:nowrap;} .NOTIF_YELLOW {color:#b3b0b3; font-size:12pt; white-space:nowrap;} .NOTIF_PINK {color:white; font-size:12pt; white-space:nowrap;} .NOTIF_DARK {color:#e0e0e0; font-size:12pt; white-space:nowrap;} /******************* Layout (third heading row with tabs) ********************/ .HEAD_ROW_3_WHITE { background-color:white; } .HEAD_ROW_3_GREY { background-image:-webkit-linear-gradient(#404040 0,#404040 54px,white 54px,white 100%); /* Safari */ background-image:linear-gradient(#404040 0,#404040 54px,white 54px,white 100%); } .HEAD_ROW_3_PURPLE { background-image:-webkit-linear-gradient(#a070a1 0,#a070a1 54px,white 54px,white 100%); /* Safari */ background-image:linear-gradient(#a070a1 0,#a070a1 54px,white 54px,white 100%); } .HEAD_ROW_3_BLUE { background-image:-webkit-linear-gradient(#4f90c8 0,#4f90c8 54px,white 54px,white 100%); /* Safari */ background-image:linear-gradient(#4f90c8 0,#4f90c8 54px,white 54px,white 100%); } .HEAD_ROW_3_YELLOW { background-image:-webkit-linear-gradient(#302830 0,#302830 54px,white 54px,white 100%); /* Safari */ background-image:linear-gradient(#302830 0,#302830 54px,white 54px,white 100%); } .HEAD_ROW_3_PINK { background-image:-webkit-linear-gradient(#c86b85 0,#c86b85 54px,white 54px,white 100%); /* Safari */ background-image:linear-gradient(#c86b85 0,#c86b85 54px,white 54px,white 100%); } .HEAD_ROW_3_DARK { background-image:-webkit-linear-gradient(#383838 0,#383838 54px,#383838 54px,#383838 100%); /* Safari */ background-image:linear-gradient(#383838 0,#383838 54px,#383838 54px,#383838 100%); } .TAB_LIST { display:inline-block; list-style-type:none; padding:0; margin:0; text-align:left; vertical-align:middle; } @media only screen and (max-width: 480px) { /* For mobile-phones */ #tabs { display:table; box-sizing:border-box; margin:0 auto; border-spacing:1px 0; } .TAB_OFF { display:table-cell; box-sizing:border-box; width:38px; height:58px; margin:0; padding:0; border-radius:2px 2px 0 0; box-shadow:inset 0 -1px 1px 0 rgba(50,50,50,0.2); text-align:center; vertical-align:top; overflow:hidden; } .TAB_ON { display:table-cell; box-sizing:border-box; width:38px; height:58px; margin:0; padding:0; border-radius:2px 2px 0 0; box-shadow:inset 0 -1px 1px 0 rgba(50,50,50,0.2); text-align:center; vertical-align:top; overflow:hidden; } .TAB_TXT { font-size:9pt; font-weight:bold; max-width:30px; white-space:nowrap; overflow:hidden; padding-top:2px; text-transform:uppercase; } } @media only screen and (min-width: 480px) and (max-width: 800px) { /* For mobile-phones */ #tabs { display:table; box-sizing:border-box; margin:0 auto; border-spacing:1px 0; } .TAB_OFF { display:table-cell; box-sizing:border-box; width:58px; height:58px; margin:0; padding:0; border-radius:2px 2px 0 0; box-shadow:inset 0 -1px 1px 0 rgba(50,50,50,0.2); text-align:center; vertical-align:top; overflow:hidden; } .TAB_ON { display:table-cell; box-sizing:border-box; width:58px; height:58px; margin:0; padding:0; border-radius:2px 2px 0 0; box-shadow:inset 0 -1px 1px 0 rgba(50,50,50,0.2); text-align:center; vertical-align:top; overflow:hidden; } .TAB_TXT { font-size:9pt; font-weight:bold; max-width:50px; white-space:nowrap; overflow:hidden; padding-top:2px; text-transform:uppercase; } } @media only screen and (min-width: 800px) { /* For tablets and desktop */ #tabs { display:table; box-sizing:border-box; margin:0 auto; border-spacing:1px 0; } .TAB_OFF { display:table-cell; box-sizing:border-box; width:108px; height:58px; margin:0; padding:0; border-radius:2px 2px 0 0; box-shadow:inset 0 -1px 1px 0 rgba(50,50,50,0.2); text-align:center; vertical-align:top; overflow:hidden; } .TAB_ON { display:table-cell; box-sizing:border-box; width:108px; height:58px; margin:0; padding:0; border-radius:2px 2px 0 0; box-shadow:inset 0 -1px 1px 0 rgba(50,50,50,0.2); text-align:center; vertical-align:top; overflow:hidden; } .TAB_TXT { font-size:9pt; font-weight:bold; max-width:100px; white-space:nowrap; overflow:hidden; padding-top:2px; text-transform:uppercase; } } .TAB_ON_WHITE {background-color:#f7f6f5;} .TAB_ON_GREY {background-color:#f7f6f5;} .TAB_ON_PURPLE {background-color:#fdf3f3;} .TAB_ON_BLUE {background-color:#e8f3f6;} .TAB_ON_YELLOW {background-color:#faf0da;} .TAB_ON_PINK {background-color:#faf0e8;} .TAB_ON_DARK {background-color:#606060;} .TAB_OFF_WHITE {background-color:#d4d4d4;} .TAB_OFF_GREY {background-color:#aea79f;} .TAB_OFF_PURPLE {background-color:#f2dada;} .TAB_OFF_BLUE {background-color:#cae1e8;} .TAB_OFF_YELLOW {background-color:#f4dfb2;} .TAB_OFF_PINK {background-color:#f3dcca;} .TAB_OFF_DARK {background-color:#484848;} .TAB_OFF_TXT_WHITE {color:#707070;} .TAB_OFF_TXT_GREY {color:#505050;} .TAB_OFF_TXT_PURPLE {color:#505050;} .TAB_OFF_TXT_BLUE {color:#365e6e;} .TAB_OFF_TXT_YELLOW {color:#4a2e19;} .TAB_OFF_TXT_PINK {color:#505050;} .TAB_OFF_TXT_DARK {color:#d0d0d0;} .TAB_ON_TXT_WHITE {color:#4d88A1;} .TAB_ON_TXT_GREY {color:#606060;} .TAB_ON_TXT_PURPLE {color:#573c4d;} .TAB_ON_TXT_BLUE {color:#4d88A1;} .TAB_ON_TXT_YELLOW {color:#7c4d2a;} .TAB_ON_TXT_PINK {color:#63474e;} .TAB_ON_TXT_DARK {color:#e0e0e0;} .TAB_ICO { height:28px; vertical-align:middle; padding:4px 0; } /* Creating filter from RGB: https://codepen.io/sosuke/pen/Pjoqqp */ .TAB_ICO_WHITE {} /* #000000 */ .TAB_ICO_GREY {} /* #000000 */ .TAB_ICO_PURPLE {} /* #000000 */ .TAB_ICO_BLUE {} /* #000000 */ .TAB_ICO_YELLOW {} /* #000000 */ .TAB_ICO_PINK {} /* #000000 */ /* .TAB_ICO_DARK {filter: invert(100%) sepia(0%) saturate(7483%) hue-rotate(109deg) brightness(106%) contrast(106%);} */ /* #ffffff */ .TAB_ICO_DARK {filter:invert(1);} /*********************** Layout (fourth row, main zone) **********************/ #main_zone { display:table; box-sizing:border-box; width:100%; } .LEFT_RIGHT_CELL { padding:0 6px; text-align:center; vertical-align:top; } @media only screen and (max-width: 1280px) { /* For mobile phones and tablets */ #main_zone_central_none, #main_zone_central_left, #main_zone_central_right, #main_zone_central_both { display:table-cell; text-align:center; vertical-align:top; } #left_col { display:none; } #right_col { display:none; } } @media only screen and (min-width: 1280px) { /* For desktop */ #main_zone_central_none /* Hide left and right columns */ { display:table-cell; text-align:center; vertical-align:top; } #main_zone_central_left /* Show left column, hide right column */ { display:table-cell; text-align:center; vertical-align:top; } #main_zone_central_right /* Hide left column, show right column */ { display:table-cell; text-align:center; vertical-align:top; padding-right:160px; } #main_zone_central_both /* Show both columns */ { display:table-cell; text-align:center; vertical-align:top; padding-right:160px; } #left_col { display:table-cell; box-sizing:border-box; width:160px; text-align:center; vertical-align:top; } #right_col { display:table-cell; box-sizing:border-box; width:160px; text-align:center; vertical-align:top; position:absolute; right:0; } } @media only screen and (max-width: 800px) { /* For mobile-phones */ #main_zone_central_container { box-sizing:border-box; margin:-4px 0 0 0; padding:4px 0; border-radius:2px; box-shadow:inset 0 -1px 1px 0 rgba(50,50,50,0.2); text-align:center; position:relative; } } @media only screen and (min-width: 800px) { /* For tablets and desktop */ #main_zone_central_container { box-sizing:border-box; min-height:900px; margin:-4px 0 0 0; padding:4px 0; border-radius:2px; box-shadow:inset 0 -1px 1px 0 rgba(50,50,50,0.2); text-align:center; position:relative; } } /************* Main central zone with horizontal menu and canvas *************/ #main_horizontal { box-sizing:border-box; width:100%; } #main_horizontal .MENU_LIST_CONT { width:100%; } #main_horizontal .MENU_LIST { display:table; box-sizing:border-box; height:60px; margin:0 auto; padding:0 8px; list-style-type:none; } #main_horizontal .MENU_LIST_ITEM { display:table-cell; width:128px; height:60px; margin:0 auto; text-align:center; vertical-align:middle; } #main_horizontal .MENU_OPT_OFF { opacity:0.6; } #main_horizontal .MENU_OPT_OFF:hover, #main_horizontal .MENU_OPT_ON { opacity:1; transform:scale(1.286,1.286); } #main_horizontal .MENU_ICO_TXT { } #main_horizontal .MENU_ICO { box-sizing:border-box; padding:28px 0 0 0; background-size:auto 26px; background-repeat:no-repeat; background-position:center top; } #main_horizontal .MAIN_ZONE_CANVAS /* Where content for each action is written */ { box-sizing:border-box; width:100%; padding:4px 8px; margin:0 auto; text-align:left; vertical-align:top; } /************** Main central zone with vertical menu and canvas **************/ @media only screen and (max-width: 1024px) { /* For mobile phones */ /* Mobile phone will display menu always in horizontal so the CSS must draw menu really in horizontal */ #main_vertical { box-sizing:border-box; width:100%; } #main_vertical .MENU_LIST_CONT { width:100%; } #main_vertical .MENU_LIST { display:table; box-sizing:border-box; height:60px; margin:0 auto; padding:0 8px; list-style-type:none; } #main_vertical .MENU_LIST_ITEM { display:table-cell; width:128px; height:60px; margin:0 auto; text-align:center; vertical-align:middle; } #main_vertical .MENU_OPT_OFF { opacity:0.6; } #main_vertical .MENU_OPT_OFF:hover, #main_vertical .MENU_OPT_ON { opacity:1; transform:scale(1.286,1.286); } #main_vertical .MENU_ICO_TXT { } #main_vertical .MENU_ICO { box-sizing:border-box; padding:28px 0 0 0; background-size:auto 26px; background-repeat:no-repeat; background-position:center top; } #main_vertical .MAIN_ZONE_CANVAS /* Where content for each action is written */ { box-sizing:border-box; width:100%; padding:4px 8px; margin:0 auto; text-align:left; vertical-align:top; } #action_title /* Do not display action title */ { display:none; } } @media only screen and (min-width: 1024px) { /* For tablets and desktop */ #main_vertical { display:table; box-sizing:border-box; width:100%; } #main_vertical .MENU_LIST_CONT { display:table-cell; box-sizing:border-box; width:170px; } #main_vertical .MENU_LIST { display:table; margin:0; padding-left:8px; list-style-type:none; } #main_vertical .MENU_LIST_ITEM { text-align:left; } #main_vertical .MENU_OPT_OFF { opacity:0.6; } #main_vertical .MENU_OPT_OFF:hover, #main_vertical .MENU_OPT_ON { opacity:1; } #main_vertical .MENU_ICO_TXT { display:table-cell; vertical-align:middle; } #main_vertical .MENU_ICO { display:inline-block; box-sizing:border-box; height:40px; vertical-align:middle; padding:2px 2px 2px 42px; background-size:28px 28px; background-repeat:no-repeat; background-position:4px 6px; } #main_vertical .MAIN_ZONE_CANVAS /* Where content for each action is written */ { display:table-cell; box-sizing:border-box; padding:4px 8px; margin:0 auto; text-align:left; vertical-align:top; } #action_title { box-sizing:border-box; width:440px; min-height:64px; clear:both; margin:0 auto; text-align:left; background-size:60px 60px; background-position:0 0; background-repeat:no-repeat; padding:4px 0 8px 70px; overflow:hidden; } } /* Creating filter from RGB: https://codepen.io/sosuke/pen/Pjoqqp */ .MENU_ICO_WHITE {} /* #000000 */ .MENU_ICO_GREY {} /* #000000 */ .MENU_ICO_PURPLE {} /* #000000 */ .MENU_ICO_BLUE {} /* #000000 */ .MENU_ICO_YELLOW {} /* #000000 */ .MENU_ICO_PINK {} /* #000000 */ /* .MENU_ICO_DARK {filter: invert(100%) sepia(0%) saturate(7483%) hue-rotate(109deg) brightness(106%) contrast(106%);} */ /* #ffffff */ .MENU_ICO_DARK {filter:invert(1);} /********************************* Menu fonts ********************************/ @media only screen and (max-width: 800px) { /* For mobile-phones */ .MENU_TXT { display:inline; font-size:12pt; font-weight:bold; line-height:110%; white-space:nowrap; overflow:hidden; width:30px; margin:0 auto; padding:2px 0; } } @media only screen and (min-width: 800px) { /* For tablets and desktop */ .MENU_TXT { display:inline; font-size:12pt; font-weight:bold; line-height:110%; margin:0 auto; padding:2px 0; } } .MENU_TXT_WHITE {color:#4D88a1;} .MENU_TXT_GREY {color:#606060;} .MENU_TXT_PURPLE {color:#573c4d;} .MENU_TXT_BLUE {color:#4D88a1;} .MENU_TXT_YELLOW {color:#7c4d2a;} .MENU_TXT_PINK {color:#63474e;} .MENU_TXT_DARK {color:#d0d0d0;} /***************************** Users connected *******************************/ .CONNECTED { box-sizing:border-box; margin:0 auto; background:white; border-style:solid; border-width:1px; border-color:#80C040; margin:6px 0; padding:5px; border-radius:2px; font-size:12pt; color:#398000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .CONNECTED_LIST { box-sizing:border-box; width:100%; margin-top:2px; padding-top:2px; border-style:solid; border-width:1px 0 0 0; border-color:#BFDF9F; white-space:nowrap; overflow:hidden; } .CONNECTED_TXT { color:#398000; font-size:12pt; } .CON_USR_NARROW_TIT { max-width:136px; text-align:center; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Connected to the current course? */ .CON_NO_CRS {color:#B8D070; font-size:11pt; line-height:110%; white-space:nowrap;} .CON_CRS {color:#398000; font-size:11pt; line-height:110%; white-space:nowrap;} /* 1st. column */ .CON_PHOTO { width:22px; text-align:left; vertical-align:middle; } /* 2nd. column */ .CON_NAME_NARROW { width:66px; text-align:left; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .CON_NAME_FOLLOW { width:90px; text-align:left; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .CON_NAME_WIDE { width:360px; text-align:left; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 3rd. column */ .CON_SINCE { width:48px; text-align:right; vertical-align:middle; white-space:nowrap; overflow:hidden; } .CON_ICON_FOLLOW { width:24px; vertical-align:middle; } /*************************** Most frequent actions ***************************/ #MFU_actions { box-sizing:border-box; width:148px; background:white; border-style:solid; border-width:1px; border-color:#8CBCCE; padding:5px; border-radius:2px; font-size:11pt; color:#4D88A1; } #MFU_actions ul { display:inline-block; box-sizing:border-box; width:138px; margin:2px 0; padding:2px 0 0 0; border-style:solid; border-width:1px 0 0 0; border-color:#DDECF1; list-style-type:none; text-align:left; vertical-align:middle; } #MFU_actions li { width:138px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #MFU_actions img { width:20px; height:20px; margin:1px; vertical-align:middle; } #MFU_actions_big { padding:5px; } #MFU_actions_big img { width:40px; height:40px; margin:1px 4px 1px 0; vertical-align:middle; } /********************************* Hierarchy *********************************/ .HIE_SEL { width:175px; } .HIE_LOGO { text-align:left; vertical-align:middle; width:25px; } .HIE_SEL_NARROW { width:64px; } #chart_div { width:600px; margin:12px auto; } .HIE_CFG_LEFT, .HIE_CFG_RIGHT { display:inline-block; margin:0 6px; vertical-align:top; width:480px; } @media only screen and (max-width: 590px) { /* For mobile-phones (maximum width visible on Moto G4 vertical) */ .HIE_CFG_WIDTH {width:280px;} .COUNTRY_MAP_SHOW, .COUNTRY_MAP_PRINT { box-sizing:border-box; width:260px; height:260px; margin:10px; } .CENTER_PHOTO_WIDTH {width:260px;} #AttributionArea { box-sizing:border-box; width:260px; } } @media only screen and (min-width: 590px) { /* For tablets and desktop (maximum width visible on Moto G4 horizontal) */ .HIE_CFG_WIDTH {width:480px;} .COUNTRY_MAP_SHOW, .COUNTRY_MAP_PRINT { box-sizing:border-box; width:360px; height:360px; margin:10px; } .COUNTRY_MAP_WIDTH, .CENTER_PHOTO_WIDTH {width:460px;} #AttributionArea { box-sizing:border-box; width:460px; } } .HIE_CFG_LEFT, .HIE_CFG_RIGHT { display:inline-block; margin:0 6px; vertical-align:top; } #sys_mapid, #cty_mapid, #ins_mapid, #ctr_mapid { width:100%; height:460px; margin:9px auto; } .CENTER_PHOTO_SHOW { box-sizing:border-box; padding:2px; margin:9px auto; border:solid 1px #EEE; } a:hover img.CENTER_PHOTO_SHOW { border:solid 1px #CCC; box-shadow:1px 1px 6px #999; } .CENTER_PHOTO_PRINT { box-sizing:border-box; padding:2px; margin:9px auto; border:solid 1px #EEE; box-shadow:1px 1px 6px #999; } .ATTRIBUTION { box-sizing:border-box; margin-bottom:15px; color:#A0A0A0; font-size:8pt; text-align:center; } /*********************************** Places **********************************/ .PLC_SEL { width:60px; } /***************************** Buildings and rooms ***************************/ .BLD_SEL, .ROOM_TYPE_SEL { width:80px; } /*********************************** Month ***********************************/ .CALENDAR { margin:0 auto; border-spacing:12px 0; } .MONTH_CONT { box-sizing:border-box; width:148px; margin:6px 0; padding:5px; background:white; border-style:solid; border-width:1px; border-color:#8CBCCE; border-radius:2px; text-align:center; overflow:hidden; } .MONTH_TABLE_DAYS { box-sizing:border-box; width:138px; margin-top:2px; padding-top:2px; border-style:solid; border-width:1px 0 0 0; border-color:#DDECF1; } .MONTH { color:#4D88A1; font-size:9pt; white-space:nowrap; text-transform:uppercase; } .DAY_WRK_HEAD { color:#4D88A1; font-size:9pt; text-align:center; } .DAY_NO_WRK_HEAD { color:red; font-size:9pt; text-align:center; } .DAY_WRK { color:#202020; font-size:9pt; text-align:center; } .DAY_NO_WORK { color:#C04080; font-size:9pt; text-align:center; } .DAY_HLD { color:red; font-size:9pt; text-align:center; } .DAY_WRK_LIGHT { color:#E0E0E0; font-size:9pt; text-align:center; } .DAY_NO_WORK_LIGHT { color:#FFE0FF; font-size:9pt; text-align:center; } .DAY_HLD_LIGHT { color:#FFE0E0; font-size:9pt; text-align:center; } .DAY { border:solid 1px; border-color:white; text-align:center; } .TODAY { border:solid 1px; border-color:#50B800; text-align:center; } .DAY_EVENT { border:solid 1px; border-color:white; background-color:#FFF080; text-align:center; } .TODAY_EVENT { border:solid 1px; border-color:#50B800; background-color:#FFF080; text-align:center; } /********************************* Buttons ***********************************/ .BT_CREATE { background-color:#5BC33B; border-color:#518741; } .BT_CONFIRM { background-color:#55ACEE; border-color:#3B88C3; } .BT_REMOVE { background-color:#EF5555; border-color:#C33B3B; } .BT_SUBMIT { margin:8px auto; padding:10px 20px; border-radius:2px; border-width:1px; border-style:solid; box-shadow:0 1px 0 rgba(255,255,255,0.15) inset; color:white; font-size:20px; font-weight:bold; line-height:normal; white-space:nowrap; } .BT_SUBMIT_INLINE { box-sizing:border-box; min-width:170px; margin:0 10px; padding:2px 4px; border-radius:2px; border-width:1px; border-style:solid; box-shadow:0 1px 0 rgba(255,255,255,0.15) inset; color:white; font-size:15px; font-weight:bold; line-height:normal; white-space:nowrap; vertical-align:middle; } .BT_SUBMIT:hover { background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2)); /* Safari */ background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2)); } .BT_SUBMIT_INLINE:hover { background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2)); /* Safari */ background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2)); } .BT_LINK, .BT_LINK_OFF { background:none; border:none; padding:0; font:inherit; } .BT_LINK:hover { cursor:pointer; } /****************************** Course program *******************************/ .PRG_COL1 { box-sizing:border-box; width:86px; } .PRG_TITLE_DESCRIPTION_WIDTH { box-sizing:border-box; width:100%; } .PRG_NUM { width:30px; text-align:left; vertical-align:top; } .PRG_MAIN { text-align:left; vertical-align:top; } .PRG_TIT_1 {color:#24292e; font-size:24pt; font-weight:bold;} .PRG_TIT_2 {color:#24292e; font-size:20pt; font-weight:bold;} .PRG_TIT_3 {color:#24292e; font-size:18pt; font-weight:bold;} .PRG_TIT_4 {color:#24292e; font-size:16pt; font-weight:bold;} .PRG_TIT_5 {color:#24292e; font-size:14pt; font-weight:bold;} .PRG_TXT {color:#24292e; font-size:12pt; line-height:1.5;} .PRG_DATE { box-sizing:border-box; width:70px; } .PRG_HIDDEN { opacity:0.33; } #prg_highlighted { animation:itemfadein 1s ease forwards; } @keyframes itemfadein { /* from {outline:thick solid #4d88a1;} to {outline:thick solid transparent;} */ from {opacity:0;} to {opacity:1;} } /********************************** Notice ***********************************/ .NOTICE_HIGHLIGHT { padding:10px 0; background-color:#ddecf1; animation:fadein 2s linear forwards; } @keyframes fadein { to {background-color:white;} } .NOTICE_CONT_ACTIVE { box-sizing:border-box; margin:0 auto 10px auto; padding:10px; background-image:-webkit-linear-gradient(rgba(238,216,108,0.6) 0%,rgba(248,237,149,0.6) 15%,rgba(250,240,152,0.6) 100%); /* Safari */ background-image:linear-gradient(rgba(238,216,108,0.6) 0%,rgba(248,237,149,0.6) 15%,rgba(250,240,152,0.6) 100%); box-shadow:0 8px 10px -5px rgba(125,113,0,0.6); text-align:left; overflow:hidden; } .NOTICE_CONT_OBSOLETE { box-sizing:border-box; margin:0 auto 10px auto; padding:10px; background-image:-webkit-linear-gradient(rgba(238,216,108,0.3) 0%,rgba(248,237,149,0.3) 15%,rgba(250,240,152,0.3) 100%); /* Safari */ background-image:linear-gradient(rgba(238,216,108,0.3) 0%,rgba(248,237,149,0.3) 15%,rgba(250,240,152,0.3) 100%); box-shadow:0 8px 10px -5px rgba(125,113,0,0.3); text-align:left; overflow:hidden; } .NOTICE_CONT_NARROW {width:148px;} .NOTICE_CONT_WIDE {width:500px;} .NOTICE_DATE_ACTIVE { float:right; font-size:12pt; color:#202020; text-align:right; overflow:hidden; } .NOTICE_DATE_OBSOLETE { float:right; font-size:12pt; color:#808080; text-align:right; overflow:hidden; } .NOTICE_SUBJECT_ACTIVE { margin:12px auto; font-size:15pt; font-weight:bold; color:#202020; text-align:center; overflow:hidden; } .NOTICE_SUBJECT_OBSOLETE { margin:12px auto; font-size:15pt; font-weight:bold; color:#808080; text-align:center; overflow:hidden; } .NOTICE_TEXT_BRIEF { clear:both; font-size:12pt; color:#204080; overflow:hidden; } .NOTICE_TEXT_ACTIVE { padding:10px 20px; clear:both; font-size:12pt; color:#204080; overflow:hidden; } .NOTICE_TEXT_OBSOLETE { padding:10px 20px; clear:both; font-size:12pt; color:#4070A0; overflow:hidden; } .NOTICE_AUTHOR { box-sizing:border-box; float:right; max-width:120px; text-align:right; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12pt; } .NOTICE_AUTHOR_ACTIVE { color:#202020; } .NOTICE_AUTHOR_OBSOLETE { color:#808080; } .NOTICE_USERS { box-sizing:border-box; text-align:center; vertical-align:middle; margin:12px; } .NOTICE_USERS_ACTIVE { color:#202020; } .NOTICE_USERS_OBSOLETE { color:#808080; } /**************************** Institutional links ****************************/ #institutional_links { box-sizing:border-box; width:148px; margin:0; background:white; border-style:solid; border-width:1px; border-color:#8CBCCE; padding:5px; border-radius:2px; font-size:11pt; color:#4D88A1; } #institutional_links ul { box-sizing:border-box; width:138px; margin-top:2px; padding-top:2px; border-style:solid; border-width:1px 0 0 0; border-color:#DDECF1; } #institutional_links li { width:138px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .INS_LNK { padding:1px; font-size:11pt; color:#4D88A1; } /*********************************** Alerts **********************************/ .ALERT { display:inline-block; box-sizing:border-box; margin:8px auto; padding:12px; border-radius:2px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 2px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12); } .ALERT_BG_WHITE {background-color:#fff8e5;} .ALERT_BG_GREY {background-color:#fff8e5;} .ALERT_BG_PURPLE {background-color:#fff8e5;} .ALERT_BG_BLUE {background-color:#fff8e5;} .ALERT_BG_YELLOW {background-color:#fff8e5;} .ALERT_BG_PINK {background-color:#fff8e5;} .ALERT_BG_DARK {background-color:#808080;} .ALERT_CLOSE { float:right; margin:-8px -8px 8px 8px; opacity:0.3; } .ALERT_CLOSE:hover { opacity:1; } .ALERT_TXT { box-sizing:border-box; padding:8px 0 8px 40px; background-position:8px 8px; background-size:20px 20px; background-repeat:no-repeat; font-size:12pt; text-align:left; overflow:hidden; } .ALERT_TXT_WHITE {color:#632921;} .ALERT_TXT_GREY {color:#632921;} .ALERT_TXT_PURPLE {color:#632921;} .ALERT_TXT_BLUE {color:#632921;} .ALERT_TXT_YELLOW {color:#632921;} .ALERT_TXT_PINK {color:#632921;} .ALERT_TXT_DARK {color:white;} /*********************************** Icons ***********************************/ .ICOx16 { height:16px; vertical-align:middle;} .ICO16x16 {width:16px; height:16px; vertical-align:middle;} .ICO20x20 {width:20px; height:20px; vertical-align:middle;} .ICOx20 { height:20px; vertical-align:middle; margin:0 auto;} .ICO25x25 {width:25px; height:25px; vertical-align:middle;} .ICO40x40 {width:40px; height:40px; vertical-align:middle;} .ICO64x64 {width:64px; height:64px; vertical-align:middle;} .ICO80x40 {width:80px; height:40px; vertical-align:middle;} .ICO140x40 {width:140px; height:40px; vertical-align:middle;} .ICO212x40 {width:212px; height:40px; vertical-align:middle;} .ICO220x40 {width:220px; height:40px; vertical-align:middle;} .ICO265x40 {width:265px; height:40px; vertical-align:middle;} .ICO160x160 {width:160px; height:160px; vertical-align:middle;} .BANNER {width:150px; height:50px;} .BANNER_SMALL {width:75px; height:25px;} .ICO_BLACK {color:#404040;} .ICO_DARKRED {color:#660000;} /****** Contextual links with small icons and text to go to some action ******/ .CONTEXT_MENU { margin:4px auto 6px auto; text-align:center; } .CONTEXT_OPT { display:inline-block; margin-left:2px; margin-right:2px; white-space:nowrap; } .CONTEXT_COL { width:32px; text-align:center; vertical-align:top; } .CONTEXT_ICO_16x16 { width:16px; height:16px; margin-top:-2px; vertical-align:middle; } .CONTEXT_ICO_x16 { height:16px; margin-top:-2px; vertical-align:middle; } /* Creating filter from RGB: https://codepen.io/sosuke/pen/Pjoqqp */ .BLACK_ICO_WHITE {filter: invert(26%) sepia(0%) saturate(1%) hue-rotate(288deg) brightness(97%) contrast(102%);} /* #404040 */ .BLACK_ICO_GREY {filter: invert(26%) sepia(0%) saturate(1%) hue-rotate(288deg) brightness(97%) contrast(102%);} /* #404040 */ .BLACK_ICO_PURPLE {filter: invert(26%) sepia(0%) saturate(1%) hue-rotate(288deg) brightness(97%) contrast(102%);} /* #404040 */ .BLACK_ICO_BLUE {filter: invert(26%) sepia(0%) saturate(1%) hue-rotate(288deg) brightness(97%) contrast(102%);} /* #404040 */ .BLACK_ICO_YELLOW {filter: invert(26%) sepia(0%) saturate(1%) hue-rotate(288deg) brightness(97%) contrast(102%);} /* #404040 */ .BLACK_ICO_PINK {filter: invert(26%) sepia(0%) saturate(1%) hue-rotate(288deg) brightness(97%) contrast(102%);} /* #404040 */ .BLACK_ICO_DARK {filter: invert(92%) sepia(44%) saturate(2%) hue-rotate(176deg) brightness(110%) contrast(88%);} /* #f0f0f0 */ .GREEN_ICO_WHITE {filter: invert(31%) sepia(16%) saturate(3727%) hue-rotate(60deg) brightness(94%) contrast(104%);} /* #246600 */ .GREEN_ICO_GREY {filter: invert(31%) sepia(16%) saturate(3727%) hue-rotate(60deg) brightness(94%) contrast(104%);} /* #246600 */ .GREEN_ICO_PURPLE {filter: invert(31%) sepia(16%) saturate(3727%) hue-rotate(60deg) brightness(94%) contrast(104%);} /* #246600 */ .GREEN_ICO_BLUE {filter: invert(31%) sepia(16%) saturate(3727%) hue-rotate(60deg) brightness(94%) contrast(104%);} /* #246600 */ .GREEN_ICO_YELLOW {filter: invert(31%) sepia(16%) saturate(3727%) hue-rotate(60deg) brightness(94%) contrast(104%);} /* #246600 */ .GREEN_ICO_PINK {filter: invert(31%) sepia(16%) saturate(3727%) hue-rotate(60deg) brightness(94%) contrast(104%);} /* #246600 */ .GREEN_ICO_DARK {filter: invert(31%) sepia(16%) saturate(3727%) hue-rotate(60deg) brightness(94%) contrast(104%);} /* #246600 */ .RED_ICO_WHITE {filter: invert(8%) sepia(61%) saturate(5373%) hue-rotate(0deg) brightness(92%) contrast(114%);} /* #660000 */ .RED_ICO_GREY {filter: invert(8%) sepia(61%) saturate(5373%) hue-rotate(0deg) brightness(92%) contrast(114%);} /* #660000 */ .RED_ICO_PURPLE {filter: invert(8%) sepia(61%) saturate(5373%) hue-rotate(0deg) brightness(92%) contrast(114%);} /* #660000 */ .RED_ICO_BLUE {filter: invert(8%) sepia(61%) saturate(5373%) hue-rotate(0deg) brightness(92%) contrast(114%);} /* #660000 */ .RED_ICO_YELLOW {filter: invert(8%) sepia(61%) saturate(5373%) hue-rotate(0deg) brightness(92%) contrast(114%);} /* #660000 */ .RED_ICO_PINK {filter: invert(8%) sepia(61%) saturate(5373%) hue-rotate(0deg) brightness(92%) contrast(114%);} /* #660000 */ .RED_ICO_DARK {filter: invert(8%) sepia(61%) saturate(5373%) hue-rotate(0deg) brightness(92%) contrast(114%);} /* #660000 */ .WHITE_ICO_WHITE {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(194deg) brightness(106%) contrast(105%);} /* #ffffff */ .WHITE_ICO_GREY {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(194deg) brightness(106%) contrast(105%);} /* #ffffff */ .WHITE_ICO_PURPLE {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(194deg) brightness(106%) contrast(105%);} /* #ffffff */ .WHITE_ICO_BLUE {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(194deg) brightness(106%) contrast(105%);} /* #ffffff */ .WHITE_ICO_YELLOW {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(194deg) brightness(106%) contrast(105%);} /* #ffffff */ .WHITE_ICO_PINK {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(194deg) brightness(106%) contrast(105%);} /* #ffffff */ .WHITE_ICO_DARK {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(194deg) brightness(106%) contrast(105%);} /* #ffffff */ /********************************** Frame ************************************/ .FRAME_INLINE { display:inline-block; margin:0 8px; vertical-align:top; } .FRAME_CONT { box-sizing:border-box; width:100%; text-align:center; vertical-align:middle; } .FRAME { display:inline-block; box-sizing:border-box; margin:5px 0; padding:8px 12px 12px 12px; border-radius:2px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 2px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12); text-align:center; overflow:hidden; } .FRAME_WHITE {background-color:white;} .FRAME_GREY {background-color:white;} .FRAME_PURPLE {background-color:white;} .FRAME_BLUE {background-color:white;} .FRAME_YELLOW {background-color:white;} .FRAME_PINK {background-color:white;} .FRAME_DARK {background-color:#484848;} .FRAME_SHADOW { display:inline-block; box-sizing:border-box; margin:5px 0; padding:8px 12px 20px 12px; border-width:1px; border-style:solid; border-color:#C0C0C0; border-radius:2px; box-shadow:2px 5px 15px #888; text-align:center; overflow:hidden; background-color:#ddecf1; animation:fadein 2s linear forwards; } @keyframes fadein { to {background-color:white;} } .FRAME_ICO { box-sizing:border-box; height:20px; text-align:left; } .FRAME_ICO_LEFT { display:inline-block; } .FRAME_ICO_RIGHT { float:right; } .FRAME_TBL_WIDE { box-sizing:border-box; width:100%; } .FRAME_TBL_WIDE_MARGIN { box-sizing:border-box; width:100%; margin-bottom:10px; } .FRAME_TBL_CENTER { margin:0 auto; } .FRAME_TBL_CENTER_MARGIN { margin:0 auto; margin-bottom:10px; } .FRAME_TITLE { display:table; box-sizing:border-box; width:100%; margin:0 auto; padding:0 12px 12px 12px; } .FRAME_TITLE_BIG { font-size:22pt; } .FRAME_TITLE_SMALL { font-size:18pt; } .FRAME_TITLE_WHITE {color:#404040;} .FRAME_TITLE_GREY {color:#404040;} .FRAME_TITLE_PURPLE {color:#404040;} .FRAME_TITLE_BLUE {color:#404040;} .FRAME_TITLE_YELLOW {color:#404040;} .FRAME_TITLE_PINK {color:#404040;} .FRAME_TITLE_DARK {color:#d0d0d0;} /* Apply only to the first level of th and td */ table.CELLS_PAD_1 > tbody > tr > th {padding: 1px;} table.CELLS_PAD_1 > tbody > tr > td {padding: 1px;} table.CELLS_PAD_2 > tbody > tr > th {padding: 2px;} table.CELLS_PAD_2 > tbody > tr > td {padding: 2px;} table.CELLS_PAD_5 > tbody > tr > th {padding: 5px;} table.CELLS_PAD_5 > tbody > tr > td {padding: 5px;} table.CELLS_PAD_10 > tbody > tr > th {padding:10px;} table.CELLS_PAD_10 > tbody > tr > td {padding:10px;} /******************** Selector below the title of a frame ********************/ .SEL_BELOW_TITLE { text-align:center; vertical-align:middle; margin-bottom:8px; } .SEL_BELOW_TITLE ul { display:inline-block; list-style-type:none; padding:0; margin:0; text-align:left; vertical-align:middle; } .SEL_BELOW_TITLE li { display:inline; text-align:left; vertical-align:middle; } .SEL_BELOW_TITLE label { color:#202020; font-size:13pt; } /*********************************** Title ***********************************/ .TIT { margin:13px auto 0 auto; font-size:13pt; font-weight:bold; color:#94745C; text-align:center; } /********** Title of country, institution, center, degree, course ************/ .TITLE_LOCATION { color:#808080; font-size:20pt; font-weight:bold; } /************************** Map and name of country **************************/ .COUNTRY_SMALL { display:inline-block; box-sizing:border-box; max-width:300px; text-align:left; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .COUNTRY_TINY { display:inline-block; box-sizing:border-box; max-width:120px; text-align:left; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .COUNTRY_MAP_TITLE { box-sizing:border-box; width:40px; height:40px; margin-right:10px; vertical-align:top; } .COUNTRY_MAP_SMALL { box-sizing:border-box; width:64px; height:64px; vertical-align:middle; } .COUNTRY_MAP_TINY { box-sizing:border-box; width:20px; height:20px; vertical-align:middle; } /******************* Web of institution, center, degree **********************/ .EXTERNAL_WWW_SHORT { box-sizing:border-box; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .EXTERNAL_WWW_LONG { box-sizing:border-box; max-width:250px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /******************************* User's photo ********************************/ .PHOTOC12x16 {width: 12px; height: 16px; clip-path: circle(40% at center); vertical-align:middle; margin-top:-2px;} .PHOTOC15x20 {width: 15px; height: 20px; clip-path: circle(40% at center); vertical-align:middle;} .PHOTOC15x20B {width: 15px; height: 20px; clip-path: circle(40% at center); vertical-align:middle; display:block; margin:0 auto;} .PHOTOC18x24 {width: 18px; height: 24px; clip-path: circle(40% at center); vertical-align:middle;} .PHOTOC21x28 {width: 21px; height: 28px; clip-path: circle(40% at center); vertical-align:middle;} .PHOTOC30x40 {width: 30px; height: 40px; clip-path: circle(40% at center); vertical-align:middle;} .PHOTOC45x60 {width: 45px; height: 60px; clip-path: circle(40% at center); vertical-align:middle;} .PHOTOC60x80 {width: 60px; height: 80px; clip-path: circle(40% at center); vertical-align:middle;} .PHOTOC186x248 {width:186px; height:248px; clip-path: circle(40% at center); margin-top:-24px;} .PHOTOE12x16 {width: 12px; height: 16px; clip-path: ellipse(50% 50% at center); vertical-align:middle; margin-top:-2px;} .PHOTOE15x20 {width: 15px; height: 20px; clip-path: ellipse(50% 50% at center); vertical-align:middle;} .PHOTOE15x20B {width: 15px; height: 20px; clip-path: ellipse(50% 50% at center); vertical-align:middle; display:block; margin:0 auto;} .PHOTOE18x24 {width: 18px; height: 24px; clip-path: ellipse(50% 50% at center); vertical-align:middle;} .PHOTOE21x28 {width: 21px; height: 28px; clip-path: ellipse(50% 50% at center); vertical-align:middle;} .PHOTOE30x40 {width: 30px; height: 40px; clip-path: ellipse(50% 50% at center); vertical-align:middle;} .PHOTOE45x60 {width: 45px; height: 60px; clip-path: ellipse(50% 50% at center); vertical-align:middle;} .PHOTOE60x80 {width: 60px; height: 80px; clip-path: ellipse(50% 50% at center); vertical-align:middle;} .PHOTOE186x248 {width:186px; height:248px; clip-path: ellipse(50% 50% at center);} .PHOTOO12x16 {width: 12px; height: 16px; border-radius: 6px; vertical-align:middle; margin-top:-2px;} .PHOTOO15x20 {width: 15px; height: 20px; border-radius: 8px; vertical-align:middle;} .PHOTOO15x20B {width: 15px; height: 20px; border-radius: 8px; vertical-align:middle; display:block; margin:0 auto;} .PHOTOO18x24 {width: 18px; height: 24px; border-radius: 9px; vertical-align:middle;} .PHOTOO21x28 {width: 21px; height: 28px; border-radius:11px; vertical-align:middle;} .PHOTOO30x40 {width: 30px; height: 40px; border-radius:15px; vertical-align:middle;} .PHOTOO45x60 {width: 45px; height: 60px; border-radius:23px; vertical-align:middle;} .PHOTOO60x80 {width: 60px; height: 80px; border-radius:30px; vertical-align:middle;} .PHOTOO186x248 {width:186px; height:248px; border-radius:92px;} .PHOTOR12x16 {width: 12px; height: 16px; border-radius:1px; vertical-align:middle; margin-top:-2px;} .PHOTOR15x20 {width: 15px; height: 20px; border-radius:1px; vertical-align:middle;} .PHOTOR15x20B {width: 15px; height: 20px; border-radius:1px; vertical-align:middle; display:block; margin:0 auto;} .PHOTOR18x24 {width: 18px; height: 24px; border-radius:2px; vertical-align:middle;} .PHOTOR21x28 {width: 21px; height: 28px; border-radius:2px; vertical-align:middle;} .PHOTOR30x40 {width: 30px; height: 40px; border-radius:2px; vertical-align:middle;} .PHOTOR45x60 {width: 45px; height: 60px; border-radius:3px; vertical-align:middle;} .PHOTOR60x80 {width: 60px; height: 80px; border-radius:3px; vertical-align:middle;} .PHOTOR186x248 {width:186px; height:248px; border-radius:4px;} .IMG_USR { box-sizing:border-box; width:186px; height:248px; border-radius:4px; } .ZOOM { box-sizing:border-box; position:absolute; z-index:1000; left:-300px; top:-400px; padding:6px; background-color:rgba(255,255,255,0.95); border-width:1px; border-style:solid; border-color:#C0C0C0; border-radius:4px; box-shadow:2px 5px 15px #888; } .ZOOM_TXT_LINE { box-sizing:border-box; display:block; width:186px; margin:0 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ZOOM_DEG { display:inline-block; margin:0 auto; padding:0 0 0 20px; background-size:16px 16px; background-repeat:no-repeat; background-position:left center; } .NO_BR {white-space:nowrap;} /********************************* Messages **********************************/ .MSG_RECIPIENTS, .MSG_SUBJECT, .MSG_CONTENT { box-sizing:border-box; width:640px; } .BG_MSG_BLUE { background-image:-webkit-linear-gradient(#eaf3f6 0,#eaf3f6 80%,white 100%); /* Safari */ background-image:linear-gradient(#eaf3f6 0,#eaf3f6 80%,white 100%); background-repeat:no-repeat; } .BG_MSG_GREEN { background-image:-webkit-linear-gradient(#f5ffd7 0,#f5ffd7 80%,white 100%); /* Safari */ background-image:linear-gradient(#f5ffd7 0,#f5ffd7 80%,white 100%); background-repeat:no-repeat; } /************************** Listing of users *********************************/ .USR_LIST_NUM {color:#A0A0A0; font-size:15pt; font-weight:bold;} .USR_LIST_NUM_N {color:#202020; font-size:15pt; font-weight:bold;} /*****************************************************************************/ .TITLE_WHITE {color:#505050; font-size:18pt;} .TITLE_GREY {color:#505050; font-size:18pt;} .TITLE_PURPLE {color:#573c4d; font-size:18pt;} .TITLE_BLUE {color:#4D88A1; font-size:18pt;} .TITLE_YELLOW {color:#7c4d2a; font-size:18pt;} .TITLE_PINK {color:#63474e; font-size:18pt;} .TITLE_DARK {color:#505050; font-size:18pt;} /*********************** Icon and checkbox highlighting **********************/ .ICO_HIDDEN { opacity:0.33; } .ICO_HIGHLIGHT, .CHECKBOX_UNCHECKED { opacity:0.67; } .ICO_HIGHLIGHT:hover, .CHECKBOX_UNCHECKED:hover, .CHECKBOX_CHECKED { opacity:1; } .HLP_HIGHLIGHT { opacity:0.33; } .HLP_HIGHLIGHT:hover { opacity:1; } /********************************* Form fonts ********************************/ /* Inside white box */ .FORM_IN_WHITE {color:#4d88a1; font-size:13pt;} .FORM_IN_GREY {color:#4d88a1; font-size:13pt;} .FORM_IN_PURPLE {color:#4d88a1; font-size:13pt;} .FORM_IN_BLUE {color:#4d88a1; font-size:13pt;} .FORM_IN_YELLOW {color:#7c4d2a; font-size:13pt;} .FORM_IN_PINK {color:#4d88a1; font-size:13pt;} .FORM_IN_DARK {color:#c0e0ff; font-size:13pt;} /* Outside white box */ .FORM_OUT_WHITE {color:#4d88a1; font-size:13pt;} .FORM_OUT_GREY {color:#4d88a1; font-size:13pt;} .FORM_OUT_PURPLE {color:#573c4d; font-size:13pt;} .FORM_OUT_BLUE {color:#4d88a1; font-size:13pt;} .FORM_OUT_YELLOW {color:#7c4d2a; font-size:13pt;} .FORM_OUT_PINK {color:#63474e; font-size:13pt;} .FORM_OUT_DARK {color:#c0e0ff; font-size:13pt;} /****************************** Placing of objects ***************************/ .LT {text-align:left; vertical-align:top; } /* Left Top */ .LM {text-align:left; vertical-align:middle;} /* Left Middle */ .LB {text-align:left; vertical-align:bottom;} /* Left Bottom */ .CT {text-align:center; vertical-align:top; } /* Center Top */ .CM {text-align:center; vertical-align:middle;} /* Center Middle */ .CB {text-align:center; vertical-align:bottom;} /* Center Bottom */ .RT {text-align:right; vertical-align:top; } /* Right Top */ .RM {text-align:right; vertical-align:middle;} /* Right Middle */ .RB {text-align:right; vertical-align:bottom;} /* Right Bottom */ /***************** Colors used in headers, backgrounds, etc. *****************/ .COLOR0_WHITE {background-color:#f4f2ea;} .COLOR0_GREY {background-color:#f4f2ea;} .COLOR0_PURPLE {background-color:#f4f2ea;} .COLOR0_BLUE {background-color:#f4f2ea;} .COLOR0_YELLOW {background-color:#f4f2ea;} .COLOR0_PINK {background-color:#f4f2ea;} .COLOR0_DARK {background-color:#444444;} .COLOR1_WHITE {background-color:#fbfaf7;} .COLOR1_GREY {background-color:#fbfaf7;} .COLOR1_PURPLE {background-color:#fbfaf7;} .COLOR1_BLUE {background-color:#fbfaf7;} .COLOR1_YELLOW {background-color:#fbfaf7;} .COLOR1_PINK {background-color:#fbfaf7;} .COLOR1_DARK {background-color:#4c4c4c;} .LIGHT_GREEN {background-color:#C0FF40;} .VERY_LIGHT_BLUE {background-color:#EAF3F6;} .BG_HIGHLIGHT_WHITE {background-color:#ddecf1;} .BG_HIGHLIGHT_GREY {background-color:#ddecf1;} .BG_HIGHLIGHT_PURPLE {background-color:#ddecf1;} .BG_HIGHLIGHT_BLUE {background-color:#ddecf1;} .BG_HIGHLIGHT_YELLOW {background-color:#ddecf1;} .BG_HIGHLIGHT_PINK {background-color:#ddecf1;} .BG_HIGHLIGHT_DARK {background-color:#707070;} /********************************* Course info *******************************/ #crs_info { margin:0; padding:0 12px; color:inherit; } #crs_info table { border:1px solid grey; } #crs_info th { border:1px solid grey; background-color:#F0F0F0; padding:6px; } #crs_info td { border:1px solid grey; padding:6px; } /************************ Help for the text editor ***************************/ .HELP_EDIT { margin:10px; text-align:center; color:#808080; font-size:8pt; } /****************************** Date range form ******************************/ .DATE_RANGE { float:left; /* To display something after the table in the same line */ } /*********************************** Lists ***********************************/ .LIST_LEFT, .LIST_TREE { display:inline-block; list-style-type:none; padding:0; margin:12px 0; text-align:left; vertical-align:middle; } .LIST_TREE li { box-sizing:border-box; max-width:500px; height:25px; text-align:left; vertical-align:middle; white-space:nowrap; overflow:hidden; } .LIST_I_MUST_READ { display:inline-block; padding:0; margin:12px 0; text-align:left; vertical-align:middle; } /******************************* File browsers *******************************/ .FILENAME { display:inline-block; box-sizing:border-box; width:260px; /* width of LST_EDIT + 10 */ text-align:left; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .FILENAME_TXT { color:#202020; font-size:18pt; font-weight:bold; } .BROWSER_TITLE {color:#94745C; font-size:13pt; font-weight:bold;} .BROWSER_TITLE_LIGHT {color:#D5C6BB; font-size:13pt; font-weight:bold;} .BROWSER_SUBTITLE {color:#94745C; font-size:12pt;} .BROWSER_TABLE { box-sizing:border-box; width:100%; } .LST {color:#202020; font-size:11pt; white-space:nowrap;} .LST_HID {color:#A0A0A0; font-size:11pt; white-space:nowrap;} .LST_REC {color:#008000; font-size:11pt; white-space:nowrap;} .LST_REC_HID {color:#89BE87; font-size:11pt; white-space:nowrap;} .LST_EDIT {width:250px; color:#202020; font-weight:bold; font-size:11pt; height:20px; padding:0; margin:-1px; border-width:1px; border-style:solid; border-color:#ECE9D8;} .LST_EDIT_HID {width:250px; color:#A0A0A0; font-weight:bold; font-size:11pt; height:20px; padding:0; margin:-1px; border-width:1px; border-style:solid; border-color:#ECE9D8;} .LST_EDIT_REC {width:250px; color:#008000; font-weight:bold; font-size:11pt; height:20px; padding:0; margin:-1px; border-width:1px; border-style:solid; border-color:#ECE9D8;} .LST_EDIT_REC_HID {width:250px; color:#89BE87; font-weight:bold; font-size:11pt; height:20px; padding:0; margin:-1px; border-width:1px; border-style:solid; border-color:#ECE9D8;} .LST_EDIT_ROWS {width:30px; color:#202020; font-weight:bold; font-size:11pt; height:20px; padding:0; margin:-1px; border-width:1px; border-style:solid; border-color:#ECE9D8;} .PUBLIC_FILE {max-width:400px;} .LICENSE {max-width:400px;} /************** Paragraph (margin on top and bottom of a div) ****************/ .PAR { margin-top:1em; margin-bottom:1em; } /*****************************************************************************/ .T1 {color:#202020; font-size:15pt;} .T2 {color:#202020; font-size:13pt;} .T3 {color:#202020; font-size:12pt;} .DAT_WHITE {color:#404040; font-size:13pt;} .DAT_GREY {color:#404040; font-size:13pt;} .DAT_PURPLE {color:#404040; font-size:13pt;} .DAT_BLUE {color:#404040; font-size:13pt;} .DAT_YELLOW {color:#404040; font-size:13pt;} .DAT_PINK {color:#404040; font-size:13pt;} .DAT_DARK {color:#d0d0d0; font-size:13pt;} .DAT_STRONG_WHITE {color:black; font-size:13pt;} .DAT_STRONG_GREY {color:black; font-size:13pt;} .DAT_STRONG_PURPLE {color:black; font-size:13pt;} .DAT_STRONG_BLUE {color:black; font-size:13pt;} .DAT_STRONG_YELLOW {color:black; font-size:13pt;} .DAT_STRONG_PINK {color:black; font-size:13pt;} .DAT_STRONG_DARK {color:white; font-size:13pt;} .DAT_LIGHT_WHITE {color:#a0a0a0; font-size:13pt;} .DAT_LIGHT_GREY {color:#a0a0a0; font-size:13pt;} .DAT_LIGHT_PURPLE {color:#a0a0a0; font-size:13pt;} .DAT_LIGHT_BLUE {color:#a0a0a0; font-size:13pt;} .DAT_LIGHT_YELLOW {color:#a0a0a0; font-size:13pt;} .DAT_LIGHT_PINK {color:#a0a0a0; font-size:13pt;} .DAT_LIGHT_DARK {color:#909090; font-size:13pt;} .DAT_GREEN {color:#246600; font-size:13pt;} .DAT_RED {color:#660000; font-size:13pt;} .NOWRAP {white-space:nowrap;} .BOLD {font-weight:bold;} /*********************** Line in top part of a table row *********************/ .LINE_TOP { border-top-style:solid; border-width:1px; } .LINE_BOTTOM { border-bottom-style:solid; border-width:1px; } .LINE_LEFT { border-left-style:solid; border-width:1px; } .LINE_RIGHT { border-right-style:solid; border-width:1px; } .DAT_SMALL {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#404040; font-size:12pt;} .DAT_SMALL_LIGHT {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#A0A0A0; font-size:12pt;} .DAT_SMALL_NOBR {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#404040; font-size:12pt; white-space:nowrap;} .DAT_SMALL_N {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:black; font-size:12pt;} .DAT_SMALL_NOBR_N {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:black; font-size:12pt; white-space:nowrap;} .DAT_SMALL_GREY {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#707070; font-size:12pt;} .DAT_SMALL_RED {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#660000; font-size:12pt;} .DAT_SMALL_GREEN {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#246600; font-size:12pt;} .DAT_SMALL_BLUE {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#0080FF; font-size:12pt;} .DAT_SMALL_YELLOW {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#C0C000; font-size:12pt;} /******************************** User's IDs *********************************/ .USR_ID {font-size:18pt; font-weight:bold;} .USR_ID_C {color:#408020} .USR_ID_NC {color:#A02020} /******************************* Record card *********************************/ .REC_USR { display:block; margin:0 0 12px 0; text-align:center; } .REC_LEFT, .REC_RIGHT { display:inline-block; margin:0 6px; vertical-align:top; } .REC_C1_TOP { box-sizing:border-box; width:68px; padding-top:8px !important; vertical-align:top; } .REC_C2_TOP { box-sizing:border-box; width:278px; height:68px; padding-top:8px !important; } .REC_C3_TOP { box-sizing:border-box; width:190px; } .REC_C1_MID { box-sizing:border-box; width:68px; } .REC_C2_MID { box-sizing:border-box; width:278px; } .REC_C3_MID { box-sizing:border-box; width:190px; } .REC_C1_BOT { box-sizing:border-box; width:170px; } .REC_C2_BOT { box-sizing:border-box; width:362px; } .REC_C2_BOT_INPUT { box-sizing:border-box; width:358px; } .REC_HEAD { font-family:Georgia,"DejaVu LGC Serif","Bitstream Vera Serif",serif; color:#808080; font-size:12pt; } .REC_NAME { box-sizing:border-box; max-width:274px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#808080; font-size:20pt; font-weight:bold; } .REC_NICK { color:#808080; font-size:15pt; font-weight:bold; } .REC_WEBS { width:180px; margin:0 auto; } .REC_EMAIL { box-sizing:border-box; max-width:358px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .REC_FIELDNAME { width:200px; } /******************************** Class photo ********************************/ .CLASSPHOTO_TITLE { color:#404040; font-family:Georgia,"DejaVu LGC Serif","Bitstream Vera Serif",serif; font-size:13pt; } .CLASSPHOTO { color:#404040; font-size:10pt; line-height:110%; white-space:nowrap; } .CLASSPHOTO_CAPTION { display:block; box-sizing:border-box; max-width:60px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 auto; } /************************** Left column menu *********************************/ .LINK_TITLE, .MFU_TITLE {color:#4D88A1;} /*****************************************************************************/ .MSJ_AVISO {color:#632921; font-size:12pt;} .TIT_TBL {color:#4D88A1; font-size:12pt; font-weight:bold;} .GRP_TITLE {color:#4D88A1; font-size:15pt; font-weight:bold;} .ASG_TITLE {color:#4D88A1; font-size:15pt; font-weight:bold;} .ASG_TITLE_LIGHT {color:#AFC4CC; font-size:15pt; font-weight:bold;} .ASG_LABEL {color:#4D88A1; font-size:13pt;} .ASG_LABEL_LIGHT {color:#AFC4CC; font-size:13pt;} .ASG_GRP {color:#4D88A1; font-size:12pt;} .ASG_GRP_LIGHT {color:#AFC4CC; font-size:12pt;} .DATE_RED {color:#660000; font-size:13pt;} .DATE_RED_LIGHT {color:#f98a8a; font-size:13pt;} .DATE_GREEN {color:#008000; font-size:13pt;} .DATE_GREEN_LIGHT {color:#89BE87; font-size:13pt;} .DATE_BLUE {color:#4D88A1; font-size:13pt;} .DATE_BLUE_LIGHT {color:#AFC4CC; font-size:13pt;} .ASG_LST_DATE_GREEN {color:#008000; font-size:11pt; white-space:nowrap;} .ASG_LST_DATE_RED {color:#660000; font-size:11pt; white-space:nowrap;} .STATUS_GREEN {color:#008000; font-size:12pt;} .STATUS_GREEN_LIGHT {color:#89BE87; font-size:12pt;} .STATUS_RED {color:#660000; font-size:12pt;} .STATUS_RED_LIGHT {color:#f98a8a; font-size:12pt;} /********************** Number of question, project, etc. ********************/ .BIG_INDEX {color:#808080; font-size:20pt; font-weight:bold;} .BIG_INDEX_RED {color:#660000; font-size:20pt; font-weight:bold;} /******************************** Projects ***********************************/ .PRJ_LST_USR { margin:0; padding-left:1em; } .PRJ_MEMBER_ICO { width:30px; text-align:center; vertical-align:middle; } .PRJ_MEMBER_PHO { width:30px; text-align:center; vertical-align:middle; } .PRJ_MEMBER_NAM { text-align:left; vertical-align:middle; color:#4D88A1; font-size:11pt; } /********************************** Tests ************************************/ .TAG_SEL {box-sizing:border-box; width:346px;} .TAG_TXT {box-sizing:border-box; width:346px;} .STEM { box-sizing:border-box; margin:0 auto; width:700px; } .STEM_TEXTAREA { width:696px; } .ANSWER { box-sizing:border-box; margin:0 auto; width:600px; } .ANSWER_TEXTAREA { width:596px; } .ANS_0 {color:#202020; font-size:12pt; font-weight:bold;} .ANS_OK {color:#008000; font-size:12pt; font-weight:bold;} .ANS_BAD {color:red; font-size:12pt; font-weight:bold;} .TEST_SUBTITLE { margin:10px; color:#202020; font-size:13pt; text-align:center; vertical-align:middle; } .TEST_TXT {color:#202020; font-size:12pt;} .TEST_TXT_RED {color:#660000; font-size:12pt;} .TEST_TXT_LIGHT {color:#a0a0a0; font-size:12pt;} .TEST_TXT_LIGHT_RED {color:#f98a8a; font-size:12pt;} .TEST_TAG_LIST { padding:0; margin:0 0 0 1em; } .TEST_MED_SHOW_CONT { box-sizing:border-box; width:50%; margin:10px 0; } .TEST_MED_SHOW { box-sizing:border-box; width:100%; border-radius:2px; } .TEST_MED_EDIT_LIST_CONT { box-sizing:border-box; width:50%; margin:5px 0; } .TEST_MED_EDIT_LIST { box-sizing:border-box; width:100%; border-radius:2px; } .TEST_MED_EDIT_FORM { box-sizing:border-box; margin:15px 0; text-align:left; vertical-align:top; } .TEST_MED_INPUT { box-sizing:border-box; margin:0 auto; width:400px; } .TEST_MED_EDIT_ONE_CONT { box-sizing:border-box; width:100%; } .TEST_MED_EDIT_ONE { box-sizing:border-box; width:100%; border-radius:2px; } .TEST_EDI_ANS_LEFT_COL { box-sizing:border-box; width:48px; text-align:left; vertical-align:top; } .TEST_EDI_ANS_CENTER_COL { box-sizing:border-box; width:48px; text-align:right; vertical-align:top; } .TEST_EDI_ANS_RIGHT_COL { box-sizing:border-box; width:600px; text-align:left; vertical-align:top; } .TEST_FILE_CONTENT { padding-bottom:20px; } /*********************************** Exams ***********************************/ .EXA_SET_TITLE { text-align:left; vertical-align:middle; color:black; font-size:16pt; } .EXA_SET_NUM_QSTS { text-align:right; vertical-align:middle; color:#404040; font-size:12pt; } .EXA_PRN_DESC { margin:1%; text-align:left; vertical-align:top; } #examprint { margin:1%; } /********************************** Matches **********************************/ .MCH_BG { background-image:url("/swad/icon/bg.jpg"); background-size:cover; background-repeat:no-repeat; height:100%; background-color:white; } .MCH_CONT { box-sizing:border-box; display:table; margin:2%; width:96%; } .MCH_LEFT_TCH { box-sizing:border-box; float:left; width:20%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .MCH_LEFT_STD { box-sizing:border-box; float:left; width:40%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .MCH_RIGHT_TCH { box-sizing:border-box; display:table; float:left; width:80%; } .MCH_RIGHT_STD { box-sizing:border-box; display:table; float:left; width:60%; } .MCH_TOP { box-sizing:border-box; width:100%; height:64px; color:#404040; font-size:16pt; font-weight:bold; text-overflow:ellipsis; } .MCH_BOTTOM { box-sizing:border-box; width:100%; } .MCH_REFRESHABLE_TEACHER { box-sizing:border-box; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .MCH_NUM_QST { color:#404040; font-size:32pt; font-weight:bold; text-align:center; vertical-align:top; } .MCH_TIME_QST { color:#404040; font-size:16pt; font-weight:bold; text-align:center; vertical-align:top; } .MCH_SHOW_HOURGLASS, .MCH_SHOW_ANSWERED, .MCH_REM_MY_ANS, .MCH_SHOW_RESULTS { text-align:center; padding:16pt 0; } .MCH_NUM_ANSWERERS { text-align:center; padding:8pt 0; color:#404040; font-size:16pt; } .MCH_BUTTONS_CONT { display:table; box-sizing:border-box; width:100%; padding:20px 0; } .MCH_BUTTON_LEFT_CONT { display:table; box-sizing:border-box; float:left; width:35%; text-align:center; } .MCH_BUTTON_CENTER_CONT { display:table; box-sizing:border-box; float:left; width:30%; text-align:center; } .MCH_BUTTON_RIGHT_CONT { display:table; box-sizing:border-box; float:left; width:35%; text-align:center; } .MCH_BIGBUTTON_CONT { box-sizing:border-box; display:inline-block; font-size:32pt; font-weight:bold; padding:2px; text-align:center; vertical-align:middle; } .MCH_SMALLBUTTON_CONT { box-sizing:border-box; display:inline-block; font-size:16pt; font-weight:bold; padding:2px; text-align:center; vertical-align:middle; } .MCH_BUTTON_ON, .MCH_BUTTON_OFF { display:table-cell; width:100%; text-align:center; vertical-align:middle; opacity:0.7; } .MCH_BUTTON_ON:hover { opacity:1; } .MCH_BUTTON_HIDDEN { display:table-cell; width:100%; text-align:center; vertical-align:middle; opacity:0.1; } .MCH_RED {color:#913b00;} .MCH_YELLOW {color:#a27600;} .MCH_LIMEGREEN {color:#636e00;} .MCH_GREEN {color:#246600;} .MCH_TCH_STEM { color:#202020; font-size:24pt; padding-bottom:24pt; } .MCH_TCH_ANS { color:#202020; font-size:24pt; } .MCH_WAIT_CONT { box-sizing:border-box; margin-top:5%; text-align:center; } .MCH_WAIT_IMG { box-sizing:border-box; width:100px; } .MCH_SCO_SCO { width:5%; text-align:right; vertical-align:middle; height:10px; font-size:6pt; font-weight:bold; } .MCH_SCO_NUM { width:95%; text-align:left; vertical-align:middle; background:white; height:10px; font-size:6pt; font-weight:bold; } .MCH_SCO_BAR { display:inline-block; height:10px; vertical-align:middle; } .MCH_SCO_TOP { color:grey; border-style:solid solid none solid; border-width:1px; } .MCH_SCO_MID { color:grey; border-style:none solid none solid; border-width:1px; } .MCH_SCO_BOT { color:grey; border-style:none solid solid solid; border-width:1px; } .MCH_TCH_BUTTON_TD { box-sizing:border-box; width:84px; text-align:center; vertical-align:top; } .MCH_TCH_BUTTON { box-sizing:border-box; width:64px; margin:0 16px; padding:8px; border-radius:2px; border-width:1px; border-style:solid; color:rgba(255,255,255,0.75); font-size:36pt; font-weight:bold; line-height:normal; white-space:nowrap; } .MCH_NUM_COL_OFF { display:table-cell; box-sizing:border-box; padding:6px; text-align:center; vertical-align:middle; border:solid 1px; border-color:transparent; } .MCH_NUM_COL_ON { display:table-cell; box-sizing:border-box; padding:6px; text-align:center; vertical-align:middle; border:solid 1px; border-color:#404040; background-color:rgba(0,0,0,0.1); } .MCH_STD_CELL { text-align:center; vertical-align:middle; } .MCH_STD_BUTTON { box-sizing:border-box; width:100%; margin:10px auto; padding:20px; border-radius:2px; border-width:1px; border-style:solid; color:rgba(255,255,255,0.75); font-size:44pt; font-weight:bold; line-height:normal; white-space:nowrap; } .MCH_STD_ANSWER_SELECTED { box-shadow: 0px 0px 18px 12px rgba(0,128,0,1); animation:fadeinshadow 1s ease forwards; } @keyframes fadeinshadow { from {box-shadow:0px 0px 18px 12px rgba(0,128,0,1);} to {box-shadow:none;} } .MCH_RESULT { padding:10px 0; color:#404040; font-size:16pt; text-align:left; vertical-align:top; } .MCH_RES_TR { height:10px; } .MCH_RES_CORRECT { width:1%; background:green; } .MCH_RES_WRONG { width:1%; background:red; } .MCH_RES_VOID { width:1%; } .BT_A {background-color:#e21c3d; border-color:#a9152d;} /* red */ .BT_B {background-color:#1369ce; border-color:#0e519c;} /* blue */ .BT_C {background-color:#d89e00; border-color:#a27600;} /* yellow */ .BT_D {background-color:#2b9010; border-color:#206c0c;} /* green */ .BT_E {background-color:#e30087; border-color:#aa0064;} /* pink */ .BT_F {background-color:#00b5e9; border-color:#0089b0;} /* light blue */ .BT_G {background-color:#f58700; border-color:#b86400;} /* orange */ .BT_H {background-color:#b3d00a; border-color:#869d07;} /* light green */ .BT_I {background-color:#642075; border-color:#4b1858;} /* purple */ .BT_J {background-color:#f5e800; border-color:#b8ad00;} /* light yellow */ /********************************* Surveys ***********************************/ .SVY_OPT { width:50px; } /******************************* Time table **********************************/ .TT { width:100%; margin:0 auto; } .Tmt_CELL { box-sizing:border-box; max-width:80px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 auto; } .Tmt_TXT { font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#345C6C; font-size:10pt; line-height:100%; letter-spacing:0; } .Tmt_DAY { font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#202020; font-size:10pt; letter-spacing:0; } .Tmt_SUNDAY { font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:red; font-size:10pt; letter-spacing:0; } .Tmt_HOUR_BIG { color:#808080; font-size:10pt; font-weight:bold; line-height:100%; letter-spacing:0; } .Tmt_HOUR_SMALL { font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#A0A0A0; font-size:10pt; line-height:100%; letter-spacing:0; } .Tmt_HOURCOL {box-sizing:border-box; height:16px; width:7%;} .Tmt_HOUR {box-sizing:border-box; height:32px; width:7%;} .Tmt_MINICOL {box-sizing:border-box; height:16px; width:2%;} .Tmt_ALIGN {box-sizing:border-box; height:16px; width:1%;} .Tmt_FREE0 {box-sizing:border-box; height:16px; background-color:#F4F2EA; border:solid 1px; border-color:#F4F2EA #E0D9C2 #EEEADC #F4F2EA;} .Tmt_FREE1 {box-sizing:border-box; height:16px; background-color:#F4F2EA; border:solid 1px; border-color:#F4F2EA #E0D9C2 #E0D9C2 #F4F2EA;} .Tmt_FREE2 {box-sizing:border-box; height:16px; background-color:#FBFAF7; border:solid 1px; border-color:#FBFAF7 #E0D9C2 #F5F2E9 #FBFAF7;} .Tmt_FREE3 {box-sizing:border-box; height:16px; background-color:#FBFAF7; border:solid 1px; border-color:#FBFAF7 #E0D9C2 #E0D9C2 #FBFAF7;} .Tmt_LECT {box-sizing:border-box; height:16px; background-color:#C0DAE4; border:solid 2px; border-color:#D5F1FC #AAC1C9 #AAC1C9 #D5F1FC;} .Tmt_PRAC {box-sizing:border-box; height:16px; background-color:#DBE5E9; border:solid 2px; border-color:#EDF8FC #C7D0D4 #C7D0D4 #EDF8FC;} .Tmt_TUTO {box-sizing:border-box; height:16px; background-color:#D6E9C3; border:solid 2px; border-color:#E8FCD3 #C2D4B1 #C2D4B1 #E8FCD3;} .Tmt_TYP, .Tmt_DUR, .Tmt_GRP, .Tmt_INF { width:80px; font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; font-size:10pt; border:0; } /********************************* Preference ********************************/ .PREF_CONTS { margin:0 auto; text-align:center; } .PREF_CONT { display:inline-block; margin:0 10px; } .PREF_OFF { display:table-cell; box-sizing:border-box; padding:6px; text-align:center; vertical-align:middle; border:solid 1px; border-color:transparent; } .PREF_ON { display:table-cell; box-sizing:border-box; padding:6px; text-align:center; vertical-align:middle; border:solid 1px; } .PREF_ON_WHITE {border-color:#c0dae4; background-color:#ddecf1;} .PREF_ON_GREY {border-color:#c0dae4; background-color:#ddecf1;} .PREF_ON_PURPLE {border-color:#c0dae4; background-color:#ddecf1;} .PREF_ON_BLUE {border-color:#c0dae4; background-color:#ddecf1;} .PREF_ON_YELLOW {border-color:#c0dae4; background-color:#ddecf1;} .PREF_ON_PINK {border-color:#c0dae4; background-color:#ddecf1;} .PREF_ON_DARK {border-color:#808080; background-color:#707070;} /************************************* Log ***********************************/ .LOG { font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; font-size:11pt; color:#404040; } .LOG_R { font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; font-size:11pt; color:red; } /***************************** Exam announcement *****************************/ /* Bottom space is used for signatures */ .CALL_FOR_EXAM_VISIBLE { box-sizing:border-box; width:100%; padding:25px 25px 125px 25px; } .CALL_FOR_EXAM_HIDDEN { box-sizing:border-box; width:100%; padding:25px 25px 125px 25px; opacity:0.3; } /*********************** Media (image/video) uploading ***********************/ .MED_UPLOADER { text-align:center; margin-bottom:10px; } .MED_PLAY { position:relative; } /* The icon inside the overlay is positioned in the middle vertically and horizontally */ .MED_PLAY_ICO { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:20pt; font-weight:bold; color:white; text-shadow: 0 0 8px black; } /* For YouTube embedded videos. See https://avexdesigns.com/responsive-youtube-embed/ */ .MED_VIDEO_CONT /* Adjust container height to get a 16:9 aspect ratio */ { position:relative; box-sizing:border-box; margin:10px 0; padding-bottom:56.25%; /* percentage relative to width */ } .MED_VIDEO_CONT iframe, .MED_VIDEO_CONT object, .MED_VIDEO_CONT embed { position:absolute; top:0; left:0; width:100%; height:100%; } /* Slideshare: 487 / 599 = 0,813021703 422 / 514 = 0,821011673 357 / 429 = 0,832167832 292 / 344 = 0,848837209 */ .MED_EMBED_CONT /* Adjust container height to get a 16:9 aspect ratio */ { position:relative; box-sizing:border-box; margin:10px 0; padding-bottom:56.25%; /* percentage relative to width */ } .MED_EMBED_CONT iframe, .MED_EMBED_CONT object, .MED_EMBED_CONT embed { position:absolute; top:0; left:0; width:100%; height:100%; } /********** Author of assignments, attendance, messages, surveys... **********/ .AUTHOR_1_LINE { display:inline-block; box-sizing:border-box; max-width:100px; height:20px; text-align:left; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .AUTHOR_2_LINES { display:inline-block; box-sizing:border-box; max-width:60px; height:40px; text-align:left; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .AUTHOR_TXT {color:#4D88A1; font-size:11pt;} .AUTHOR_TXT_LIGHT {color:#AFC4CC; font-size:11pt;} .AUTHOR_TXT_NEW {color:#4D88A1; font-size:11pt; font-weight:bold;} /************************** Owner of assignments and works *******************/ .OWNER_WORKS_PHOTO { box-sizing:border-box; width:64px; text-align:left; vertical-align:top; } .OWNER_WORKS_DATA { display:inline-block; box-sizing:border-box; width:100px; text-align:left; vertical-align:top; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /***************************** Listing of users ******************************/ .USR_DAT { box-sizing:border-box; max-width:120px; overflow:hidden; text-overflow:ellipsis; } /********************************* Attendance ********************************/ .ATT_CHECK { display:inline-block; font-size:13pt; font-weight:bold; color:darkgreen; } .ATT_CROSS { display:inline-block; font-size:13pt; font-weight:bold; color:darkred; opacity:0.1; } /********************* Edition of attendance events, games *******************/ .TITLE_DESCRIPTION_WIDTH { box-sizing:border-box; width:500px; } /**************************** Enrolment requests *****************************/ .REQUESTER_NAME { box-sizing:border-box; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /********************************* Timeline **********************************/ #view_new_container,#view_old_pubs_container { display:table-cell; height:50px; text-align:center; vertical-align:middle; } #just_now_timeline_list,#new_timeline_list,#old_timeline_list { display:none; margin:0; padding:0; } #old_timeline_list { margin:0; padding:0; } .Tml_LIST { list-style-type:none; padding:0; margin:0; text-align:left; vertical-align:middle; } @media only screen and (max-width: 590px) { /* For mobile-phones (maximum width visible on Moto G4 vertical) */ .Tml_WIDTH {width:316px;} /* 556-240 */ .Tml_RIGHT_WIDTH {width:260px;} /* 500-240 */ .Tml_RIGHT_AUTHOR_WIDTH {width:100px;} /* 340-240 */ .Tml_COMM_WIDTH {width:220px;} /* 460-240 */ .Tml_COMM_AUTHOR_WIDTH {width: 60px;} /* 300-240 */ .Tml_MED_INPUT_WIDTH {width:160px;} /* 400-240 */ .Tml_NOTE_FOOT_WIDTH {width:260px;} /* 500-240 */ .Tml_COMM_FOOT_WIDTH {width:220px;} /* 460-240 */ .Tml_FAV_NOT_WIDTH {width:120px;} /* (480-240)/2 */ .Tml_SHA_NOT_WIDTH {width:120px;} /* (480-240)/2 */ .Tml_FAV_COM_WIDTH {width:200px;} /* 440-240 */ } @media only screen and (min-width: 590px) { /* For tablets and desktop (maximum width visible on Moto G4 horizontal) */ .Tml_WIDTH {width:556px;} .Tml_RIGHT_WIDTH {width:500px;} .Tml_RIGHT_AUTHOR_WIDTH {width:340px;} .Tml_COMM_WIDTH {width:460px;} .Tml_COMM_AUTHOR_WIDTH {width:300px;} .Tml_MED_INPUT_WIDTH {width:400px;} .Tml_FAV_NOT_WIDTH {width:240px;} .Tml_SHA_NOT_WIDTH {width:240px;} .Tml_FAV_COM_WIDTH {width:440px;} } .Tml_NEW_PUB { background-color:#ddecf1; animation:fadein 2s linear forwards; } @keyframes fadein { to {background-color:white;} } .Tml_FORM_NEW_PST { padding:10px 0; text-align:center; } .Tml_SEP /* Separator (upper line between publications) */ { border-top:1px solid silver; } .Tml_TOP_CONT { box-sizing:border-box; padding-top:10px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .Tml_TOP_PUBLISHER { color:#808080; font-size:13pt; } .Tml_LEFT_PHOTO { display:inline-block; box-sizing:border-box; width:56px; height:76px; padding:10px 0; text-align:left; vertical-align:top; } .Tml_RIGHT_CONT { display:inline-block; box-sizing:border-box; padding-top:10px; } .Tml_RIGHT_AUTHOR { display:inline-block; box-sizing:border-box; text-align:left; vertical-align:top; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .Tml_RIGHT_TIME { display:inline-block; box-sizing:border-box; width:160px; text-align:right; vertical-align:top; } .Tml_PST_TEXTAREA { box-sizing:border-box; margin:0; resize:none; } .Tml_PST_MED_CONT { box-sizing:border-box; margin-top:10px; } .Tml_PST_MED { box-sizing:border-box; border-radius:2px; } .Tml_COM_CONT { display:inline-block; box-sizing:border-box; padding-top:10px; } .Tml_COM_AUTHOR { display:inline-block; box-sizing:border-box; text-align:left; vertical-align:top; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .Tml_COM_MED_CONT { box-sizing:border-box; margin-top:10px; } .Tml_COM_MED { box-sizing:border-box; border-radius:2px; } .Tml_FORM_NEW_COM { display:inline-block; margin-left:56px; border-top:1px solid silver; padding-bottom:10px; text-align:center; } .Tml_COM_TEXTAREA { box-sizing:border-box; margin:0; resize:none; } .Tml_BOTTOM_LEFT /* Container for button used to toggle new comment form */ { display:inline-block; box-sizing:border-box; width:56px; padding-right:11px; text-align:center; vertical-align:bottom; } .Tml_BOTTOM_RIGHT /* Container for fav, share, remove and comments */ { display:inline-block; box-sizing:border-box; vertical-align:top; } .Tml_FORM { padding-top:8px; overflow:hidden; text-overflow:ellipsis; } .Tml_FORM_OFF, .Tml_LOC { padding-top:8px; color:#808080; font-size:13pt; overflow:hidden; text-overflow:ellipsis; } .Tml_TXT { text-align:left; padding-top:5px; font-size:13pt; line-height:1.4; overflow:hidden; text-overflow:ellipsis; } .Tml_TXT_WHITE {color:#202020;} .Tml_TXT_GREY {color:#202020;} .Tml_TXT_PURPLE {color:#202020;} .Tml_TXT_BLUE {color:#202020;} .Tml_TXT_YELLOW {color:#202020;} .Tml_TXT_PINK {color:#202020;} .Tml_TXT_DARK {color:#e0e0e0;} .Tml_EXPAND_COM { text-align:center; padding:10px 0; } .Tml_ICO_COM_OFF { display:inline-block; box-sizing:border-box; padding:6px; text-align:center; vertical-align:middle; border:solid 1px; border-color:transparent; } .Tml_ICO_COM_ON { display:inline-block; box-sizing:border-box; padding:6px; text-align:center; vertical-align:middle; border:solid 1px; border-color:#C0DAE4; background-color:#DDECF1; } .Tml_FOOT /* Container for favs, shares and remove */ { display:table; vertical-align:top; padding:7px 0; } .Tml_FAV_NOT, .Tml_SHA_NOT { display:table-cell; text-align:left; vertical-align:top; } .Tml_FAV_COM { display:table-cell; text-align:left; vertical-align:top; } .Tml_REM { display:table-cell; width:20px; text-align:right; vertical-align:bottom; } .Tml_ICO { display:table-cell; } .Tml_NUM_USRS { display:table-cell; color:#A0A0A0; font-size:12pt; font-weight:bold; } .Tml_USRS { display:table-cell; } .Tml_ICO_DISABLED { opacity:0.1; } .Tml_SHARER { display:inline-block; padding-left:4px; vertical-align:bottom; } .Tml_COM { border-top:1px solid silver; } .Tml_COM_PHOTO { display:inline-block; box-sizing:border-box; width:40px; height:54px; padding:10px 0; text-align:left; vertical-align:top; } /************************************ Forum **********************************/ .FOR_IMG_CONT { box-sizing:border-box; width:100%; margin:10px 0; } .FOR_IMG { box-sizing:border-box; width:100%; border-radius:2px; } .FOR_MED_INPUT { box-sizing:border-box; margin:0 auto; width:400px; } /*********************************** Messages ********************************/ .MSG_TO_ONE_RCP { display:inline-block; padding-left:4px; text-align:left; vertical-align:middle; } .MSG_IMG_CONT { box-sizing:border-box; width:100%; margin:10px 0; } .MSG_IMG { box-sizing:border-box; width:100%; border-radius:2px; } .MSG_MED_INPUT { box-sizing:border-box; margin:0 auto; width:400px; } .MSG_TXT { color:#202020; font-size:13pt; line-height:1.4; } .MSG_TIT {color:#4D88A1; font-size:13pt;} .MSG_TIT_NEW {color:#4D88A1; font-size:13pt; font-weight:bold;} .MSG_TIT_REM {color:#AFC4CC; font-size:13pt;} .MSG_TIT_BG { background-image:-webkit-linear-gradient(#eaf3f6 0,#eaf3f6 80%,white 100%); /* Safari */ background-image:linear-gradient(#eaf3f6 0,#eaf3f6 80%,white 100%); background-repeat:no-repeat; color:#4D88A1; font-size:13pt; } .MSG_TIT_BG_NEW { background-image:-webkit-linear-gradient(#f5ffd7 0,#f5ffd7 80%,white 100%); /* Safari */ background-image:linear-gradient(#f5ffd7 0,#f5ffd7 80%,white 100%); background-repeat:no-repeat; color:#4D88A1; font-size:13pt; font-weight:bold; } .MSG_TIT_BG_REM { background-image:-webkit-linear-gradient(#f3fcff 0,#f3fcff 80%,white 100%); /* Safari */ background-image:linear-gradient(#f3fcff 0,#f3fcff 80%,white 100%); background-repeat:no-repeat; color:#AFC4CC; font-size:13pt; } .MSG_AUT_BG { background-image:-webkit-linear-gradient(#eaf3f6 0,#eaf3f6 80%,white 100%); /* Safari */ background-image:linear-gradient(#eaf3f6 0,#eaf3f6 80%,white 100%); background-repeat:no-repeat; color:#4D88A1; font-size:11pt; } .MSG_AUT_BG_NEW { background-image:-webkit-linear-gradient(#f5ffd7 0,#f5ffd7 80%,white 100%); /* Safari */ background-image:linear-gradient(#f5ffd7 0,#f5ffd7 80%,white 100%); background-repeat:no-repeat; color:#4D88A1; font-size:11pt; font-weight:bold; } .MSG_AUT_BG_REM { background-image:-webkit-linear-gradient(#f3fcff 0,#f3fcff 80%,white 100%); /* Safari */ background-image:linear-gradient(#f3fcff 0,#f3fcff 80%,white 100%); background-repeat:no-repeat; color:#AFC4CC; font-size:11pt; } .MSG_DATE {color:#4D88A1; font-size:11pt;} .MSG_DATE_NEW {color:#4D88A1; font-size:11pt; font-weight:bold;} .BT {width:20px; text-align:center; vertical-align:top;} .BT0 {width:20px; text-align:center; vertical-align:top; background-color:#F4F2EA;} .BT1 {width:20px; text-align:center; vertical-align:top; background-color:#FBFAF7;} .BM {width:20px; text-align:center; vertical-align:middle;} .BM_SEL {width:20px; text-align:center; vertical-align:middle; background-color:#C0FF40;} .BM0 {width:20px; text-align:center; vertical-align:middle; background-color:#F4F2EA;} .BM1 {width:20px; text-align:center; vertical-align:middle; background-color:#FBFAF7;} /******************************** Pagination *********************************/ .PAG { display:inline-block; box-sizing:border-box; margin:4px 2px; padding:2px 8px; border-style:solid; border-width:1px; border-radius:2px; border-color:#C0DAE4; } a.PAG:hover, .PAG_CUR { display:inline-block; box-sizing:border-box; margin:4px 2px; padding:2px 8px; border-style:solid; border-width:1px; border-radius:2px; border-color:#C0DAE4; background-color:#DDECF1; text-decoration:none; } .PAG_TXT { font-size:13pt; font-weight:bold; color:#4D88A1; } /***************************** Calls for exams *******************************/ .EXAM_TIT { /* font-family:Garamond,"DejaVu LGC Serif","Bitstream Vera Serif",serif; */ color:#202020; font-weight:bold; font-size:18pt; } .EXAM { /* font-family:Garamond,"DejaVu LGC Serif","Bitstream Vera Serif",serif; */ color:#202020; font-size:13pt; } /******************************** Separation row *****************************/ .SEPAR_ROW { height:10px; } /********************************** Statistics *******************************/ .STAT_SEL { width:300px; } /******************************** User's report ******************************/ .TITLE_REPORT { margin-bottom:10px; } /***************************** Public user's profile *************************/ .PRF_FIG_LEFT_CONT { display:inline-block; box-sizing:border-box; width:50%; padding-right:10px; text-align:right; vertical-align:top; } .PRF_FIG_RIGHT_CONT { display:inline-block; box-sizing:border-box; width:50%; padding-left:10px; text-align:left; vertical-align:top; } .PRF_FIG_UL { display:inline-block; list-style-type:none; padding:0; margin:0; text-align:left; vertical-align:middle; } .PRF_FIG_LI { padding:0 0 0 20px; background-size:16px 16px; background-repeat:no-repeat; background-position:left center; opacity:0.7; } #following_side { display:inline-block; box-sizing:border-box; width:50%; padding-right:10px; } #followers_side { display:inline-block; box-sizing:border-box; width:50%; padding-left:10px; } .FOLLOW_SIDE { display:table; box-sizing:border-box; width:100%; } #follows_me { display:table-cell; box-sizing:border-box; padding-right:20px; text-align:right; vertical-align:middle; } #follow_usr { display:table-cell; height:60px; box-sizing:border-box; padding-left:20px; text-align:left; vertical-align:middle; } .FOLLOW_BOX { display:table-cell; width:140px; text-align:center; vertical-align:middle; } .FOLLOW_NUM { color:#202020; font-size:30pt; font-weight:bold; opacity:0.5; } .FOLLOW_NUM_B { color:#202020; font-size:30pt; font-weight:bold; } .FOLLOW_PHOTO { box-sizing:border-box; width:72px; height:90px; text-align:left; vertical-align:bottom; } .FOLLOW_USR { box-sizing:border-box; width:100px; height:90px; text-align:left; } .FOLLOW_USR_NAME { box-sizing:border-box; max-width:100px; text-align:left; vertical-align:bottom; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .FOLLOW_USR_ICO { text-align:left; padding:4px; } /****************************** Users ranking ********************************/ .RANK_USR { box-sizing:border-box; max-width:48px; text-align:left; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .RANK_PHOTO { width:34px; height:48px; } /************************* Indicators about courses **************************/ .INDICATORS td,.INDICATORS th { border:1px solid silver; border-collapse:collapse; padding:1px; } .INDICATORS th { color:#4D88A1; font-size:12pt; font-weight:bold; } .INDICATORS_INPUT { max-width:500px; } /************* Forms to edit institution, center, degree, course *************/ .CODE { box-sizing:border-box; min-width:60px; text-align:right; vertical-align:middle; } .INPUT_INS_CODE { box-sizing:border-box; width:180px; } .INPUT_SHORT_NAME { box-sizing:border-box; width:180px; } .INPUT_FULL_NAME { box-sizing:border-box; width:180px; } .INPUT_LONG { box-sizing:border-box; width:60px; } .INPUT_WWW_NARROW { box-sizing:border-box; width:90px; } .INPUT_WWW_WIDE { box-sizing:border-box; width:180px; } .INPUT_COORD { box-sizing:border-box; width:180px; } .INPUT_STATUS { box-sizing:border-box; width:80px; } .INPUT_REQUESTER { box-sizing:border-box; width:90px; } /******************************** Last clicks ********************************/ .LC_CLK {text-align:right; vertical-align:middle; min-width:60px;} .LC_TIM {text-align:right; vertical-align:middle; min-width:60px; max-width:60px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .LC_ROL {text-align:left; vertical-align:middle; min-width:100px; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .LC_CTY {text-align:left; vertical-align:middle; min-width:100px; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .LC_INS {text-align:left; vertical-align:middle; min-width:100px; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .LC_CTR {text-align:left; vertical-align:middle; min-width:100px; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .LC_DEG {text-align:left; vertical-align:middle; min-width:150px; max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .LC_ACT {text-align:left; vertical-align:middle; min-width:200px; max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /********************************** Privacy **********************************/ .PRI_LIST { width:100%; } /********************************* Page foot *********************************/ @media only screen and (max-width: 800px) { /* For mobile-phones */ #foot_zone, #about_zone { display:none; } } @media only screen and (min-width: 800px) { /* For tablets and desktop */ #foot_zone { padding:20px; } #about_zone { padding:20px; text-align:center; } } .FOOT_LIST_CONT { position:relative; float:left; text-align:left; padding-bottom:20px; background:white; } .FOOT_LIST_TITLE { color:#666; font-size:14pt; font-weight:bold; white-space:nowrap; } .FOOT_LIST { box-sizing:border-box; list-style-type:none; margin:0; padding:0; border-width:0; font-size:12pt; white-space:nowrap; line-height:140%; } .FOOT_LINK { color:#2C90C9; } .ABOUT { color:#A0A0A0; font-size:12pt; } /************** Something that does not take up space and is not shown *******/ .NOT_SHOWN { display:none; } /************ Something that takes up space but which is invisible ***********/ .LIGHT { opacity:0.2; } .HIDDEN { visibility:hidden; }