Team:Valencia UPV/Prueba css
From 2014.igem.org
(Difference between revisions)
(2 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
- | + | body | |
- | background- | + | { |
- | + | ||
+ | background-image: url('http://upload.wikimedia.org/wikipedia/en/d/d6/IGEM_official_logo.png'); | ||
+ | font-family: arial; | ||
+ | |||
} | } | ||
+ | |||
+ | .Buttons | ||
+ | { | ||
+ | background-color: #87CEEB; | ||
+ | width: 200px; | ||
+ | height: 100px; | ||
+ | margin: 20px; | ||
+ | border: 5px outset black; | ||
+ | |||
+ | } | ||
+ | |||
+ | #main | ||
+ | { | ||
+ | position: relative; | ||
+ | width: 92%; | ||
+ | left: 4%; | ||
+ | background-color: #EEE8AA; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | /*HEADER MENU STYLE*/ | ||
+ | |||
+ | .example | ||
+ | { | ||
+ | background:#fff url(../images/blue.jpg); /* METER EL FONDO */ | ||
+ | width:711px; | ||
+ | height:50px; | ||
+ | border:1px #000 solid; | ||
+ | margin:20px auto; | ||
+ | padding:15px; | ||
+ | border-radius:3px; | ||
+ | -moz-border-radius:3px; | ||
+ | -webkit-border-radius:3px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* main menu styles */ | ||
+ | .menu | ||
+ | { | ||
+ | background-color:#d0e6f5; | ||
+ | text-align:center; | ||
+ | width:100%; | ||
+ | } | ||
+ | |||
+ | .menu > span | ||
+ | { | ||
+ | display:inline-block; | ||
+ | margin:0 auto; | ||
+ | } | ||
+ | |||
+ | #nav | ||
+ | { | ||
+ | display:inline; | ||
+ | text-align:center; | ||
+ | position:relative; | ||
+ | list-style-type:none; | ||
+ | } | ||
+ | |||
+ | #nav > li | ||
+ | { | ||
+ | float:left; | ||
+ | padding:0; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | #nav > li > a | ||
+ | { | ||
+ | border:1px solid transparent; | ||
+ | color:#4F4F4F; | ||
+ | display:block; | ||
+ | font-size:90%; | ||
+ | padding:3px 10px; | ||
+ | position:relative; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | #nav > li > a:hover | ||
+ | { | ||
+ | background-color:#e4ecf4; | ||
+ | border-color:#999; | ||
+ | } | ||
+ | |||
+ | #nav > li.selected > a | ||
+ | { | ||
+ | background-color:#FFFFFF; | ||
+ | border-color:#999999 #999999 #FFFFFF; | ||
+ | z-index:2; | ||
+ | } | ||
+ | |||
+ | #nav li div | ||
+ | { | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | #nav li div div | ||
+ | { | ||
+ | background-color:#FFFFFF; | ||
+ | border:1px solid #999999; | ||
+ | padding:12px 0; | ||
+ | display:none; | ||
+ | font-size:0.75em; | ||
+ | margin:0; | ||
+ | position:absolute; | ||
+ | top:-1px; | ||
+ | z-index:1; | ||
+ | width:190px; | ||
+ | } | ||
+ | |||
+ | #nav li div div.wrp2 | ||
+ | { | ||
+ | width:380px; | ||
+ | } | ||
+ | |||
+ | #nav .sep | ||
+ | { | ||
+ | left:190px; | ||
+ | border-left:1px solid #E3E3E3; | ||
+ | bottom:0; | ||
+ | height:auto; | ||
+ | margin:15px 0; | ||
+ | position:absolute; | ||
+ | top:0; | ||
+ | width:1px; | ||
+ | } | ||
+ | |||
+ | #nav li div ul | ||
+ | { | ||
+ | padding-left:10px; | ||
+ | padding-right:10px; | ||
+ | position:relative; | ||
+ | width:170px; | ||
+ | float:left; | ||
+ | list-style-type:none; | ||
+ | } | ||
+ | |||
+ | #nav li div ul li | ||
+ | { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | #nav li div ul li h3 | ||
+ | { | ||
+ | border-bottom:1px solid #E3E3E3; | ||
+ | color:#4F4F4F; | ||
+ | font-weight:bold; | ||
+ | margin:0 5px 4px; | ||
+ | font-size:0.95em; | ||
+ | padding-bottom:3px; | ||
+ | padding-top:3px; | ||
+ | } | ||
+ | |||
+ | #nav li ul ul | ||
+ | { | ||
+ | padding:0 0 8px; | ||
+ | } | ||
+ | |||
+ | #nav li ul ul li | ||
+ | { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | #nav li ul li a | ||
+ | { | ||
+ | text-decoration:none; /* Level Team and Photogallery*/ | ||
+ | } | ||
+ | |||
+ | #nav li ul ul li a | ||
+ | { | ||
+ | color:#0060A6; | ||
+ | display:block; | ||
+ | margin-bottom:1px; | ||
+ | padding:3px 5px; | ||
+ | text-decoration:none; | ||
+ | font-size:0.9em; | ||
+ | } | ||
+ | |||
+ | #nav li ul ul li a:hover | ||
+ | { | ||
+ | background-color:#0060a6; | ||
+ | color:#fff; | ||
+ | } | ||
+ | |||
+ | /* TEAM ACCORDION STYLE*/ | ||
+ | |||
+ | |||
+ | |||
+ | .container { | ||
+ | width:100%; | ||
+ | position:relative; | ||
+ | z-index:0; | ||
+ | margin:40px auto; | ||
+ | } | ||
+ | .content { | ||
+ | width:1000px; | ||
+ | margin:0 auto; | ||
+ | } | ||
+ | |||
+ | .va-container{ | ||
+ | position:relative; | ||
+ | margin:40px auto 0 auto; | ||
+ | } | ||
+ | .va-wrapper{ | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | position:relative; | ||
+ | overflow:hidden; | ||
+ | background:#000; | ||
+ | } | ||
+ | .va-slice{ | ||
+ | cursor:pointer; | ||
+ | position:absolute; | ||
+ | width:100%; | ||
+ | left:0px; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | .va-slice-1{ | ||
+ | background:#000 url(../images/1.jpg) no-repeat center center; | ||
+ | } | ||
+ | .va-slice-2{ | ||
+ | background:#000 url(../images/2.jpg) no-repeat center center; | ||
+ | } | ||
+ | .va-slice-3{ | ||
+ | background:#000 url(../images/3.jpg) no-repeat center center; | ||
+ | } | ||
+ | .va-slice-4{ | ||
+ | background:#000 url(../images/4.jpg) no-repeat center center; | ||
+ | } | ||
+ | .va-slice-5{ | ||
+ | background:#000 url(../images/5.jpg) no-repeat center center; | ||
+ | } | ||
+ | .va-slice-Javier{ | ||
+ | background:#000 url(../images/Team_Javier.png) no-repeat center center; | ||
+ | } | ||
+ | .va-slice-Estefania{ | ||
+ | background:#000 url(../images/Team_Estefania.png) no-repeat center center; | ||
+ | } | ||
+ | .va-slice-Ivan{ | ||
+ | background:#000 url(../images/Team_Ivan.png) no-repeat center center; | ||
+ | } | ||
+ | .va-slice-Yadira{ | ||
+ | background:#000 url(../images/Team_Yadira.png) no-repeat center center; | ||
+ | } | ||
+ | .va-slice-6{ | ||
+ | background:#000 url(../images/6.jpg) no-repeat center center; | ||
+ | } | ||
+ | .va-slice-7{ | ||
+ | background:#000 url(../images/Yadira_glteam.jpg) no-repeat center center; | ||
+ | } | ||
+ | .va-slice-color-1{ | ||
+ | background-color:#97c5eb; | ||
+ | } | ||
+ | .va-slice-color-2{ | ||
+ | background-color:#68ace5; | ||
+ | } | ||
+ | .va-slice-color-3{ | ||
+ | background-color:#0072cf; | ||
+ | } | ||
+ | .va-slice-color-4{ | ||
+ | background-color:#0039a6; | ||
+ | } | ||
+ | .va-slice-color-5{ | ||
+ | background-color:#00338e; | ||
+ | } | ||
+ | .va-slice-color-6{ | ||
+ | background-color:#002c76; | ||
+ | } | ||
+ | .va-slice-color-7{ | ||
+ | background-color:#002144; | ||
+ | } | ||
+ | .va-title{ | ||
+ | font-family: 'Open Sans Condensed', sans-serif; | ||
+ | text-transform:uppercase; | ||
+ | font-size:60px; | ||
+ | margin-left:20px; | ||
+ | color:#FFD700; | ||
+ | text-shadow: 0px 0px 1px #FF8C00; | ||
+ | } | ||
+ | .va-content{ | ||
+ | display:none; | ||
+ | margin-left:25px; | ||
+ | } | ||
+ | .va-slice p{ | ||
+ | font-size: 22px; | ||
+ | font-style: italic; | ||
+ | font-family:Georgia, serif; | ||
+ | } | ||
+ | .va-slice ul{ | ||
+ | margin-top:20px; | ||
+ | } | ||
+ | .va-slice ul li{ | ||
+ | float:left; | ||
+ | margin:0px 2px; | ||
+ | } | ||
+ | .va-slice ul li a{ | ||
+ | color:#000; | ||
+ | background:#eede2f; | ||
+ | padding:3px 6px; | ||
+ | font-size:14px; | ||
+ | font-family:'PT Sans', sans-serif; | ||
+ | text-transform:uppercase; | ||
+ | } | ||
+ | .va-slice ul li a:hover{ | ||
+ | background:#000; | ||
+ | color:#fff; | ||
+ | text-shadow:none; | ||
+ | } | ||
+ | .va-nav span{ | ||
+ | width:40px; | ||
+ | height:25px; | ||
+ | background:transparent url(../images/prev.png) no-repeat center center; | ||
+ | position:absolute; | ||
+ | top:-35px; | ||
+ | left:50%; | ||
+ | margin-left:-20px; | ||
+ | text-indent:-9000px; | ||
+ | opacity:0.7; | ||
+ | cursor:pointer; | ||
+ | display:none; | ||
+ | z-index:100; | ||
+ | } | ||
+ | .va-nav span.va-nav-next{ | ||
+ | background-image:url(../images/next.png); | ||
+ | top:auto; | ||
+ | bottom:-35px; | ||
+ | } | ||
+ | .va-nav span:hover{ | ||
+ | opacity:1.0; | ||
+ | } | ||
+ | |||
+ | /*TEAM ACCORDION*/ | ||
+ | |||
+ | .more ul{ | ||
+ | text-transform:uppercase; | ||
+ | font-size:13px; | ||
+ | padding:50px 0px 30px 0px; | ||
+ | height:30px; | ||
+ | clear:both; | ||
+ | width:1000px; | ||
+ | margin:10px auto 0 auto; | ||
+ | color:#000; | ||
+ | } | ||
+ | .more ul li{ | ||
+ | float:left; | ||
+ | margin:0px 2px; | ||
+ | } | ||
+ | .more ul li.selected a, .more ul li.selected a:hover{ | ||
+ | background:#000; | ||
+ | color:#fff; | ||
+ | text-shadow:none; | ||
+ | } | ||
+ | .more ul li a{ | ||
+ | text-shadow:1px 1px 1px #fff; | ||
+ | color:#555; | ||
+ | background:#f7f7f7; | ||
+ | padding:3px 6px; | ||
+ | -moz-box-shadow:1px 1px 2px #aaa; | ||
+ | -webkit-box-shadow:1px 1px 2px #aaa; | ||
+ | box-shadow:1px 1px 2px #aaa; | ||
+ | } | ||
+ | .more ul li a:hover{ | ||
+ | background:#000; | ||
+ | color:#fff; | ||
+ | text-shadow:none; | ||
+ | } | ||
+ | .content{ | ||
+ | width:100%; | ||
+ | position:relative; | ||
+ | } | ||
+ | /* Footer Style */ | ||
+ | .header{ | ||
+ | position:absolute; | ||
+ | width:100%; | ||
+ | height:25px; | ||
+ | line-height:24px; | ||
+ | top:0; | ||
+ | font-size:13px; | ||
+ | background:#000; | ||
+ | opacity:0.9; | ||
+ | text-transform:uppercase; | ||
+ | z-index:4; | ||
+ | } | ||
+ | .header a{ | ||
+ | padding:5px 10px; | ||
+ | letter-spacing:1px; | ||
+ | text-shadow:1px 1px 1px #000; | ||
+ | color:#ddd; | ||
+ | text-align:right; | ||
+ | } | ||
+ | .header a:hover{ | ||
+ | color:#fff; | ||
+ | } | ||
+ | .header a span{ | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | .header span.right_ab{ | ||
+ | position:absolute; | ||
+ | right:4px; | ||
+ | } | ||
+ | |||
+ | ul { | ||
+ | list-style:none; /* Button inside images*/ | ||
+ | } | ||
+ | |||
+ | ul li a { | ||
+ | text-decoration: none; /* Button inside images*/ | ||
+ | } | ||
+ | |||
+ | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | /* END OF THE ACCORDION*/ | ||
+ | |||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 17:36, 17 July 2014