Team:AUC TURKEY/Test

From 2013hs.igem.org

(Difference between revisions)
Line 5: Line 5:
<script type="text/javascript" src="http://www.twospy.com/galleriffic/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="http://www.twospy.com/galleriffic/js/jquery.galleriffic.js"></script>
<style type="text/css">
<style type="text/css">
-
.div#page
+
div#page html, body {
-
{html, body {
+
margin:0;
margin:0;
padding:0;
padding:0;
}
}
-
body{
+
div#page body{
text-align: center;
text-align: center;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
Line 17: Line 16:
font-size: 75%;
font-size: 75%;
}
}
-
a{
+
div#page a{
-
color: #27D;
+
color: #27D;
text-decoration: none;
text-decoration: none;
}
}
-
a:focus, a:hover, a:active {
+
div#page a:focus, a:hover, a:active {
text-decoration: underline;
text-decoration: underline;
}
}
-
p, li {
+
div#page p, li {
line-height: 1.8em;
line-height: 1.8em;
}
}
-
h1, h2 {
+
div#page h1, h2 {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-family: "Trebuchet MS", Verdana, sans-serif;
margin: 0 0 10px 0;
margin: 0 0 10px 0;
letter-spacing:-1px;
letter-spacing:-1px;
}
}
-
h1 {
+
div#page h1 {
-
padding: 0;
+
padding: 0;
font-size: 3em;
font-size: 3em;
color: #333;
color: #333;
}
}
-
h2 {
+
div#page h2 {
padding-top: 10px;
padding-top: 10px;
font-size:2em;
font-size:2em;
}
}
-
pre {
+
div#page pre {
font-size: 1.2em;
font-size: 1.2em;
line-height: 1.2em;
line-height: 1.2em;
Line 47: Line 46:
}
}
div#page {
div#page {
-
width: 900px;
+
width: 7500px;
-
background-color: #fff;
+
margin: 0 auto;
margin: 0 auto;
text-align: left;
text-align: left;
-
border-color: #ddd;
 
-
border-style: none solid solid;
 
-
border-width: medium 1px 1px;
 
}
}
-
div#container {
+
div#page div#container {
padding: 20px;
padding: 20px;
}
}
-
div#ads {
+
div#page div#ads {
clear: both;
clear: both;
padding: 12px 0 12px 66px;
padding: 12px 0 12px 66px;
}
}
-
div#footer {
+
div#page div#footer {
clear: both;
clear: both;
color: #777;
color: #777;
Line 69: Line 64:
text-align: center;
text-align: center;
}
}
-
div.content {
+
div#page div.content {
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
display: none;
display: none;
Line 75: Line 70:
width: 550px;  
width: 550px;  
}
}
-
div.content a, div.navigation a {
+
div#page div.content a, div.navigation a {
text-decoration: none;
text-decoration: none;
color: #777;
color: #777;
}
}
-
div.content a:focus, div.content a:hover, div.content a:active {
+
div#page div.content a:focus, div.content a:hover, div.content a:active {
text-decoration: underline;
text-decoration: underline;
}
}
-
div.controls {
+
div#page div.controls {
margin-top: 5px;
margin-top: 5px;
height: 23px;
height: 23px;
 +
displaY:none;
}
}
-
div.controls a {
+
div#page div.controls a {
padding: 5px;
padding: 5px;
 +
display:none;
}
}
-
div.ss-controls {
+
 
-
float: left;
+
div#page div.slideshow-container {
-
}
+
-
div.nav-controls {
+
-
float: right;
+
-
}
+
-
div.slideshow-container {
+
position: relative;
position: relative;
clear: both;
clear: both;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
}
-
div.loader {
+
div#page div.loader {
position: absolute;
position: absolute;
top: 0;
top: 0;
Line 110: Line 102:
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
}
-
div.slideshow {
+
div#page div.slideshow {
}
}
-
div.slideshow span.image-wrapper {
+
div#page div.slideshow span.image-wrapper {
display: block;
display: block;
position: absolute;
position: absolute;
Line 119: Line 111:
left: 0;
left: 0;
}
}
-
div.slideshow a.advance-link {
+
div#page div.slideshow a.advance-link {
display: block;
display: block;
width: 550px;
width: 550px;
Line 126: Line 118:
text-align: center;
text-align: center;
}
}
-
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
+
div#page div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
text-decoration: none;
}
}
-
div.slideshow img {
+
div#page div.slideshow img {
vertical-align: middle;
vertical-align: middle;
border: 1px solid #ccc;
border: 1px solid #ccc;
}
}
-
div.download {
+
div#page div.download {
-
float: right;
+
display:none;
}
}
-
div.caption-container {
+
div#page div.caption-container {
position: relative;
position: relative;
clear: left;
clear: left;
height: 75px;
height: 75px;
}
}
-
span.image-caption {
+
div#page span.image-caption {
display: block;
display: block;
position: absolute;
position: absolute;
Line 148: Line 140:
left: 0;
left: 0;
}
}
-
div.caption {
+
div#page div.caption {
padding: 12px;
padding: 12px;
}
}
-
div.image-title {
+
div#page div.image-title {
font-weight: bold;
font-weight: bold;
font-size: 1.4em;
font-size: 1.4em;
}
}
-
div.image-desc {
+
div#page div.image-desc {
line-height: 1.3em;
line-height: 1.3em;
padding-top: 12px;
padding-top: 12px;
}
}
-
div.navigation {
+
div#page div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
}
-
ul.thumbs {
+
div#page ul.thumbs {
clear: both;
clear: both;
margin: 0;
margin: 0;
padding: 0;
padding: 0;
}
}
-
ul.thumbs li {
+
div#page ul.thumbs li {
float: left;
float: left;
padding: 0;
padding: 0;
Line 173: Line 165:
list-style: none;
list-style: none;
}
}
-
a.thumb {
+
div#page a.thumb {
padding: 2px;
padding: 2px;
display: block;
display: block;
border: 1px solid #ccc;
border: 1px solid #ccc;
}
}
-
ul.thumbs li.selected a.thumb {
+
div#page ul.thumbs li.selected a.thumb {
background: #000;
background: #000;
}
}
-
a.thumb:focus {
+
div#page a.thumb:focus {
outline: none;
outline: none;
}
}
-
ul.thumbs img {
+
div#page ul.thumbs img {
border: none;
border: none;
display: block;
display: block;
}
}
-
div.pagination {
+
div#page div.pagination {
clear: both;
clear: both;
}
}
-
div.navigation div.top {
+
div#page div.navigation div.top {
margin-bottom: 12px;
margin-bottom: 12px;
height: 11px;
height: 11px;
}
}
-
div.navigation div.bottom {
+
div#page div.navigation div.bottom {
margin-top: 12px;
margin-top: 12px;
}
}
-
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
+
div#page div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
display: block;
display: block;
float: left;
float: left;
Line 205: Line 197:
border: 1px solid #ccc;
border: 1px solid #ccc;
}
}
-
div.pagination a:hover {
+
div#page div.pagination a:hover {
background-color: #eee;
background-color: #eee;
text-decoration: none;
text-decoration: none;
}
}
-
div.pagination span.current {
+
div#page div.pagination span.current {
font-weight: bold;
font-weight: bold;
background-color: #000;
background-color: #000;
Line 215: Line 207:
color: #fff;
color: #fff;
}
}
-
div.pagination span.ellipsis {
+
div#page div.pagination span.ellipsis {
border: none;
border: none;
padding: 5px 0 3px 2px;
padding: 5px 0 3px 2px;

Revision as of 05:39, 21 June 2013



Galleriffic

Thumbnail rollover effects and slideshow crossfades

Retrieved from "http://2013hs.igem.org/Team:AUC_TURKEY/Test"