Team:Manchester/css/overlays.css

From 2014.igem.org

/* Overlay style */ .overlay { position: fixed; width: 100%; height: 100%; padding-right: 5%; padding-left: 5%; top: 0; left: 0; /*background: rgba(10,0,20,0.9);*/ background: rgba(0,0,0,0.95); color: #fff; overflow-y: scroll; overflow-x: hidden; }

.overlay2 { position: fixed; width: 100%; height: 100%; top: 0; left: 0; /*background: rgba(70,70,70,0.9);*/ background: rgba(0,0,0,0.95); color: #fff; overflow-y: scroll; overflow-x: hidden; } .overlay3 { position: fixed; width: 100%; height: 100%; top: 0; left: 0; float: center; background: rgba(0,0,0,0.95); color: #fff; overflow-y: scroll; overflow-x: hidden; }

/* Overlay closing cross */ .overlay .overlay-close { width: 35px; height: 40px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(Cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; }

.overlay2 .overlay-close2 { width: 35px; height: 40px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(Cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; }

.overlay3 .overlay-close3 { width: 35px; height: 40px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(Cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; }

.overall-bit{ top: -30px; /*zpadding: 50px;*/ font-size: 50px; text-align: center; }

.overall-bit h3{ font-size: 90px; } .description { text-align: center; position: relative; font-size: 20px; top: 10%; /*height: 100%;*/ -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.description h2 { /*list-style: none;*/ padding: 0; /*margin: 0 auto;*/ display: inline-block; font-size: 54px; border-bottom: 2px solid; line-height: 90px; /*text-transform: uppercase;*/ /*height: 100%;*/ position: relative; }

.details { text-align: left; font-size: 20px; /*text-align: left;*/ position: relative; }

.details h3 { font-size: 40px; }

/* Effects */ .overlay-overview { visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; }

.overlay-team { visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; }

.overlay-beta { visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; }

.overlay-sponsors { visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; }

.overlay-overview.open { visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; }

.overlay-team.open { visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; }

.overlay-beta.open { visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; }

.overlay-sponsors.open { visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; }


/*@media screen and (max-height: 30.5em) { .overlay nav { height: 70%; font-size: 34px; } .overlay ul li { min-height: 34px; } }*/