"
Team:UANL Mty-Mexico/test1.css
From 2013.igem.org
(Blanked the page) |
|||
| Line 1: | Line 1: | ||
| + | <html> | ||
| + | /* Slidorion Stylesheet */ | ||
| + | #slidorion { | ||
| + | width: 750px; /* Set to slidorion width. Is equal to #slider + #accordion width */ | ||
| + | height: 400px; /* Set to slidorion height. Is equal to #slider and #accordion height */ | ||
| + | position: relative; | ||
| + | left:52%; | ||
| + | margin-left: -400px; | ||
| + | padding: 5px; | ||
| + | border: 1px solid #cccccc; | ||
| + | } | ||
| + | |||
| + | #slider { | ||
| + | width: 550px; /* Set to slider width */ | ||
| + | height: 400px; /* Set to slider height */ | ||
| + | position: relative; | ||
| + | float: left; | ||
| + | overflow: hidden; /* Hides the animations */ | ||
| + | } | ||
| + | |||
| + | #slider > div { | ||
| + | position:absolute; | ||
| + | width:100%; | ||
| + | height:100%; | ||
| + | } | ||
| + | |||
| + | #accordion { | ||
| + | width: 200px; /* Set to accordion width */ | ||
| + | height: 400px; /* Set to image height */ | ||
| + | font-family: Verdana; | ||
| + | background: #eee; | ||
| + | -webkit-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3); | ||
| + | -moz-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3); | ||
| + | box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3); | ||
| + | position: relative; | ||
| + | z-index:999; | ||
| + | overflow: hidden; | ||
| + | float: left; | ||
| + | } | ||
| + | |||
| + | #accordion > .link-header { | ||
| + | padding: 8px 14px; | ||
| + | font-size: 12px; | ||
| + | font-weight: bold; | ||
| + | color: #333; | ||
| + | background: #ededed; | ||
| + | background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%); | ||
| + | background: -webkit-linear-gradient(top, #ededed 59%,#dcdcdc 100%); | ||
| + | background: -o-linear-gradient(top, #ededed 59%,#dcdcdc 100%); | ||
| + | background: -ms-linear-gradient(top, #ededed 59%,#dcdcdc 100%); | ||
| + | background: linear-gradient(top, #ededed 59%,#dcdcdc 100%); | ||
| + | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dcdcdc',GradientType=0 ); | ||
| + | border-top: 1px solid #ccc; | ||
| + | } | ||
| + | |||
| + | #accordion > .link-header:first-child { | ||
| + | border-top:none; | ||
| + | } | ||
| + | |||
| + | #accordion > .link-header:hover { | ||
| + | background: #ededed; | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | |||
| + | #accordion > .link-header.active { | ||
| + | border-bottom: none; | ||
| + | background: #676767 !important; | ||
| + | filter: none; | ||
| + | color: #fff; | ||
| + | } | ||
| + | |||
| + | #accordion > .link-content { | ||
| + | height: 190px; /* This height needs to be changed as it depends on the accordion height and number of tabs */ | ||
| + | font-weight: normal; | ||
| + | font-size: 13px; | ||
| + | line-height:20px; | ||
| + | margin: 0; | ||
| + | padding: 16px; | ||
| + | border: none; | ||
| + | background: #d6d6d6; | ||
| + | background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 10%); | ||
| + | background: -webkit-linear-gradient(top, #d6d6d6 0%,#ffffff 10%); | ||
| + | background: -o-linear-gradient(top, #d6d6d6 0%,#ffffff 10%); | ||
| + | background: -ms-linear-gradient(top, #d6d6d6 0%,#ffffff 10%); | ||
| + | background: linear-gradient(top, #d6d6d6 0%,#ffffff 10%); | ||
| + | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff',GradientType=0 ); | ||
| + | overflow:auto; | ||
| + | } | ||
| + | </html> | ||
Latest revision as of 01:55, 27 August 2013
/* Slidorion Stylesheet */ #slidorion { width: 750px; /* Set to slidorion width. Is equal to #slider + #accordion width */ height: 400px; /* Set to slidorion height. Is equal to #slider and #accordion height */ position: relative; left:52%; margin-left: -400px; padding: 5px; border: 1px solid #cccccc; } #slider { width: 550px; /* Set to slider width */ height: 400px; /* Set to slider height */ position: relative; float: left; overflow: hidden; /* Hides the animations */ } #slider > div { position:absolute; width:100%; height:100%; } #accordion { width: 200px; /* Set to accordion width */ height: 400px; /* Set to image height */ font-family: Verdana; background: #eee; -webkit-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3); -moz-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3); box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3); position: relative; z-index:999; overflow: hidden; float: left; } #accordion > .link-header { padding: 8px 14px; font-size: 12px; font-weight: bold; color: #333; background: #ededed; background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%); background: -webkit-linear-gradient(top, #ededed 59%,#dcdcdc 100%); background: -o-linear-gradient(top, #ededed 59%,#dcdcdc 100%); background: -ms-linear-gradient(top, #ededed 59%,#dcdcdc 100%); background: linear-gradient(top, #ededed 59%,#dcdcdc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dcdcdc',GradientType=0 ); border-top: 1px solid #ccc; } #accordion > .link-header:first-child { border-top:none; } #accordion > .link-header:hover { background: #ededed; cursor: pointer; } #accordion > .link-header.active { border-bottom: none; background: #676767 !important; filter: none; color: #fff; } #accordion > .link-content { height: 190px; /* This height needs to be changed as it depends on the accordion height and number of tabs */ font-weight: normal; font-size: 13px; line-height:20px; margin: 0; padding: 16px; border: none; background: #d6d6d6; background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 10%); background: -webkit-linear-gradient(top, #d6d6d6 0%,#ffffff 10%); background: -o-linear-gradient(top, #d6d6d6 0%,#ffffff 10%); background: -ms-linear-gradient(top, #d6d6d6 0%,#ffffff 10%); background: linear-gradient(top, #d6d6d6 0%,#ffffff 10%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff',GradientType=0 ); overflow:auto; }
