|
|
Line 1: |
Line 1: |
| + | {{Template_All_Teams}} |
| + | |
| <!-- Declare that you are going to use html code instead of wiki code --> | | <!-- Declare that you are going to use html code instead of wiki code --> |
| <html> | | <html> |
− | <!-- Start of CSS-->
| |
− |
| |
− | <style>
| |
− |
| |
− | <!-- Reset.css -->
| |
− | a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var{background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;vertical-align:top;}ol, ul {list-style:none;}blockquote, q {quotes:none;}table, table td {padding:0;border:none;border-collapse:collapse;}img {vertical-align:top;}embed {vertical-align:top;}input[type=text], textarea{ outline:none;border-radius:0;}
| |
− |
| |
− | <!-- Skeleton.css -->
| |
− | /*
| |
− | * Skeleton V1.1
| |
− | * Copyright 2011, Dave Gamache
| |
− | * www.getskeleton.com
| |
− | * Free to use under the MIT license.
| |
− | * http://www.opensource.org/licenses/mit-license.php
| |
− | * 8/17/2011
| |
− | */
| |
− |
| |
− |
| |
− | /* Table of Contents
| |
− | ==================================================
| |
− | #Base 960 Grid
| |
− | #Tablet (Portrait)
| |
− | #Mobile (Portrait)
| |
− | #Mobile (Landscape)
| |
− | #Clearing */
| |
− |
| |
− |
| |
− |
| |
− | /* #Base 960 Grid
| |
− | ================================================== */
| |
− |
| |
− | .container_16{ position: relative; width: 960px; margin: 0 auto; padding: 0; }
| |
− | .grid_1,
| |
− | .grid_2,
| |
− | .grid_3,
| |
− | .grid_4,
| |
− | .grid_5,
| |
− | .grid_6,
| |
− | .grid_7,
| |
− | .grid_8,
| |
− | .grid_9,
| |
− | .grid_10,
| |
− | .grid_11,
| |
− | .grid_12,
| |
− | .grid_13,
| |
− | .grid_14,
| |
− | .grid_15,
| |
− | .grid_16 { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
| |
− |
| |
− | /* Nested Column Classes */
| |
− | .container_16 .alpha { margin-left: 0; }
| |
− | .container_16 .omega { margin-right: 0; }
| |
− |
| |
− | /* Base Grid */
| |
− | .container_16 .grid_1 { width: 40px; }
| |
− | .container_16 .grid_2 { width: 100px; }
| |
− | .container_16 .grid_3 { width: 160px; }
| |
− | .container_16 .grid_4 { width: 220px; }
| |
− | .container_16 .grid_5 { width: 280px; }
| |
− | .container_16 .grid_6 { width: 340px; }
| |
− | .container_16 .grid_7 { width: 400px; }
| |
− | .container_16 .grid_8 { width: 460px; }
| |
− | .container_16 .grid_9 { width: 520px; }
| |
− | .container_16 .grid_10 { width: 580px; }
| |
− | .container_16 .grid_11 { width: 640px; }
| |
− | .container_16 .grid_12 { width: 700px; }
| |
− | .container_16 .grid_13 { width: 760px; }
| |
− | .container_16 .grid_14 { width: 820px; }
| |
− | .container_16 .grid_15 { width: 880px; }
| |
− | .container_16 .grid_16 { width: 940px; }
| |
− | /* Prefix Extra Space >> 16 Columns */
| |
− | .container_16 .prefix_1 {padding-left:60px;}
| |
− | .container_16 .prefix_2 {padding-left:120px;}
| |
− | .container_16 .prefix_3 {padding-left:180px;}
| |
− | .container_16 .prefix_4 {padding-left:240px;}
| |
− | .container_16 .prefix_5 {padding-left:300px;}
| |
− | .container_16 .prefix_6 {padding-left:360px;}
| |
− | .container_16 .prefix_7 {padding-left:420px;}
| |
− | .container_16 .prefix_8 {padding-left:480px;}
| |
− | .container_16 .prefix_9 {padding-left:540px;}
| |
− | .container_16 .prefix_10 {padding-left:600px;}
| |
− | .container_16 .prefix_11 {padding-left:660px;}
| |
− | .container_16 .prefix_12 {padding-left:720px;}
| |
− | .container_16 .prefix_13 {padding-left:780px;}
| |
− | .container_16 .prefix_14 {padding-left:840px;}
| |
− | .container_16 .prefix_15 {padding-left:900px;}
| |
− | /* Suffix Extra Space >> 16 Columns */
| |
− | .container_16 .suffix_1 {padding-right:60px;}
| |
− | .container_16 .suffix_2 {padding-right:120px;}
| |
− | .container_16 .suffix_3 {padding-right:180px;}
| |
− | .container_16 .suffix_4 {padding-right:240px;}
| |
− | .container_16 .suffix_5 {padding-right:300px;}
| |
− | .container_16 .suffix_6 {padding-right:360px;}
| |
− | .container_16 .suffix_7 {padding-right:420px;}
| |
− | .container_16 .suffix_8 {padding-right:480px;}
| |
− | .container_16 .suffix_9 {padding-right:540px;}
| |
− | .container_16 .suffix_10 {padding-right:600px;}
| |
− | .container_16 .suffix_11 {padding-right:660px;}
| |
− | .container_16 .suffix_12 {padding-right:720px;}
| |
− | .container_16 .suffix_13 {padding-right:780px;}
| |
− | .container_16 .suffix_14 {padding-right:840px;}
| |
− | .container_16 .suffix_15 {padding-right:900px;}
| |
− |
| |
− | /* #Tablet (Portrait)
| |
− | ================================================== */
| |
− |
| |
− | /* Note: Design for a width of 768px */
| |
− |
| |
− | @media only screen and (min-width: 768px) and (max-width: 995px) {
| |
− | .container_16 { width: 768px; }
| |
− | .grid_1,
| |
− | .grid_2,
| |
− | .grid_3,
| |
− | .grid_4,
| |
− | .grid_5,
| |
− | .grid_6,
| |
− | .grid_7,
| |
− | .grid_8,
| |
− | .grid_9,
| |
− | .grid_10,
| |
− | .grid_11,
| |
− | .grid_12,
| |
− | .grid_13,
| |
− | .grid_14,
| |
− | .grid_15,
| |
− | .grid_16 { margin-left: 10px; margin-right: 10px; }
| |
− | .container_16 .alpha { margin-left: 0;}
| |
− | .container_16 .omega { margin-right: 0;}
| |
− |
| |
− | .container_16 .grid_1 { width: 28px; }
| |
− | .container_16 .grid_2 { width: 76px; }
| |
− | .container_16 .grid_3 { width: 124px; }
| |
− | .container_16 .grid_4 { width: 172px; }
| |
− | .container_16 .grid_5 { width: 220px; }
| |
− | .container_16 .grid_6 { width: 268px; }
| |
− | .container_16 .grid_7 { width: 316px; }
| |
− | .container_16 .grid_8 { width: 364px; }
| |
− | .container_16 .grid_9 { width: 412px; }
| |
− | .container_16 .grid_10 { width: 460px; }
| |
− | .container_16 .grid_11 { width: 508px; }
| |
− | .container_16 .grid_12 { width: 556px; }
| |
− | .container_16 .grid_13 { width: 604px; }
| |
− | .container_16 .grid_14 { width: 652px; }
| |
− | .container_16 .grid_15 { width: 700px; }
| |
− | .container_16 .grid_16 { width: 748px; }
| |
− | /* Prefix Extra Space >> 16 Columns */
| |
− | .container_16 .prefix_1 {padding-left:48px;}
| |
− | .container_16 .prefix_2 {padding-left:96px;}
| |
− | .container_16 .prefix_3 {padding-left:144px;}
| |
− | .container_16 .prefix_4 {padding-left:192px;}
| |
− | .container_16 .prefix_5 {padding-left:240px;}
| |
− | .container_16 .prefix_6 {padding-left:288px;}
| |
− | .container_16 .prefix_7 {padding-left:336px;}
| |
− | .container_16 .prefix_8 {padding-left:384px;}
| |
− | .container_16 .prefix_9 {padding-left:432px;}
| |
− | .container_16 .prefix_10 {padding-left:480px;}
| |
− | .container_16 .prefix_11 {padding-left:528px;}
| |
− | .container_16 .prefix_12 {padding-left:576px;}
| |
− | .container_16 .prefix_13 {padding-left:614px;}
| |
− | .container_16 .prefix_14 {padding-left:672px;}
| |
− | .container_16 .prefix_15 {padding-left:720px;}
| |
− | /* Suffix Extra Space >> 16 Columns */
| |
− | .container_16 .suffix_1 {padding-right:48px;}
| |
− | .container_16 .suffix_2 {padding-right:96px;}
| |
− | .container_16 .suffix_3 {padding-right:144px;}
| |
− | .container_16 .suffix_4 {padding-right:192px;}
| |
− | .container_16 .suffix_5 {padding-right:240px;}
| |
− | .container_16 .suffix_6 {padding-right:288px;}
| |
− | .container_16 .suffix_7 {padding-right:336px;}
| |
− | .container_16 .suffix_8 {padding-right:384px;}
| |
− | .container_16 .suffix_9 {padding-right:432px;}
| |
− | .container_16 .suffix_10 {padding-right:480px;}
| |
− | .container_16 .suffix_11 {padding-right:528px;}
| |
− | .container_16 .suffix_12 {padding-right:576px;}
| |
− | .container_16 .suffix_13 {padding-right:614px;}
| |
− | .container_16 .suffix_14 {padding-right:672px;}
| |
− | .container_16 .suffix_15 {padding-right:720px;}
| |
− | }
| |
− |
| |
− | /* #Mobile (Portrait)
| |
− | ================================================== */
| |
− |
| |
− | /* Note: Design for a width of 320px */
| |
− |
| |
− | @media only screen and (max-width: 767px) {
| |
− | .container_16 { width: 300px; }
| |
− | .columns, .column { margin: 0; }
| |
− |
| |
− | .container_16 .grid_1,
| |
− | .container_16 .grid_2,
| |
− | .container_16 .grid_3,
| |
− | .container_16 .grid_4,
| |
− | .container_16 .grid_5,
| |
− | .container_16 .grid_6,
| |
− | .container_16 .grid_7,
| |
− | .container_16 .grid_8,
| |
− | .container_16 .grid_9,
| |
− | .container_16 .grid_10,
| |
− | .container_16 .grid_11,
| |
− | .container_16 .grid_12,
| |
− | .container_16 .grid_13,
| |
− | .container_16 .grid_14,
| |
− | .container_16 .grid_15,
| |
− | .container_16 .grid_16{ width: 300px;}
| |
− | /* Prefix Extra Space >> 12 Columns */
| |
− | .container_16 .prefix_1,
| |
− | .container_16 .prefix_2,
| |
− | .container_16 .prefix_3,
| |
− | .container_16 .prefix_4,
| |
− | .container_16 .prefix_5,
| |
− | .container_16 .prefix_6,
| |
− | .container_16 .prefix_7,
| |
− | .container_16 .prefix_8,
| |
− | .container_16 .prefix_9,
| |
− | .container_16 .prefix_10,
| |
− | .container_16 .prefix_11,
| |
− | .container_16 .prefix_12,
| |
− | .container_16 .prefix_13,
| |
− | .container_16 .prefix_14,
| |
− | .container_16 .prefix_15{padding-left:0;}
| |
− | /* Suffix Extra Space >> 12 Columns */
| |
− | .container_16 .suffix_1,
| |
− | .container_16 .suffix_2,
| |
− | .container_16 .suffix_3,
| |
− | .container_16 .suffix_4,
| |
− | .container_16 .suffix_5,
| |
− | .container_16 .suffix_6,
| |
− | .container_16 .suffix_7,
| |
− | .container_16 .suffix_8,
| |
− | .container_16 .suffix_9,
| |
− | .container_16 .suffix_10,
| |
− | .container_16 .suffix_11,
| |
− | .container_16 .suffix_12,
| |
− | .container_16 .suffix_13,
| |
− | .container_16 .suffix_14,
| |
− | .container_16 .suffix_15{padding-right:0;}
| |
− |
| |
− | .container_16 .grid_1,
| |
− | .container_16 .grid_2,
| |
− | .container_16 .grid_3,
| |
− | .container_16 .grid_4,
| |
− | .container_16 .grid_5,
| |
− | .container_16 .grid_6,
| |
− | .container_16 .grid_7,
| |
− | .container_16 .grid_8,
| |
− | .container_16 .grid_9,
| |
− | .container_16 .grid_10,
| |
− | .container_16 .grid_11,
| |
− | .container_16 .grid_12,
| |
− | .container_16 .grid_13,
| |
− | .container_16 .grid_14,
| |
− | .container_16 .grid_15,
| |
− | .container_16 .grid_16 {
| |
− | margin-left: 0!important;
| |
− | margin-right: 0!important;
| |
− | }
| |
− | }
| |
− |
| |
− |
| |
− | /* #Mobile (Landscape)
| |
− | ================================================== */
| |
− |
| |
− | /* Note: Design for a width of 480px */
| |
− |
| |
− | @media only screen and (min-width: 480px) and (max-width: 767px) {
| |
− | .container_16 { width: 420px; }
| |
− | .columns, .column { margin: 0; }
| |
− |
| |
− | .container_16 .grid_1,
| |
− | .container_16 .grid_2,
| |
− | .container_16 .grid_3,
| |
− | .container_16 .grid_4,
| |
− | .container_16 .grid_5,
| |
− | .container_16 .grid_6,
| |
− | .container_16 .grid_7,
| |
− | .container_16 .grid_8,
| |
− | .container_16 .grid_9,
| |
− | .container_16 .grid_10,
| |
− | .container_16 .grid_11,
| |
− | .container_16 .grid_12,
| |
− | .container_16 .grid_13,
| |
− | .container_16 .grid_14,
| |
− | .container_16 .grid_15,
| |
− | .container_16 .grid_16{ width: 420px; }
| |
− | /* Prefix Extra Space >> 12 Columns */
| |
− | .container_16 .prefix_1,
| |
− | .container_16 .prefix_2,
| |
− | .container_16 .prefix_3,
| |
− | .container_16 .prefix_4,
| |
− | .container_16 .prefix_5,
| |
− | .container_16 .prefix_6,
| |
− | .container_16 .prefix_7,
| |
− | .container_16 .prefix_8,
| |
− | .container_16 .prefix_9,
| |
− | .container_16 .prefix_10,
| |
− | .container_16 .prefix_11,
| |
− | .container_16 .prefix_12,
| |
− | .container_16 .prefix_13,
| |
− | .container_16 .prefix_14,
| |
− | .container_16 .prefix_15{padding-left:0;}
| |
− | /* Suffix Extra Space >> 12 Columns */
| |
− | .container_16 .suffix_1,
| |
− | .container_16 .suffix_2,
| |
− | .container_16 .suffix_3,
| |
− | .container_16 .suffix_4,
| |
− | .container_16 .suffix_5,
| |
− | .container_16 .suffix_6,
| |
− | .container_16 .suffix_7,
| |
− | .container_16 .suffix_8,
| |
− | .container_16 .suffix_9,
| |
− | .container_16 .suffix_10,
| |
− | .container_16 .suffix_11,
| |
− | .container_16 .suffix_12,
| |
− | .container_16 .suffix_13,
| |
− | .container_16 .suffix_14,
| |
− | .container_16 .suffix_15{padding-right:0;}
| |
− | }
| |
− |
| |
− |
| |
− | /* #Clearing
| |
− | ================================================== */
| |
− |
| |
− | /* Self Clearing Goodness */
| |
− | .container_16:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
| |
− |
| |
− | /* Use clearfix class on parent to clear nested columns,
| |
− | or wrap each row of columns in a <div class="row"> */
| |
− | .clearfix:before,
| |
− | .clearfix:after,
| |
− | .row:before,
| |
− | .row:after {
| |
− | content: '\0020';
| |
− | display: block;
| |
− | overflow: hidden;
| |
− | visibility: hidden;
| |
− | width: 0;
| |
− | height: 0; }
| |
− | .row:after,
| |
− | .clearfix:after {
| |
− | clear: both; }
| |
− | .row,
| |
− | .clearfix {
| |
− | zoom: 1; }
| |
− |
| |
− | /* You can also use a <br class="clear" /> to clear columns */
| |
− | .clear {
| |
− | clear: both;
| |
− | display: block;
| |
− | overflow: hidden;
| |
− | visibility: hidden;
| |
− | width: 0;
| |
− | height: 0;
| |
− | }
| |
− |
| |
− | <!-- Style.css -->
| |
− | /*css*/
| |
− | @import url(//fonts.googleapis.com/css?family=Stint+Ultra+Condensed);
| |
− |
| |
− | html, body {
| |
− | background: #ffffff;
| |
− | font: 14px/20px Arial, sans-serif;
| |
− | color: #a49887;
| |
− | min-width:300px;
| |
− | }
| |
− |
| |
− | * { -webkit-text-size-adjust: none;}
| |
− |
| |
− | a { color: inherit; text-decoration: none;}
| |
− | a:hover { text-decoration: none;}
| |
− | a[href^="tel:"] {color: inherit;text-decoration:none;}
| |
− | .a-hov { transition: all 0.4s ease;}
| |
− | .a-hov:hover { color: #6b460a;}
| |
− |
| |
− | ul li a { transition: all 0.4s ease;}
| |
− |
| |
− | h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: 'Stint Ultra Condensed', cursive; text-transform: uppercase;}
| |
− | h1 { }
| |
− | h2 { font-size: 32px; line-height: 34px; color: #6b460a; padding-top: 55px; padding-bottom: 15px;}
| |
− | h3 { font-size: 22px; line-height: 26px; color: #aca383; padding-bottom: 8px; padding-top: 21px;}
| |
− | h4 { }
| |
− | h5 { }
| |
− |
| |
− |
| |
− | .title-1 {
| |
− | background: #a4211f;
| |
− | color: #fff;
| |
− | font-family: 'Stint Ultra Condensed', cursive;
| |
− | font-size: 32px;
| |
− | line-height: 32px;
| |
− | text-align: center;
| |
− |
| |
− | padding: 10px 0px;
| |
− | margin-bottom: 29px;
| |
− | }
| |
− | .title-1.orange { background: #cf8200;}
| |
− | .title-1.green { background: #859500;}
| |
− | .title-1.violet { background: #89347a;}
| |
− | .title-2 { font-family: 'Stint Ultra Condensed', cursive; font-size: 80px; line-height: 1em; text-transform: uppercase; color: #6b460a; padding-top: 46px;}
| |
− | .text-1 { font-family: 'Open Sans', sans-serif; color: #fff; text-transform: uppercase; font-size: 11px; line-height: 22px;}
| |
− | .text-2 { }
| |
− | .text-3 { }
| |
− |
| |
− | .color-1 { color: #f35c1a;}
| |
− | .color-2 { }
| |
− |
| |
− | h2.v1 { color: #bd812f; padding-top: 0px !important;}
| |
− | .page-1 h2 { padding-top: 70px; padding-bottom: 14px;}
| |
− | h2 + .btn { margin-top: 9px;}
| |
− | h2 + h3 { padding-top: 0;}
| |
− | h3 a { transition: all .4s ease;}
| |
− | h3 a:hover { color: #6b460a;}
| |
− |
| |
− |
| |
− | .link {
| |
− | font-size: 24px;
| |
− | line-height: 24px;
| |
− | font-family: 'Stint Ultra Condensed', cursive;
| |
− | color: #f35c1a;
| |
− | transition: all .4s ease;
| |
− | text-transform: none;
| |
− | }
| |
− | .link:hover { color:#6b460a; }
| |
− | .btn {
| |
− | display: inline-block;
| |
− | text-align: center;
| |
− | vertical-align: middle;
| |
− | transition: all 0.4s ease;
| |
− | background: #f57741;
| |
− | height: 45px;
| |
− | line-height: 45px;
| |
− | font-family: 'Stint Ultra Condensed', cursive;
| |
− | text-transform: uppercase;
| |
− | font-size: 22px;
| |
− | padding: 0 21px;
| |
− | -webkit-border-radius: 2px;
| |
− | -moz-border-radius: 2px;
| |
− | -ms-border-radius: 2px;
| |
− | -o-border-radius: 2px;
| |
− | border-radius: 2px;
| |
− | color: #fff;
| |
− | margin-top: 23px;
| |
− | }
| |
− | .btn:hover { background: #3b1500;}
| |
− | .btn-1 {
| |
− | display: inline-block;
| |
− | text-align: center;
| |
− | vertical-align: middle;
| |
− | transition: all 0.4s ease;
| |
− | background: url(bg-5.gif) 0 0 repeat;
| |
− | height: 45px;
| |
− | line-height: 45px;
| |
− | font-family: 'Stint Ultra Condensed', cursive;
| |
− | text-transform: uppercase;
| |
− | font-size: 22px;
| |
− | padding: 0 20px;
| |
− | border: 1px solid #5d3522;
| |
− | -webkit-border-radius: 2px;
| |
− | -moz-border-radius: 2px;
| |
− | -ms-border-radius: 2px;
| |
− | -o-border-radius: 2px;
| |
− | border-radius: 2px;
| |
− | color: #fff;
| |
− | margin-top: 23px;
| |
− | }
| |
− | .btn-1:hover { background: #f57741;}
| |
− |
| |
− |
| |
− | .btn-2 {
| |
− | display: inline-block;
| |
− | text-align: center;
| |
− | transition: all 0.4s ease;
| |
− | line-height: 22px;
| |
− | font-family: 'Stint Ultra Condensed', cursive;
| |
− | text-transform: uppercase;
| |
− | font-size: 22px;
| |
− | color: #be7d25;
| |
− | margin-top: 23px;
| |
− | background: url(arrow-1.png) right 4px no-repeat;
| |
− | padding-right: 20px;
| |
− | }
| |
− | .btn-2:hover { color: #6b460a;}
| |
− |
| |
− | .list li {
| |
− | line-height: 28px;
| |
− | padding-left: 27px;
| |
− | background: url(mark-3.png) 0 7px no-repeat;
| |
− | margin-top: -7px;
| |
− | }
| |
− | .list li + li { margin-top: 0px;}
| |
− | .list li a { }
| |
− | .list li a:hover { color: #f74f42;}
| |
− |
| |
− |
| |
− | /*auxiliary*/
| |
− |
| |
− | .img-ind {float: left; margin-right: 20px; margin-top: 2px;}
| |
− | .wrapper {width: 100%; position: relative;}
| |
− | .extra-wrap {overflow:hidden;}
| |
− | .grid_inside { margin: 0 -10px;}
| |
− | .aligncenter {text-align: center !important;}
| |
− | .alignleft { text-align: left !important; }
| |
− | .it {font-style:italic; display: inline-block;}
| |
− | .fleft {float: left;}
| |
− | .fright {float: right;}
| |
− | .h-underline:hover { text-decoration: underline;}
| |
− | .underline {text-decoration: underline;}
| |
− | .upp {text-transform: uppercase;}
| |
− | .transition {transition: all 0.4s ease;}
| |
− |
| |
− | .clearfix { *zoom: 1;}
| |
− | .clearfix:before,.clearfix:after {display: table; content: "";line-height: 0;}
| |
− | .clearfix:after { clear: both;}
| |
− |
| |
− | .img-ind + div > h2, .img-ind + div > h3 { padding-top: 0;}
| |
− |
| |
− | .img-circle {
| |
− | float: left;
| |
− | margin-right: 20px;
| |
− | background: #f57741;
| |
− | text-align: center;
| |
− | vertical-align: middle;
| |
− | width: 69px;
| |
− | height: 69px;
| |
− | line-height: 69px;
| |
− | margin-top: 4px;
| |
− | -webkit-border-radius: 500px;
| |
− | -moz-border-radius: 500px;
| |
− | -ms-border-radius: 500px;
| |
− | -o-border-radius: 500px;
| |
− | border-radius: 500px;
| |
− |
| |
− | }
| |
− | .img-circle img { display: inline-block; line-height: 69px; vertical-align: middle;}
| |
− | .img-circle + div > h3 { padding-top: 0; margin-top: -2px;}
| |
− | .img-circle + div { overflow: hidden;}
| |
− |
| |
− | .pad-left { padding-left: 10px;}
| |
− |
| |
− | p { padding-bottom: 20px;}
| |
− | .top-1 { padding-top: 70px;}
| |
| | | |
− | .bg-1 { display: none;}
| + | <!-- Start of CSS--> |
− | .bg-2 { background: url(bg-3.jpg) 0 0 repeat; padding-bottom: 53px;}
| + | <style type="text/css"> |
| | | |
− | .bord-1 { position: relative;}
| + | /* PAGE LAYOUT */ |
− | .bord-1:after {
| + | |
− | content: "";
| + | |
− | position: absolute;
| + | |
− | border-bottom: 1px solid #e9e5df;
| + | |
− | left: 10px;
| + | |
− | right: 10px;
| + | |
− | bottom: 0;
| + | |
− | height: 1px;
| + | |
− | }
| + | |
− | .bord-1.v1 {padding-bottom: 16px;}
| + | |
| | | |
− | .bord-2 { position: relative;margin-top: 57px;}
| + | /* Change Background color*/ |
− | .bord-2:after {
| + | body { |
− | position: absolute;
| + | background-color: #fff; |
− | content: "";
| + | } |
− | border-right: 1px solid #f0ede9;
| + | |
− | top: 0;
| + | |
− | bottom: 0;
| + | |
− | right: 19px;
| + | |
− | width: 1px;
| + | |
− | } | + | |
| | | |
− | .bord-3 { position: relative; padding-bottom: 55px;} | + | /* Creates a container that will wrap all of the content inside your wiki pages. */ |
− | .bord-3:after {
| + | #mainContainer { |
− | content: "";
| + | width: 978px; |
− | position: absolute;
| + | overflow:hidden; |
− | border-bottom: 1px solid #e9e5df;
| + | float:left; |
− | left: 0px;
| + | margin-left:20px; |
− | right: 0px;
| + | margin-bottom: 10px; |
− | bottom: 0;
| + | background-color: #fff; |
− | height: 1px;
| + | border-bottom: 14px solid #565656; |
− | } | + | border-right: 2px solid #565656; |
| + | border-left: 2px solid #565656; |
| + | border-top: 2px solid #565656; |
| + | font-family: "Trebuchet MS", Helvetica, sans-serif; |
| + | } |
| | | |
− | .page-1 .img-ind {float: left; margin-right: 41px; margin-top: 2px;}
| + | /* Creates the container for the menu */ |
| + | #menuContainer { |
| + | float:left; |
| + | width: 134px; |
| + | padding: 20px 0px; |
| + | border-top: 14px solid #565656; |
| + | background-color: #E8E8E9; |
| + | } |
| | | |
− | /************Header************/ | + | /* Creates the container for the content */ |
| + | #contentContainer { |
| + | padding-top:20px; |
| + | padding-right:10px; |
| + | margin-bottom: 20px; |
| + | width: 814px; |
| + | padding-left: 20px; |
| + | float: left; |
| + | background-color: #fff; |
| + | border-top: 14px solid #565656; |
| + | font-family: "Trebuchet MS", Helvetica, sans-serif; |
| + | } |
| | | |
− | header { position: relative; background: url(bg-1.jpg) center 0 no-repeat;background-size: 100% auto; padding-bottom: 23px;}
| + | /*Set up height place holder for the banner*/ |
| + | #bannerContainer { |
| + | height:200px; |
| + | margin:auto; |
| + | text-align:center; |
| + | color: #24B694; |
| + | } |
| | | |
− | h1 { text-align: center;}
| + | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ |
| | | |
− | .list_carousel {
| + | /*Change the styling of text for everything inside main container*/ |
− | /*background: url(../images/bg-4.png) center 0 no-repeat; */
| + | #mainContainer p { |
− | min-height: 119px;
| + | font-size: 13px; |
− | margin-top: 322px;
| + | color: #000000; |
− | padding: 0 110px;
| + | } |
− | position: relative;
| + | |
− | margin-bottom: 115px;
| + | /*This changes the color and font family */ |
− | } | + | #contentContainer h1, h2, h3, h4, h5, h6 { |
− | .list_carousel ul { cursor: default;}
| + | color: #565656; |
− | .list_carousel .foo_bg {
| + | border-bottom: none; |
− | position: absolute;
| + | font-weight: bold; |
− | left: 0;
| + | font-family: "Trebuchet MS", Helvetica, sans-serif; |
− | right: 0;
| + | margin-top:10px; |
− | bottom: 0;
| + | } |
− | top: 0;
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | }
| + | |
− | .list_carousel li {
| + | |
− | float: left;
| + | |
− | font-family: 'Stint Ultra Condensed', cursive;
| + | |
− | color: #fff;
| + | |
− | font-size: 65px;
| + | |
− | line-height: 65px;
| + | |
− | text-transform: uppercase;
| + | |
− | text-align: center;
| + | |
− | padding-top: 17px;
| + | |
− | padding-bottom: 37px;
| + | |
− | }
| + | |
− | .list_carousel li span { color: #e6ff74;}
| + | |
| | | |
− | .arrows { position: relative;}
| + | /*Style of the links - links are different inside the menu */ |
− | .arrows a { position: absolute; display: block; width: 25px; height: 38px; background: url(arrows-1.png) repeat;}
| + | #contentContainer a { |
− | .arrows .next { background-position: 0 1px; left: -30px; top: -89px;}
| + | font-weight: bold; |
− | .arrows .prev { background-position: right 1px; right: -30px; top: -89px;}
| + | color: #23b593; |
− | .arrows .next:hover { background-position: 0 bottom;}
| + | } |
− | .arrows .prev:hover { background-position: right bottom;}
| + | |
| | | |
− | /************Content***********/ | + | /* Styling links on hover- links are different inside the menu */ |
− | .content { background: #fff;}
| + | #contentContainer a:hover { |
− | .content-last { position: relative; padding-bottom: 66px;}
| + | color: #59bf92; |
− | .content-last:after {
| + | } |
− | position: absolute;
| + | |
− | content: "";
| + | |
− | left: 10px;
| + | |
− | right: 10px;
| + | |
− | bottom: 0;
| + | |
− | border-bottom: 1px solid #e9e5df;
| + | |
− | height: 1px;
| + | |
− | }
| + | |
− | .box-1 { margin-top: 57px; text-align: center;}
| + | |
| | | |
− | .block-2 > div { margin-top: 27px;}
| + | /*Change the styling of tables */ |
| + | #contentContainer table { |
| + | border: 1px solid #565656; |
| + | border-collapse: collapse; |
| + | width: 90% |
| + | margin: auto; |
| + | margin-bottom: 15px; |
| + | margin-top: 15px; |
| + | margin-right: 10px; |
| + | margin-left: 10px; |
| + | } |
| | | |
| + | /*Change the styling of table cells*/ |
| + | #contentContainer td { |
| + | padding: 10px; |
| + | border: 1px solid #565656; |
| + | border-collapse: collapse; |
| + | vertical-align: text-top; |
| + | } |
| | | |
| + | /*Change the styling of table headers */ |
| + | #contentContainer th { |
| + | background-color: #E8E8E9; |
| + | padding: 10px; |
| + | border: 1px solid #565656; |
| + | border-collapse: collapse; |
| + | vertical-align: text-top; |
| + | } |
| | | |
− | .block-4 > div + div { margin-top: 38px;}
| |
| | | |
− | .gallery { margin-top: -15px;}
| |
− | .gallery > div { margin-top: 20px;}
| |
− | .gallery + .btn-2 { margin-top: 28px;}
| |
| | | |
| + | /*MENU STYLING */ |
| | | |
− | .box-4 + .box-4 { margin-top: 32px;}
| + | /*Styling for the links in the menu */ |
| + | #menuContainer a { |
| + | color: #565656; |
| + | text-decoration:none; |
| + | font-weight: bold; |
| + | } |
| | | |
− | .gallery-1 { margin-top: -26px;}
| + | /* Sets the style for lists inside menuContainer */ |
− | .gallery-1 .box-5 {}
| + | #menuContainer ul { |
− | .gallery-1 .box-5 .inside { border: 1px solid #e9e5df; border-top: 0px; padding: 0 20px 35px;}
| + | list-style: none; |
| + | margin-left:0px; |
| + | } |
| | | |
| + | /*Styles the list items to become menu buttons */ |
| + | #menuContainer ul li { |
| + | text-align: center; |
| + | display: block; |
| + | width: 100%; |
| + | height:30px; |
| + | padding-top:10px; |
| + | } |
| | | |
− | .box-5 { margin-top: 30px;}
| + | /*For the menu buttons, changes the color when hovering*/ |
| + | #menuContainer li:hover { |
| + | color: #FFF; |
| + | background-color: #24B694; |
| + | } |
| | | |
− | .block-5 { margin-top: -47px; padding-bottom: 56px;}
| + | /*Submenus are not displayed as default*/ |
− | .block-5 > div { margin-top: 47px;}
| + | #menuContainer li ul { |
| + | display: none; |
| + | padding-top:15px; |
| + | margin-left: -19px; |
| + | } |
| | | |
− | blockquote .inside { margin-top: -3px;}
| + | /*Submenus are displayed when hovering the menu button */ |
− | blockquote .inside .quote,
| + | #menuContainer li:hover ul { |
− | blockquote .inside .quote-1 {
| + | /*display: inline-block; */ |
− | width: 28px;
| + | display: block; |
− | height: 17px;
| + | position: absolute; |
− | display: inline-block;
| + | float:right; |
− | }
| + | margin-left: 134px; |
− | blockquote .inside .quote { background: url(../images/quote-1.png) 0 bottom no-repeat;}
| + | margin-top:-42px; |
− | blockquote .inside .quote-1 { background: url(../images/quote-2.png) right bottom no-repeat;}
| + | } |
| | | |
− | /************Footer************/ | + | /*Style the submenu buttons*/ |
| + | #menuContainer li ul li{ |
| + | background-color: #59BF92; |
| + | padding-left:20px; |
| + | padding-right:20px; |
| + | height:30px; |
| + | padding-top:10px; |
| + | margin-top:-2px; |
| + | color: #565656; |
| + | width: 150px; |
| + | } |
| | | |
− | footer {
| + | /*CLASSES */ |
− | font-size: 24px; | + | |
− | line-height: 24px;
| + | |
− | font-family: 'Stint Ultra Condensed', cursive;
| + | |
− | color: #c1baa2;
| + | |
− | text-transform: uppercase;
| + | |
− | padding-bottom: 40px;
| + | |
− | background: #fff;
| + | |
− | z-index: 9;
| + | |
− | }
| + | |
| | | |
| + | /*Clear class for all the pages, adds spacing too*/ |
| + | .clear{ |
| + | clear:both; |
| + | height: 10px; |
| + | } |
| | | |
− | .list-services { margin-top: 31px; position: relative; margin-right: auto; margin-left: 11px;}
| |
− | .list-services li {
| |
− | display: inline-block;
| |
− | float: left;
| |
− | }
| |
| | | |
− | [class*="list-services-"] {
| + | /* highlight box for special messages */ |
− | text-decoration: none;
| + | .highlightBox { |
− | display: block;
| + | width:500px; |
− | height: 34px;
| + | margin:auto; |
− | width: 34px;
| + | background-color: #E8E8E9; |
− | background: url(social_icons.png) no-repeat;
| + | margin-bottom: 15px; |
− | -webkit-transition: all 0.2s ease-out;
| + | margin-top: 15px; |
− | -moz-transition: all 0.2s ease-out;
| + | padding: 15px; |
− | -o-transition: all 0.2s ease-out;
| + | padding-top: 5px; |
− | -ms-transition: all 0.2s ease-out;
| + | } |
− | transition: all 0.2s ease-out;
| + | |
− | margin-left: 11px;
| + | |
− | -webkit-border-radius: 500px;
| + | |
− | -moz-border-radius: 500px;
| + | |
− | -ms-border-radius: 500px;
| + | |
− | -o-border-radius: 500px;
| + | |
− | border-radius: 500px;
| + | |
− | }
| + | |
− | .list-services-1 { background-position: 0px 0px;}
| + | |
− | .list-services-2 { background-position: -45px 0px;}
| + | |
− | .list-services-3 { background-position: -90px 0px;}
| + | |
− | .list-services-4 { background-position: -136px 0px;}
| + | |
| | | |
− | .list-services li a:hover { opacity: .6;}
| |
| | | |
− | .box-2 {
| + | </style> |
− | position: relative; | + | <!-- End of CSS --> |
− | margin-top: 31px;
| + | |
− | background: url(mark-1.png) 0 4px no-repeat;
| + | |
− | margin-left: 23px;
| + | |
− | padding-left: 29px;
| + | |
− | }
| + | |
− | .box-2 span { | + | |
− | }
| + | |
− | .box-3 {
| + | |
− | position: relative;
| + | |
− | margin-top: 76px;
| + | |
− | background: url(mark-2.png) 0 4px no-repeat;
| + | |
− | margin-left: 0px;
| + | |
− | padding-left: 29px;
| + | |
− | color: #aca383;
| + | |
− | font-size: 22px;
| + | |
− | line-height: 26px;
| + | |
− |
| + | |
− | padding-bottom: 44px;
| + | |
− | }
| + | |
− | footer .bord-1 { padding-bottom: 60px;}
| + | |
| | | |
− | .block-3 { padding-top: 48px; text-align: center; font-size: 20px; color: #866d44;}
| |
− | .block-3 .dot { color: #f57b45; font-size: 27px;}
| |
| | | |
− | .top { margin-top: 37px; display: inline-block; width: 45px; height: 45px; background: #000; background: url(toTop.png) 0 0 no-repeat;}
| + | <!-- Start of the template html elements. --> |
− | .top:hover { background-position: 0 bottom;}
| + | <div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.--> |
| | | |
| | | |
| + | <div id="bannerContainer"> |
| + | <br><br> |
| + | <h2> Add a banner to your wiki! </h2> |
| + | |
| + | <p>You can make the image 980px by 200px</p> |
| + | <p> Remember to call the file: "<i>Team_London_Biohackspace_banner.jpg</i>" </p> |
| + | </div> |
| | | |
− | /*toTop*/
| + | <!-- Start of menu --> |
| + | <div id="menuContainer"> |
| | | |
− | #toTop {
| + | <!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons --> |
− | display:none;
| + | <ul> |
− | text-decoration:none;
| + | <a href="https://2015.igem.org/Team:London_Biohackspace"><li>HOME</li></a> |
− | position:fixed;
| + | |
− | cursor:pointer;
| + | |
− | overflow:hidden;
| + | |
− | width: 24px;
| + | |
− | height: 24px;
| + | |
− | border:none;
| + | |
− | text-indent:-999px;
| + | |
− | z-index:20;
| + | |
− | background: url(ui.totop.png) 0 0 no-repeat;
| + | |
− | margin-right: -670px !important;
| + | |
− | right: 50%;
| + | |
− | bottom: 20px;
| + | |
− | }
| + | |
| | | |
− | #toTop:hover { background: url(../images/ui.totop.png) right 0 no-repeat;}
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Team"><li>TEAM</li></a> |
| | | |
− | #toTop:active, #toTop:focus {outline:none;}
| + | <a href="#"><li>PROJECT |
| + | <ul> |
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Description"><li>Description</li></a> |
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Experiments"><li>Experiments & Protocols</li></a> |
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Results"><li>Results</li></a> |
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Design"><li>Design</li></a> |
| + | </ul> |
| + | </li></a> |
| | | |
| + | <a href="#"><li>PARTS |
| + | <ul> |
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Parts"><li>Team Parts</li></a> |
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Basic_Part"><li>Basic Parts</li></a> |
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Composite_Part"><li>Composite Parts</li></a> |
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Part_Collection"><li>Part Collection</li></a> |
| + | </ul> |
| + | </li></a> |
| | | |
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Notebook"><li>NOTEBOOK</li></a> |
| + | |
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Attributions"><li>ATTRIBUTIONS</li></a> |
| | | |
− | /*touch-touch*/
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Collaborations"><li>COLLABORATIONS</li></a> |
− | .magnifier {
| + | |
− | position:relative;
| + | |
− | display:block;
| + | |
− | background: url(magnifier.png) center center no-repeat #000000;
| + | |
− | }
| + | |
− | .magnifier img {
| + | |
− | -webkit-transition: all 0.5s ease;
| + | |
− | -moz-transition: all 0.5s ease;
| + | |
− | -o-transition: all 0.5s ease;
| + | |
− | transition: all 0.5s ease;
| + | |
− | width: 100%;
| + | |
− | -webkit-box-shadow: 0px 0px 0px 0px #fff;
| + | |
− | -moz-box-shadow: 0px 0px 0px 0px #fff;
| + | |
− | box-shadow: 0px 0px 0px 0px #fff;
| + | |
− | }
| + | |
| | | |
− | .magnifier:hover img {
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Practices"><li>HUMAN PRACTICES</li></a> |
− | opacity: 0.4;
| + | |
− | }
| + | |
| | | |
− |
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Safety"><li>SAFETY</li></a> |
− | /*==================================RESPONSIVE LAYOUTS===============================================*/ | + | |
| | | |
− | @media only screen and (max-width: 1230px) {
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Modeling"><li>MODELING</li></a> |
− | header { background-size: 100% auto;}
| + | |
− | .list_carousel { margin-top: 60px;}
| + | |
− | }
| + | |
| | | |
− | @media only screen and (max-width: 995px) {
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Measurement"><li>MEASUREMENT</li></a> |
− | .wrapper-1 { width: 100%;}
| + | |
− | .list_carousel li { font-size: 50px; line-height: 59px;}
| + | |
− | .bg-2 { background-size: auto 100%;}
| + | |
− | .block-2 img { width: 100%;}
| + | |
− | .title-2 { font-size: 60px; line-height: 60px;}
| + | |
− | .w1 { width: 45%; margin-bottom: 15px;}
| + | |
− | .list-services { margin-left: 0;}
| + | |
− | [class*="list-services-"] { margin-left: 8px;}
| + | |
− | .list_carousel { padding: 0 100px;}
| + | |
− | .list_carousel { margin-bottom: 50px;}
| + | |
− | }
| + | |
− | @media only screen and (max-width: 767px) {
| + | |
− | .list_carousel li { font-size: 30px; line-height: 30px;}
| + | |
− | .list_carousel { padding: 0px 70px 0;}
| + | |
− | .w2 { width: 46% !important; margin-left: 2%; margin-right: 2%;}
| + | |
− | .block-2 { text-align: center;padding-bottom: 20px;}
| + | |
− | .block-2 .title-2 { padding-top: 20px;}
| + | |
− | .bord-2:after { display: none;}
| + | |
− | .bord-2 { margin-top: 10px;}
| + | |
− | .box-3 { margin-top: 33px;}
| + | |
− | .gallery > div { width: 29% !important; padding-right: 2%; padding-left: 2%;}
| + | |
− | .grid_inside { margin: 0;}
| + | |
− | blockquote { margin-bottom: 20px;}
| + | |
− | footer .bord-1 { padding-bottom: 30px;}
| + | |
− | .box-2 { margin-left: 9px;}
| + | |
− | .box-3 { margin-left: 9px;}
| + | |
− | header { background-size: auto auto;}
| + | |
− | h1 img { width: 50%;}
| + | |
− | }
| + | |
− | @media only screen and (max-width: 479px) {
| + | |
− | .list_carousel li { font-size: 25px; line-height: 31px;}
| + | |
− | .block-2 .w2 { width: 46% !important; margin-left: 2%; margin-right: 2%;}
| + | |
− | .gallery > div { width: 29% !important; padding-right: 2%; padding-left: 2%;}
| + | |
− | h1 img { width: 70%;}
| + | |
− | }
| + | |
− | @media only screen and (max-width: 320px) {
| + | |
| | | |
− | }
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Software"><li>SOFTWARE</li></a> |
| | | |
− | .page-header {
| + | <a href="https://2015.igem.org/Team:London_Biohackspace/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a> |
− | margin-top:30px;
| + | |
− | margin-bottom:0;
| + | |
− | }
| + | |
| | | |
− | </style> | + | </ul> |
− |
| + | </div> |
− | <!-- End of CSS --> | + | <!-- End of menu --> |
| | | |
| + | <!-- Start of content --> |
| + | <div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.--> |
| </html> | | </html> |