/* ************* Media Queries Tablets ****************** * / @media only screen and (max-width:1200px) { .container { padding:0 15px; } .mainContact .container { padding:0; } /*#nav li a { padding:0 11px; }*/ #nav ul li a { padding:5px 21px; } .indexBanner .sliderCaption { padding:0 50px; } .homeNoticeBrd .marqueeScrolling { padding:0 90px 0 95px; } .homeNoticeBrd .btnMPause { right:75px; } .homeNoticeBrd .viewAll { right:20px; } .homeUsefulLinks ul li { padding:0 32px; } /*new style 16july18*/ .connectingSocietyRow .bannerColLeft { width:69%; } .connectingSocietyRow .bannerColRight { width:28%; } .connectingSocietyRow { padding:30px 0 20px; } .connectingSocietyRow .societyText { margin-bottom:30px; } .bannerNoticeWrap li .title { font-size:16px; } .ongoingProject a img { width:100%; } .tenderHomeBox { float: left; width:100%; position: relative; } .guestParking { float: right; width:100%; clear:inherit; } .homeTenderListing, .homePhotoGallery, .ministerBlock { width:33%; max-height:485px; min-height:485px; overflow:hidden; padding:0px; } .homePhotoGallery { margin:0 2%; width:30%; } .homePhotoGalleryOuter { width:100%; max-width:100%; } .ongoingProject { margin-top:56px; } .guestParking { margin-top:32px; } .homePhotoGalleryText { margin-top:0px; } .homePhotoGallery { } .tenderHomeBox { padding:20px 20px; } .homePhotoGalleryText { position:absolute; bottom:0px; left:0px; width:100%; } .guestParking, .ongoingProject { position:absolute; bottom:0px; left:0px; border:0px; } .tenderHomeBox .newsTikker1 { height:93px !important; } .ministerBlock ul { padding:10px; } .ministerBlock .ministerDetails br { display:none; } .ministerBlock em { min-height:50px; max-height:50px; } .cmSocial em { min-height:0; max-height:0; } .ministerBlock .cmSocial { margin:10px 0 0 0; } .homeTender::before { width:33.3%; } .officesList .box .address { min-height:296px; } .pagingCount { max-width:48%; } .pagingNo { max-width:48%; } .wrap50 { width:100%; float:none; padding:0 } @media only screen and (max-width:1169px) { #nav li a { padding:0 11px; } #nav ul li a { padding:5px 11px; } .indexBanner h2 { font-size:25px; } .indexBanner p { font-size:13px; } .indexBanner .rightCol { min-height:300px; } .homeUsefulLinks ul li { padding:0 15px; } .homeUsefulLinks ul li a { font-size:16px; } .homeNoticeBrd .marqueeScrolling { padding:0 90px 0 95px; } #nav li { margin:0 21px; } .footerLogosSlider .item { padding:5px 5px; } #nav li { margin: 0 7px; } #nav li a { font-size: 14px; } .guestParking img { width:100%; } } @media only screen and (max-width:1024px) { .topStrip .rightLinks { display:none; } #footerLogos { position:relative; } #footerLogos:after { width:24px; height:24px; background:url(../../images/swipeIconGray.png) no-repeat 0 0; position:absolute; right:7px; top:7px; content:""; z-index:1; } .facilities .box .bottom { bottom:0; } #logo { float: none; text-align: center; padding: 0; } .headerRight { float: none; margin: 0 0 20px; padding: 0; text-align: center; vertical-align: top; } #ContentPlaceHolder1_UserCMSHeader1_KeywordSearch1_pnlKeywordSrch { display: inline-block; float: none; margin-right: 20px; } .howtoReach { display: inline-block; float: none; position: relative; vertical-align: top; } .headBox { width: 50%; } .officesList .box .address { min-height:310px; } } @media only screen and (min-width: 993px) { #nav ul { display:block !important; } } @media only screen and (max-width:992px) { /*Navigation*/ .toggleMenu, #nav .menuIcon { display:block; } #nav { display:none; position:absolute; left:0; right:0; background:#073e74; } #nav ul { background:#305d93; } #nav li { float:none; display:block; border:none; margin:0; } #nav li a { border-top:1px solid #002d63 } #nav li.parent { position:relative; } #nav li .menuIcon, #nav li li .menuIcon { width:46px; height:auto; background-color:#002d63; background-color: rgba(0, 45, 99, 0.5); background-image:url(../../images/down-arrow.gif); background-repeat:no-repeat; background-position:center 15px; position:absolute; right:0; top:0; bottom:0; cursor:pointer; } #nav li .menuIcon.active, #nav li li .menuIcon.active { background-color:#002d63; background-color: rgba(1, 36, 78, 0.5); } #nav li > a:hover, #nav li.hover > a, #nav li.active > a, #nav li ul li a:hover, #nav li ul li > a.selected, #nav ul a:hover, .noJS #nav ul a:focus, #nav ul a.selected, #nav > li > a:hover, #nav > li.hover > a, #nav > li.focus > a { background-color:#002d63; color: #fff; } #nav ul { width:100%; display:none; position:static; transition:none; -webkit-transition:none; } .hasJS #nav ul { opacity:1; } #nav li ul li, #nav ul a { width:100% } #nav > li:hover > ul, #nav li li:hover > ul, #nav li li li:hover > ul { display:none; } #nav ul, #nav *:hover ul ul, #nav .hover ul ul, #nav .focus ul ul { margin-left:0; } #nav li a { padding-left:15px; padding-right:15px; display:block; line-height:40px; font-size:14px; } #nav li ul li a { padding:7px 55px 7px 25px; display:block; line-height:25px; background:url(../../images/right-arrow.gif) no-repeat 15px 17px; color:#fff; border:none; font-size:14px; } #nav ul li a:after { display:none; } #nav li ul li ul li a { padding-left:45px; background-position:33px center } #nav li ul li ul li ul li a { padding-left:60px; background-position:45px center } #nav > li > a:hover, #nav > li.hover > a, #nav > li.focus > a, #nav > .highlight > a { background-color:#305d93; color: #fff; } #nav li ul li a:hover, #nav li ul li > a.selected, #nav ul a:hover, .noJS #nav ul a:focus, #nav ul a.selected, #nav ul > .highlight > a { background-color:#305d93; color: #fff; } #nav ul { border:0; } .topStrip { position:absolute; right:inherit; left:20px; top:0; z-index:9; } .topStrip .container { padding:0; } .topStrip .hdLeftLinks a, .topStrip .hdLeftLinks a .fa, .topStrip .hdLeftLinks li.login a .fa, .topStrip .hdLeftLinks a:hover .fa, .topStrip .hdLeftLinks li.login.active > a, .topStrip .hdLeftLinks .login.active .fa, .topStrip .hdLeftLinks .welcome, .topStrip .hdLeftLinks .welcome .fa { color:#fff; } .topStrip .loginBox a { color:#434343; } .topStrip .loginBox a:hover { color:#1562a8; } .indexBanner .leftCol img { border-width:10px; } .homeUsefulLinks ul li { padding:0 15px; } .homeUsefulLinks ul li a { font-size:15px; } .homeUsefulLinks ul li .iconHolder, .homeUsefulLinks ul li .icon { width:80px; height:80px; } .homeUsefulLinks ul li:hover .iconHolder::after { left:0; top:0; right:0; bottom:0; border:2px solid #ffffff; } .homeUsefulLinks ul li .icon.icon1 { background-position:-139px -14px; } .homeUsefulLinks ul li .icon.icon2 { background-position:-241px -10px; } .homeUsefulLinks ul li .icon.icon3 { background-position:-340px -11px; } .loginBox .dropdownCaret { left:auto; right:30px; } .homeUsefulLinks ul li { text-align:center; } .homeUsefulLinks ul li a { display:block; } .homeUsefulLinks ul li .text { padding:15px 0 0 0; display:block; } .facilities .box .title { font-size:16px; } .pageLeftCol { width:auto; float:none; padding:0; } .pageRightCol { display:none; } .officeDetail .hodDetailList { padding:0; } .officeDetail .hodDetailList li { text-align:center; } .mainContactMap { height:300px; } .mainContact { margin:20px auto; } .advancedSearch input[type="text"] { width:270px; } .footerBottom { text-align:center; } .footerLinks, .siteUpdate { float:none; width:auto; text-align:center; } .siteUpdate, .copyright { padding:15px 0 0 0; } .footerLinks ul li { float:none; display:inline-block; padding:3px 8px; } .socialLiks { float:none; margin:15px auto 0 auto; width:176px; } .officesList .row { margin:0; } .officesList .box { padding:0; width:auto; float:none; margin-bottom:15px; } .officesList .addressList li { width:auto; } /*.mainNavigation {display: none;}*/ .mainNavigation { background: none; height: auto; } } @media only screen and (max-width:991px) { /*new style 16july18*/ .headBox:hover .info { display:none; } .headBox:hover .bannerBoxIconWrap { padding:35px 25px; } .headBox h3, .headBox h3 { margin:0 0 10px 0; font-size:1.4em; } .headBox a, .headBox:hover a { padding:6px 30px; border:3px solid #fff; } .headBox:hover h3 { margin-bottom:10px; } .headBox { width:50%; } .bannerBoxIconWrap { min-height:180px; max-height:170px; } .connectingSocietyRow .bannerColLeft { width:100%; } .connectingSocietyRow .bannerColRight { width:100%; } .connectingSocietyRow { padding:20px 0 30px; } .bannerNoticeWrap ul { width:100%; } .bannerNoticeWrap .newsListWrap { padding:10px 0; } .bannerNoticeWrap li .title a { padding:0px 0; display:inline-block; } .homeTenderListing, .homePhotoGallery, .ministerBlock { width:100%; max-height:inherit; min-height:inherit; overflow:hidden; padding:0px; } .homePhotoGallery { margin:0 0%; width:100%; } .guestParking, .ongoingProject { position:relative; bottom:0px; left:0px; border:0px; } .homeTender::before { width:100%; } .guestParking, .ongoingProject, .homePhotoGallery, .tenderHomeBox { max-width:600px; display:inline-block; float:none; margin:0 0 30px 0; } .guestParking { margin-bottom:0px; } .homeTenderListing, .homePhotoGallery, .ministerBlock { text-align:center; } .tenderHomeBox { text-align:left; } .homeTender { text-align:center; } .ministerBlock ul { display:block; text-align:left; margin:0 0 10px; } .ministerBlock ul li, .ministerBlock ul li:last-child { border-bottom:1px solid #ccc; } .ministerBlock li { padding-bottom:20px; } .ministerBlock ul li:not(:last-child) { margin-bottom:25px; } .ministerBlock ul.cmSocial li { border:0px; margin-bottom:0px } .ministerBlock .cmSocial { height:20px; } .homePhotoGalleryText { text-align:left; } .homeTender { padding:30px 0; } .homeTenderListing .newsTikker1 ul li { min-height: 130px; } .tenderHomeBox .newsTikker1 { height:130px !important; } .officesList .box .address { min-height:inherit; } .officesList .addressList { margin:0 -10px; } .officesList .addressList li { padding:0 10px; } } @media only screen and (max-width:850px) { .homeUsefulLinks ul li br { float:left; } .ministerBlock strong { font-size:14px; } .indexBanner .rightCol { min-height:230px; padding-left:30px; } #logo { width:auto; } .homeUsefulLinks ul li { width:32%; } .indexBanner h2 { font-size:21px; } .indexBanner .sliderCaption h2:after { top:13px; } .mainContact { margin:15px; width:auto; max-height:inherit; } } @media only screen and (max-width: 800px) { /*Responsive Table*/ .responsiveTable, .responsiveTable tr, .responsiveTable td, .responsiveTable td:before { display:block; text-align:left; border:none; /* Converts a table, table row, table column and table column:before into a block element */ } .responsiveTable, .responsiveTable tr, .responsiveTable td:last-child { border-bottom:none; } .responsiveTable thead, .responsiveTable tr th { position:absolute; /* Hides table head but not using display none */ top:-1000em; left:-1000em; } .responsiveTable tr { border:1px solid #eeeeee; border-bottom:2px solid #eeeeee; margin:0 0 20px; } .responsiveTable tr td:nth-child(1) { /* first column of the row */ border-left:none; } .responsiveTable tr td:last-child { /* last column of the row */ border-right:none; } .responsiveTable tr:last-child .td, .responsiveTable td { /* Column in the last row and column */ border-bottom:1px solid #eeeeee; } .responsiveTable td:before { /* prints the value of data-label attribute before the column data */ font-weight:bold; padding-right:20px; line-height:27px; color:#174471; content:" "attr(data-label)""; /* call the attribute value of data-label and adds a string // */ } .responsiveTable tbody { display:block; } .responsiveTable tr td { padding:5px 15px; width:auto !important; } .facilitiesModal .imgHolder { float:none; text-align:center; margin:0 0 10px 0; } .facilities .box { width:50%; } .officesList .addressList li { width:50%; } .wrap50 { float:none; width:100%; } } /* ************* Mobiles Media Queries ****************** */ @media only screen and (max-width: 767px) { .formList .boxs > li, .formList .boxs > div { float:none; width:100%; } .width50p { width:100%; } .r-tabs .r-tabs-nav { display: none; } .r-tabs .r-tabs-accordion-title { display: block; } #logo { float:none; margin:0 auto; max-width:500px; width:100%; } .searchBox { float:none; margin:0 auto; } /*.indexBanner .leftCol{width:50%; margin:0 auto; text-align:center; float:none;} .indexBanner .rightCol{min-height:inherit; position:absolute; left:0; bottom:0; width:100%; text-align:center; padding:10px; background:rgba(0, 0, 0, 0.5);} .indexBanner p{display:none;} .indexBanner .rightCol .vCenter{padding:0 !important;} .indexBanner .owl-theme .owl-controls{display:none;} .indexBanner:after{width:24px; height:24px; background:url(../../images/swipeIcon.png) no-repeat 0 0; position:absolute; right:15px; top:15px; content:""; z-index:1;}*/ .ministerBlock { float:none; width:auto; padding:0; border:0; } .homeTenderListing { width:100%; padding:0; float:left; } .homeTender { padding:30px 0 10px; } .ministerBlock ul { margin:0 0 10px; } .homeTenderListing .playPause { right:10px; } .ministerBlock .ministerDetails { padding-top:10px; } .indexBanner .sliderCaption h2:after, .indexBanner .sliderCaption p:after { display:none; } .indexBanner { background:url(../../Portal/Images/banner-mob-bg.jpg) no-repeat left bottom; background-size:101%; height:280px; border-top:2px solid #1562a8; } .indexBanner .leftCol { display:none; } .indexBanner .sliderCaption { padding:0; text-align:center; position:absolute; left:0; bottom:0; padding:15px; width:100%; background:rgba(0, 0, 0, 0.5); } .indexBanner .sliderCaption .rightCol { float:none; width:100%; padding:0 !important; } .indexBanner .sliderCaption p { margin:0; color:#fff; } .pageBanner { padding:15px 0; } .innerBannerTitle { font-size:20px; float:none; } .breadcrumb { float:none; } .moduleSearch li { float:none; width:auto; margin-bottom:10px; } .moduleSearch .btnSearchReset { margin:15px 0 0 0; } .moduleSearch .btnSearchReset .button { float:left; width:49%; margin-right:1%; } .moduleSearch .btnSearchReset .resetBtn { margin-right:0; margin-left:1%; width:49%; } .officeDetail .topRow:after { display:none; } .officeDetail .leftCol, .officeDetail .rightCol { width:auto; float:none; } .officeDetail .rightCol { background:#1562a8; } .officeDetail .addressList li { float:left; width:50%; } .mainContact .leftCol { padding:15px; } .mainContact h2 { font-size:16px; } .mainContact p { font-size:15px; } .mainContact .addressList li { font-size:14px; margin-bottom:10px; } .advancedSearch .dateRange input[type="text"] { width:200px; } /*newcss 16july18*/ .headBox h3, .headBox:hover h3 { font-size:1.2em; } .bannerBoxIconWrap { min-height:152px; max-height:152px; } .connectingSocietyRow .bannerColRight { padding:10px 0 0px; } .guestParking { margin-bottom:20px; } .ministerBlock em { min-height:inherit; max-height:inherit; } .pagingCount { max-width:100%; width:100%; } .pagingNo { max-width:100%; width:100%; text-align:center; } .pagingNo ul { display:inline-block; float:none; } .mainContact { box-shadow:none; border:1px solid #F4F4F4; } .mainContact .addressList li { position:relative; padding:0px 0 0px 40px; margin:0 0 5px; min-height:30px; line-height:30px; } .mainContact .addressList .fa { position:absolute; left:0px; top:0px; } h2 { font-size:1.6em; } .loginCategoriesArea { padding:0 20px; } .loginCategories a { font-size:20px; display:inline-block; line-height:25px; } } @media only screen and (max-width:640px) { .homeNoticeBrd h2 { position:relative; text-align:center; display:block; } .homeNoticeBrd h2:after { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #1562a8; bottom:-13px; top:auto; right:50%; margin-right:-3px; } .homeNoticeBrd .container { padding:0; } .homeNoticeBrd { height:80px; } .homeNoticeBrd .marqueeScrolling { padding:0 90px 0 10px; } .homeNoticeBrd .viewAll { right:10px; top:46px; } .homeNoticeBrd .btnMPause { right:62px; top:46px; } .homeUsefulLinks ul li { float:left; width: 48%; border:0; } .homeUsefulLinks ul { text-align:left; max-width:inherit; margin:0 auto; } .homeUsefulLinks ul li { padding:10px 0; text-align:center; } .homeUsefulLinks ul li .text { padding:0; } .homeUsefulLinks { padding:15px 0; } .indexBanner h2 { font-size:20px; } .indexBanner .bannerBtn { line-height:30px; height:30px; font-size:13px; } .facilities .box { width:100%; padding:10px 0; } .facilities { margin:0; } .facilitiesModal { padding:10px; } .facilitiesModal h2 { font-size:17px; padding:8px 10px; margin:-10px -10px 10px -10px; } .noticeBrdDetail .detailImg { float:none; text-align:center; margin:0 0 20px 0; max-width:inherit; display:block; } .tenderDetailContainer h2, .noticeBrdDetail h2 { font-size:18px; line-height:25px; } .innerContent { min-height:inherit; } .officeDetail .leftCol { padding:15px; } .mainContact .leftCol, .mainContact .rightCol { float:none; width:auto; } .mainContact .rightCol img { width:100%; } .advancedSearch label, .advancedSearch h4, .advancedSearch .dateBlock { display:block; } .advancedSearch input[type="text"], .advancedSearch .dateRange input[type="text"] { width:100%; } .advancedSearch fieldset { display:block; position:static; margin:0 0 5px 0; } .advancedSearch table tr td { padding:0 10px 10px 0; } .advancedSearch .dateRange .formGroup { float:none; width:100%; margin-bottom:10px; } .advancedSearch .dateRange .ui-datepicker-trigger, .advancedSearch .dateRange .ui-datepicker-trigger:hover { top:36px; } .advancedSearch .arcDoc input, .advancedSearch .arcDoc label { display:inline-block; } .advancedSearch h3 { font-size:19px; margin-bottom:10px; padding-bottom:10px; } .feedbackForm ul { margin:0; } .feedbackForm .fieldCol { padding:0; width:100%; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="password"], input[type="search"], select, textarea { height:35px; line-height:35px; } .feedbackForm .customSelect { height:35px !important; line-height:35px !important; } .feedbackForm .customSelectOuter { background-position:right 13px; } .feedbackForm .buttons .btn, .advancedSearch .buttons .btn { width:100%; margin-top:10px; } .captcha .captchaImg { height:34px; } .loginBox { margin:0 auto; } .homeNoticeBrd .nodataFound { padding-left:15px; } .headBox { width: 100%; } /*.headerRight {margin: 0 5px;}*/ #ContentPlaceHolder1_UserCMSHeader1_KeywordSearch1_pnlKeywordSrch { display: block; margin-bottom:20px; } .tenderHomeBox { width: 100%; } .guestParking { width: 100%; } /*new css*/ .connectingSocietyRow .societyTitle { font-size:1.8em; } .homePhotoGalleryText { position:static; margin:30px 0 0 0; } .bannerNoticeWrap li .title a { font-weight:normal; } .alignRight { float:left; width:100%; } .loginCategoriesArea a { font-size:18px; } .loginCategories { padding:10px; } } @media only screen and (max-width:530px) { .officesList .address .logo { margin:0 auto 15px auto; float:none; } .officesList .address .addressText { padding:0; min-height:inherit; text-align:center; } .officesList .addressList { margin:0 auto; max-width:250px; } .officesList .addressList li { float:none; display:inline-block; padding:0; width:100%; } .headerRight { text-align: center; } .searchBox { width: auto; } .howtoReach { float: none; display: inline-block; } #ContentPlaceHolder1_UserCMSHeader1_KeywordSearch1_pnlKeywordSrch { float: none; margin-bottom: 15px; margin-right: 0; } .alignRight { display: block; float: none; padding: 0; } .alignRight img { width: 100%; } .officesList .addressList li { position:relative; padding:0 0 0 35px; } .officesList .addressList .fa { position:absolute; left:0px; top:0px; } .loginBox .fieldName { display:inline-block; width:100%; } .loginBox .fieldInput { display:inline-block; width:100%; } } @media only screen and (max-width:480px) { .indexBanner .leftCol { width:80%; } .indexBanner { height:180px; } .indexBanner .sliderCaption p { display:none; } .indexBanner h2 { margin:0; } .topStrip .hdLeftLinks .welcome { display:none; } .officesList .box { width:100%; } .facilities .box .title { padding:5px 0; font-size:15px; } .facilities .box .readMore { padding-bottom:5px; font-size:14px; } .breadcrumb { display:none; } .commonNewsListing .thumbListRow:after { display:none; } .commonNewsListing .thumbListRow { padding:10px; } .commonNewsListing .thumbListRow .thumbDate { position:static; width:auto; padding:0; text-align:left; font-family: 'open_sanssemibold'; } .commonNewsListing .thumbListRow .thumbTitle { padding:5px 0 0 0; border:0; } .commonNewsListing li .dayMonth { display:inline-block; color:#393939; font-size:14px; } .tederDetail span.label { width:auto; float:none; margin:0 0 10px 0; } .TDNumber .val, .TDPublishDate .val, .TDTenderExpDate .val { display:block; } .tederDetail > div { margin-bottom:10px; } .officeDetail .addressList li { float:none; width:auto; } .officeDetail .officePhotos ul li { width:49%; } .officeDetail .officePhotos ul li img { width:100%; } .officeDetail .leftCol { text-align:center; } .officeDetail .address .logo { float:none; margin:0 auto; } .officeDetail .address .addressText { padding-left:0; min-height:inherit; } .officeDetail .addressList { max-width:230px; margin:20px auto 0 auto; text-align:left; } .advancedSearch .ui-datepicker-trigger, .advancedSearch .ui-datepicker-trigger:hover, .feedbackForm .ui-datepicker-trigger, .feedbackForm .ui-datepicker-trigger:hover { top:5px; } .advancedSearch { padding:15px; } .advancedSearch .dateRange .ui-datepicker-trigger, .advancedSearch .dateRange .ui-datepicker-trigger:hover { top:31px; } .advancedSearch table tr td { display:block; float:none; width:100%; height:25px; } h3 { font-size:19px; margin-bottom:15px; line-height:26px; } h4 { font-size:17px; margin-bottom:15px; line-height:24px; } .forgotPassword { margin:0; max-width:inherit; } .homeUsefulLinks ul li { float: none; width: 100%; } .alignLeft { width:100%; } } @media only screen and (max-width:360px) { .indexBanner .leftCol { width:100%; } .indexBanner .leftCol img { border-width:5px; } .indexBanner h2 { font-size:16px; } .searchBox { width:100%; } .ministerBlock .ministerImg { width:80px; } .ministerBlock .ministerDetails { padding-left:92px; padding-top:0; } .loginBox .dropdownCaret { right:50px; } .officeDetail .addressList { max-width:inherit; margin:0; } .officesTitle::after { display: none; } .officesTitle { border-bottom: 1px solid #cccccc; } .loginBox .fieldColCaptcha .captchaTextbox { padding:0px; } .textBoxOut { display:inline-block; position:static; } .loginBox .fieldColCaptcha .captchaImgBox { position:relative; margin:10px 0 0 0; } }