/* swad_desktop.css:style-sheet for desktop 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-2020 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; background-color:white; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:1em; overflow-y:scroll; /* force vertical scrollbar */ } input { font-size:12pt; } select { font-size:12pt; } textarea { font-size:13pt; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; } 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; } 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_PINK { background-image:-webkit-linear-gradient(#8e5e8f 0,#ab5c84 100%); /* Safari */ background-image:linear-gradient(#8e5e8f 0,#ab5c84 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;} #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;} #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; } /******************************* 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:4px; 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:4px 4px 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:#606060; margin:2px 0 -2px 0; font-size:20pt; font-weight:bold; line-height:100%; } .CURRENT_DAY { color:#606060; } #current_time { border-radius:0 0 4px 4px; color:#606060; 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/centre/degree/course) *******/ #head_row_2_hierarchy { display:table-cell; text-align:center; vertical-align:middle; } .TOP_LOGO /* Institution / Centre / 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_ICON { display:inline-block; width:20px; height:20px; vertical-align:middle; margin:-1px 0 1px 0; } /******** Big name of country, institution, centre, 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;} #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;} /******************* 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%); } .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:60px; margin:0; padding:0; border-radius:4px 4px 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:60px; margin:0; padding:0; border-radius:4px 4px 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; line-height:100%; max-width:30px; white-space:nowrap; overflow:hidden; margin:0 auto; 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:60px; margin:0; padding:0; border-radius:4px 4px 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:60px; margin:0; padding:0; border-radius:4px 4px 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; line-height:100%; max-width:50px; white-space:nowrap; overflow:hidden; margin:0 auto; 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:98px; height:60px; margin:0; padding:0; border-radius:4px 4px 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:98px; height:60px; margin:0; padding:0; border-radius:4px 4px 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; line-height:100%; max-width:90px; white-space:nowrap; overflow:hidden; margin:0 auto; 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_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_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_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_ICO { height:32px; vertical-align:middle; margin-top:2px; padding:2px 0; } /*********************** 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:-6px 0 0 0; padding:4px 0; border-radius:4px; box-shadow:inset 0 -1px 1px 0 rgba(50,50,50,0.2); text-align:center; vertical-align:top; 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:-6px 0 0 0; padding:4px 0; border-radius:4px; box-shadow:inset 0 -1px 1px 0 rgba(50,50,50,0.2); text-align:center; vertical-align:top; 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.67; } #main_horizontal .MENU_OPT_OFF:hover, #main_horizontal .MENU_OPT_ON { opacity:1; transform:scale(1.286,1.286); } #main_horizontal .MENU_ICO { box-sizing:border-box; padding:28px 0 0 0; background-size:auto 28px; 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.67; } #main_vertical .MENU_OPT_OFF:hover, #main_vertical .MENU_OPT_ON { opacity:1; transform:scale(1.286,1.286); } #main_vertical .MENU_ICO { box-sizing:border-box; padding:28px 0 0 0; background-size:auto 28px; 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.67; } #main_vertical .MENU_OPT_OFF:hover, #main_vertical .MENU_OPT_ON { opacity:1; } #main_vertical .MENU_ICO { display:table-cell; box-sizing:border-box; height:44px; vertical-align:middle; padding:2px 2px 2px 46px; background-size:32px 32px; 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; } } /********************************* Menu fonts ********************************/ @media only screen and (max-width: 800px) { /* For mobile-phones */ .MENU_TEXT { font-size:12pt; font-weight:bold; line-height:110%; white-space:nowrap; overflow:hidden; width:30px; margin:0 auto; } } @media only screen and (min-width: 800px) { /* For tablets and desktop */ .MENU_TEXT { font-size:12pt; font-weight:bold; line-height:110%; margin:0 auto; } } .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;} /****************** Title of current action in main block ********************/ .TITLE_ACTION_WHITE {color:#606060; font-size:20pt;} .TITLE_ACTION_GREY {color:#606060; font-size:20pt;} .TITLE_ACTION_PURPLE {color:#573c4d; font-size:20pt;} .TITLE_ACTION_BLUE {color:#4D88A1; font-size:20pt;} .TITLE_ACTION_YELLOW {color:#7c4d2a; font-size:20pt;} .TITLE_ACTION_PINK {color:#63474e; font-size:20pt;} .SUBTITLE_ACTION_WHITE {color:#606060; font-size:12pt;} .SUBTITLE_ACTION_GREY {color:#606060; font-size:12pt;} .SUBTITLE_ACTION_PURPLE {color:#573c4d; font-size:12pt;} .SUBTITLE_ACTION_BLUE {color:#4D88A1; font-size:12pt;} .SUBTITLE_ACTION_YELLOW {color:#7c4d2a; font-size:12pt;} .SUBTITLE_ACTION_PINK {color:#63474e; font-size:12pt;} /***************************** 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:4px; 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:4px; 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; } /*********************************** Places **********************************/ .PLC_SEL { width:60px; } /*********************************** 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:4px; 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:4px; 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:4px; 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; text-decoration:underline; } /********************************** 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.8) 0%,rgba(248,237,149,0.8) 15%,rgba(250,240,152,0.8) 100%); /* Safari */ background-image:linear-gradient(rgba(238,216,108,0.8) 0%,rgba(248,237,149,0.8) 15%,rgba(250,240,152,0.8) 100%); box-shadow:0 8px 10px -5px rgba(125,113,0,0.8); 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.4) 0%,rgba(248,237,149,0.4) 15%,rgba(250,240,152,0.4) 100%); /* Safari */ background-image:linear-gradient(rgba(238,216,108,0.4) 0%,rgba(248,237,149,0.4) 15%,rgba(250,240,152,0.4) 100%); box-shadow:0 8px 10px -5px rgba(125,113,0,0.4); 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:4px; 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; background-color:#fff8e5; 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_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; color:#632921; text-align:left; overflow:hidden; } /*********************************** 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; } /********************************** 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; background-color:white; 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_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:4px; 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 { color:#606060; font-size:22pt; } .FRAME_TITLE_SMALL { color:#808080; font-size:18pt; } /* 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, centre, 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; } .COUNTRY_MAP_SHOW, .COUNTRY_MAP_PRINT { box-sizing:border-box; width:320px; height:320px; margin:10px; } /******************* Web of institution, centre, 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; } /****************************** Photo of centre ******************************/ .CENTRE_PHOTO_SHOW { box-sizing:border-box; width:460px; padding:2px; margin:9px auto; border:solid 1px #EEE; } a:hover img.CENTRE_PHOTO_SHOW { border:solid 1px #CCC; box-shadow:1px 1px 6px #999; } .CENTRE_PHOTO_PRINT { box-sizing:border-box; width:460px; padding:2px; margin:9px auto; border:solid 1px #EEE; box-shadow:1px 1px 6px #999; } #ctr_mapid, #ins_mapid, #cty_mapid { width:460px; height:345px; margin:9px auto; } /**************** Attribution (author and license) of images *****************/ #AttributionArea { box-sizing:border-box; width:460px; } .ATTRIBUTION { box-sizing:border-box; margin-bottom:15px; color:#A0A0A0; font-size:8pt; text-align:center; } /******************************* User's photo ********************************/ .PHOTO12x16 {width: 12px; height: 16px; border-radius:1px; vertical-align:middle; margin-top:-2px;} .PHOTO15x20 {width: 15px; height: 20px; border-radius:2px; vertical-align:middle;} .PHOTO15x20B {width: 15px; height: 20px; border-radius:2px; vertical-align:middle; display:block; margin:0 auto;} .PHOTO18x24 {width: 18px; height: 24px; border-radius:2px; vertical-align:middle;} .PHOTO21x28 {width: 21px; height: 28px; border-radius:2px; vertical-align:middle;} .PHOTO30x40 {width: 30px; height: 40px; border-radius:2px; vertical-align:middle;} .PHOTO42x56 {width: 42px; height: 56px; border-radius:3px; vertical-align:middle;} .PHOTO45x60 {width: 45px; height: 60px; border-radius:3px; vertical-align:middle;} .PHOTO60x80 {width: 60px; height: 80px; border-radius:3px; vertical-align:middle;} .PHOTO186x248 {width:186px; height:248px; border-radius:8px; vertical-align:middle;} .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:6px; 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;} /*********************** 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;} /* 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;} .BOLD {font-weight:bold;} .NOWRAP {white-space:nowrap;} /****************************** 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 {background-color:#F4F2EA;} .COLOR1 {background-color:#FBFAF7;} .LIGHT_GREEN {background-color:#C0FF40;} .LIGHT_BLUE {background-color:#DDECF1;} .VERY_LIGHT_BLUE {background-color:#EAF3F6;} /********************************* 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;} .LICENSE {max-width:260px;} /************** 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 {color:#606060; font-size:13pt;} .DAT_NOBR {color:#606060; font-size:13pt; white-space:nowrap;} .DAT_BOLD {color:#606060; font-size:13pt; font-weight:bold;} .DAT_GREEN {color:darkgreen; font-size:13pt;} .DAT_RED {color:darkred; font-size:13pt;} .DAT_LIGHT {color:#A0A0A0; font-size:13pt;} .DAT_N {color:black; font-size:13pt;} .DAT_NOBR_N {color:black; font-size:13pt; white-space:nowrap;} .DAT_N_BOLD {color:black; font-size:13pt; font-weight:bold;} /*********************** Line in top part of a table row *********************/ .DAT_N_LINE_TOP { color:black; font-size:13pt; border-style:solid none none none; border-width:1px; } .DAT_SMALL {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#606060; 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:#606060; 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_PURPLE {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#707070; 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;} .DAT_SMALL_PINK {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#707070; 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:#606060; font-family:Georgia,"DejaVu LGC Serif","Bitstream Vera Serif",serif; font-size:13pt; } .CLASSPHOTO { color:#606060; 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:red; 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:red; font-size:11pt; white-space:nowrap;} .STATUS_GREEN {color:#008000; font-size:12pt;} .STATUS_GREEN_LIGHT {color:#89BE87; font-size:12pt;} .STATUS_RED {color:red; 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;} /******************************** 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_TXT {color:#202020; font-size:12pt;} .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_EXA {color:#202020; font-size:12pt;} .TEST_EXA_LIGHT {color:#a0a0a0; font-size:12pt;} .TEST_EDI {color:#202020; font-size:12pt;} .TEST_EDI_LIGHT {color:#a0a0a0; font-size:12pt;} .TEST_TAG_LIST { padding:0; margin:0 0 0 1em; } .TEST_MED_SHOW_CONT { box-sizing:border-box; width:100%; margin:10px 0; } .TEST_MED_SHOW { box-sizing:border-box; width:100%; border-radius:4px; } .TEST_MED_EDIT_LIST_CONT { box-sizing:border-box; width:100%; 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:4px; } .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; } /********************************** Matches **********************************/ .MCH_CONT { box-sizing:border-box; display:table; margin:2%; width:96%; } .MCH_LEFT { box-sizing:border-box; float:left; width:25%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .MCH_RIGHT { box-sizing:border-box; display:table; float:left; width:75%; } .MCH_TOP { box-sizing:border-box; width:100%; height:48px; color:#808080; font-size:14pt; font-weight:bold; text-align:center; text-overflow:ellipsis; } .MCH_BOTTOM { box-sizing:border-box; width:100%; padding:0 12px; } .MCH_REFRESHABLE_TEACHER { box-sizing:border-box; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .MCH_NUM_QST { color:#808080; font-size:28pt; font-weight:bold; text-align:center; vertical-align:top; } .MCH_TIME_QST { color:#808080; 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:#808080; 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:28pt; 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:12pt; } .MCH_TCH_ANS { color:#202020; font-size:24pt; } .MCH_WAIT_CONT { box-sizing:border-box; text-align:center; } .MCH_WAIT_IMG { box-sizing:border-box; width:25%; } .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:8px; padding:8px; border-radius:4px; 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_STD_CELL { text-align:center; vertical-align:middle; } .MCH_STD_BUTTON { box-sizing:border-box; width:100%; margin:10px auto; padding:20px; border-radius:4px; 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 2s linear 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:#606060; font-size:16pt; text-align:left; vertical-align:top; } .MCH_RES_TR { height:24px; } .MCH_RES_CORRECT { width:1%; background:green; } .MCH_RES_WRONG { width:1%; background:red; } .MCH_RES_VOID { width:1%; background:white; } .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; } .TT_CELL { box-sizing:border-box; max-width:80px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 auto; } .TT_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; } .TT_DAY { font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#202020; font-size:10pt; letter-spacing:0; } .TT_SUNDAY { font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:red; font-size:10pt; letter-spacing:0; } .TT_HOUR_BIG { color:#808080; font-size:10pt; font-weight:bold; line-height:100%; letter-spacing:0; } .TT_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; } .TT_HOURCOL {box-sizing:border-box; height:16px; width:7%;} .TT_HOUR {box-sizing:border-box; height:32px; width:7%;} .TT_MINICOL {box-sizing:border-box; height:16px; width:2%;} .TT_ALIGN {box-sizing:border-box; height:16px; width:1%;} .TT_FREE0 {box-sizing:border-box; height:16px; background-color:#F4F2EA; border:solid 1px; border-color:#F4F2EA #E0D9C2 #EEEADC #F4F2EA;} .TT_FREE1 {box-sizing:border-box; height:16px; background-color:#F4F2EA; border:solid 1px; border-color:#F4F2EA #E0D9C2 #E0D9C2 #F4F2EA;} .TT_FREE2 {box-sizing:border-box; height:16px; background-color:#FBFAF7; border:solid 1px; border-color:#FBFAF7 #E0D9C2 #F5F2E9 #FBFAF7;} .TT_FREE3 {box-sizing:border-box; height:16px; background-color:#FBFAF7; border:solid 1px; border-color:#FBFAF7 #E0D9C2 #E0D9C2 #FBFAF7;} .TT_LECT {box-sizing:border-box; height:16px; background-color:#C0DAE4; border:solid 2px; border-color:#D5F1FC #AAC1C9 #AAC1C9 #D5F1FC;} .TT_PRAC {box-sizing:border-box; height:16px; background-color:#DBE5E9; border:solid 2px; border-color:#EDF8FC #C7D0D4 #C7D0D4 #EDF8FC;} .TT_TUTO {box-sizing:border-box; height:16px; background-color:#D6E9C3; border:solid 2px; border-color:#E8FCD3 #C2D4B1 #C2D4B1 #E8FCD3;} .TT_TYP, .TT_DUR, .TT_GRP, .TT_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; border-color:#C0DAE4; background-color:#DDECF1; } /************************************* Log ***********************************/ .LOG { font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; font-size:11pt; color:#606060; } .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 */ .EXA_ANN_VISIBLE { box-sizing:border-box; width:100%; padding:25px 25px 125px 25px; } .EXA_ANN_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_posts_container,#view_old_posts_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; } .TL_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) */ .TL_WIDTH {width:316px;} /* 556-240 */ .TL_RIGHT_WIDTH {width:260px;} /* 500-240 */ .TL_RIGHT_AUTHOR_WIDTH {width:100px;} /* 340-240 */ .TL_COMM_WIDTH {width:220px;} /* 460-240 */ .TL_COMM_AUTHOR_WIDTH {width: 60px;} /* 300-240 */ .TL_MED_INPUT_WIDTH {width:160px;} /* 400-240 */ .TL_NOTE_FOOT_WIDTH {width:260px;} /* 500-240 */ .TL_COMM_FOOT_WIDTH {width:220px;} /* 460-240 */ .TL_FAV_NOT_WIDTH {width:120px;} /* (480-240)/2 */ .TL_SHA_NOT_WIDTH {width:120px;} /* (480-240)/2 */ .TL_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) */ .TL_WIDTH {width:556px;} .TL_RIGHT_WIDTH {width:500px;} .TL_RIGHT_AUTHOR_WIDTH {width:340px;} .TL_COMM_WIDTH {width:460px;} .TL_COMM_AUTHOR_WIDTH {width:300px;} .TL_MED_INPUT_WIDTH {width:400px;} .TL_FAV_NOT_WIDTH {width:240px;} .TL_SHA_NOT_WIDTH {width:240px;} .TL_FAV_COM_WIDTH {width:440px;} } .TL_NEW_PUB { background-color:#ddecf1; animation:fadein 2s linear forwards; } @keyframes fadein { to {background-color:white;} } .TL_FORM_NEW_PST { padding:10px 0; text-align:center; } .TL_SEP /* Separator (upper line between publications) */ { border-top:1px solid silver; } .TL_TOP_CONT { box-sizing:border-box; padding-top:10px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .TL_TOP_PUBLISHER { color:#808080; font-size:13pt; } .TL_LEFT_PHOTO { display:inline-block; box-sizing:border-box; width:56px; height:76px; padding:10px 0; text-align:left; vertical-align:top; } .TL_RIGHT_CONT { display:inline-block; box-sizing:border-box; padding-top:10px; } .TL_RIGHT_AUTHOR { display:inline-block; box-sizing:border-box; text-align:left; vertical-align:top; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .TL_RIGHT_TIME { display:inline-block; box-sizing:border-box; width:160px; text-align:right; vertical-align:top; } .TL_PST_TEXTAREA { box-sizing:border-box; margin:0; resize:none; } .TL_PST_MED_CONT { box-sizing:border-box; margin-top:10px; } .TL_PST_MED { box-sizing:border-box; border-radius:4px; } .TL_COM_CONT { display:inline-block; box-sizing:border-box; padding-top:10px; } .TL_COM_AUTHOR { display:inline-block; box-sizing:border-box; text-align:left; vertical-align:top; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .TL_COM_MED_CONT { box-sizing:border-box; margin-top:10px; } .TL_COM_MED { box-sizing:border-box; border-radius:4px; } .TL_FORM_NEW_COM { display:inline-block; margin-left:56px; border-top:1px solid silver; padding-bottom:10px; text-align:center; } .TL_COM_TEXTAREA { box-sizing:border-box; margin:0; resize:none; } .TL_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; } .TL_BOTTOM_RIGHT /* Container for fav, share, remove and comments */ { display:inline-block; box-sizing:border-box; vertical-align:top; } .TL_FORM { padding-top:8px; overflow:hidden; text-overflow:ellipsis; } .TL_FORM_OFF, .TL_LOC { padding-top:8px; color:#808080; font-size:13pt; overflow:hidden; text-overflow:ellipsis; } .TL_TXT { padding-top:5px; color:#202020; font-size:13pt; line-height:1.4; overflow:hidden; text-overflow:ellipsis; } .TL_EXPAND_COM { text-align:center; padding:10px 0; } .TL_ICO_COM_OFF { display:inline-block; box-sizing:border-box; padding:6px; text-align:center; vertical-align:middle; border:solid 1px; border-color:transparent; } .TL_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; } .TL_FOOT /* Container for favs, shares and remove */ { display:table; vertical-align:top; padding:7px 0; } .TL_FAV_NOT, .TL_SHA_NOT { display:table-cell; text-align:left; vertical-align:top; } .TL_FAV_COM { display:table-cell; text-align:left; vertical-align:top; } .TL_REM { display:table-cell; width:20px; text-align:right; vertical-align:bottom; } .TL_ICO { display:table-cell; } .TL_NUM_USRS { display:table-cell; color:#A0A0A0; font-size:12pt; font-weight:bold; } .TL_USRS { display:table-cell; } .TL_ICO_DISABLED { opacity:0.1; } .TL_SHARER { display:inline-block; padding-left:4px; vertical-align:bottom; } .TL_COM { border-top:1px solid silver; } .TL_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:4px; } .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:4px; } .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:4px; 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:4px; 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, centre, 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_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 ***********/ .HIDDEN { visibility:hidden; }