Team:IIT Delhi/style.CSS

From 2014.igem.org

(Difference between revisions)
(Created page with " * { margin: 0; padding: 0; } html,body,#wrapper,#scroller{ width:100%; height:100%; background: #fff; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; ...")
 
Line 1: Line 1:
-
 

Latest revision as of 10:35, 27 May 2014


  • {

margin: 0; padding: 0; }

html,body,#wrapper,#scroller{ width:100%; height:100%; background: #fff; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; }

h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Condensed', sans-serif; } p { font-weight: 300; } img { width: 100%; } .top-bar .name h1 a:hover{ text-decoration: none; } a:hover, a:focus, a:active { text-decoration: underline; }

  1. main-nav {

padding: 0; background: #222; position: fixed; width: 100%; top: 0; z-index: 1000; } .media>.left { margin-right: 10px; } .media:first-child { margin-top: 0; } .media, .media-body { overflow: hidden; zoom: 1; } .top-bar { height: 67px; line-height: 67px; background: #222; }

.dropdown { display: none; }

.dropdown li:hover > ul { display: block; }





.blog-post { line-height: 24px; } .blog-post img { margin-bottom: 10px;

} .blog-post a { color: #fff; -webkit-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .blog-post a:hover, .blog-post a:focus, .blog-post a:active 

{

opacity: .5; text-decoration: none; } @-moz-document url-prefix() { .top-bar { z-index: 3000; overflow: auto;}} .top-bar .toggle-topbar.menu-icon a:hover { text-decoration: none; } .top-bar .name { height: 67px; } .top-bar .name h1{ 

   padding: 0 15px;

} .top-bar .name h1 a{ 

       display: inline-block;
       padding: 0;
       width: auto;

} .top-bar-section ul { background: #333; } .top-bar-section ul#social-nav li>a.icon-link { font-size: 21px; } .top-bar span.logo { width: 320px; display: inline-block; margin-top:-80px; margin-left:-32px;


} .top-bar span.fb { width: 48px; display: inline-block; margin-top: 8px; margin-left:60px; }

.top-bar span.tweet { width: 48px; display: inline-block; margin-top:-48px; margin-left:120px;

} .top-bar span.flickr { width: 44px; display: inline-block; margin-top:-46px; margin-left:180px;

}

.top-bar-section ul li>a { font-family: 'Roboto Condensed', sans-serif; font-size: 16px; } .top-bar-section ul li a:hover,.top-bar-section ul li a:focus,.top-bar-section ul li a:active{ 

       text-decoration: none;
   }

.tabs-nav { margin-top: 20px; }

.tabs-nav a.icon-link i { font-size: 24px; } .tabs dd>a:hover, .button:hover { text-decoration: none; } .tabs-nav .tabs { display: inline-block; } .tabs-nav .tabs dd a i.fi { font-size: 24px; } .tabs-nav .tabs dd.active a { background: #de3831; color: #fff; } .event-list { text-align: left; } p.lead {

} .reveal-modal .close-reveal-modal { font-size: 29px; line-height: 1; position: absolute; top: 0px; right: 0px; color: #fff; font-weight: bold; cursor: pointer; background: #de3831; width: 30px; height: 30px; text-align: center; border-radius: 100px; } .reveal-modal .close-reveal-modal:hover { text-decoration: none; } section {

} .section-header { margin: 30px 0; font-weight: 300; } .overlay { background: rgba(0,0,0,.3); width: 100%; height: 100%; } @-moz-document url-prefix() { .overlay{ position:absolute;} } .slide{ width:100%; height:100%; position: relative; display: table; text-align: center; }

.slide-content { height: 100%; width: 100%; display: table; } .slide-inner { vertical-align: top; text-align: center; } .slide-content.vertical-center .slide-inner { vertical-align: middle; display: table-cell; } .slide-button { position: absolute; bottom: 0; text-align: center; width: 100%; padding-bottom: 10px; } .slide-button a:hover, .slide-button a:focus, .slide-button a:active { text-decoration: none; opacity: .7; } .slide-button img{ margin-top: 3px; width: auto; } @-moz-document url-prefix() { .slide-button { bottom: 67px;} } .slide-button a { color: #fff; } .slide-button a i.fi {

font-size: 40px; } .slide-dark, .slide-dark h2.section-header, .slide-dark h3 { color: #fff; } .slide-dark .tabs-nav .tabs dd>a { background: #303030; color: #999; } .slide-dark .tabs-nav .tabs dd>a:hover { background: #3C3C3C; color: #999; } .slide-dark .tabs-nav .tabs dd.active a { background: #de3831; color: #fff; } /****************************** 

SLIDE 1: Home
                                                              • /
  1. home {

background-color:#222; background-image:url('http://nyphil.vo.llnwd.net/o28/images/1314/biennial/bg-01.3.jpg'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat; color: #fff; } @-moz-document url-prefix() { #home { height:100%!important;} }

  1. home .overlay{

position: absolute; }

  1. home p.lead {

}

  1. home .biennial-logo {

}

  1. home #tagline {

display: none; }

  1. home .biennial-logo img {

max-width: 202px; margin-bottom: 10px; }

  1. home .biennial-dates {

font-size: 19px; margin-bottom: 20px; }

  1. home a.play-btn {

color: #fff; display: inline-block; f }

  1. home a.play-btn .watch-trailer-button {

width: 60px; height: 60px; background: rgba(0,0,0,.4); border-radius: 1000px; border: 3px #fff solid; text-align: center; display: table; vertical-align: middle; color: #fff; margin: 0 auto 12px; font-size: 36px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;

}

  1. home a.play-btn:hover,
  2. home a.play-btn:focus,
  3. home a.play-btn:active { 
 text-decoration: none;

}

  1. home a.play-btn:hover span,
  2. home a.play-btn:focus span,
  3. home a.play-btn:active span {

opacity: .7; }

  1. home a.play-btn span i {

display: table-cell; vertical-align: middle; padding-left: 6px; }

  1. home a.play-btn .watch-trailer-text {

display: none; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

  1. videoModal {

background: transparent; border: none; -webkit-box-shadow: none; box-shadow: none; margin-top: 110px; }

/****************************** 

SLIDE 2: Events
                                                              • /
  1. events{

background-color: #f9f9f9; height: auto; padding-bottom: 0; }

  1. events .event {

text-align: left; margin-bottom: 40px; }

  1. events .event img {

}

  1. events .event .events-list,
  2. events .featured-event .events-list {

list-style: none; text-align: left; margin-left: 0; display: none; }

  1. events .event-title {

overflow: hidden; margin-top: 0; font-size: 24px; font-weight: 300; } .event-title a { color: #222; } .event-title a:hover, .event-title a:focus, .event-title a:active { color: #c92720; }

  1. events .featured {

margin: 20px 0 40px; }

  1. events .featured-event {

margin-bottom: 70px; text-align: left; margin-top: 30px;

}

  1. events .featured-event img {

display: block; }

  1. events .featured-event .event-title {

margin-top: 20px; text-align: left; font-weight: 300; font-size: 32px; }

  1. events .featured-event .event-title:hover,
  2. events .featured-event .event-title:focus,
  3. events .featured-event .event-title:active {

}

  1. events .featured-event .events-list {

display: block; }

  1. events .date-photo {

position: relative; }

  1. events .performance-date {

background: transparent; color: #222; text-align: center; }

  1. events .performance-date .month {

margin-top: 5px; font-size: 14px; text-transform: uppercase; display: block; }

  1. events .performance-date .date {

font-weight: 300; font-size: 36px; color: #de3831; }

  1. events .performance-date .day {

margin: 5px 0; font-size: 14px; display: block; }

  1. events .performance-date .time {

color: #999; font-size: 0.85em; }

  1. events .event-list-item {

margin-bottom: 20px; }

  1. events .event-list-item .venue {

margin-bottom: 10px; }

  1. events .event .media .media-object {

}

  1. events event .media > .left {

margin-right: 15px;

}

  1. events .dates {

margin-bottom: 5px; color: #999; }

  • {

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /****************************** 

SLIDE 3: Festival Pass
                                                              • /
  1. festival-pass {

background-color:#000; border-top: 1px solid #ddd;

color: #fff; }

  1. festival-pass.no-video {

background-color:#222; background-image:url('http://nyphil.vo.llnwd.net/o28/images/1314/biennial/poster.jpg'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat; color: #fff; } @-moz-document url-prefix() { #festival-pass.no-video { height:100%!important;} }

  1. festival-pass .lemur {

position: absolute; display: none; }

  1. festival-pass .lemur img {

width: auto; }

  1. festival-pass .lemur-01 {

position: absolute; top: -182px; left: 40px; z-index: 45; }

  1. festival-pass .lemur-02 {

top: -262px; right: -170px; z-index: 45; display: none; }

  1. festival-pass .section-header { 
 color: #fff;

} .video-background { 

 height: 700px;

border-right: none; border-left: none; position: relative; padding: 0; text-align: left; }

  1. festival-pass .video-background{

top: 0;} @-moz-document url-prefix() {

  1. festival-pass .video-background{

} }

  1. video-container {

position: absolute; }

  1. video-container {

top:0%; left:0%; height: 100%; width:100%; overflow: hidden; } video { 

left:0;
position:absolute;
top:0;

z-index:0; } video.fillWidth { width: 100%; } .video-background-caption { display: table; width: 100%; text-align: center; height: 100%; background: rgba(0,0,0,.2); } .video-background-caption-inner { display: table-cell; vertical-align: middle; } .video-overlay { position: absolute; width: 100%; height: 100%; } /****************************** 

SLIDE 4: Composers
                                                              • /
  1. composers{

background-color: #f9f9f9; border-top: 1px solid #ddd; height: auto; padding-bottom: 80px; } @-moz-document url-prefix() {

  1. composers{height: 100%;}}
  2. composers .composer {

position: relative; width: 100px; height: 100px; color: #fff; }

  1. composers .composer .composer-overlay {

position: absolute; width: 100%; height: 100%; top:0; }

  1. composers .composer .composer-caption {

display: table; position: absolute; width: 100%; height: 100%; background: rgba(222, 56, 49, 0.7); color: #fff; top: 0; left: 0; padding: 0 10px; border-radius: 100px; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; }

  1. composers .og-expanded .composer .composer-caption {

opacity: 1; }

  1. composers .composer .composer-caption-inner {

display: table-cell; vertical-align: middle; }

  1. composers a.composer:hover,
  2. composers a.composer:focus,
  3. composers a.composer:active {

text-decoration: none;

}

  1. composers a.composer:hover .composer-caption,
  2. composers a.composer:focus .composer-caption,
  3. composers a.composer:active .composer-caption {

display: table; width: 100%; height: 100%; opacity: 1; }

  1. composers .composer .composer-caption h3 {

color: #fff; } /* Thumbnail Grid with Expanding Preview */ .og-grid-container {

} .og-grid { list-style: none; padding: 0; margin: 0 auto; text-align: center; width: 100%; }

.og-grid li { display: inline-block; margin: 10px 5px 0 5px; vertical-align: top; background: rgba(0,0,0,0); }

.og-grid li > a, .og-grid li > a img { border: none; outline: none; display: block; position: relative; -webkit-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; border-radius: 500px; -webkit-border-radius: 500px; -moz-border-radius: 500px; } .og-grid li.og-expanded > a.composer::after { top: auto; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #ddd; border-width: 15px; left: 50%; margin: -20px 0 0 -15px; }


.og-expander { position: absolute; background: #ddd; top: auto; left: 0; width: 100%; margin-top: 10px; text-align: left; height: 0; overflow: hidden; }

.og-expander-inner { padding: 50px 30px; height: 100%; }

.og-close { position: absolute; width: 40px; height: 40px; top: 20px; right: 20px; cursor: pointer; }

.og-close::before, .og-close::after { content: ; position: absolute; width: 100%; top: 50%; height: 1px; background: #888; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }

.og-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); }

.og-close:hover::before, .og-close:hover::after { background: #333; }

.og-fullimg, .og-details { width: 100%; float: left; overflow: hidden; position: relative; }

.og-details {

}

.og-fullimg { text-align: center; max-width: 120px; }

.og-fullimg img { display: inline-block; max-height: 100%; max-width: 100%; border-radius: 1000px; width: auto; }

.og-details h3 { font-weight: 300; font-size: 32px; padding: 10px 0 0; margin-bottom: 10px;

}

.og-details p { font-weight: 400; font-size: 16px; line-height: 22px; color: #808080; font-weight: 300; }

.og-details a { font-weight: 700; font-size: 16px; outline: none; }

.og-details a::before {

}

.og-details a:hover {

} .og-loading { width: 20px; height: 20px; border-radius: 50%; background: #ddd; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; -webkit-animation: loader 0.5s infinite ease-in-out both; -moz-animation: loader 0.5s infinite ease-in-out both; animation: loader 0.5s infinite ease-in-out both; }



/****************************** 

SLIDE 5
                                                              • /
  1. connect {

/*height: 500px;*/ background: #222; padding-bottom: 30px; height: auto; } @-moz-document url-prefix() { #connect{ } }

  1. connect .social-network {

min-height: 420px; background: #eee; padding: 20px; margin-bottom: 20px; }

  1. connect .tweet {

padding: 20px 0; font-family: 'Droid Serif', serif; font-style: italic; }

/****************************** 

SLIDE 6
                                                              • /
  1. venues {

height: 100%; background-color: #eee; padding-bottom: 40px; }

  1. venues {

}

/****************************** 

SLIDE 7
                                                              • /
  1. press {

/* background-color: #222; background-image: url(http://nyphil.vo.llnwd.net/o28/images/1314/biennial/bg-03.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center top; color: #fff; display: block; */

background-color: #222; background-image: url(http://nyphil.vo.llnwd.net/o28/images/1314/biennial/bg-03-edit.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center top; color: #fff; }

  1. press .overlay{

position: absolute; }

.fish-wrapper { display: none; }



.block.block-press { margin-bottom: 80px; } .block.block-press a { color: #fff; } .block.block-press a h3, .block.block-press a p { -webkit-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .block.block-press a:hover, .block.block-press a:focus, .block.block-press a:active, .block.block-press a:hover h3, .block.block-press a:focus h3, .block.block-press a:active h3, .block.block-press a:hover p, .block.block-press a:focus p, .block.block-press a:active p { opacity: 0.70; text-decoration: none; } .footer .second-row { background: #141414; color:#aaa; padding: 20px 0; } .footer .second-row h4 { color: #fff; } .footer .second-row { text-align:left; margin-bottom: 30px; max-width: 120px; margin-top: 10px; } footer .footer-contact-info { color: #aaaaaa; font-size: 1em; line-height: 1.5em; } footer .footer-address { font-size: .75em; line-height: 1.5em; } footer .footer-contact-info { color: #aaaaaa; font-size: 1em; line-height: 1.5em; } footer .footer-address { font-size: .75em; line-height: 1.5em; } footer .footer-social-tool ul { list-style: none outside none; margin-left: 0; } footer .footer-social-tool ul li { float: left; display: inline-block; margin-right: 4px; } footer .footer-social-tool ul li a:hover, footer .footer-social-tool ul li a:focus { opacity: .7; } footer .footer-copyright { color: #666; margin: 20px 0 0 0; } footer .footer-copyright .left, footer .footer-copyright .right { font-size: .75em; } footer .footer-copyright ul { list-style: none outside none; margin-bottom: 20px; margin-left: 0; font-size: 12px; } footer .footer-copyright ul li { float: left; display: inline-block; margin-right: 10px; padding-right: 10px; border-right: 1px solid #666; line-height: 1em; } footer .footer-copyright ul li:last-child { padding-right: 0; border-right: none; } footer .footer-copyright ul li a { color: #666; font-weight: 400; } footer .footer-copyright ul li a:hover { text-decoration: underline; }

.tabs-content>.content.about-biennial p {

} .tabs-content>.content.about-biennial img { margin-bottom: 20px; } .tabs dd>a { padding: 1rem 1.2rem; font-family: 'Roboto Condensed', sans-serif; font-size: 1rem; } .row.collapse { padding-left: 15px; padding-right: 15px; } .top-bar-section ul li:hover:not(.has-form)>a { text-decoration: none; } .top-bar-section ul#social-nav li { float: left; } .top-bar-section ul#social-nav li a { padding: 12px 15px; } .top-bar-section ul#social-nav li a.hashtag { padding: 16px 15px; } /* 640px and up */ @media only screen and (min-width: 40.063em) { #videoModal { margin-top: 0; } #events{ padding-bottom: 110px; } #events .performance-date .month { margin-top: 10px; } #events .performance-date .date { font-weight: 300; font-size: 60px; } .tabs dd>a { padding: 1rem 2rem; font-size: 1rem; } .tabs-content>.content.about-biennial { padding-bottom: 60px; } .tabs-nav .hide-for-small-only { display: inline!important; } #home p.lead { font-size: 24px; line-height: 32px; } #home #branding { } #home #tagline { display: block; width: 100%; position: absolute; bottom: 0; text-align: center; } #home #tagline img { max-width: 450px; }

#home #branding #lockup { opacity: 1; } #main-nav { display: block; } #home .biennial-dates { font-size: 28px; margin-bottom: 20px; } #events .event img { display: block; float: none; width: 100%; margin-right: 0; position: relative; top: inherit; left: inherit; margin-bottom: 10px; } #events .event { padding-left: 0; } #events .event .events-list { display: block; } .events-list li a { font-size: 14px; color: #777; } .events-list li a:hover, .events-list li a:focus, .events-list li a:active { color: #c92720; } #festival-pass .lemur { display: block; }

#events .featured-event { padding-left: 100px; padding-left: 100px;

} .press-blocks { z-index: 49; position: relative; } .fish-wrapper { position: absolute; width: 100%; height: 100%; top: 0; display: block; z-index: 48; }

.fish-wrapper img { width: auto; } .fish-wrapper img:first-child{ position:absolute; top: 100px; left: 40px; } .fish-wrapper img:nth-child(2){ position:absolute; top:300px; left:60px; } .fish-wrapper img:nth-child(3){ position:absolute; top:450px; right:190px; } .fish-wrapper img:nth-child(4){ position:absolute; top:50px; right:100px; } .fish-wrapper img:nth-child(5){ position:absolute; top:300px; right:137px; } .slide{

}

.og-fullimg, .og-details { width: 50%; float: left; height: 100%; overflow: hidden; position: relative; max-width: inherit; }

.og-details { padding: 0 40px 0 20px; }

.og-fullimg { text-align: center; }

.og-fullimg img { display: inline-block; max-height: 100%; max-width: 100%; border-radius: 1000px; width: auto; }

.og-details h3 { font-weight: 300; font-size: 52px; padding: 40px 0 10px; margin-bottom: 10px; }

.og-details p { font-weight: 400; font-size: 16px; line-height: 22px; color: #333; }

.og-details a { font-weight: 700; font-size: 16px; outline: none; } #composers .composer .composer-caption-inner { display: table-cell; vertical-align: middle; line-height: 21px; } } /* 768px and up */ @media only screen and (min-width: 48em) {

#home {

} #home .biennial-logo img { max-width: 340px; } .section-header { margin: 30px 0; font-size: 54px; line-height: 64px; } #home a.play-btn .watch-trailer-button { width: 90px; height: 90px; font-size: 50px;

} #home a.play-btn:hover .watch-trailer-button, #home a.play-btn:focus .watch-trailer-button, #home a.play-btn:active .watch-trailer-button {

} #home a.play-btn .watch-trailer-text { display: block; } }

/* 940px and up */ @media only screen and (min-width: 58.75em) {

.footer .second-row .logo { text-align: center; margin-left: auto; margin-right: auto; } .top-bar-section li:not(.has-form) a:not(.button) { padding: 0 15px; line-height: 67px; background: transparent; } .top-bar-section li.active:not(.has-form) a:not(.button) { padding: 0 15px; color: #fff; background: #272727; border-bottom: 4px solid #ffffff z-index: 4; line-height: 67px; } .top-bar-section ul#social-nav li a.hashtag { padding: 0 15px; } .top-bar-section ul { background: transparent; } .top-bar-section ul#social-nav li a { padding: 0 15px; } .top-bar-section li.active:not(.has-form) a:not(.button):hover { background: transparent; } .top-bar-section ul li:hover:not(.has-form)>a { text-decoration: none; border-bottom: 4px solid #ffffff; border-top: 4px solid #ffffff; line-height: 59px;

}

} @media only screen and (max-width: 48em) and (orientation : landscape) { .touch .og-grid li.og-expanded a.composer{ margin-top: 50px; }

} 

 #map-canvas {width: 100%; height:650px; }
 .venueName {font-size:15px;}

html.js body#biennial-landing.parallax div#wrapper div#scroller section#venues.slide div.row div.small-12 div#map-canvas div.gm-style div div div div div div img { 

   background:url('http://nyphil.vo.llnwd.net/o28/images/1314/biennial/x.jpg') repeat-y;

max-width:93.5%;

}

.panel { 

  width: 100%;
  height: 630px; /* fixed height of div */  
  -webkit-overflow-scrolling: touch; /* allow touch scrolling in webkit browsers */
  background: #222;
  border:none;    
}           

.overflow{
  overflow: scroll; /* set overflow to scroll for desktop browsers */
  overflow-x: hidden; /* hide scrollbar on x-axis */

}

.panel.overflow::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #222222; }

.panel.overflow::-webkit-scrollbar { width: 12px; background-color: #222222; }

.panel.overflow::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; }

Retrieved from "http://2014.igem.org/Team:IIT_Delhi/style.CSS"