Difference between revisions of "Team:Tianjin/Experiment/css/style.css"

(Created page with "@charset "utf-8"; #vlightbox{width:680px;height:355px;margin:0 auto;} #vlightbox span{display:block;} #vlightbox a{display:block;float:left;width:310px;height:155px;margin:3px...")
 
 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
@charset "utf-8";
+
/* General Blueprint Style */
−
#vlightbox{width:680px;height:355px;margin:0 auto;}
+
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
−
#vlightbox span{display:block;}
+
@font-face {
−
#vlightbox a{display:block;float:left;width:310px;height:155px;margin:3px 1px;padding:6px;border:solid 1px #b8b8b8;
+
font-family: 'bpicons';
−
background-color:#f4f5f5;opacity:0.87;}
+
src:url('../fonts/bpicons/bpicons.eot');
−
#vlightbox a img{display:block;border:none;margin:0px;}
+
src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'),
−
#vlightbox a:hover{opacity:1;}
+
url('../fonts/bpicons/bpicons.woff') format('woff'),
−
#vlightbox a.vlightbox_hidden{display:none;}
+
url('../fonts/bpicons/bpicons.ttf') format('truetype'),
−
#vlightbox a img{border:medium none;margin:0 auto;width:310px;height:155px;}
+
url('../fonts/bpicons/bpicons.svg#bpicons') format('svg');
 +
font-weight: normal;
 +
font-style: normal;
 +
} /* Made with http://icomoon.io/ download by http://www.codefans.net*/
  
 +
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
 +
body, html { font-size: 100%; padding: 0; margin: 0;}
  
 +
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
 +
.clearfix:before, .clearfix:after { content: " "; display: table; }
 +
.clearfix:after { clear: both; }
  
 +
body {
 +
    font-family: 'Lato', Calibri, Arial, sans-serif;
 +
    color: #47a3da;
 +
}
  
−
#overlay{
+
a {
−
position:absolute;
+
color: #f0f0f0;
−
top:0;
+
text-decoration: none;
−
left:0;
+
−
z-index:1090;
+
−
width:100%;
+
−
height:auto;
+
−
background-color:#131313;
+
 
}
 
}
  
−
#lightbox{
+
a:hover {
−
position:absolute;
+
color: #000;
−
top:20px;
+
−
left:0;
+
−
width:100%;
+
−
z-index:1100;
+
−
text-align:center;
+
−
color:white;
+
−
line-height:0;
+
 
}
 
}
  
−
#lightbox a, #lightbox a:hover {
+
.main{
−
border-bottom:none;
+
width: 90%;
−
color:white;
+
max-width: 69em;
−
text-decoration:underline;
+
margin: 0 auto;
 +
padding: 0 1.875em 3.125em 1.875em;
 
}
 
}
  
−
#lightbox a img{ border:none; }
 
  
−
#outerImageContainer{
+
 
−
width:auto;
+
 
−
height:auto; /* without this line error in IE8 detected */
+
@font-face {
−
margin:0 auto;
+
font-family: 'ecoico';
−
position:relative;
+
src:url('../fonts/timelineicons/ecoico.eot');
 +
src:url('../fonts/timelineicons/ecoico.eot?#iefix') format('embedded-opentype'),
 +
url('../fonts/timelineicons/ecoico.woff') format('woff'),
 +
url('../fonts/timelineicons/ecoico.ttf') format('truetype'),
 +
url('../fonts/timelineicons/ecoico.svg#ecoico') format('svg');
 +
font-weight: normal;
 +
font-style: normal;
 +
} /* Made with http://icomoon.io/ */
 +
 
 +
.cbp_tmtimeline {
 +
margin: 30px 0 0 0;
 +
padding: 0;
 +
list-style: none;
 +
position: relative;
 +
}
 +
 
 +
/* The line */
 +
.cbp_tmtimeline:before {
 +
content: '';
 +
position: absolute;
 +
top: 0;
 +
bottom: 0;
 +
width: 10px;
 +
background: #afdcf8;
 +
left: 20%;
 +
margin-left: -10px;
 
}
 
}
  
−
#lightboxImage{
+
.cbp_tmtimeline > li {
−
width:100%;
+
position: relative;
−
height:100%;
+
 
}
 
}
  
−
#imageContainer{
+
/* The date/time */
−
width:50px;
+
.cbp_tmtimeline > li .cbp_tmtime {
−
height:50px;
+
display: block;
−
margin:0 auto;
+
width: 25%;
−
overflow:hidden;
+
padding-right: 100px;
−
position:relative;
+
position: absolute;
−
font-size:0;/* ie fix - big info bar*/
+
 
}
 
}
  
−
#loading{
+
.cbp_tmtimeline > li .cbp_tmtime span {
−
position:absolute;
+
display: block;
−
top:40%;
+
text-align: right;
−
left:0;
+
−
height:25%;
+
−
width:100%;
+
−
text-align:center;
+
−
font-size:10px;
+
−
z-index:1;
+
 
}
 
}
−
#loadingLink {
+
 
−
display:block;
+
.cbp_tmtimeline > li .cbp_tmtime span:first-child {
−
margin:0 auto;
+
font-size: 0.9em;
−
padding:0;
+
color: #bdd0db;
−
width:60%;
+
−
height:32px;
+
−
background:url(../icons/loading.gif) center center no-repeat;
+
−
text-indent:-9999px;
+
 
}
 
}
−
#hoverNav{
+
 
−
position:absolute;
+
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
−
top:0;
+
font-size: 2.9em;
−
left:0;
+
color: #3594cb;
−
height:100%;
+
−
width:100%;
+
−
z-index:10;
+
 
}
 
}
−
#imageContainer>#hoverNav{ left:0;}
 
−
#hoverNav a{ outline:none;}
 
  
−
#prevLinkImg, #nextLinkImg{
+
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
−
width:49%;
+
color: #6cbfee;
−
height:100%;
+
−
background-image:url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
+
−
display:block;
+
−
text-indent:-9999px;
+
−
}
+
−
#prevLinkImg { left:0; float:left;}
+
−
#nextLinkImg { right:0; float:right;}
+
−
#prevLinkImg:hover, #prevLinkImg:visited:hover {
+
−
background:url(../icons/prev.png) 5% center no-repeat;
+
−
_background-image:url(../icons/prev.gif)
+
 
}
 
}
−
#nextLinkImg:hover, #nextLinkImg:visited:hover {
+
 
−
background:url(../icons/next.png) 97% center no-repeat;  
+
/* Right content */
−
_background-image:url(../icons/next.gif)
+
.cbp_tmtimeline > li .cbp_tmlabel {
 +
margin: 0 0 15px 25%;
 +
background: #3594cb;
 +
color: #fff;
 +
padding: 2em;
 +
font-size: 1.2em;
 +
font-weight: 300;
 +
line-height: 1.4;
 +
position: relative;
 +
border-radius: 5px;
 
}
 
}
  
−
#imageDataContainer{
+
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
−
font:10px Verdana, Helvetica, sans-serif;
+
background: #6cbfee;
−
font-family:" Trebuchet MS",tahoma,verdana,arial,sans-serif;
+
−
font-size:13px;
+
−
width:100%;
+
 
}
 
}
  
−
#imageData{
+
.cbp_tmtimeline > li .cbp_tmlabel h2 {  
−
overflow:hidden;
+
margin-top: 0px;
−
width:100%;
+
padding: 0 0 10px 0;
 +
border-bottom: 1px solid rgba(255,255,255,0.4);
 
}
 
}
−
#imageDetails{ width:70%; float:left; text-align:left; padding:10px 10px 0 0;}
+
 
−
#caption{ font-weight:bold; display:block;}
+
/* The triangle */
−
#numberDisplay{ display:block; float:left; padding:9px 10px 0 0;}
+
.cbp_tmtimeline > li .cbp_tmlabel:after {
−
#detailsNav{display:block; float:left;  padding:0; }
+
right: 100%;
−
#prevLinkDetails, #nextLinkDetails, #slideShowControl{ background-repeat:no-repeat; outline-style:none; display:block; float:left;}
+
border: solid transparent;
−
#prevLinkDetails {
+
content: " ";
−
margin:2px; width:32px;height:32px; background-position:left 100%;
+
height: 0;
−
background-image:url(../icons/navigation.png);
+
width: 0;
−
_background:none;
+
position: absolute;
−
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/prev-32grey.png', sizingMethod='scale');
+
pointer-events: none;
 +
border-right-color: #3594cb;
 +
border-width: 10px;
 +
top: 10px;
 
}
 
}
−
#prevLinkDetails:hover {
+
 
−
background-position:0 0;
+
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
−
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/prev-32color.png', sizingMethod='scale');
+
border-right-color: #6cbfee;
 
}
 
}
  
−
#nextLinkDetails {
+
/* The icons */
−
margin:2px; width:32px;height:32px; background-position:right 100%;
+
.cbp_tmtimeline > li .cbp_tmicon {
−
background-image:url(../icons/navigation.png);
+
width: 40px;
−
_background:none;
+
height: 40px;
−
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/next32-grey.png', sizingMethod='scale');
+
font-family: 'ecoico';
 +
speak: none;
 +
font-style: normal;
 +
font-weight: normal;
 +
font-variant: normal;
 +
text-transform: none;
 +
font-size: 1.4em;
 +
line-height: 40px;
 +
-webkit-font-smoothing: antialiased;
 +
position: absolute;
 +
color: #fff;
 +
background: #46a4da;
 +
border-radius: 50%;
 +
box-shadow: 0 0 0 8px #afdcf8;
 +
text-align: center;
 +
left: 20%;
 +
top: 0;
 +
margin: 0 0 0 -25px;
 
}
 
}
−
#nextLinkDetails:hover {
+
 
−
background-position:100% 0;
+
.cbp_tmicon-phone:before {
−
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/next32-color.png', sizingMethod='scale');
+
content: "\e000";
 
}
 
}
−
#slideShowControl{
+
 
−
display:block;
+
.cbp_tmicon-screen:before {
−
width:32px;
+
content: "\e001";
−
height:32px;
+
−
float:left;
+
−
margin:2px;
+
−
background-image:url(../icons/navigation.png);
+
−
background-position:-32px 100%;
+
−
background-repeat:no-repeat;
+
−
_background:none;
+
−
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/start32grey.png', sizingMethod='scale');
+
 
}
 
}
−
#slideShowControl:hover{
+
 
−
background-position:-32px 0;
+
.cbp_tmicon-mail:before {
−
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/start32color.png', sizingMethod='scale');
+
content: "\e002";
−
}
+
−
#slideShowControl.started{
+
−
background-position:-64px 100%;
+
−
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/pause32grey.png', sizingMethod='scale');
+
−
}
+
−
#slideShowControl.started:hover{
+
−
background-position:-64px 0;
+
−
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/pause32color.png', sizingMethod='scale');
+
 
}
 
}
  
−
#close{
+
.cbp_tmicon-earth:before {
−
padding:16px 0 0;
+
content: "\e003";
−
float:right;
+
 
}
 
}
−
#closeLink {
+
 
−
display:block;
+
/* Example Media Queries */
−
outline-style:none;
+
@media screen and (max-width: 65.375em) {
−
margin:0;
+
 
−
padding:0;
+
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
−
text-decoration:none;
+
font-size: 1.5em;
−
width:48px;
+
}
−
height:48px;
+
−
background:url(../icons/close.png) no-repeat 0 100%;
+
−
_background:none;
+
−
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/cancel48grey.png', sizingMethod='scale');
+
−
}
+
−
#closeLink:hover{
+
−
background-position:0 0;
+
−
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/cancel48color.png', sizingMethod='scale');
+
 
}
 
}
  
−
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
+
@media screen and (max-width: 47.2em) {
−
* html>body .clearfix {display:inline-block; width:100%;}
+
.cbp_tmtimeline:before {
 +
display: none;
 +
}
  
−
* html .clearfix {
+
.cbp_tmtimeline > li .cbp_tmtime {
−
/* Hides from IE-mac \*/
+
width: 100%;
−
height:1%;
+
position: relative;
−
/* End hide from IE-mac */
+
padding: 0 0 20px 0;
−
}
+
}
  
−
#outerImageFrame{
+
.cbp_tmtimeline > li .cbp_tmtime span {
−
height:100%;
+
text-align: left;
−
width:100%;
+
}
−
position:absolute;
+
−
}
+
  
−
#outerImageContainer{
+
.cbp_tmtimeline > li .cbp_tmlabel {
−
overflow:visible;
+
margin: 0 0 30px 0;
−
}
+
padding: 1em;
−
#outerImageContainer td{
+
font-weight: 400;
−
text-align:center;
+
font-size: 95%;
−
padding:0;
+
}
−
}
+
  
−
#lightboxFrameBody{
+
.cbp_tmtimeline > li .cbp_tmlabel:after {
−
background:url(../icons/back_info.png);
+
right: auto;
−
_background:none;
+
left: 20px;
−
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_info.png', sizingMethod='scale');
+
border-right-color: transparent;
−
}
+
border-bottom-color: #3594cb;
 +
top: -20px;
 +
}
  
−
#outerImageContainer td{
+
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
−
font-size:0;
+
border-right-color: transparent;
−
}
+
border-bottom-color: #6cbfee;
−
/* frame style */
+
}
−
#outerImageContainer td.tl, #outerImageContainer td.br{
+
−
height:19px;
+
−
width:19px;
+
−
}
+
  
−
#outerImageContainer td.tl{
+
.cbp_tmtimeline > li .cbp_tmicon {
−
background:url(../icons/back_corvers.png) 0 0;
+
position: relative;
−
_background-image:none;
+
float: right;
−
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_lt.png', sizingMethod='scale');
+
left: auto;
−
}
+
margin: -55px 5px 0 0px;
−
#outerImageContainer td.tc{
+
}
−
background:url(../icons/back_tb.png) 50% 0;
+
−
_background:none;
+
−
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_ct.png', sizingMethod='scale');
+
−
}
+
−
#outerImageContainer td.tr{
+
−
background:url(../icons/back_corvers.png) 100% 0;
+
−
_background-image:none;
+
−
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_rt.png', sizingMethod='scale');
+
−
}
+
−
#outerImageContainer td.ml{
+
−
background:url(../icons/back_lr.png) 0 50%;
+
−
_background-image:none;
+
−
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_lc.png', sizingMethod='scale');
+
−
}
+
−
#outerImageContainer td.mr{
+
−
background:url(../icons/back_lr.png) 100% 50%;
+
−
_background-image:none;
+
−
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_rc.png', sizingMethod='scale');
+
−
}
+
−
#outerImageContainer td.bl{
+
−
background:url(../icons/back_corvers.png) 0 100%;
+
−
_background-image:none;
+
−
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_lb.png', sizingMethod='scale');
+
−
}
+
−
#outerImageContainer td.bc{
+
−
background:url(../icons/back_tb.png) 50% 100%;
+
−
_background-image:none;
+
−
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_cb.png', sizingMethod='scale');
+
−
}
+
−
#outerImageContainer td.br{
+
−
background:url(../icons/back_corvers.png) 100% 100%;
+
−
_background-image:none;
+
−
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icons/back_rb.png', sizingMethod='scale');
+
 
}
 
}

Latest revision as of 02:53, 17 October 2016

/* General Blueprint Style */ @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); @font-face { font-family: 'bpicons'; src:url('../fonts/bpicons/bpicons.eot'); src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'), url('../fonts/bpicons/bpicons.woff') format('woff'), url('../fonts/bpicons/bpicons.ttf') format('truetype'), url('../fonts/bpicons/bpicons.svg#bpicons') format('svg'); font-weight: normal; font-style: normal; } /* Made with http://icomoon.io/ download by http://www.codefans.net*/

  • , *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; }

body { 

   font-family: 'Lato', Calibri, Arial, sans-serif;
   color: #47a3da;

}

a { color: #f0f0f0; text-decoration: none; }

a:hover { color: #000; }

.main{ width: 90%; max-width: 69em; margin: 0 auto; padding: 0 1.875em 3.125em 1.875em; }



@font-face { font-family: 'ecoico'; src:url('../fonts/timelineicons/ecoico.eot'); src:url('../fonts/timelineicons/ecoico.eot?#iefix') format('embedded-opentype'), url('../fonts/timelineicons/ecoico.woff') format('woff'), url('../fonts/timelineicons/ecoico.ttf') format('truetype'), url('../fonts/timelineicons/ecoico.svg#ecoico') format('svg'); font-weight: normal; font-style: normal; } /* Made with http://icomoon.io/ */

.cbp_tmtimeline { margin: 30px 0 0 0; padding: 0; list-style: none; position: relative; }

/* The line */ .cbp_tmtimeline:before { content: ; position: absolute; top: 0; bottom: 0; width: 10px; background: #afdcf8; left: 20%; margin-left: -10px; }

.cbp_tmtimeline > li { position: relative; }

/* The date/time */ .cbp_tmtimeline > li .cbp_tmtime { display: block; width: 25%; padding-right: 100px; position: absolute; }

.cbp_tmtimeline > li .cbp_tmtime span { display: block; text-align: right; }

.cbp_tmtimeline > li .cbp_tmtime span:first-child { font-size: 0.9em; color: #bdd0db; }

.cbp_tmtimeline > li .cbp_tmtime span:last-child { font-size: 2.9em; color: #3594cb; }

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child { color: #6cbfee; }

/* Right content */ .cbp_tmtimeline > li .cbp_tmlabel { margin: 0 0 15px 25%; background: #3594cb; color: #fff; padding: 2em; font-size: 1.2em; font-weight: 300; line-height: 1.4; position: relative; border-radius: 5px; }

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel { background: #6cbfee; }

.cbp_tmtimeline > li .cbp_tmlabel h2 { margin-top: 0px; padding: 0 0 10px 0; border-bottom: 1px solid rgba(255,255,255,0.4); }

/* The triangle */ .cbp_tmtimeline > li .cbp_tmlabel:after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #3594cb; border-width: 10px; top: 10px; }

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after { border-right-color: #6cbfee; }

/* The icons */ .cbp_tmtimeline > li .cbp_tmicon { width: 40px; height: 40px; font-family: 'ecoico'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; font-size: 1.4em; line-height: 40px; -webkit-font-smoothing: antialiased; position: absolute; color: #fff; background: #46a4da; border-radius: 50%; box-shadow: 0 0 0 8px #afdcf8; text-align: center; left: 20%; top: 0; margin: 0 0 0 -25px; }

.cbp_tmicon-phone:before { content: "\e000"; }

.cbp_tmicon-screen:before { content: "\e001"; }

.cbp_tmicon-mail:before { content: "\e002"; }

.cbp_tmicon-earth:before { content: "\e003"; }

/* Example Media Queries */ @media screen and (max-width: 65.375em) {

.cbp_tmtimeline > li .cbp_tmtime span:last-child { font-size: 1.5em; } }

@media screen and (max-width: 47.2em) { .cbp_tmtimeline:before { display: none; }

.cbp_tmtimeline > li .cbp_tmtime { width: 100%; position: relative; padding: 0 0 20px 0; }

.cbp_tmtimeline > li .cbp_tmtime span { text-align: left; }

.cbp_tmtimeline > li .cbp_tmlabel { margin: 0 0 30px 0; padding: 1em; font-weight: 400; font-size: 95%; }

.cbp_tmtimeline > li .cbp_tmlabel:after { right: auto; left: 20px; border-right-color: transparent; border-bottom-color: #3594cb; top: -20px; }

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after { border-right-color: transparent; border-bottom-color: #6cbfee; }

.cbp_tmtimeline > li .cbp_tmicon { position: relative; float: right; left: auto; margin: -55px 5px 0 0px; } }