|
|
| Line 12: |
Line 12: |
| | float:left; | | float:left; |
| | background-color: #fff; | | background-color: #fff; |
| − | }
| |
| − |
| |
| − | /* PAGE LAYOUT */
| |
| − |
| |
| − | /* Main elements of the page */
| |
| − |
| |
| − | body
| |
| − | {
| |
| − | background-color: rgba(130,224,22,0.9);
| |
| − | font-family: 'Trebuchet MS', Arial, sans-serif;
| |
| − | color: #181818;
| |
| − | box-shadow: 0px 5px 10px #1c1a19;
| |
| − | }
| |
| − |
| |
| − | #main_wrapper
| |
| − | {
| |
| − | width: 900px;
| |
| − | margin: 0px;
| |
| − | background-color: white;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | section h1, footer h1, nav a
| |
| − | {
| |
| − | font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
| |
| − | font-weight: normal;
| |
| − | text-transform: uppercase;
| |
| − | }
| |
| − |
| |
| − | /* Header */
| |
| − |
| |
| − | /*header
| |
| − | {
| |
| − | background: url('images/line.png') repeat-x bottom;
| |
| − | }*/
| |
| − |
| |
| − | #main_title
| |
| − | {
| |
| − | display: inline-block;
| |
| − | /*border: solid blue;*/
| |
| − | }
| |
| − |
| |
| − | header h1
| |
| − | {
| |
| − | font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
| |
| − | font-size: 2.5em;
| |
| − | font-weight: normal;
| |
| − | }
| |
| − |
| |
| − | #logo, header h1
| |
| − | {
| |
| − | display: inline-block;
| |
| − | margin-bottom: 0px;
| |
| − | }
| |
| − |
| |
| − | header h2
| |
| − | {
| |
| − | font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
| |
| − | font-size: 1.1em;
| |
| − | margin-top: 0px;
| |
| − | font-weight: normal;
| |
| − | }
| |
| − |
| |
| − | /* Navigation */
| |
| − |
| |
| − | nav
| |
| − | {
| |
| − | display: inline-block;
| |
| − | width: 540px;
| |
| − | vertical-align: 30px;
| |
| − | text-align: right;
| |
| − | /*border: solid black;*/
| |
| − | }
| |
| − |
| |
| − | nav ul
| |
| − | {
| |
| − | list-style-type: none;
| |
| − | }
| |
| − |
| |
| − | nav li
| |
| − | {
| |
| − | display: inline-block;
| |
| − | margin-right: 15px;
| |
| − | }
| |
| − |
| |
| − | nav a
| |
| − | {
| |
| − | font-size: 1.3em;
| |
| − | color: #181818;
| |
| − | padding-bottom: 3px;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | nav a:hover
| |
| − | {
| |
| − | color: #760001;
| |
| − | border-bottom: 3px solid #760001;
| |
| − | }
| |
| − |
| |
| − | /* Body */
| |
| − |
| |
| − | section
| |
| − | {
| |
| − | background: white;
| |
| − | margin: 2px;
| |
| − | }
| |
| − |
| |
| − | article, aside
| |
| − | {
| |
| − | display: inline-block;
| |
| − | vertical-align: top;
| |
| − | text-align: justify;
| |
| − | }
| |
| − |
| |
| − | article
| |
| − | {
| |
| − | width: 620px;
| |
| − | margin-right: 15px;
| |
| − | }
| |
| − |
| |
| − | #photosystem
| |
| − | {
| |
| − | float:left;
| |
| − | margin-right: 5px;
| |
| − | margin-left: 5px;
| |
| − | }
| |
| − |
| |
| − | .cat_icon
| |
| − | {
| |
| − | vertical-align: middle;
| |
| − | margin-right: 8px;
| |
| − | }
| |
| − |
| |
| − | article p
| |
| − | {
| |
| − | font-size: 1.2em;
| |
| − | }
| |
| − |
| |
| − | #overview aside
| |
| − | {
| |
| − | position: relative;
| |
| − | height: 370px;
| |
| − | width: 235px;
| |
| − | background-color: #706b64;
| |
| − | box-shadow: 0px 2px 5px #1c1a19;
| |
| − | border-radius: 5px;
| |
| − | padding: 10px;
| |
| − | color: white;
| |
| − | font-size: 0.9em;
| |
| − | }
| |
| − |
| |
| − | #arrow
| |
| − | {
| |
| − | position: absolute;
| |
| − | top: 100px;
| |
| − | left: -12px;
| |
| − | }
| |
| − |
| |
| − | #zozor_picture
| |
| − | {
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | #zozor_picture img
| |
| − | {
| |
| − | border: 1px solid #181818;
| |
| − | }
| |
| − |
| |
| − | aside img
| |
| − | {
| |
| − | margin-right: 5px;
| |
| − | }
| |
| − |
| |
| − | /* Banner */
| |
| − |
| |
| − | #banner_image
| |
| − | {
| |
| − | margin-top: 15px;
| |
| − | margin-left: 180px;
| |
| − | height: 170px;
| |
| − | width: 500px;
| |
| − | border-radius: 5px;
| |
| − | background: url('images/photosynthesis.jpg') no-repeat;
| |
| − | position: relative;
| |
| − | box-shadow: 0px 4px 4px #1c1a19;
| |
| − | margin-bottom: 25px;
| |
| − | }
| |
| − |
| |
| − | #banner_description
| |
| − | {
| |
| − | position: absolute;
| |
| − | bottom: 0;
| |
| − | border-radius: 0px 0px 5px 5px;
| |
| − | width: 99.5%;
| |
| − | height: 33px;
| |
| − | padding-top: 15px;
| |
| − | padding-left: 4px;
| |
| − | background-color: rgb(24,24,24); /* Old browsers will read this */
| |
| − | background-color: rgba(24,24,24,0.8); /* New browsers will read this */
| |
| − | color: white;
| |
| − | font-size: 0.8em;
| |
| − | }
| |
| − |
| |
| − | .red_button
| |
| − | {
| |
| − | display: inline-block;
| |
| − | height: 25px;
| |
| − | position: absolute;
| |
| − | right: 5px;
| |
| − | bottom: 5px;
| |
| − | background: url('images/red_background.png') repeat-x;
| |
| − | border: 1px solid #760001;
| |
| − | border-radius: 5px;
| |
| − | font-size: 1.2em;
| |
| − | text-align: center;
| |
| − | padding: 3px 8px 0px 8px;
| |
| − | color: white;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .red_button img
| |
| − | {
| |
| − | border: 0;
| |
| − | }
| |
| − |
| |
| − | /*Menu*/
| |
| − |
| |
| − | #menu
| |
| − | {
| |
| − | background: none;
| |
| − | }
| |
| − |
| |
| − | #menu aside
| |
| − | {
| |
| − | position: relative;
| |
| − | width: 420px;
| |
| − | background-color: rgb(17,214,47);
| |
| − | box-shadow: 0px 2px 5px #1c1a19;
| |
| − | border-radius: 5px;
| |
| − | padding: 10px;
| |
| − | color: white;
| |
| − | font-size: 0.9em;
| |
| − | }
| |
| − |
| |
| − | #menu img
| |
| − | {
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − | /* Footer */
| |
| − |
| |
| − | /*footer
| |
| − | {
| |
| − | background: url('images/top.png') no-repeat top center, url('images/line.png') repeat-x top, url('images/shadow.png') repeat-x top;
| |
| − | padding-top: 25px;
| |
| − | }*/
| |
| − |
| |
| − | footer p, footer ul
| |
| − | {
| |
| − | font-size: 0.8em;
| |
| − | }
| |
| − |
| |
| − | footer h1
| |
| − | {
| |
| − | font-size: 1.1em;
| |
| − | }
| |
| − |
| |
| − | #tweet, #my_pictures, #my_friends
| |
| − | {
| |
| − | display: inline-block;
| |
| − | vertical-align: top;
| |
| − | }
| |
| − |
| |
| − | #tweet
| |
| − | {
| |
| − | width: 28%;
| |
| − | }
| |
| − |
| |
| − | #my_pictures
| |
| − | {
| |
| − | width: 35%;
| |
| − | }
| |
| − |
| |
| − | #my_friends
| |
| − | {
| |
| − | width: 31%;
| |
| − | }
| |
| − |
| |
| − | #my_pictures img
| |
| − | {
| |
| − | border: 1px solid #181818;
| |
| − | margin-right: 2px;
| |
| − | }
| |
| − |
| |
| − | #my_friends ul
| |
| − | {
| |
| − | display: inline-block;
| |
| − | vertical-align: top;
| |
| − | margin-top: 0;
| |
| − | width: 48%;
| |
| − | list-style-image: url('images/external_link.png');
| |
| − | padding-left: 2px;
| |
| − | }
| |
| − |
| |
| − | #my_friends a
| |
| − | {
| |
| − | text-decoration: none;
| |
| − | color: #760001;
| |
| | } | | } |
| | | | |
| | </style> | | </style> |
| | </html> | | </html> |