Team:SYSU-Software/demo.css

From 2013.igem.org

body { font-family: Arial; font-weight: bold; margin: 0; padding: 0; }

p { word-break: break-all; }

.wrapper { width: 100%; padding: 30px 0; }

.wrapper.colored-wrapper { background-color: #dff5f2; }

.container { width: 980px; margin: 0 auto; }

.divider { width: 660px; height: 2px; margin: 40px auto; background-color: #3d4a55; }

.header-text { color: #ffe14b; font-size: 25px; }

.demo-nav { width: 100%; text-align: center; height: 36px; font-size: 36px; }

.demo-nav img { width: 21px; height: 27px; }

.demo-content { width: 100%; overflow: hidden; padding-bottom: 67px; }

.hexagon { display: inline-block; float: left; width: 234px; height: 235px; margin-top: 67px; margin: 2px; }

.hexagon.margin { margin-left: 121px; }

.hexagon .top-triangle { display: block; width: 0; height: 0; overflow: hidden; border-bottom: 67px solid #ffe14b; border-left: 117px dotted transparent; border-right: 117px dotted transparent;

transition:border-bottom 0.5s; -moz-transition:border-bottom 0.5s; /* Firefox */ -webkit-transition:border-bottom 0.5s; /* Safari and Chrome */ -o-transition:border-bottom 0.5s; /* Opera */ }

.hexagon span { display: block; width: 234px; height: 168px; line-height: 59px; text-align: center; background-color: #ffe14b; font-size: 11px; font-family: arial, Veradana, sans-serif;

transition:background-color 0.5s; -moz-transition:background-color 0.5s; /* Firefox */ -webkit-transition:background-color 0.5s; /* Safari and Chrome */ -o-transition:background-color 0.5s; /* Opera */ }

.hexagon .bottom-triangle { display: block; width: 0; height: 0; overflow: hidden; border-top: 67px solid #ffe14b; border-left: 117px dotted transparent; border-right: 117px dotted transparent;

transition:border-top 0.5s; -moz-transition:border-top 0.5s; /* Firefox */ -webkit-transition:border-top 0.5s; /* Safari and Chrome */ -o-transition:border-top 0.5s; /* Opera */ }

.hexagon:hover .top-triangle { border-bottom: 67px solid #D8B91E; }

.hexagon:hover span { background-color: #D8B91E; }

.hexagon:hover .bottom-triangle { border-top: 67px solid #D8B91E; }

/* type1 */ .hexagon.block1 .top-triangle { border-bottom: 67px solid #a8dbd2; }

.hexagon.block1 span { background-color: #a8dbd2; }

.hexagon.block1 .bottom-triangle { border-top: 67px solid #a8dbd2; }

.hexagon.block1:hover .top-triangle { border-bottom: 67px solid #88C2B8; }

.hexagon.block1:hover span { background-color: #88C2B8; }

.hexagon.block1:hover .bottom-triangle { border-top: 67px solid #88C2B8; }

/* type2 */ .hexagon.block2 .top-triangle { border-bottom: 67px solid #445d72; }

.hexagon.block2 span { background-color: #445d72; }

.hexagon.block2 .bottom-triangle { border-top: 67px solid #445d72; }

.hexagon.block2:hover .top-triangle { border-bottom: 67px solid #2F3942; }

.hexagon.block2:hover span { background-color: #2F3942; }

.hexagon.block2:hover .bottom-triangle { border-top: 67px solid #2F3942; }

/* type3 */ .hexagon.block3 .top-triangle { border-bottom: 67px solid #0c1d2b; }

.hexagon.block3 span { background-color: #0c1d2b; }

.hexagon.block3 .bottom-triangle { border-top: 67px solid #0c1d2b; }

.hexagon.block3:hover .top-triangle { border-bottom: 67px solid #131518; }

.hexagon.block3:hover span { background-color: #131518; }

.hexagon.block3:hover .bottom-triangle { border-top: 67px solid #131518; }

/* type4 */ .hexagon.block4 .top-triangle { border-bottom: 67px solid #445d72; }

.hexagon.block4 span { background-color: #445d72; }

.hexagon.block4 .bottom-triangle { border-top: 67px solid #445d72; }

.hexagon.block4:hover .top-triangle { border-bottom: 67px solid #0F171F; }

.hexagon.block4:hover span { background-color: #0F171F; }

.hexagon.block4:hover .bottom-triangle { border-top: 67px solid #0F171F; }

.demo-video { float: left; margin-left: 15px; width: 560px; height: 360px; padding: 0; }

.demo-intro { float: right; width: 360px; height: 360px; margin-right: 15px; }

.intro-header { width: 100%; }

.into-content { width: 100%; }

.intro-content img { display: block; margin: 0 auto; } /*footer*/

   #sysu-footer{
     width: 100%;
     margin:0 auto;

     position: relative;
     bottom: 0px;
     overflow: hidden;

     background-color: white;
   }