|
|
Line 34: |
Line 34: |
| | | |
| Please enjoy :) . | | Please enjoy :) . |
- | ===================================================================-->
| |
- |
| |
- |
| |
- | <body>
| |
- |
| |
- | <!--==========================General Document Styling
| |
- | And CSS for sliders================-->
| |
- | <style>
| |
- |
| |
- | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo{
| |
- | display:none;}
| |
- | #top-section {
| |
- | background-repeat: no-repeat;
| |
- | background-position: center top;
| |
- | height:1220px ! important;
| |
- | background:#215E21;
| |
- | }
| |
- | body {
| |
- | background: white url('http://igemtoronto.files.wordpress.com/2012/07/white-writing-29491444-516-350.jpg') no-repeat center top;
| |
- | background-attachment: fixed;
| |
- | height:0px;
| |
- | }
| |
- | #content{height:0px}
| |
- | h1 a, h2 a, h3 a {
| |
- | text-decoration: none;
| |
- | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
| |
- | font-size: 1.75em;
| |
- | line-height: 1.5em;
| |
- | font-weight: 200;
| |
- | color:#fff
| |
- | }
| |
- | p {
| |
- | text-decoration: none;
| |
- | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
| |
- | font-size: 1.25em;
| |
- | line-height: 1.5em;
| |
- | font-weight: 150;
| |
- | color:#fff
| |
- | }
| |
- |
| |
- |
| |
- | .slideshow {
| |
- | position: relative;
| |
- | min-height: 220px;
| |
- | clear: both;
| |
- | margin: 35px 0 25px;
| |
- | }
| |
- | .slide {
| |
- | float: left;
| |
- | }
| |
- | .slide h3 a:hover {
| |
- | text-decoration: none;
| |
- | font-weight: bold;
| |
- | }
| |
- | .slide label {
| |
- | background: #2F2F2F;
| |
- | padding: 3px 7px;
| |
- | border: 1px solid #215E21;
| |
- | margin-right: 4px;
| |
- | position: relative;
| |
- | left: 1px;
| |
- | top: 280px;
| |
- | -webkit-transition: background-color .17s linear;
| |
- | -moz-transition: background-color .17s linear;
| |
- | transition: background-color .17s linear;
| |
- | }
| |
- | .slide [type=radio] {
| |
- | display: none;
| |
- | }
| |
- | .content {
| |
- | position: absolute;
| |
- | top: -1px;
| |
- | left: -400px;
| |
- | background: #215E21;
| |
- | width: 500px;
| |
- | padding: 20px;
| |
- | border: 1px solid #215E21;
| |
- | opacity: 0;
| |
- | height: 100%;
| |
- | -webkit-transition: all .6s linear;
| |
- | -moz-transition: all .6s linear;
| |
- | transition: all .6s linear;
| |
- | }
| |
- |
| |
- | [type=radio]:checked ~ label {
| |
- | background: #215E21;
| |
- | border-bottom: 1px solid #215E21;
| |
- | z-index: 2;
| |
- | }
| |
- | [type=radio]:checked ~ label ~ .content {
| |
- | z-index: 1;
| |
- | opacity: 1;
| |
- | left: 0;
| |
- | }
| |
- |
| |
- |
| |
- |
| |
- | #fisheye_menu {
| |
- | list-style: none;
| |
- | padding: 0;
| |
- | margin: 10px;
| |
- | height: 140px;
| |
- | }
| |
- | #fisheye_menu li {
| |
- | position: relative;
| |
- | display: block;
| |
- | float: left;
| |
- | margin: 0;
| |
- | padding: 0;
| |
- | }
| |
- | #fisheye_menu span {
| |
- | position: absolute;
| |
- | top: 100%;
| |
- | left: 0;
| |
- | text-align: center;
| |
- | width: 95px;
| |
- |
| |
- | padding: 1px;
| |
- |
| |
- | margin: 0;
| |
- | border: solid 1px #bbb;
| |
- | color: #333;
| |
- | background: #eee;
| |
- | }
| |
- | #fisheye_menu a {
| |
- | text-decoration: none;
| |
- | margin: 0;
| |
- | padding: 0;
| |
- | }
| |
- | #fisheye_menu img {
| |
- | border: 0;
| |
- | vertical-align: top;
| |
- | }
| |
- |
| |
- |
| |
- |
| |
- |
| |
- | #stuff {
| |
- | overflow: hidden;
| |
- | width: 853px;
| |
- | height: 204px;
| |
- | -webkit-box-shadow: 0px 0px 50px 10px #215E21;
| |
- | -moz-box-shadow: 0px 0px 50px 10px #215E21;
| |
- | box-shadow: 0px 0px 50px 10px #215E21;
| |
- | }
| |
- | #stuff-inside {
| |
- | width:10000px;
| |
- | height: 204px;
| |
- | }
| |
- |
| |
- | .pag {
| |
- | width: 853px;
| |
- | height: 204px;
| |
- | float: left;
| |
- | }
| |
- | #stuff-inside-1:target #stuff-inside {
| |
- | -webkit-transition: all 400ms ease;
| |
- | -moz-transition: all 400ms ease;
| |
- | -o-transition: all 400ms ease;
| |
- | transition: all 400ms ease;
| |
- | margin-left: 0px;
| |
- | }
| |
- |
| |
- | #stuff-inside-2:target #stuff-inside {
| |
- | -webkit-transition: all 400ms ease;
| |
- | -moz-transition: all 400ms ease;
| |
- | -o-transition: all 400ms ease;
| |
- | transition: all 400ms ease;
| |
- | margin-left: -853px;
| |
- | }
| |
- | #stuff-inside-3:target #stuff-inside {
| |
- | -webkit-transition: all 400ms ease;
| |
- | -moz-transition: all 400ms ease;
| |
- | -o-transition: all 400ms ease;
| |
- | transition: all 400ms ease;
| |
- | margin-left: -1706px;
| |
- | }
| |
- |
| |
- | #stuff-inside-4:target #stuff-inside {
| |
- | -webkit-transition: all 400ms ease;
| |
- | -moz-transition: all 400ms ease;
| |
- | -o-transition: all 400ms ease;
| |
- | transition: all 400ms ease;
| |
- | margin-left: -2559px;
| |
- | }
| |
- |
| |
- | #stuff-inside-5:target #stuff-inside {
| |
- | -webkit-transition: all 400ms ease;
| |
- | -moz-transition: all 400ms ease;
| |
- | -o-transition: all 400ms ease;
| |
- | transition: all 400ms ease;
| |
- | margin-left: -3412px;
| |
- | }
| |
- | .pag-info {
| |
- | height: 40px;
| |
- | background-color: #215E21;
| |
- | opacity:0.9;
| |
- | position: relative;
| |
- | margin-top: 0px;
| |
- | bottom: 50px;
| |
- | color: #147025;
| |
- | padding-left: 20px;
| |
- | padding-top: 20px;
| |
- | }
| |
- | #nav {
| |
- | list-style-type: none;
| |
- | width: 156px;
| |
- | height: 16px;
| |
- | margin: 0 auto;
| |
- | margin-top: 20px;
| |
- | padding: 0;
| |
- | color:#215E21;
| |
- | }
| |
- | .click {
| |
- | float: left;
| |
- | background: #74C365;
| |
- | width: 16px;
| |
- | height: 16px;
| |
- | -webkit-border-radius: 8px;
| |
- | -moz-border-radius: 8px;
| |
- | border-radius: 8px;
| |
- | margin-left: 5px;
| |
- | margin-right: 5px;
| |
- | }
| |
- | .click:hover {
| |
- | -webkit-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
| |
- | -moz-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
| |
- | box-shadow: inset 0px 0px 2px 2px #d4d4d4;
| |
- | }
| |
- | .click:active {
| |
- | -webkit-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
| |
- | -moz-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
| |
- | box-shadow: inset 0px 0px 2px 2px #7a7a7a;
| |
- | }
| |
- | .click a {
| |
- | display: block;
| |
- | width: 16px;
| |
- | height: 16px;
| |
- | }
| |
- | li {
| |
- | list-style: none;
| |
- | }
| |
- | </style>
| |
- |
| |
| | | |
| <!--==========================Javascript for MENU (written below)================--> | | <!--==========================Javascript for MENU (written below)================--> |