|
|
| Line 238: |
Line 238: |
| | /********************************* HTML STYLING *********************************/ | | /********************************* HTML STYLING *********************************/ |
| | | | |
| − | /* styling for the titles h1 h2 */ | + | body{ |
| − | .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
| + | margin: 0px; |
| − | padding:5px 15px;
| + | text-align: center; |
| − | border-bottom: 0px;
| + | font-family: Cantarell; |
| − | color: #0cab5a;
| + | color: #161b1f; |
| − | }
| + | } |
| | | | |
| | + | h1,h2,h3,h4,h5,h6,p{ |
| | + | text-align: justify; |
| | + | } |
| | + | h1,h2,h3,h4,h5,h6{ |
| | + | font-family: Voltaire; |
| | + | margin-top: 40px; |
| | + | margin-bottom: 5px; |
| | + | padding-bottom: 0px; |
| | + | letter-spacing: 2px; |
| | + | } |
| | + | .justify{ |
| | + | text-align: justify; |
| | + | } |
| | + | .left{ |
| | + | text-align: left; |
| | + | } |
| | + | .center{ |
| | + | text-align: center; |
| | + | } |
| | | | |
| − | /* styling for the titles h3 h4 h5 h6*/
| |
| − | .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
| |
| − | padding:5px 15px;
| |
| − | border-bottom:0px;
| |
| − | color: #161b1f;
| |
| − | }
| |
| | | | |
| − | | + | [class*="col-"] { |
| − | /* font and text */
| + | width: 100%; |
| − | .igem_2017_content_wrapper p {
| + | display: inline-block; |
| − | padding: 0px 15px;
| + | |
| − | font-size: 13px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Links */
| + | |
| − | .igem_2017_content_wrapper a {
| + | |
| − | font-weight: bold;
| + | |
| − | text-decoration: underline;
| + | |
| − | text-decoration-color: #0cab5a;
| + | |
| − | color: #0cab5a;
| + | |
| − | -webkit-transition: all 0.4s ease;
| + | |
| − | -moz-transition: all 0.4s ease;
| + | |
| − | -ms-transition: all 0.4s ease;
| + | |
| − | -o-transition: all 0.4s ease;
| + | |
| − | transition: all 0.4s ease;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* hover for the links */
| + | |
| − | .igem_2017_content_wrapper a:hover {
| + | |
| − | text-decoration:none;
| + | |
| − | color:#161b1f;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* non numbered lists */
| + | |
| − | .igem_2017_content_wrapper ul {
| + | |
| − | padding:0px 20px;
| + | |
| − | font-size: 13px;
| + | |
| − | font-family:Tahoma, Geneva, sans-serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* numbered lists */
| + | |
| − | .igem_2017_content_wrapper ol {
| + | |
| − | padding:0px;
| + | |
| − | font-size: 13px;
| + | |
| − | font-family:Tahoma, Geneva, sans-serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Table */
| + | |
| − | .igem_2017_content_wrapper table {
| + | |
| − | width: 97%;
| + | |
| − | margin:15px 10px; | + | |
| − | border: 1px solid #d3d3d3;
| + | |
| − | border-collapse: collapse;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* table cells */
| + | |
| − | .igem_2017_content_wrapper td {
| + | |
| | padding: 10px; | | padding: 10px; |
| − | vertical-align: text-top;
| + | text-align: center; |
| − | border: 1px solid #d3d3d3;
| + | } |
| − | border-collapse: collapse;
| + | @media only screen and (min-width: 800px) { |
| − | }
| + | .col-1 {width: 5%;} |
| − | | + | .col-2 {width: 10%;} |
| − | /* table headers */
| + | .col-3 {width: 15%;} |
| − | .igem_2017_content_wrapper th { | + | .col-4 {width: 20%;} |
| − | padding: 10px;
| + | .col-5 {width: 25%;} |
| − | vertical-align: text-top;
| + | .col-6 {width: 30%;} |
| − | border: 1px solid #d3d3d3;
| + | .col-7 {width: 35%;} |
| − | border-collapse: collapse;
| + | .col-8 {width: 40%;} |
| − | background-color:#f2f2f2;
| + | .col-9 {width: 45%;} |
| − | }
| + | .col-10 {width: 50%;} |
| − | | + | .col-11 {width: 55%;} |
| − | | + | .col-12 {width: 60%;} |
| − | /**********************************LAYOUT CLASSES **********************************/
| + | .col-13 {width: 65%;} |
| − | | + | .col-14 {width: 70%;} |
| − | /* general class for column divs */
| + | .col-15 {width: 75%;} |
| − | .igem_2017_content_wrapper .column { | + | .col-16 {width: 80%;} |
| − | padding: 10px 0px;
| + | .col-17 {width: 85%;} |
| − | float:left;
| + | .col-18 {width: 90%;} |
| − | }
| + | .col-19 {width: 95%;} |
| − | | + | .col-20 {width: 100%;} |
| − | /* class for a full width column */
| + | } |
| − | .column .full_size { | + | |
| − | width:100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* styling for images in a full width column*/
| + | |
| − | .column.full_size img { | + | |
| − | width:97%;
| + | |
| − | padding: 10px 15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* class for a half width column */
| + | |
| − | .column.half_size { | + | |
| − | width: 50%;
| + | |
| − | }
| + | |
| − | /* styling for images in a half width column*/
| + | |
| − | .column.half_size img { | + | |
| − | width: 94.5%;
| + | |
| − | padding: 10px 15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /********************************* SUPPORT CLASSES ********************************/
| + | |
| − | | + | |
| − | /* class that clears content below*/
| + | |
| − | .igem_2017_content_wrapper .clear { | + | |
| − | clear:both;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* adds extra spacing when clearing content */
| + | |
| − | .igem_2017_content_wrapper .clear.extra_space { | + | |
| − | height: 30px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* highlight class, makes content slightly smaller */
| + | |
| − | .igem_2017_content_wrapper .highlight { | + | |
| − | margin: 0px 15px;
| + | |
| − | padding: 15px 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* highlight class, adds a gray background */
| + | |
| − | .igem_2017_content_wrapper .highlight.gray { | + | |
| − | background-color: #f2f2f2;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* highlight with decoration blue line on top */
| + | |
| − | .igem_2017_content_wrapper .highlight.blue_top { | + | |
| − | border-top: 4px solid #0cab5a;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* highlight with a full blue border decoration */
| + | |
| − | .igem_2017_content_wrapper .highlight.blue_border {
| + | |
| − | border: 4px solid #0cab5a;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* button class */
| + | |
| − | .igem_2017_content_wrapper .button{ | + | |
| − | max-width: 35%;
| + | |
| − | margin: 30px auto;
| + | |
| − | padding: 12px 10px;
| + | |
| − | background-color: #0cab5a;
| + | |
| − | text-align: center;
| + | |
| − | color: #ffffff;
| + | |
| − | -webkit-transition: all 0.4s ease;
| + | |
| − | -moz-transition: all 0.4s ease;
| + | |
| − | -ms-transition: all 0.4s ease;
| + | |
| − | -o-transition: all 0.4s ease; transition: all 0.4s ease;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* styling for button on hover */
| + | |
| − | .igem_2017_content_wrapper .button:hover{ | + | |
| − | background-color: #0cab5a;
| + | |
| − | color: #161b1f;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /***************************************************** RESPONSIVE STYLING ****************************************************/
| + | |
| − | | + | |
| − | /* IF THE SCREEN IS LESS THAN 1200PX */
| + | |
| − | @media only screen and (max-width: 1200px) {
| + | |
| − | | + | |
| − | #content {width:100%; }
| + | |
| − | .igem_2017_menu_wrapper {width:20%; right:0;}
| + | |
| − | .highlight {padding:10px 0px;}
| + | |
| − | .igem_2017_menu_wrapper #display_menu_control { display:none; }
| + | |
| − | #menu_content { display:block;}
| + | |
| − | .menu_button.direct_to_page {padding-left: 17px;}
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | /* IF THE SCREEN IS LESS THAN 800PX */
| + | |
| − | @media only screen and (max-width: 800px) {
| + | |
| − | | + | |
| − | .igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
| + | |
| − | .igem_2017_content_wrapper {width:100%; margin-left:0px;}
| + | |
| − | .column.half_size {width:100%; }
| + | |
| − | .column.full_size img, .column.half_size img { width: 100%; padding: 10px 0px;}
| + | |
| − | .highlight {padding:15px 5px;}
| + | |
| − | .igem_2017_menu_wrapper #display_menu_control { display:block; }
| + | |
| − | #menu_content { display:none;}
| + | |
| − | .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
| + | |
| − | .menu_bottom_padding {display:none;}
| + | |
| − | .menu_button.direct_to_page { padding-left: 36px; }
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* special class that the system uses to make sure the team wants a page to be evaluated */
| + | |
| − | .judges-will-not-evaluate { | + | |
| − | width: 96.6%;
| + | |
| − | margin: 5px 15px;
| + | |
| − | display: block;
| + | |
| − | border: 4px solid #0cab5a;
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| | | | |
| | </style> | | </style> |
