/* CSS Document */ body {font-family: 'Roboto', sans-serif; font-weight:normal; font-size:16px; margin:0; border:0; padding:0; background:none; background-color:#FFFFFF; font-style: normal;} img{border:0; margin:0;} table{border:0;margin:0; padding:0;} a, a:active, a:visited{color:#373131;} a:hover{color:#AB3B1A;} span.astyle{color:#042c72; text-decoration:underline; cursor:pointer} th, td{vertical-align:top; padding:0;} table{border-collapse:collapse; border-spacing: 0; } h1 {font-size:36px; font-weight:400; line-height:120%; padding:40px 0px 30px 0px; color:#ab3b1a; text-align:center; margin:0px;;} h2 {font-size:28px; font-weight:400; line-height:26px; color:#373131; padding:20px 0px 25px 0px; margin:0px; text-align:left; line-height:120%;} h3 {font-size:24px; font-weight:400; line-height:24px; color:#444444; padding:20px 0px 20px 0px; margin:0px;} h4 {font-size:20px; font-weight:400; line-height:20px; color:#000000; padding:20px 0px 15px 0px; margin:0px;} fieldset{margin-top:30px; -moz-border-radius: 8px 8px 8px 8px;} div.ok, .success{background: url(../img/success.png) no-repeat; font-size:18px; color: #000000; padding:0px 20px 10px 20px; margin:auto auto; max-width: 600px;} div.warning, .error{background: url(../img/cross.png) no-repeat; font-size:16px; color: #FF0000; padding:0px 20px 10px 20px; margin:auto auto; max-width: 600px;} div.info, p.info{background: url(../img/info.gif) no-repeat; font-size:16px; color:#0000FF; padding:0px 20px 10px 20px; margin:auto auto; max-width: 600px;} .bold{font-weight:bold;} .vtop{vertical-align:top;} .red{color:#FF0000;} .left, .picture_left{float:left;} .right, .picture_right{float:right;} .aleft{text-align:left;} .aright{text-align:right;} .center{text-align:center;} .clear{clear:both;} /* BODY */ /* #sb-site{width:1200px; padding:0px; border:0px;} */ #sb-site{padding:0px; border:0px; width:100%; background:none; background-color:#FFFFFF; overflow:auto;} /* BODY */ #window{margin:0px auto 0px auto; width:100%; background:#FFFFFF; padding:0px; border:0px;} .mobileOnly{display:none;} /* HEADER */ #header{max-width:1200px; margin: 0 auto 0 auto; box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.4);} #header div{width:100%; padding-top:15.9%; background:url(../img/header.png) no-repeat; background-size: contain; width:100%; height:1px; cursor:pointer;} a.homelink{display:none;} #bartop{width:100%; position:relative; height:100px; padding:0; position:fixed; top:0; z-index:1000; background-color:#FFFFFF; margin:0; height:70px;} #bartop .inner{max-width:1200px; margin: 0px auto 0px auto;} #bartop .logoImg {float:left; width:320px; padding:0;} #bartop .logoImgMobile {height:48px; padding: 10px 0; float:left;} #bartop .logoImgMobile img {height: 50px;} #bartop .headerName{float:left; width:35%; height:80px; color:#FFFFFF; padding:12px 0 0 0; font-weight:bold; font-size:20px;} #bartop .headerMenu{float:right; width:calc(100% - 320px); text-align:left;} .innerHeaderDiv{max-width:1400px; margin:auto auto;} #topHeader {background:#F4F4F4; height:30px; width:100%;} .sb-toggle-right{display:none; cursor:pointer;} #mainHeader {background:#FFFFFF; width:100%; padding:0; border-bottom: 0; transition: 0.4s; background-color:#f9cfc5; height:90px;} #logo {width:auto; padding:10px 0; transition: 0.4s; height:50px; margin-top:8px;} #container{display:block; overflow:auto; margin: 90px auto 0 auto; clear:both; width:100%; max-width:none; background:none; box-shadow:none; } #container .imgHome{background-image: url('../img/themes/header_desktop/HBSC_header_desk_home_626.jpg'); background-size: contain; background-repeat: no-repeat; width: 100%; height: 0; padding-top: 32.6%;} #container.img_head{margin-top:0; padding-top:200px; background-position-x:center; background-position-y:0px; background-size:100% 740px; background-repeat:no-repeat;} @media(max-width: 1920px){#container.img_head{background-position-y:-100px; background-size:100% auto;} } #container.family_friends_school_head{background-image: url('../img/themes/header_desktop/HBSC_header_desk_family_friends_school.jpg');} /* The sticky class is added to the header with JS when it reaches its scroll position */ #bartop.sticky { position: fixed; top: 0; width: 100%; } /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */ #bartop.sticky + #container { padding-top: 48px; } /* MENU */ #menu {margin: 20px 0 0 0; padding: 0 0 0 0; list-style-type: none; text-align:center; display:block; max-width:100%; transition: 0.4s;} #menu li {float: left; position: relative; margin-right:50px; vertical-align:middle; padding: 10px 0px 2px 0px; } #menu li a, #menu li span{color: #000000; text-decoration: none; display: block; font-weight:400; padding-bottom: 3px; font-size:20px; cursor:pointer; vertical-align:bottom; font-style: normal; } #menu li span{cursor:default;} #menu li a::before, #menu li span::before{ content: ""; position: absolute; display: block; width: 100%; height: 3px; bottom: -1px; left: 0; background-color: #333333; transform: scaleX(0); transition: transform 0.3s ease;} #menu li.active a, #menu li.active span{border-bottom:3px solid #000000;} #menu li:last-child a{padding-right: 0px;} #menu li ul {margin: 0; padding: 10px 0px 8px 0px; position: absolute; width:350px; left: -999em; background-color:#FFFFFF; list-style-type: none; z-index:2; box-shadow: 0px 8px 8px -5px #BBBBBB;} #menu li li {width:90%; display:block; border: 0; padding:6px 10px; margin: 0 2px; background-color:#FFFFFF; text-align:left; } #menu li li a {color: #000000; padding:2px 3px 3px 0; border:0; font-size:20px; cursor:pointer; height:auto; display:default;} #menu li li a.list{padding: 1px 0 1px 10px; border:0; background: url(../img/dn_arrow_v.png) no-repeat 240px 5px; cursor:default;} #menu li li:last-child a {border-bottom:0px;} #menu li:hover a, #menu li a.open {color:#000000; cursor:pointer; /*border-bottom:3px solid #333333;*/} #menu li:hover a::before, #menu li:hover span::before {transform: scaleX(1);} #menu li.active:hover a{border-bottom:3px solid #333333;} #menu li.active:hover a::before, #menu li.active:hover span::before{transform: scaleX(0);} #menu li.active:hover li a{border-bottom:0;} #menu li:hover li a, #menu li.active li a{cursor:pointer; border-bottom:0; color:#000000;} #menu li:hover li a::before{transform:none; transition:none; /* scaleX(0); transform-origin: left;*/ background-color: #FFFFFF;} #menu li:hover ul {left:-12px; top:40px;} #menu li:hover li ul {left: -999em; } #menu li li:hover a, #menu li.active li:hover a{color:#AB3B1A; border-bottom:0; } #menu li li:hover a::before, #menu li.active li:hover a::before{transform: none; transition:none; border-bottom:0; } #menu li li ul {padding: 3px 0px 3px 0px; width: 180px; left:-999em; top:-5px;} #menu li li:hover ul {left: 250px; } #menu li li li span{background: url(../img/dn_arrow_v.png) no-repeat 170px 5px;} #menu li li:hover li ul {left: -999em; } #menu li li li:hover ul {left: 180px; } #menu li li li:hover li ul {left: -999em; } #menu li li li li:hover ul {left: 180px; } #menu b.coin {background-color:#fccd5f; border:1px solid red; font-weight:normal; font-size:16px; padding:2px 6px; margin-left:5px; border-radius:11px; color:#000000;} .sb-slidebar ul{ list-style-type:none; padding:5px 10px 10px 15px; margin:0px; text-align:left;} .sb-slidebar ul a, .sb-slidebar ul a{text-decoration:none; display:block; color:#FFFFFF; cursor:pointer;} .sb-slidebar ul span{color:#FFFFFF; } .sb-slidebar ul a.open, .sb-slidebar ul a:hover, .sb-slidebar ul i.open, .sb-slidebar ul i:hover{color:#AB3B1A;} .sb-slidebar ul li{margin:0px; font-weight:bold; display:block; padding:10px 0; font-size:18px; border-top:1px solid #FFFFFF;} .sb-slidebar ul li:first-child{border-top:0px;} .sb-slidebar ul ul{padding:0px; margin:0px; border:0;} .sb-slidebar ul li li{font-weight:normal; padding:4px 2px 0px 7px; font-size:16px; text-indent:-12px; margin-left:12px; border:0;} .sb-slidebar ul li.pad8{padding:4px 2px 5px 7px; } .sb-slidebar ul li.hr{display:none;} #sidebar{width:1px;} #sidebar div{width:1px; height:600px;} /* Header images */ #container .imgHome{width: 100%;height: auto;} #container.img_head #main h1.title{ margin-left: 0; /*width: calc(((100% - 850px) / 2) + 850px); */ max-width:none; padding-left: calc(((100% - 850px) / 2) - 100px); margin-right: calc(((100% - 850px) / 2)); padding-top: 20px; padding-bottom: 35px; margin-top:200px; margin-bottom:200px; color:#FFFFFF; font-size: 60px; } #container.img_head #main h1.space-1{letter-spacing:-1px;} #container.img_head #main h1.title img{height:80px; position:relative; top:17px; padding-right:15px;} /* MAIN TEXT */ #main {text-align:left; padding:20px 0px 0px 0px; min-height:600px; background:none; border:0; margin:auto auto; float:none;} #main p{line-height:130%; margin:0px 0px 30px 0px; font-size:16px; clear:both;} #main .paragraphs {column-count:2; column-gap: 40px; padding:10px 0 25px 0;} #main iframe {width:640px; height:400px; max-width:100%;} #main.homePage{padding-top:0; padding-bottom:0;} #main.homePage h1{padding-top:0px !important;} #main h1, #main h2, #main h3, #main h4, #main p, #main ul, #main ol, #main table, #main .container, #main #topic_home, .search_results, div.warning, #main .paragraphs, div.bibioLink, div#news, div.reload {max-width:1000px; margin-left:auto; margin-right:auto;} .reload{max-width:600px; text-align:center; margin-bottom:20px; padding:15px;} .reload a{ font-size:30px; text-decoration:none; border:3px solid #C45D40; display:block; max-width: 600px; margin:auto auto; padding:20px 0px; background:#f3f3f3; } .reload img{ height:24px; padding-right:10px; } label.head{max-width:416px; display:block; float:none; clear:both; margin:auto auto; padding:5px 5px 5px 2px; font-size:20px; color:#373131;} .form_container {max-width:400px; background:#FFFFFF; padding:20px 10px; margin:auto auto; font-size:16px; background-color: #E6E6E6;} .form_container textarea{margin:0px 10px 0px 10px; width:572px; height:100px;} .form_container label{width:150px; display: inline-block; padding:4px 3px 4px 5px; float: left; clear: left; position:relative; top:-3px;} .resetpwd label{width:200px;} .form_container input[type=radio], #main div.register .form_container input[type=checkbox]{ -ms-transform: scale(1.2); /* IE 9 */ -webkit-transform: scale(1.2); /* Chrome, Safari, Opera */ transform: scale(1.2); } .form_container .label{width:140px;} .form_container .textinput {width:200px; float: left; font-size:16px; margin-bottom:5px;} .resetpwd .textinput{width:180px;} .form_container textarea.textinput {margin:0px 0px 3px 0px;} .form_container select {width:255px; float: left;} .form_container span {float: left;} .showpwd{font-size:14px; padding-left:205px; margin-bottom:5px;} .qty_crit {padding-top:15px; font-size:14px;} input[type="button"], input[type="submit"], input[type="reset"] { background-color: #e87e63; border: none; color: white; padding: 12px 24px; text-decoration: none; margin: 0px; margin-bottom: 0px; cursor: pointer; font-size: 16px; } .loginwarning{color:red; font-size:14px; padding-top:10px; text-align:center;} .loginwarningreset{color:red; font-size:14px; padding-top:5px; text-align:left;} .disconnected{margin:10px auto 30px auto; max-width:700px; padding-left: 40px; width:calc(95% - 60px); font-size:16px; background:url(../img/notification_warning.png) no-repeat 0px 1px; color:#FF6000;} /* Subrillance des recherches */ .hilt0{color:#000000;background-color:#33CCFF;} .hilt1{color:#000000;background-color:#FFFF33;} .hilt2{color:#000000;background-color:#99FF00;} .hilt3{color:#000000;background-color:#FF9933;} .hilt4{color:#000000;background-color:#CC99FF;} .hilt5{color:#000000;background-color:#CC9966;} .hilt6{color:#000000;background-color:#FF3300;} .hilt7{color:#000000;background-color:#CCCCCC;} .search_results a{text-decoration:underline;} .search_results a:hover{text-decoration:none;} .search_results p{font-size:12px; margin:5px 10px; /*font-family:Verdana, Geneva, sans-serif;*/} /* InfoBox */ #main .infoBoxDiv{max-width:600px; background-color: #e8e8e8; margin:50px auto 30px auto; padding-bottom:1px;} #main .infoBoxHead{background-color: #c45d40; color:#FFFFFF; padding:15px 20px; font-size:26px; text-align:center;} #main .level2{background-color: #ed8e76;} #main .infoBoxHeadDiv{background-color: #F9CFC5; padding:15px; font-size:16px; text-align:left; text-align:center; display:block;} #main .infoBoxCnt{padding:30px 15px 20px 15px;} #main .infoBoxCnt p{text-align:center; font-size:26px; margin:0px 15px 10px 15px;} #main .text p{text-align:left; font-size:16px;} #main .infoBoxCnt img.statut{width:200px; max-width:40%;} #main .infoBoxTable{margin:23px 20px; display:block; margin-bottom:17px; display: grid; grid-template-columns: 35% 65%;} #main .infoBoxTable label{display:inline-block; font-size:20px; padding-bottom: 7px;} #main .infoBoxTable span{display:inline-block; font-size:20px; padding-bottom: 7px;} #main .infoBoxTable span input{font-size:18px; width:98%; background-color: #FFFFFF; border:1px solid #999999; padding:3px;} #main .infoBoxTable span input.pb{background-color: #F9CFC5;} #main .infoBoxTable span select{font-size:18px; width:100%; background:#FFFFFF; background-color:#FFFFFF; border:1px solid #999999; padding:3px;} #main .infoBoxTable span select.pb{background-color: #F9CFC5;} #main .infoBoxDiv .qty_crit{padding:20px; font-size:18px;} #main .infoBoxFootLink{background-color: #ed8e76; color: #FFFFFF; text-decoration: none; padding:15px 20px; font-size:18px; text-align:center; display:block; margin:20px 40px;} #main a.infoBoxFootLink:hover {background-color: #f2b2a2; text-decoration: underline; } #main .infoBoxFootDiv{background-color: #F9CFC5; padding:20px 20px; font-size:16px; text-align:center; display:block;} #main .Note{background-color: #c3e2a5;} #main .infoBoxFootDiv div{text-align:center; font-size:20px;} #main .infoBoxDiv ul{text-align:center; padding:0; margin:20px 0 10px 0; font-size:16px;} #main .infoBoxDiv li{list-style: none;} #main .infoBoxFootSubmit{background-color: #ed8e76; padding:15px 20px; font-size:20px; text-align:center; display:block; width:calc(100% - 80px); margin:20px 40px;} #main .infoBoxFootSubmit:hover {background-color: #f2b2a2; text-decoration: underline; } /* Table style */ .tabStyle {width:100%; max-width:1000px; margin-top:20px; border-spacing: 2px; border-collapse: separate;} .tabStyle th, .tabStyle td{padding:3px 4px;} .tabStyle th{background-color:#F9CFC5; padding:5px 6px;} .tabStyle td{background-color:#EEEEEE;} .tabStyle tr.change td{background-color:#f9dfd9;} .tabStyle td input, .tabStyle td select{width:95%;} .tabStyle td img.qtipl{max-height:20px; max-width:30px;} .ClearTopics, .ClearTopics:hover{float:right; width:55px; background-color:#EEEEEE; padding:10px 20px; margin:6px 20px 6px 0px; border:1px solid #373131; cursor:pointer; font-weight:bold; color:#000000;} .SaveTopics, .SaveTopics:hover {float:right; width:180px; background-color:#EEEEEE; padding:16px 20px; border:1px solid #373131; cursor:pointer; font-weight:bold; color:#000000;} #main div.topicsGrid{max-width: 1000px; margin-left: auto; margin-right: auto; width: 100%; margin: auto auto; margin-right: auto; margin-left: auto; padding-top: 30px; padding-bottom: 30px; justify-content: center; display: grid; grid-template-columns: repeat(4, 0fr); grid-auto-rows: 0fr; grid-column-gap: 40px;grid-row-gap: 40px;} #main div.topicsGrid .topicCell{font-size: 18px; width: calc(1000px / 4); text-align: left; vertical-align: top; text-align: center;} #main div.topicsGrid .topicCell a.LogTopic{background: #EEEEEE; color:#000000;} #main div.topicsGrid .topicCell a.LogTopic:hover{ color:#000000;} #main div.topicsGrid .topicCellAdd{border:2px dotted #000000; background: #FFFFFF;} #main div.topicsGrid .topicCellAdd:hover{border:2px dashed #000000;} #main div.topicsGrid .topicCellAdd a:hover{ color:#000000;} #main div.topicsGrid .topicLink{text-decoration: none;display: block; min-height: 63px; padding: 50px 10px; cursor:pointer; font-weight: bold; } #main div.topicsGrid .topicCellAdd .topicLink{padding: 40px 10px;} #main div.topicsGrid .adminAction{display: block; background: #FFFFFF; font-size:14px; text-align:left;} #main div.topicsGrid .adminAction span{padding-right:10px;} #main div.topicsGrid .adminAction a{float:right;} #main div.topicsGrid .topicCell .type2label{margin:0px 10px 5px 10px; font-weight:bold; color:#000000; font-size:17px;} #main div.topicsGrid .topicCell .type2grid{width: 100%; margin: auto auto; justify-content: center; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px;grid-row-gap: 20px;} #main div.topicsGrid .topicCell .type2grid a{width:100%; padding:42px 0px 32px 0px; cursor:pointer; } #main div.topicsGrid .topicCell .type2grid a img{width:40px;} /* Stats */ #main .statPlotCont{max-width:700px; margin:auto auto; text-align:center;} #main .statPlotDiv{width:350px; float:left; text-align:center;} #main .statPlotTblCont{clear:both; max-width:700px; margin:auto auto; padding:15px 0px;} #main #tblLink{font-size:14px; color:blue; text-decoration:underline; cursor:pointer;} #main #tblData{max-width:500px; margin: auto auto; display:none;} #main table.tabStyle .th1{background-color:#8DAD7C;} #main table.tabStyle .th2{background-color:#645CA5;} #main table.tabStyle .th3{background-color:#F39317;} #main table.tabStyle .th4{background-color:#EB595B;} #main table.tabStyle .td1{background-color:#c9e2bc;} #main table.tabStyle .td2{background-color:#c8c5e5;} #main table.tabStyle .td3{background-color:#edd7bd;} #main table.tabStyle .td4{background-color:#f2d5d5;} #main .tabHist{max-width:800px; margin: auto auto;} /* Drag Drop jQuery */ ul#gallery_sort{ width:480px; list-style-type: none; margin:0px; padding:0px; } #gallery_sort li {width:450px; border:1px solid #333333; margin-bottom:2px; border-radius:4px; cursor:move; font-size:14px;} #gallery_sort li.itemclass0{background-color: #ffc6c6;} #gallery_sort li.itemclass1{background-color: #b1efa7;} #gallery_sort li div{padding:5px; height:25px; cursor:move;} #gallery_sort .placeHolder {background-color:white!important; border:dashed 1px gray !important; } /* popup Cookie */ .popup-overlay{ z-index: 1200; display:none; position:fixed; left:0; right:0; top:0; height:100%; width:100%; text-align:center; background: rgba(0, 0, 0, 0.2) } .popup-overlay .popup{ background-color:#FFFFFF; margin:0px; padding:8%; position: absolute; top: 50%; left: 50%; width:60%; text-align:left; transform: translate(-50%, -50%); border:10px solid #AB3B1A; } a.close, a.submit{ display:inline-block; color:white; background-color:#ce4d29; padding: 15px 30px; cursor:pointer; } /****************************** No JS, help me! ******************************/ .no-js{position:absolute; top:230px; left:150px; width:20px; height:20px; text-decoration:none; z-index:1000} .no-js *{cursor:help; font-family:Verdana,Arial,Helvetica,sans-serif;} .no-js img{border:0px;} .no-js .content{display:none; width:240px; border:solid 1px #ff5a00; background:#ffedcd; position:absolute; top:0; left:20px; text-align:left; padding:4px 6px 4px 4px; z-index:999; text-decoration:none; color:#000000;} .no-js .content .title{display:block; font-weight:bold; font-size:12px; margin:0 0 6px;} .no-js .content p{font-size:10px; margin:8px 0 0;} .no-js:hover .content {display:block;} /* FOOTER */ #footer{clear:both; background-color:#605757; color:#FFFFFF; margin-top:50px;} #footer a{color:#FFFFFF; text-decoration:none;} #footer a:hover{text-decoration:underline;color:#F9CFC5;} #copyright{text-align:center; color:#FFFFFF; padding:40px; font-size:16px;} /* Mobile browsers only */ @media (max-width: 1800px) { #container.img_head #main h1.title{margin-bottom:150px;} } @media (max-width: 1700px) { #container.img_head #main h1.title{margin-top:150px; margin-bottom:150px;} } @media (max-width: 1600px) { #topHeader, #mainHeader{padding-left:15px; padding-right:15px; width:calc(100% - 30px);} #container.img_head{background-position-y: -100px;} #container.img_head #main h1.title{margin-top:120px; margin-bottom:120px;} } @media (max-width: 1420px) { #topHeader, #mainHeader{padding-left:15px; padding-right:15px; width:calc(100% - 30px);} #container.img_head{background-position-y: -50px;} #container.img_head #main h1.title{margin-bottom:100px;} } @media (max-width: 1300px) { #menu li {margin-right:20px;} #container.img_head{background-position-y: -20px;} #container.img_head #main h1.title{margin-top:100px; margin-bottom:100px;} } @media (max-width: 1200px) { #menu li {} #menu li a {letter-spacing:-1px;} #container.img_head #main h1.title{padding-top:15px; padding-bottom:25px; margin-top:80px; margin-bottom:100px;} } @media (max-width: 1100px) { #container.img_head #main h1.title{margin-top:40px; margin-bottom:100px; padding-left:20px;} } @media (max-width: 1000px) { .menu2hide{display:none;} .hideMobile{display:none;} .mobileOnly{display:block;} .headerName{display:none;} #bartop .headerMenu{float:left; width:20%;} #bartop .logoImg{width:200px; padding:0px 10px;} .sb-toggle-right{display:block; background:url(../img/front/smenu.png) no-repeat right 0px top 3px; line-height:100%; margin:25px 0px 0px 30px; padding:0 22px 0 0; color:#000000; font-size:20px; vertical-align:middle; float:right;} #bartop .logoImg {float:left; } #bartop.sticky + #container { padding-top: 36px; } #mainHeader{height: 70px; box-shadow:0px 3px 5px 0px #EEEEEE; box-shadow: rgb(238 238 238) 0px 1px 3px 0px;} #window{width:100%; margin:0px auto 0px auto;} #menu{display:none;} #container{background:#FFFFFF; margin-top: 100px; } #main{width:100%; clear:both; border-right:0;} h1{padding-top:8px; padding-bottom:5px;} h2{padding-top:20px; padding-bottom:10px; font-size:26px;} h3{padding-top:15px; padding-bottom:20px; font-size:20px; line-height:100%} #main #news p, #main #news h1, #main #news h2{margin-left:0; margin-right:0; width:100%;} #news div{padding:30px 20px;} } @media (max-width: 880px) { #main p, #main h1, #main h2, #main h3, #main h4{margin-left:15px; margin-right:15px; width:calc(100% - 30px); max-width:850px;} #topic_home{grid-template-columns: repeat(2, 0fr);} #container.img_head{padding-top: 170px; background-position-y: 40px;} #container.img_head #main h1.title{width:calc(100% - 10px); font-size:50px; margin-bottom:120px; margin-top:40px; padding-top:20px; padding-bottom:20px; padding-left:10px; margin-right:0;} #container.img_head #main h1.title img{height:50px; top:5px; padding-right: 8px;} #main .credits h4{margin-left:0; padding-bottom:5px;} .credits .who, .credits .as,.credits .ofsp,.credits .cantons{width:44%; padding-left:15px;} .credits .sectionSupport{min-height: 170px;} .credits img{max-width:200px;} .credits .who img{max-width:100px;} } @media (max-width: 768px) { #main{padding-top:0px;} h1 {font-size:30px;} #main iframe{height:400px;} #precontainer{height:200px;} .pcContent h1 {font-size:18px; padding:10px; } #bartop .logoImg{width:170px; padding:0px 10px;} #topHeader .langs {width: 150px;} h2{font-size:24px;} #bartop .logoImgMobile {height:42px; padding:10px 15px 0 0; float:left;} #bartop .logoImgMobile img {height: 40px; padding-top:3px;} #container.img_head{padding-top: 150px; background-position-y: 50px;} #container.img_head #main h1.title{font-size:44px; letter-spacing: -1px; margin-bottom:110px;} #container.img_head #main h1.space-1{letter-spacing:-2px;} #main .popup-overlay .popup{width:70%;} #main .popup-overlay .popup p, .popup-overlay .popup ol{font-size: 14px;} #main .popup-overlay .popup p{margin-bottom:15px;} } @media (max-width: 720px) { #main .statPlotDiv{width:auto; float:none;} } @media (max-width: 680px) { #container.img_head{background-position-y: 50px;} #container.img_head #main h1.title{font-size:40px; margin-top:30px; margin-bottom:80px;} #container.img_head #main h1.space-1{letter-spacing:-1px;} .tabStyle td, .tabStyle th{font-size:12px;} } @media (max-width: 640px) { #container.img_head{background-position-y: 100px;} #container.img_head #main h1.title{margin-top: 180px;} #main p, #main h1, #main h2, #main h3, #main h4{margin-left:5px; margin-right:5px; width:calc(100% - 15px);} .form_container label{width:35%;} .form_container .textinput {width:57%;} #container.family_friends_school_head{background-image: url('../img/themes/header_mobile/HBSC_header_mob_family_friends_school.jpg');} } @media (max-width: 600px) { h1{letter-spacing:-1px;} #mainHeader, #bartop{height:60px;} .sb-toggle-right{margin-top:20px;} #bartop .logoImgMobile img {height: 34px; padding-top:3px;} #main .infoBoxTable.form{margin:23px 20px; display:block; margin-bottom:17px; display: block;} #main .infoBoxTable.form label{display:block; font-size:20px; padding-bottom: 7px; padding-top: 10px;} #main .infoBoxTable.form span{display:block; font-size:20px; padding-bottom: 7px;} #main .popup-overlay .popup{ padding:4%; width:80%; } } @media (max-width: 540px) { #main .infoBoxDiv{margin: 10px auto 40px auto;} #main .infoBoxHead{font-size: 20px;} #main .infoBoxCnt{padding: 15px 5px;} #main .infoBoxCnt p{font-size: 20px; margin: 0px 10px 10px 10px;} #main .infoBoxCnt.text p{font-size: 16px;} #main .infoBoxDiv ul{margin:15px 0 0 0;} #main .infoBoxTable label{font-size: 16px;} #main .infoBoxTable span{font-size: 16px;} #main .infoBoxTable.form label{font-size: 16px;} #main .infoBoxTable span input{font-size: 16px;} #main .infoBoxTable span select{font-size: 16px;} #main .infoBoxTable.form{margin: 15px;} #main .infoBoxFootSubmit{padding: 10px 15px;} #main .infoBoxTable.form label { padding-bottom: 5px; padding-top: 7px; } #main div.form_container{max-width:95%;} #main label.head{width:calc(100% - 20px); padding-left:15px;} #main .form_container{width:auto;} #main .form_container input.textinput{float:none;} #main .form_container select {display:block;} #main textarea {width:93%;} #main div.form table.budget input.amount{width:40px;} #main table.table_fees td { padding: 6px;} #main p.paragraph_grey{padding:10px 5px;} #main .table_glance td{font-stretch:-1px;} #main .popup-overlay .popup p, .popup-overlay .popup ol{font-size: 12px;} } @media (max-width: 530px) { #container.img_head #main h1.title{margin-top:170px; margin-bottom:80px;} } @media (max-width: 460px) { #main h1 {font-size: 30px;} #bartop #search input[type="text"]{width:120px;} #topHeader .langs a {padding-left: 5px;} #topic_home { grid-column-gap: 20px; grid-row-gap: 20px; } #topic_home div { width: 180px; } #container.img_head #main h1.title{margin-top:130px; padding-left:15px; margin-bottom:80px;} #container.img_head #main h1.title img{display:none;} #copyright{font-size: 14px;} } img @media (max-width: 400px) { .form_container{max-width:95%;} .form_container input.textinput{width:97%;} #topic_home div { width: 150px; } }