/*Sathish's work begins here. Don't modify this highly optimised and saturated CSS file. If you are going to add a new feature then create a new CSS file and add your code in it, and place it immediately after the dnahomepage.css in the tag, in home_index.*/ html { height: 100%; width:100%; } @font-face { font-family: 'CaslonVThinRoman'; src: url('fonts/caslonvthin-roman-webfont.eot'); src: url('fonts/caslonvthin-roman-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/caslonvthin-roman-webfont.woff') format('woff'), url('fonts/caslonvthin-roman-webfont.ttf') format('truetype'), url('fonts/caslonvthin-roman-webfont.svg#CaslonVThinRoman') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'CaslonVThinItalic'; src: url('fonts/caslonvthin-italic-webfont.eot'); src: url('fonts/caslonvthin-italic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/caslonvthin-italic-webfont.woff') format('woff'), url('fonts/caslonvthin-italic-webfont.ttf') format('truetype'), url('fonts/caslonvthin-italic-webfont.svg#webfontF8UpzdJC') format('svg'); font-weight: normal; font-style: normal; } body { height: 100%; width:100%; margin:0px; padding:0px; cursor:default; color:#444444; min-width:750px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } a { text-decoration:none; border:0; outline:0; } a img { border:0; } /* #page{ background-color: #fff; min-height:660px; height:100%; text-align: left; margin: 0px auto; margin-right:70px; margin-left:70px; position:relative; } */ #header{ position:relative; padding:0px 0px 42px; width:100%; height:auto; } #logo{ position:relative; top:18px; left:17px; display:inline-block; cursor: pointer; } #logoImg{ height:98px; } #header-navigation { font-family: 'CaslonVThinRoman', Georgia; font-size:15px; line-height:21px; text-align:right; position:absolute; top:14px; right:0px; } #header-navigation ul{ text-align:left; list-style:none; float:left; margin:0px; padding:0px; position:relative; } #header-navigation ul:last-child{ width:100px; } #header-navigation li a{ text-align:right; font-size:16px; margin:0px; padding:0px; clear:both; text-decoration:none; float:left; margin-left:0px; margin-right:68px; display:inline; position:relative; color:#595757; background:#fff; } #header-navigation li .selected{ color:#ec0000; } #header-navigation li ul{ display:block; position: absolute; top:-42px; left:77px; background:#fff; } #header-navigation li ul li { clear:both; position: relative; list-style-type: none; float:none; display:block; padding:0px; } #header-navigation li a:hover{ color:#ea0000; } #fullscreenSlideshow { width:100%; height: calc(100% - 275px); height: -moz-calc(100% - 275px); height: -webkit-calc(100% - 275px); /*height: calc(100% - 353px); height: -moz-calc(100% - 353px); height: -webkit-calc(100% - 353px);*/ text-align: center; position:relative; overflow:hidden; } #bgimage2 { /*position:absolute; left:0px; top:0px;*/ cursor: url(/media/publicsite/images/pause.png),auto; opacity:0; } #loading { display: block; position: absolute; top:0px; bottom:0px; left:0px; right:0px; margin: auto; } #imageCacheDiv { position: fixed; z-index:-1; visibility:hidden; height:69px; width:69px; overflow:auto; } #fashionWeek { height:78px; width:auto; } #fashionWeek1 { text-align: center; color: #E80000; font-family: 'CaslonVThinRoman',Georgia; font-size: 18px; font-weight: normal; height:25px; padding:23px 0px 0px 0px; } #fashionWeek2 { text-align: center; height:40px; } #fashionWeek2 > #fwl1:link { color: #595757; font-family: 'CaslonVThinRoman',Georgia; font-size: 16px; font-weight: normal; outline: 0; } #fashionWeek2 > #fwl1:visited { color: #595757; outline: 0; } #fashionWeek2 > #fwl1:hover { color: #E80000; outline: 0; } #fashionWeek2 > #fwl1:active { color: #E80000; outline: 0; } #fashionWeek2 > #fwl2:link { color: #595757; font-family: 'CaslonVThinRoman',Georgia; font-size: 16px; font-weight: normal; outline: 0; } #fashionWeek2 > #fwl2:visited { color: #595757; outline: 0; } #fashionWeek2 > #fwl2:hover { color: #063F77; outline: 0; } #fashionWeek2 > #fwl2:active { color: #063F77; outline: 0; } #videoContainer1 { margin: 30px 0px 80px; height:250px; width:100%; position:relative; } #videoContainer2 { height:250px; width: calc(100% - 400px); width: -moz-calc(100% - 400px); width: -webkit-calc(100% - 400px); overflow:hidden; float:left; } #videoContainer3 { width:auto; height:250px; font-size: 0px; white-space: nowrap; } .videoContainerThumbnails { width:360px; height:250px; display:inline-block; margin:0px 35px 0px 0px; vertical-align: top; } .videoContainerThumbnailsI { width:100%; height:100%; cursor: pointer; } .videoContainerThumbnails1 { width:100%; height:200px; overflow:hidden; position:relative; z-index:0; } .videoIcon { position:absolute; top:0px; left:0px; right:0px; bottom:0px; margin:auto; width:44px; height:51px; opacity:0; z-index:2; } /* .videoContainerThumbnails1:hover .videoIcon { opacity:1; } */ .viewAllDiv1Image { height:100%; width:auto; position:absolute; top:0px; left:0px; z-index:1; } .videoContainerThumbnails2 { width:360px; height:45px; padding:5px 0px 0px 0px; font-size:18px; font-weight:normal; line-height:20px; font-family: 'CaslonVThinRoman',Georgia; white-space: normal; color: #E80000; overflow:hidden; } #videoContainerLeft { height:250px; width:200px; float:left; background-color: #ffffff; } #videoContainerRight { height:250px; width:200px; float:left; background-color: #ffffff; position:absolute; top:0px; right:0px; } #videoContainerLeftArrow { height:200px; width:90px; float:left; background-color: #f5f5f5; margin:0px 0px 0px 20px; position:relative; cursor:pointer; } #videoContainerRightArrow { height:200px; width:90px; float:right; background-color: #f5f5f5; margin:0px 20px 0px 0px; position:relative; cursor:pointer; } .videoMaskTop { width:100%; height:1px; background-color: #ffffff; position:absolute; top:0px; left:0px; } .videoMaskRight { width:1px; height:100%; background-color: #ffffff; position:absolute; top:0px; right:0px; } .videoMaskBottom { width:100%; height:1px; background-color: #ffffff; position:absolute; bottom:0px; left:0px; } .videoMaskLeft { width:1px; height:100%; background-color: #ffffff; position:absolute; top:0px; left:0px; } .videoMaskFull { position:absolute; top:0px; left:0px; width:100%; height:100%; z-index: 2; } #videoContainerCover { position:absolute; top:0px; left:0px; width:100%; height:100%; background: rgba(255, 255, 255, 0.8); } #instagramContainer1 { margin: 0px 0px 85px; /*height:180px;*/ width:100%; position:relative; display:inline-block; } #instagramContainer1Cover { position:absolute; top:0px; left:0px; width:100%; height:100%; background: rgba(255, 255, 255, 0.8); } .instagramContainer1Loading { position:absolute; top:0px; left:0px; right:0px; bottom:0px; margin:auto; width:75px; height:21px; } #instagramContainer2 { height:100%; width: calc(100% - 260px); width: -moz-calc(100% - 260px); width: -webkit-calc(100% - 260px); overflow:hidden; float:left; position:relative; display:inline-block; } .instagramContainer2Label { position:absolute; top:-30px; left:19px; height:auto; width:auto; font-size:18px; font-weight:normal; line-height:25px; font-family: 'CaslonVThinRoman',Georgia; white-space: normal; color: #E80000; } #instagramContainer3 { height:100%; width:100%; font-size: 0px; white-space: nowrap; display:inline-block; } .instagramClass { height:150px; width:auto; display:inline-block; margin:0px 30px 0px 0px; } .instagramImages { height:100%; width:auto; } #instagramContainerLeft { height:100%; width:130px; float:left; background-color: #ffffff; } #instagramContainerRight { height:100%; width:130px; float:left; background-color: #ffffff; } #instagramContainerLeftArrow { height:180px; width:90px; float:left; background-color: #f5f5f5; margin:0px 0px 0px 20px; position:relative; cursor:pointer; } #instagramContainerRightArrow { height:180px; width:90px; float:right; background-color: #f5f5f5; margin:0px 20px 0px 0px; position:relative; cursor:pointer; } .arrowImage { position:absolute; top:0px; left:0px; right:0px; bottom:0px; margin:auto; } #videowrapper { position:fixed; display: none; left: 0px; top: 0px; width: 100%; height:100%; /*background: rgba(255, 255, 255, 0.95);*/ background-color: #ffffff; z-index:2; text-align: center; } #videowrapperClick { position:absolute; width:100%; height:100%; } /* #videowrapperinner { height:100%; width:100%; position:relative; text-align: center; z-index: 1; } */ #previousvideoDiv { width:62px; height:69px; position:absolute; left:0px; top:48%; cursor: pointer; background-color: #f5f5f5; } #nextvideoDiv { width:62px; height:69px; position:absolute; right:0px; top:48%; cursor: pointer; background-color: #f5f5f5; } #videoslideshowcontainer { display:inline-block; } #videoslideshow { position: relative; /*margin: 0px auto;*/ } #iframeyt { border:0px; width:100%; height:100% } #vidTop { height:4px; width:100%; position:absolute; top:0px; z-index:99999; background-color: #ffffff; } #vidBottom { height:4px; width:100%; position:absolute; bottom:0px; z-index:99999; background-color: #ffffff; } #videoFooter { position: relative; width:auto; height:60px; padding:30px 0px 0px; text-align: left; font-size:18px; font-weight:normal; font-family: 'CaslonVThinRoman',Georgia; white-space: nowrap; color: #E80000; overflow:hidden; } #videoHeader { position: relative; width:auto; } #previousimage { position:absolute; top:20px; left:19px; } #nextimage { position:absolute; top:20px; right:19px; } #closeButton { position:absolute; right:20px; top:20px; cursor: pointer; z-index:1; display: block; } #vidLogo { position:absolute; left:0px; top:0px; z-index:1; } #floatingFooter { position: fixed; background-color: #ffffff; bottom:0px; font-family: 'CaslonVThinRoman',Georgia; font-size: 12px; height:35px; cursor:default; width:100%; z-index:0; display:none; /*-webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8); -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8); box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);*/ -webkit-box-shadow: 0px -5px 10px #888888; -moz-box-shadow: 0px -5px 10px #888888; box-shadow: 0px -5px 10px #888888; } #twitterfooter iframe { opacity:0; } #logoFooter { display:inline-block; height:40px; width:40px; /*vertical-align: bottom;*/ } #twitterId { display:block; width: 18px; height:16px; margin: 11px 0px 0px 10px; background:transparent url('/media/publicsite/images/twitter.png') center top no-repeat; } #twitterId:hover { background:transparent url('/media/publicsite/images/twitter_over.png') center top no-repeat; } #twitterfooter { display:inline-block; position:relative; overflow: hidden; white-space:nowrap; height:23px; width: calc(100% - 40px); width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); /*margin:0px 0px 5px 0px;*/ bottom:3px; font-family:'helvetica'; text-align: right; } .twitterLinksScroll { cursor:pointer; font-family:'helvetica'; color: #E80000; } #twitterfooter div { width:100%; } #twitterfooterEmpty { height:35px; width:auto; } #newsLetterContainer1 { width: calc(100% - 20px); width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); padding:0px 0px 0px 20px; height:auto; /*display:inline-block;*/ font-size:0; position: relative; } .newsLetters { /*float: left;*/ background: #ffffff; width: 16.66%; display:inline-block; vertical-align:top; } /* @media all and (max-width: 10000px) { .newsLetters { width: 16.66% } } */ /* @media all and (max-width: 1500px) { .newsLetters { width: 16.66% } } */ @media all and (max-width: 1200px) { #newsLetterContainer1 { width: calc(100% - 21px); width: -moz-calc(100% - 21px); width: -webkit-calc(100% - 21px); padding:0px 1px 0px 20px; } .newsLetters { width: 20% } } @media all and (max-width: 900px) { #newsLetterContainer1 { width: calc(100% - 21px); width: -moz-calc(100% - 21px); width: -webkit-calc(100% - 21px); padding:0px 1px 0px 20px; } .newsLetters { width: 25% } } .newsLettersPadding { width: auto; height: auto; padding: 0px 15px 20px 0px; } .newsLetters4 { width: auto; height: auto; } /* .newsLetters { width:300px; height:500px; float:left; overflow:hidden; padding:10px; } */ .newsLetters p { width:100%; height:auto; } .newsLetters p img { width:100%; height:auto; } .newsLetters1 { width:100%; height:auto; } .newsLetters2 { width:100%; height:auto; color: #E80000; font-family: 'CaslonVThinRoman',Georgia; font-size: 18px; font-weight: normal; line-height: 20px; padding:5px 0px 10px; } .newsLetters3 { width:100%; height:auto; font-size: 12px; line-height: 14px; font-family:'helvetica'; } .newsLettersImage { width:100%; height:auto; } .newsLetters3 a { /*background-color: #ffffff;*/ color: #e80000; white-space: nowrap; } #newsFeedPopUp1 { background-color:#ffffff; height:100%; width:100%; position:fixed; top:0px; left:0px; display:none; z-index:1; background: rgba(255, 255, 255, 0.9); } #newsFeedPopUp2 { background-color:#ffffff; padding:10px; height:20px; width:350px; font-family: helvetica; color:#000000; position:absolute; top:0px; bottom:0px; left:0px; right:0px; margin:auto; font-size:14px; border:1px solid #000000; border-radius:5px; } /*Instagram Page Begins*/ .transparentHide { position:absolute; top:0; left:0; } #instaHeader { padding:20px 0px 0px 20px; height:55px; /*display: none;*/ } .instaHeaderInner { display: inline-block; } .instaHeaderInner:first-of-type { padding:0px 100px 0px 0px; } .instaHeader1 { font-family: 'CaslonVThinRoman', Georgia; font-size:15px; height:25px; } .instaHeader2 { display:inline-block; } .instaHeader2 > a:link { font-size:16px; color:#595757; font-family: 'CaslonVThinRoman'; margin:0px 20px 0px 0px; } .instaHeader2 > a:visited { color:#595757; outline: 0; } .instaHeader2 > a:hover { color:#ea0000; outline: 0; } .instaHeader2 > a:active { color:#ea0000; outline: 0; } .instaHeader2 > a.instaSelected { color:#ea0000; } #instaPageOuter { padding:0 20px; } #instaPageInner { font-size: 0px; } .instaDiv1 { display:inline-block; width:215px; height:252px; overflow: hidden; vertical-align:top; padding:0px 18px 0px 0px; } .instaDiv1A:link { display:block; font-size: 16px; color:#595757; font-family: 'CaslonVThinRoman'; height:215px; position:relative; } .instaDiv1A:visited { color:#595757; outline: 0; } .instaDiv1A:hover { color:#ea0000; outline: 0; } .instaDiv1A:active { color:#ea0000; outline: 0; } .instaDiv1Inner { background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; position:absolute; top:0; left:0; width:100%; height:100%; } /* .instaDiv1 > a > img { width:100%; height:auto; display: block; } */ .instaModelName { height:37px; line-height:25px; position:absolute; width:100%; bottom:-37px; left:0; } .eapps-instagram-feed-posts-slider-prev, .eapps-instagram-feed-posts-slider-next { opacity:0 !important; } /*Instagram Page Ends*/ /*Warning popup starts*/ .divTable { display: table; height: 100%; width: 100%; margin: 0; padding: 0; min-height: inherit; } .divTableCell { display: table-cell; height: 100%; vertical-align: middle; margin: 0; padding: 0; } .popupCoverWarning{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:2000; } .popupWarning { width:460px; height:240px; background-color:#ffffff; padding:10px 20px 20px 20px; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; background-color: rgba(255,255,255,0.9); } .popupWarningTitle { height:35px; font-size:20px; font-family: 'CaslonVThinRoman',Georgia,serif; color: #E80000; padding:0 0 10px 0; } .popupWarningBody{ height:140px; overflow:auto; font-size: 13px; font-family: 'helvetica',sans-serif; color:#000000; text-align:justify; } .popupWarningAccept{ height:45px; text-align:center; font-size:20px; cursor:pointer; background-color: #E80000; color:#ffffff; font-family: 'CaslonVThinRoman',Georgia,serif; } .popupWarningAccept:hover{ background-color: #000000; } /*Warning popup ends*/ /*Sathish's work ends here*/