/* 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-2015 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; } input { font-size:12pt; vertical-align:middle; } select { font-size:12pt; } textarea { font-size:12pt; } 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-size:12pt; font-weight:bold; } table td { box-sizing:border-box; padding:0; } img { border-width:0; border-style:none; } form { display:inline; margin:0; } hr.WHITE_SEPARA {height:0; border-top:0; border-bottom:#707070 dotted 1px;} hr.GREY_SEPARA {height:0; border-top:0; border-bottom:#707070 dotted 1px;} hr.BLUE_SEPARA {height:0; border-top:0; border-bottom:#4D88A1 dotted 1px;} hr.YELLOW_SEPARA {height:0; border-top:0; border-bottom:#BD4815 dotted 1px;} /*********************** Text decoration of links ****************************/ a:link {text-decoration:none;} a:visited {text-decoration:none;} a:active {text-decoration:none;} a:hover {text-decoration:underline;} .MENU_LIST_ITEM a:hover {text-decoration:none;} /****************** Layout (the whole page with a background) ****************/ #whole_page { display:table; box-sizing:border-box; width:100%; } .WHOLE_PAGE_WHITE { background-image:linear-gradient(black 0,black 40px,#cfcfce 40px,white 80px,white 100%); background-repeat:no-repeat; } .WHOLE_PAGE_GREY { background-image:linear-gradient(#383838 0,#404040 26px,#404040 184px,white 184px,white 100%); background-repeat:no-repeat; } .WHOLE_PAGE_BLUE { background-image:linear-gradient(#5fa5df 0,#4f90c8 26px,#4f90c8 184px,white 184px,white 100%); background-repeat:no-repeat; } .WHOLE_PAGE_YELLOW { background-image:linear-gradient(#201420 0,#201420 184px,white 184px,white 100%); background-repeat:no-repeat; } /************************* 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:linear-gradient(#383838 0,#383838 26px,#404040 100%); background-repeat:no-repeat; } .HEAD_ROW_1_BLUE { background-image:linear-gradient(#5fa5df 0,#4f90c8 26px,#4f90c8 100%); background-repeat:no-repeat; } .HEAD_ROW_1_YELLOW { background-color:#201420; } #head_row_1_left { display:table-cell; text-align:left; vertical-align:middle; } @media only screen and (max-width: 899px) { /* For mobile-phones */ #head_row_1_logo_small { display:inline-block; } #head_row_1_logo_big { display:none; } } @media only screen and (min-width: 900px) { /* For tablets and desktop */ #head_row_1_logo_small { display:none; } #head_row_1_logo_big { display:inline-block; } } #head_row_1_search { display:inline-block; padding:0 20px; } @media only screen and (max-width: 1279px) { /* For mobile phones and tablets */ #head_search_text { display:none; } } #head_row_1_right { display:table-cell; text-align:right; vertical-align:middle; } #login_box { padding:0 20px; } @media only screen and (max-width: 1279px) { /* For mobile phones and tablets */ #login_txt { display:none; } } .WHITE_HEAD {color:#E0E0E0; font-size:12pt; white-space:nowrap;} .GREY_HEAD {color:#E0E0E0; font-size:12pt; white-space:nowrap;} .BLUE_HEAD {color:white; font-size:12pt; white-space:nowrap;} .YELLOW_HEAD {color:#B3B0B3; font-size:12pt; white-space:nowrap;} /************************ Layout (second heading row) ************************/ #head_row_2 { display:table; box-sizing:border-box; width:100%; height:80px; vertical-align:top; } /******************************* Current time ********************************/ #head_row_2_time { display:table-cell; box-sizing:border-box; width:160px; text-align:center; vertical-align:top; } .WHITE_CUR_TIME {color:#808080; font-size:14pt; font-weight:bold;} .GREY_CUR_TIME {color:#E0E0E0; font-size:14pt; font-weight:bold;} .BLUE_CUR_TIME {color:#BAD2DA; font-size:14pt; font-weight:bold;} .YELLOW_CUR_TIME {color:#B3B0B3; font-size:14pt; font-weight:bold;} @media only screen and (max-width: 1023px) { /* For mobile phones */ #head_row_2_time { display:none; } } @media only screen and (min-width: 1024px) and (max-width: 1279px) { /* For tablets */ #current_date { display:none; } } /****** Breadcrumb (platform/country/institution/centre/degree/course) *******/ #head_row_2_hierarchy { display:table-cell; text-align:center; vertical-align:top; padding-top:6px; } .TOP_LOGO /* Institution / Centre / Degree logo in top title */ { margin-right:10px; text-align:left; vertical-align:top !important; } @media only screen and (max-width: 899px) { /* For mobile-phones */ #breadcrumb { font-size:9pt; font-weight:bold; white-space:nowrap; } } @media only screen and (min-width: 900px) and (max-width: 1023px) { /* For tablets */ #breadcrumb { font-size:12pt; font-weight:bold; white-space:nowrap; } } @media only screen and (min-width: 1024px) { /* For desktop */ #breadcrumb { font-size:14pt; font-weight:bold; white-space:nowrap; } } .BREADCRUMB_WHITE {color:#707070;} .BREADCRUMB_GREY {color:#FFB42E;} .BREADCRUMB_BLUE {color:#FFE880;} .BREADCRUMB_YELLOW {color:#FFC040;} /******** Big name of country, institution, centre, degree or course *********/ #big_name h1,#big_name abbr { margin:0; padding:0; font-size:25pt; font-weight:normal; white-space:nowrap; } @media only screen and (max-width: 1023px) { /* For mobile-phones */ #big_short_name { } #big_full_name { display:none; } } @media only screen and (min-width: 1024px) { /* For tablets and desktop */ #big_short_name { display:none; } #big_full_name { } } .WHITE_COURSE {color:#4D88A1;} .GREY_COURSE {font-family:Georgia,"DejaVu LGC Serif","Bitstream Vera Serif",serif; color:#F7F6F5;} .BLUE_COURSE {font-family:Georgia,"DejaVu LGC Serif","Bitstream Vera Serif",serif; color:white;} .YELLOW_COURSE {font-family:Georgia,"DejaVu LGC Serif","Bitstream Vera Serif",serif; color:white;} /***************************** 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: 1023px) { /* For mobile phones */ #msg { display:none; } } @media only screen and (min-width: 1024px) and (max-width: 1279px) { /* For tablets */ #notif_all { display:none; } } .WHITE_NOTIF {color:#707070; font-size:12pt; white-space:nowrap;} .GREY_NOTIF {color:#E0E0E0; font-size:12pt; white-space:nowrap;} .BLUE_NOTIF {color:white; font-size:12pt; white-space:nowrap;} .YELLOW_NOTIF {color:#B3B0B3; font-size:12pt; white-space:nowrap;} /******************* Layout (third heading row with tabs) ********************/ @media only screen and (max-width: 899px) { /* For mobile-phones */ #head_row_3 { display:table; box-sizing:border-box; width:492px; /* 82 px * 6 visible tabs */ height:70px; margin:0 auto; border-spacing:1px; } .TAB_OFF { display:table-cell; box-sizing:border-box; width:80px; height:68px; margin:0; padding:0; border-radius:6px 6px 0 0; box-shadow:inset -2px -2px 1px 0 rgba(50,50,50,0.2); text-align:center; vertical-align:middle; overflow:hidden; } .TAB_ON { display:table-cell; box-sizing:border-box; width:80px; height:68px; margin:0; padding:0; border-radius:6px 6px 0 0; box-shadow:inset -2px -2px 1px 0 rgba(50,50,50,0.2); text-align:center; vertical-align:middle; overflow:hidden; } .TAB_TXT { display:none; } } @media only screen and (min-width: 900px) { /* For tablets and desktop */ #head_row_3 { display:table; box-sizing:border-box; width:660px; /* 110 px * 6 visible tabs */ height:70px; margin:0 auto; border-spacing:1px; } .TAB_OFF { display:table-cell; box-sizing:border-box; width:108px; height:68px; margin:0; padding:0; border-radius:6px 6px 0 0; box-shadow:inset -2px -2px 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:68px; margin:0; padding:0; border-radius:6px 6px 0 0; box-shadow:inset -2px -2px 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%; white-space:nowrap; overflow:hidden; } } .TAB_OFF a:hover, .TAB_ON a:hover { text-decoration:none; } .TAB_ON_WHITE {background-color:#F7F6F5;} .TAB_ON_GREY {background-color:#F7F6F5;} .TAB_ON_BLUE {background-color:#E8F3F6;} .TAB_ON_YELLOW {background-color:#FFF2BD;} .TAB_OFF_WHITE {background-color:#D4D4D4;} .TAB_OFF_GREY {background-color:#D4D4D4;} .TAB_OFF_BLUE {background-color:#CAE1E8;} .TAB_OFF_YELLOW {background-color:#FADE94;} .WHITE_TAB_OFF {color:#707070;} .GREY_TAB_OFF {color:#505050;} .BLUE_TAB_OFF {color:#365E6E;} .YELLOW_TAB_OFF {color:#7C4D2A;} .WHITE_TAB_ON {color:#4D88A1;} .GREY_TAB_ON {color:#606060;} .BLUE_TAB_ON {color:#4D88A1;} .YELLOW_TAB_ON {color:#BD4815;} /*********************** Layout (fourth row, main zone) **********************/ #main_zone { display:table; box-sizing:border-box; width:100%; } .LEFT_RIGHT_CELL { padding:3px 6px; text-align:center; vertical-align:top; } .LEFT_RIGHT_CONTENT_WIDTH { box-sizing:border-box; width:148px; } @media only screen and (max-width: 1279px) { /* 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: 1023px) { /* For mobile-phones */ #main_zone_central_container { box-sizing:border-box; margin:-8px 0 0 0; padding:8px 0; border-radius:6px; box-shadow:inset -2px -2px 1px 0 rgba(50,50,50,0.2); text-align:center; vertical-align:top; position:relative; } } @media only screen and (min-width: 1024px) { /* For tablets and desktop */ #main_zone_central_container { box-sizing:border-box; min-width:900px; min-height:900px; margin:-8px 0 0 0; padding:8px 0; border-radius:6px; box-shadow:inset -2px -2px 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 { width:100%; } #main_horizontal ul { 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:120px; 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.2,1.2); } #main_horizontal .MENU_ICON { box-sizing:border-box; padding:32px 0 0 0; background-size:32px 32px; 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:8px 16px; margin:0 auto; text-align:left; vertical-align:top; } /************** Main central zone with vertical menu and canvas **************/ @media only screen and (max-width: 1023px) { /* 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 { width:100%; } #main_vertical ul { 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:120px; 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.2,1.2); } #main_vertical .MENU_ICON { box-sizing:border-box; padding:32px 0 0 0; background-size:32px 32px; 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:8px 16px; 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 { display:table-cell; box-sizing:border-box; width:180px; } #main_vertical ul { 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_ICON { display:table-cell; height:42px; vertical-align:middle; padding:2px 2px 2px 50px; background-size:40px 40px; background-repeat:no-repeat; background-position:2px 2px; } #main_vertical .MAIN_ZONE_CANVAS /* Where content for each action is written */ { display:table-cell; box-sizing:border-box; padding:8px 16px; margin:0 auto; text-align:left; vertical-align:top; } #action_title { box-sizing:border-box; width:400px; min-height:70px; clear:both; margin:0 auto; text-align:left; background-size:64px 64px; background-position:0 0; background-repeat:no-repeat; padding:4px 12px 12px 70px; overflow:hidden; } } /********************************* Menu fonts ********************************/ @media only screen and (max-width: 899px) { /* For mobile-phones */ .MENU_TEXT { display:none; } } @media only screen and (min-width: 900px) { /* For tablets and desktop */ .MENU_TEXT { font-size:12pt; font-weight:bold; line-height:110%; } } .WHITE_MENU_OFF {color:#4D88A1;} .GREY_MENU_OFF {color:#707070;} .BLUE_MENU_OFF {color:#4D88A1;} .YELLOW_MENU_OFF {color:#BD4815;} .WHITE_MENU_ON {color:#4D88A1;} .GREY_MENU_ON {color:#606060;} .BLUE_MENU_ON {color:#4D88A1;} .YELLOW_MENU_ON {color:#BD4815;} /****************** Title of current action in main block ********************/ .WHITE_TITLE_ACTION {color:#606060; font-size:20pt;} .GREY_TITLE_ACTION {color:#606060; font-size:20pt;} .BLUE_TITLE_ACTION {color:#4D88A1; font-size:20pt;} .YELLOW_TITLE_ACTION {color:#BD4815; font-size:20pt;} .WHITE_SUBTITLE_ACTION {color:#606060; font-size:12pt;} .GREY_SUBTITLE_ACTION {color:#606060; font-size:12pt;} .BLUE_SUBTITLE_ACTION {color:#4D88A1; font-size:12pt;} .YELLOW_SUBTITLE_ACTION {color:#BD4815; font-size:12pt;} /************************* Users connected globally **************************/ .CONNECTED { box-sizing:border-box; margin:0 auto; border-style:solid; border-width:1px; border-color:#80C040; padding:5px; border-radius:4px; font-size:12pt; color:#398000; overflow:hidden; } /*************************** Most frequent actions ***************************/ #MFU_actions { box-sizing:border-box; width:148px; margin:0; border-style:solid; border-width:1px; border-color:#8CBCCE; padding:5px; border-radius:4px; font-size:11pt; color:#4D88A1; overflow:hidden; } .MFU_ACT { color:#4D88A1; font-size:11pt; } /*********************************** Month ***********************************/ .MONTH_CONTAINER { box-sizing:border-box; width:148px; margin:0; padding:5px; 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; } .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:1px solid #518741; } .BT_CONFIRM { background-color:#55ACEE; border:1px solid #3B88C3; } .BT_REMOVE { background-color:#EF5555; border:1px solid #C33B3B; } .BT_SUBMIT { color:white; font-size:20px; font-weight:bold; line-height:normal; margin:8px auto; padding:10px 20px; border-radius:4px; box-shadow:0 1px 0 rgba(255,255,255,0.15) inset; } .BT_SUBMIT_INLINE { box-sizing:border-box; min-width:180px; color:white; font-size:15px; font-weight:bold; line-height:normal; margin:0 5px; padding:5px 10px; border-radius:4px; box-shadow:0 1px 0 rgba(255,255,255,0.15) inset; } .BT_SUBMIT:hover { background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2)); } .BT_SUBMIT_INLINE:hover { background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2)); } /********************************** Notice ***********************************/ .NOTICE_CONTAINER_ACTIVE { box-sizing:border-box; margin:10px auto; padding:10px; 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_CONTAINER_OBSOLETE { box-sizing:border-box; margin:10px auto; padding:10px; 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_DATE_ACTIVE { display:inline-block; float:right; font-size:12pt; color:#404040; text-align:right; overflow:hidden; } .NOTICE_DATE_OBSOLETE { display:inline-block; 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:#404040; 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_ACTIVE { color:#404040; font-size:12pt; text-align:right; overflow:hidden; } .NOTICE_AUTHOR_OBSOLETE { color:#808080; font-size:12pt; text-align:right; overflow:hidden; } /**************************** Institutional links ****************************/ #institutional_links { box-sizing:border-box; width:148px; margin:0; border-style:solid; border-width:1px; border-color:#8CBCCE; padding:5px; border-radius:4px; font-size:11pt; color:#4D88A1; overflow:hidden; } .INS_LNK { padding:1px; font-size:11pt; color:#4D88A1; } /*********************************** Alerts **********************************/ .ALERT { display:inline-block; box-sizing:border-box; max-width:90%; margin:8px auto 0 auto; background-color:#FFF9E0; background-repeat:no-repeat; background-position:12px 12px; padding:12px 12px 12px 45px; border-radius:4px; box-shadow:1px 1px 3px #CCC7B4; font-size:12pt; color:#632921; text-align:justify; overflow:hidden; } /*********************************** Icons ***********************************/ .ICON16x16 {width:20px; height:20px; vertical-align:middle;} .ICON16x12B {width:20px; height:15px; vertical-align:middle; display:block;} .ICON16x16B {width:20px; height:20px; vertical-align:middle; display:block;} .ICON20x20 {width:25px; height:25px; vertical-align:middle;} .ICON28x28 {width:32px; height:32px; vertical-align:middle;} .ICON32x32 {width:40px; height:40px; vertical-align:middle;} .ICON32x32B {width:40px; height:40px; vertical-align:middle; display:block;} .ICON48x48 {width:60px; height:60px; vertical-align:middle;} .ICON64x64 {width:80px; height:80px; vertical-align:middle;} .ICON128x128 {width:160px; height:160px; vertical-align:middle;} .ICON8x800 {width:10px; height:1000px;} .BANNER {width:150px; height:50px;} .BANNER_SMALL {width:75px; height:25px;} /****** Contextual links with small icons and text to go to some action ******/ .CONTEXT_MENU { margin:6px 0 8px 0; text-align:center; } .CONTEXT_OPT { display:inline; margin-left:6px; margin-right:6px; } /********************************* Frame 10 **********************************/ .FRAME10 { display:inline-block; box-sizing:border-box; margin:5px 0; padding:12px; background-color:white; border-radius:4px; box-shadow:1px 1px 2px #CCC; text-align:center; overflow:hidden; } .FRAME10_SHADOW { display:inline-block; box-sizing:border-box; margin:5px 0 18px 0; padding:12px; 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; text-align:center; overflow:hidden; } .TABLE10 { box-sizing:border-box; width:100%; } .TIT_TBL_10 { box-sizing:border-box; margin:12px; color:#808080; font-size:20pt; font-weight:bold; } .CELLS_PAD_1 th {padding:1px;} .CELLS_PAD_1 td {padding:1px;} .CELLS_PAD_2 th {padding:2px;} .CELLS_PAD_2 td {padding:2px;} .CELLS_PAD_4 th {padding:5px;} .CELLS_PAD_4 td {padding:5px;} .CELLS_PAD_8 th {padding:10px;} .CELLS_PAD_8 td {padding:10px;} /*********************************** 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 { font-size:25pt; font-weight:bold; color:#808080; text-align:center; } /******************************* Map of country ******************************/ .COUNTRY_MAP_TITLE { box-sizing:border-box; width:40px; height:40px; margin-right:10px; vertical-align:top; } .COUNTRY_MAP_TINY { box-sizing:border-box; width:20px; height:20px; vertical-align:middle; } .COUNTRY_MAP_SMALL { box-sizing:border-box; width:64px; height:64px; vertical-align:middle; } .COUNTRY_MAP_SHOW { box-sizing:border-box; width:320px; height:320px; margin:10px; } .COUNTRY_MAP_PRINT { box-sizing:border-box; width:625px; height:625px; margin:12px; } /****************************** Photo of centre ******************************/ .CENTRE_PHOTO_SHOW { box-sizing:border-box; width:480px; height:320px; padding:6px; margin:10px; 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:720px; height:480px; padding:15px; margin:18px; border:solid 1px #EEE; box-shadow:1px 1px 6px #999; } /**************** Attribution (author and license) of images *****************/ .ATTRIBUTION { box-sizing:border-box; max-width:500px; color:#A0A0A0; font-size:8pt; text-align:center; } /******************************* User's photo ********************************/ .PHOTO12x16 {width: 15px; height: 20px; vertical-align:middle; border-radius:2px;} .PHOTO12x16B {width: 15px; height: 20px; vertical-align:middle; border-radius:2px; display:block; margin:0 auto;} .PHOTO15x20 {width: 18px; height: 25px; vertical-align:middle; border-radius:2px;} .PHOTO18x24 {width: 21px; height: 28px; vertical-align:middle; border-radius:2px;} .PHOTO24x32 {width: 30px; height: 40px; vertical-align:middle; border-radius:2px;} .PHOTO36x48 {width: 45px; height: 60px; vertical-align:middle; border-radius:3px;} .PHOTO75x100 {width: 93px; height:124px; vertical-align:middle; border-radius:4px;} .PHOTO150x200 {width:186px; height:248px; vertical-align:middle; border-radius:8px;} .IMG_USR { box-sizing:border-box; width:186px; height:248px; border-radius:4px; } .ZOOM { box-sizing:border-box; position:absolute; z-index:1000; left:-203px; top:-375px; padding:6px; background-color:rgba(255,255,255,0.8); border-width:1px; border-style:solid; border-color:#C0C0C0; border-radius:6px; box-shadow:2px 5px 15px #888; } .ZOOM_TXT { color:#202020; font-size:12pt; } .NO_BR {white-space:nowrap;} .BG_MSG_BLUE { background-image:linear-gradient(#eaf3f6 0,#eaf3f6 80%,white 100%); background-repeat:no-repeat; } .BG_MSG_GREEN { background-image:linear-gradient(#f5ffd7 0,#f5ffd7 80%,white 100%); background-repeat:no-repeat; } /*****************************************************************************/ .WHITE_USR {color:#E0E0E0; font-size:15pt; font-weight:bold; white-space:nowrap;} .GREY_USR {color:#E0E0E0; font-size:15pt; font-weight:bold; white-space:nowrap;} .BLUE_USR {color:white; font-size:15pt; font-weight:bold; white-space:nowrap;} .YELLOW_USR {color:#B3B0B3; font-size:15pt; font-weight:bold; white-space:nowrap;} .WHITE_CONNECTED {color:#398000; font-size:12pt;} .GREY_CONNECTED {color:#398000; font-size:12pt;} .BLUE_CONNECTED {color:#398000; font-size:12pt;} .YELLOW_CONNECTED {color:#398000; font-size:12pt;} .WHITE_TITLE {color:#505050; font-size:18pt;} .GREY_TITLE {color:#505050; font-size:18pt;} .BLUE_TITLE {color:#4D88A1; font-size:18pt;} .YELLOW_TITLE {color:#BD4815; font-size:18pt;} /**************************** Icon highlighting ******************************/ .ICON_HIDDEN { opacity:0.2; } .ICON_HIGHLIGHT { opacity:0.67; } .ICON_HIGHLIGHT:hover { opacity:1; } /********************************* Form fonts ********************************/ .WHITE_FORM {color:#4D88A1; font-size:13pt;} .GREY_FORM {color:#4D88A1; font-size:13pt;} .BLUE_FORM {color:#4D88A1; font-size:13pt;} .YELLOW_FORM {color:#7C4D2A; font-size:13pt;} .WHITE_FORM_NOWRAP {color:#4D88A1; font-size:13pt; white-space:nowrap;} .GREY_FORM_NOWRAP {color:#4D88A1; font-size:13pt; white-space:nowrap;} .BLUE_FORM_NOWRAP {color:#4D88A1; font-size:13pt; white-space:nowrap;} .YELLOW_FORM_NOWRAP {color:#7C4D2A; font-size:13pt; white-space:nowrap;} .WHITE_FORM_BOLD {color:#4D88A1; font-size:13pt; font-weight:bold;} .GREY_FORM_BOLD {color:#4D88A1; font-size:13pt; font-weight:bold;} .BLUE_FORM_BOLD {color:#4D88A1; font-size:13pt; font-weight:bold;} .YELLOW_FORM_BOLD {color:#7C4D2A; font-size:13pt; font-weight:bold;} /****************************** Placing of objects ***************************/ .LEFT_TOP {text-align:left; vertical-align:top;} .LEFT_MIDDLE {text-align:left; vertical-align:middle;} .LEFT_BOTTOM {text-align:left; vertical-align:bottom;} .CENTER_TOP {text-align:center; vertical-align:top;} .CENTER_MIDDLE {text-align:center; vertical-align:middle;} .CENTER_BOTTOM {text-align:center; vertical-align:bottom;} .RIGHT_TOP {text-align:right; vertical-align:top;} .RIGHT_MIDDLE {text-align:right; vertical-align:middle;} .RIGHT_BOTTOM {text-align:right; vertical-align: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:10pt; } /*********************************** Lists ***********************************/ .LIST_LEFT { list-style-type:none; padding:0; margin:0; text-align:left; vertical-align:middle; } .LIST_CENTER { list-style-type:none; padding:0; margin:0 auto; text-align:center; vertical-align:middle; } /*****************************************************************************/ .FILENAME {color:#404040; 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;} .T1 {color:#404040; font-size:15pt;} .T2 {color:#404040; font-size:13pt;} .T3 {color:#404040; font-size:12pt;} .LST {color:#404040; 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 {color:#404040; font-weight:bold; font-size:11pt; height:20px; padding-top:0; padding-bottom:0; margin-top:-1px; margin-bottom:-1px; border-width:1px; border-style:solid; border-color:#ECE9D8;} .LST_EDIT_HID {color:#A0A0A0; font-weight:bold; font-size:11pt; height:20px; padding-top:0; padding-bottom:0; margin-top:-1px; margin-bottom:-1px; border-width:1px; border-style:solid; border-color:#ECE9D8;} .LST_EDIT_REC {color:#008000; font-weight:bold; font-size:11pt; height:20px; padding-top:0; padding-bottom:0; margin-top:-1px; margin-bottom:-1px; border-width:1px; border-style:solid; border-color:#ECE9D8;} .LST_EDIT_REC_HID {color:#89BE87; font-weight:bold; font-size:11pt; height:20px; padding-top:0; padding-bottom:0; margin-top:-1px; margin-bottom:-1px; border-width:1px; border-style:solid; border-color:#ECE9D8;} .USR_ID {color:#404040; font-size:18pt; font-weight:bold;} .DAT {color:#707070; font-size:13pt;} .DAT_GREEN {color:#008000; font-size:13pt;} .DAT_LIGHT {color:#A0A0A0; font-size:13pt;} .DAT_NOBR {color:#707070; font-size:13pt; white-space:nowrap;} .DAT_N {color:#404040; font-size:13pt;} .DAT_NOBR_N {color:#404040; font-size:13pt; white-space:nowrap;} /*********************** Line in top part of a table row *********************/ .DAT_N_LINE_TOP { color:#404040; 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:#707070; 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:#707070; font-size:12pt; white-space:nowrap;} .DAT_SMALL_N {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#404040; font-size:12pt;} .DAT_SMALL_NOBR_N {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#404040; 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:red; font-size:12pt;} .DAT_SMALL_GREEN {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#008000; 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;} .HEAD_REC {font-family:Georgia,"DejaVu LGC Serif","Bitstream Vera Serif",serif; color:#808080; font-size:12pt;} .HEAD_REC_SMALL {font-family:Georgia,"DejaVu LGC Serif","Bitstream Vera Serif",serif; color:#808080; font-size:11pt;} .REC_NAME {color:#808080; font-size:20pt; font-weight:bold;} .REC_NICK {color:#808080; font-size:15pt; font-weight:bold;} .DAT_REC {color:#404040; font-size:11pt; line-height:110%;} .DAT_REC_SMALL {color:#808080; font-size:11pt; line-height:110%;} .DAT_REC_SMALL_BOLD {color:#202020; font-size:11pt; line-height:110%;} .MSJ_AVISO {color:#632921; font-size:12pt;} .TIT_TBL {color:#4D88A1; font-size:12pt; font-weight:bold;} .TIT_CLASSPHOTO {font-family:Georgia,"DejaVu LGC Serif","Bitstream Vera Serif",serif; color:#606060; font-size:13pt;} .CLASSPHOTO {color:#606060; font-size:10pt; line-height:110%; white-space:nowrap;} .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_GRP {color:#4D88A1; font-size:12pt;} .ASG_GRP_LIGHT {color:#AFC4CC; font-size:12pt;} .DATE_GREEN {color:#008000; font-size:13pt;} .DATE_GREEN_LIGHT {color:#89BE87; font-size:13pt;} .DATE_RED {color:red; font-size:13pt;} .DATE_RED_LIGHT {color:#F98A8A; 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;} /********************************** Tests ************************************/ .ANS {color:#404040; font-size:13pt; font-weight:bold;} .ANS_OK {color:#008000; font-size:13pt; font-weight:bold;} .ANS_BAD {color:red; font-size:13pt; font-weight:bold;} .TEST {color:#404040; font-size:12pt;} .TEST_EXA {color:#404040; font-size:12pt;} .TEST_EXA_LIGHT {color:#A0A0A0; font-size:12pt;} .TEST_EDI {color:#404040; font-size:12pt;} .TEST_EDI_LIGHT {color:#A0A0A0; font-size:12pt;} /******************************* Time table **********************************/ #timetable { width:100%; 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:110%; letter-spacing:0; } .TT_DAY { font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#404040; 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; } .FREE0 {height:20px; background-color:#F4F2EA; border:solid 1px; border-color:#F4F2EA #E0D9C2 #EEEADC #F4F2EA;} .FREE1 {height:20px; background-color:#F4F2EA; border:solid 1px; border-color:#F4F2EA #E0D9C2 #E0D9C2 #F4F2EA;} .FREE2 {height:20px; background-color:#FBFAF7; border:solid 1px; border-color:#FBFAF7 #E0D9C2 #F5F2E9 #FBFAF7;} .FREE3 {height:20px; background-color:#FBFAF7; border:solid 1px; border-color:#FBFAF7 #E0D9C2 #E0D9C2 #FBFAF7;} .THEO {height:20px; background-color:#C0DAE4; border:solid 2px; border-color:#C9E3ED #B5CFD9 #B5CFD9 #C9E3ED;} .PRAC {height:20px; background-color:#DBE5E9; border:solid 2px; border-color:#E4EEF2 #D0DADE #D0DADE #E4EEF2;} .TUTO {height:20px; background-color:#D6E9C3; border:solid 2px; border-color:#DFEEE0 #CAE3B1 #CAE3B1 #DFEEE0;} .PREF_OFF { box-sizing:border-box; height:42px; padding:0; text-align:center; vertical-align:middle; } .PREF_ON { box-sizing:border-box; height:42px; padding:0; text-align:center; vertical-align:middle; border:solid 1px; border-color:#C0DAE4; background-color:#DDECF1; } .LOG {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:#606060; font-size:11pt;} .LOG_R {font-family:"Arial Narrow","Nimbus Sans L","DejaVu LGC Sans Condensed",sans-serif; color:red; font-size:11pt;} .MSG_TXT {font-family:"Courier New","DejaVu LGC Sans Mono","Bitstream Vera Sans Mono",monospace; color:#404040; font-size:12pt;} .MSG_TIT {color:#4D88A1; font-size:12pt;} .MSG_TIT_NEW {color:#4D88A1; font-size:12pt; font-weight:bold;} .MSG_TIT_REM {color:#AFC4CC; font-size:12pt;} .MSG_TIT_BG { background-image:linear-gradient(#eaf3f6 0,#eaf3f6 80%,white 100%); background-repeat:no-repeat; color:#4D88A1; font-size:12pt; } .MSG_TIT_BG_NEW { background-image:linear-gradient(#f5ffd7 0,#f5ffd7 80%,white 100%); background-repeat:no-repeat; color:#4D88A1; font-size:12pt; font-weight:bold; } .MSG_TIT_BG_REM { background-image:linear-gradient(#f3fcff 0,#f3fcff 80%,white 100%); background-repeat:no-repeat; color:#AFC4CC; font-size:12pt; } .MSG_AUT {color:#4D88A1; font-size:11pt;} .MSG_AUT_LIGHT {color:#AFC4CC; font-size:11pt;} .MSG_AUT_NEW {color:#4D88A1; font-size:11pt; font-weight:bold;} .MSG_AUT_BG { 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: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: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;} /***************************** Calls for exams *******************************/ .CONV_TIT { font-family:Garamond,"DejaVu LGC Serif","Bitstream Vera Serif",serif; color:#404040; font-weight:bold; font-size:18pt; } .CONV_TIT_IMPR { font-family:Garamond,"DejaVu LGC Serif","Bitstream Vera Serif",serif; color:#202020; font-weight:bold; font-size:18pt; } .CONV_NEG { font-family:Garamond,"DejaVu LGC Serif","Bitstream Vera Serif",serif; color:#404040; font-weight:bold; font-size:13pt; white-space:nowrap; } .CONV_NEG_IMPR { font-family:Garamond,"DejaVu LGC Serif","Bitstream Vera Serif",serif; color:#202020; font-weight:bold; font-size:13pt; white-space:nowrap; text-align:right; } .CONV { font-family:Garamond,"DejaVu LGC Serif","Bitstream Vera Serif",serif; color:#404040; font-size:13pt; } .CONV_IMPR { font-family:Garamond,"DejaVu LGC Serif","Bitstream Vera Serif",serif; color:#202020; font-size:13pt; } /***************************** Public user's profile *************************/ .FOLLOW { color:#C0C0C0; font-size:30pt; font-weight:bold; } .FOLLOW_B { color:#404040; font-size:30pt; font-weight:bold; } .PRF_ICON_CONTAINER { box-sizing:border-box; width:25px; } .PRF_ICON { display:block; box-sizing:border-box; margin:auto; width:20px; height:20px; opacity:0.33; } .PRF_FIG { text-align:left; vertical-align:middle; } .CON {color:#B8D070; font-size:11pt; line-height:110%; white-space:nowrap;} .CON_CRS {color:#398000; font-size:11pt; line-height:110%; white-space:nowrap;} /*************************** 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; } /********************* Used to align buttons in account forms ****************/ .FORM_ACCOUNT { display:inline-block; box-sizing:border-box; min-width:312px; } /********************************** Page foot ********************************/ @media only screen and (max-width: 899px) { /* For mobile-phones */ #foot_zone { display:none; } } @media only screen and (min-width: 900px) { /* For tablets and desktop */ #foot_zone { padding:20px; } } .FOOT { color:#A0A0A0; font-size:12pt; } .FOOT_LIST_CONTAINER { position:relative; float:left; text-align:left; padding-bottom:20px; } .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; }