Team:Calgary/TestPageCSS

From 2013.igem.org

(Difference between revisions)
(Created page with "- →Slider Style: #slides { position: relative; box-shadow: 0 3px 10px #888888; } #slides .slides-container { display: none; } #slides .scrollable { *zoom: 1; position: r...")
 
(4 intermediate revisions not shown)
Line 1: Line 1:
-
/* Slider Style */
+
#Carousel {
-
#slides {
+
width: 990px;
 +
height: 180px;
 +
background: #CFCFCF;
 +
padding-left: 90px;
position: relative;
position: relative;
-
box-shadow: 0 3px 10px #888888;
+
overflow: hidden;
 +
left: 0;
 +
right: 0;
 +
margin: 25px auto 0;
 +
display: none;
}
}
-
#slides .slides-container {
+
#Carousel .Person {
-
display: none;
+
width: 150px;
 +
height: 150px;
 +
position: absolute;
 +
top: 15px;
}
}
-
#slides .scrollable {
+
#Carousel .Slide0 {
-
*zoom: 1;
+
left: 90px;
-
position: relative;
+
cursor: pointer;
-
top: 0;
+
-
left: 0;
+
-
overflow-y: auto;
+
-
-webkit-overflow-scrolling: touch;
+
-
height: 100%;
+
}
}
-
#slides .scrollable:after {
+
#Carousel .Slide1 {
-
content: "";
+
left: 255px;
-
display: table;
+
cursor: pointer;
-
clear: both;
+
}
}
-
.slides-navigation {
+
#Carousel .Slide2 {
-
margin: 0 auto;
+
left: 420px;
-
position: absolute;
+
background-position: top !important;
-
z-index: 3;
+
-
top: 46%;
+
-
width: 100%;
+
}
}
-
.slides-navigation a {
+
#Carousel .Slide3 {
 +
left: 585px;
 +
cursor: pointer;
 +
}
 +
 
 +
#Carousel .Slide4 {
 +
left: 750px;
 +
cursor: pointer;
 +
}
 +
 
 +
#Carousel .Arrow {
position: absolute;
position: absolute;
-
display: block;
 
width: 60px;
width: 60px;
height: 60px;
height: 60px;
 +
top: 0;
 +
bottom: 0;
 +
margin: auto;
 +
}
 +
 +
#Carousel #LeftArrow {
 +
left: 0;
 +
margin-left: 15px;
 +
background: url(https://static.igem.org/mediawiki/2013/5/53/2013UCalgaryArrowLeft.png) top;
}
}
-
.slides-navigation a.prev {
+
#Carousel #RightArrow {
-
background: url(ArrowPrevious.png) top;
+
right: 0;
-
left: 30px;
+
margin-right: 15px;
 +
background: url(https://static.igem.org/mediawiki/2013/5/56/2013UCalgaryArrowRight.png) top;
}
}
-
.slides-navigation a.prev:hover {
+
#Carousel #LeftArrow:hover, #Carousel #RightArrow:hover {
background-position: bottom;
background-position: bottom;
 +
cursor: pointer;
}
}
-
.slides-navigation a.next {
+
#Carousel #Person0 {
-
background: url(ArrowNext.png) top;
+
background: url(Num0.jpg);
-
right: 30px;
+
}
}
-
.slides-navigation a.next:hover {
+
#Carousel #Person1 {
-
background-position: bottom;
+
background: url(Num1.jpg);
}
}
-
.slides-pagination {
+
#Carousel #Person2 {
-
position: absolute;
+
background: url(Profile2.png) bottom;
-
z-index: 3;
+
-
bottom: 0;
+
-
text-align: center;
+
-
width: 100%;
+
}
}
-
.slides-pagination ul {
+
#Carousel #Person3 {
-
    background: #787576;
+
background: url(Num3.jpg);
-
opacity:0.8;
+
-
filter:alpha(opacity=8);
+
}
}
-
.slides-pagination li {
+
#Carousel #Person4 {
-
    display: inline-table;
+
background: url(Num4.jpg);
-
cursor: pointer;
+
}
}
-
.slides-pagination a {
+
#Carousel #Person5 {
-
display: block;
+
background: url(Num5.jpg);
-
width: 100%;
+
display: none;
-
height: 100%;
+
-
color: #FFFFFF;
+
-
font: 24px Raleway, Arial, san-serif;
+
-
text-align: center;
+
-
text-decoration: none;
+
-
padding: 30px 20px;
+
}
}
-
.slides-pagination a:hover {
+
#Carousel #Person6 {
-
text-decoration: underline;
+
background: url(Num6.jpg);
 +
display: none;
}
}
-
/* Other Styles */
+
#Carousel #Person7 {
 +
background: url(Num7.jpg);
 +
display: none;
 +
}
-
h2 {
+
#Carousel #Person8 {
-
font: 36px/1.6 "Josefin Sans", Helvetica, sans-serif;
+
background: url(Num8.jpg);
 +
display: none;
}
}
-
p {
+
#Carousel #Person9 {
-
font: 18px/1.6 Cabin, Arial, Helvetica, sans-serif;
+
background: url(Num9.jpg);
 +
display: none;
}
}
-
#Overview {
+
#WriteUp {
width: 100%;
width: 100%;
-
background: #E7E7E7;
+
max-width: 990px;
-
padding: 25px 5% 40px 5%;
+
left: 0;
 +
right: 0;
 +
margin: 0 auto;
 +
background: #A4A4A4;
}
}
-
#Overview p {
+
#WriteUp .Info {
-
margin: 18px 0 0 30px;
+
clear: both;
-
text-indent: 50px;
+
overflow: auto;
}
}
-
#SectionLinks {
+
#WriteUp .Info .InfoImg {
-
overflow: hidden;
+
position: relative;
-
width: 100%;
+
width: 50%;
-
background: #383132;
+
height: 100%;
 +
padding: 25px;
 +
float: left;
}
}
-
#SectionLinks .DescriptionLink {
+
#WriteUp  .Info  .InfoImg img {
-
background: #4F494A;
+
width: 100%;
-
color: #FFFFFF;
+
height: auto;
-
padding: 30px 40px;
+
max-width: 100%;
}
}
-
#SectionLinks .DescriptionLink:nth-of-type(odd) {
+
#WriteUp .Text {
 +
width: 50%;
 +
min-width: 320px;
 +
height: 100%;
 +
padding: 25px;
float: left;
float: left;
}
}
-
#SectionLinks .DescriptionLink:nth-of-type(even) {
+
#WriteUp .Text h2 {
-
float: right;
+
font-family: 'Raleway', Helvetica, Arial, sans-serif;
 +
line-height: 1;
 +
text-align: left;
 +
font-size: 28px;
 +
font-weight: 600;
 +
color: #333333;
 +
}
 +
 
 +
#WriteUp .Text h3 {
 +
font-family: 'Raleway', Helvetica, Arial, sans-serif;
 +
line-height: 1.6;
 +
text-align: left;
 +
font-size: 20px;
 +
font-weight: 500;
 +
color: #333333;
 +
}
 +
 
 +
#WriteUp .Text p, #WriteUp .Text a {
 +
font: 16px/1.2 'Antic Slab', Georgia, serif;
 +
margin: 4px 0 12px 0;
 +
text-indent: 50px;
 +
color: #000000;
 +
text-align:justify;
 +
text-justify:inter-word;
}
}

Latest revision as of 16:52, 28 August 2013

  1. Carousel {

width: 990px; height: 180px; background: #CFCFCF; padding-left: 90px; position: relative; overflow: hidden; left: 0; right: 0; margin: 25px auto 0; display: none; }

  1. Carousel .Person {

width: 150px; height: 150px; position: absolute; top: 15px; }

  1. Carousel .Slide0 {

left: 90px; cursor: pointer; }

  1. Carousel .Slide1 {

left: 255px; cursor: pointer; }

  1. Carousel .Slide2 {

left: 420px; background-position: top !important; }

  1. Carousel .Slide3 {

left: 585px; cursor: pointer; }

  1. Carousel .Slide4 {

left: 750px; cursor: pointer; }

  1. Carousel .Arrow {

position: absolute; width: 60px; height: 60px; top: 0; bottom: 0; margin: auto; }

  1. Carousel #LeftArrow {

left: 0; margin-left: 15px; background: url(2013UCalgaryArrowLeft.png) top; }

  1. Carousel #RightArrow {

right: 0; margin-right: 15px; background: url(2013UCalgaryArrowRight.png) top; }

  1. Carousel #LeftArrow:hover, #Carousel #RightArrow:hover {

background-position: bottom; cursor: pointer; }

  1. Carousel #Person0 {

background: url(Num0.jpg); }

  1. Carousel #Person1 {

background: url(Num1.jpg); }

  1. Carousel #Person2 {

background: url(Profile2.png) bottom; }

  1. Carousel #Person3 {

background: url(Num3.jpg); }

  1. Carousel #Person4 {

background: url(Num4.jpg); }

  1. Carousel #Person5 {

background: url(Num5.jpg); display: none; }

  1. Carousel #Person6 {

background: url(Num6.jpg); display: none; }

  1. Carousel #Person7 {

background: url(Num7.jpg); display: none; }

  1. Carousel #Person8 {

background: url(Num8.jpg); display: none; }

  1. Carousel #Person9 {

background: url(Num9.jpg); display: none; }

  1. WriteUp {

width: 100%; max-width: 990px; left: 0; right: 0; margin: 0 auto; background: #A4A4A4; }

  1. WriteUp .Info {

clear: both; overflow: auto; }

  1. WriteUp .Info .InfoImg {

position: relative; width: 50%; height: 100%; padding: 25px; float: left; }

  1. WriteUp .Info .InfoImg img {

width: 100%; height: auto; max-width: 100%; }

  1. WriteUp .Text {

width: 50%; min-width: 320px; height: 100%; padding: 25px; float: left; }

  1. WriteUp .Text h2 {

font-family: 'Raleway', Helvetica, Arial, sans-serif; line-height: 1; text-align: left; font-size: 28px; font-weight: 600; color: #333333; }

  1. WriteUp .Text h3 {

font-family: 'Raleway', Helvetica, Arial, sans-serif; line-height: 1.6; text-align: left; font-size: 20px; font-weight: 500; color: #333333; }

  1. WriteUp .Text p, #WriteUp .Text a {

font: 16px/1.2 'Antic Slab', Georgia, serif; margin: 4px 0 12px 0; text-indent: 50px; color: #000000; text-align:justify; text-justify:inter-word; }

Retrieved from "http://2013.igem.org/Team:Calgary/TestPageCSS"