Difference between revisions of "Team:NTHU Taiwan/MenuBar"
Markswayne (Talk | contribs) |
Markswayne (Talk | contribs) |
||
| Line 109: | Line 109: | ||
} | } | ||
| + | |||
| + | /***************************************************** CONTENT OF THE PAGE ****************************************************/ | ||
| + | /* Wrapper for the content */ | ||
| + | .igem_2017_content_wrapper { | ||
| + | width: 81%; | ||
| + | margin: 2%; | ||
| + | display:block; | ||
| + | float:left; | ||
| + | background-color:white; | ||
| + | font-family:Tahoma, Geneva, sans-serif; | ||
| + | } | ||
| + | |||
| + | |||
| + | /********************************* HTML STYLING *********************************/ | ||
| + | /* styling for the titles h1 h2 */ | ||
| + | .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 { | ||
| + | padding:5px 15px; | ||
| + | border-bottom: 0px; | ||
| + | color: #3399ff; | ||
| + | } | ||
| + | |||
| + | /* 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: #000000; | ||
| + | } | ||
| + | |||
| + | /* font and text */ | ||
| + | .igem_2017_content_wrapper p { | ||
| + | padding: 0px 15px; | ||
| + | font-size: 13px; | ||
| + | } | ||
| + | |||
| + | /* Links */ | ||
| + | .igem_2017_content_wrapper a { | ||
| + | font-weight: bold; | ||
| + | text-decoration: underline; | ||
| + | text-decoration-color: #3399ff; | ||
| + | color: #3399ff; | ||
| + | -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:#000000; | ||
| + | } | ||
| + | |||
| + | /* 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; | ||
| + | vertical-align: text-top; | ||
| + | border: 1px solid #d3d3d3; | ||
| + | border-collapse: collapse; | ||
| + | } | ||
| + | |||
| + | /* table headers */ | ||
| + | .igem_2017_content_wrapper th { | ||
| + | padding: 10px; | ||
| + | vertical-align: text-top; | ||
| + | border: 1px solid #d3d3d3; | ||
| + | border-collapse: collapse; | ||
| + | background-color:#f2f2f2; | ||
| + | } | ||
| + | |||
| + | |||
| + | /**********************************LAYOUT CLASSES **********************************/ | ||
| + | |||
| + | /* general class for column divs */ | ||
| + | .igem_2017_content_wrapper .column { | ||
| + | padding: 10px 0px; | ||
| + | float:left; | ||
| + | } | ||
| + | |||
| + | /* 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 #3399ff; | ||
| + | } | ||
| + | |||
| + | /* highlight with a full blue border decoration */ | ||
| + | .igem_2017_content_wrapper .highlight.blue_border { | ||
| + | border: 4px solid #3399ff; | ||
| + | } | ||
| + | |||
| + | |||
| + | /* button class */ | ||
| + | .igem_2017_content_wrapper .button{ | ||
| + | max-width: 35%; | ||
| + | margin: 30px auto; | ||
| + | padding: 12px 10px; | ||
| + | background-color: #3399ff; | ||
| + | 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: #3399ff; | ||
| + | color: #000000; | ||
| + | } | ||
Revision as of 06:29, 31 October 2017
