Template:Team:BAU-Indonesia/css
From 2012.igem.org
(Difference between revisions)
(57 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<style> | <style> | ||
- | * | + | /* |
- | { | + | Design by Metamorphosis Design |
- | margin: 0px; | + | http://www.metamorphozis.com |
- | padding: 0px; | + | Released for free under a Creative Commons Attribution 2.5 License |
+ | */ | ||
+ | |||
+ | *{ | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
} | } | ||
- | + | img{ | |
- | + | padding: 0px; | |
- | + | border: none; | |
} | } | ||
- | + | a{ | |
- | + | color: #000; | |
+ | text-decoration: none; | ||
+ | font-weight: bold; | ||
} | } | ||
- | + | a:hover { | |
- | + | text-decoration: none; | |
+ | color: #c70000; | ||
} | } | ||
- | + | h2{ | |
- | + | font-family: Arial, Helvetica, sans-serif; | |
- | + | font-size: 24px; | |
- | + | color: #000; | |
- | + | font-weight: normal; | |
- | + | background: url(images/title_bg.png) repeat-x bottom; | |
- | + | padding-bottom: 3px; | |
} | } | ||
- | + | h3{ | |
- | + | font-family: Arial, Helvetica, sans-serif; | |
- | font-family: | + | font-size: 20px; |
+ | color: #000; | ||
+ | font-weight: normal; | ||
+ | padding-bottom: 3px; | ||
+ | margin-bottom: 5px; | ||
} | } | ||
+ | h4{ | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | font-size: 18px; | ||
+ | color: #000; | ||
+ | font-weight: normal; | ||
+ | padding-bottom: 6px; | ||
+ | background: url(images/title_bg.png) repeat-x bottom; | ||
+ | } | ||
- | + | p{ | |
- | color: | + | color:#000;} |
- | + | ||
- | + | body { | |
- | + | font-family: Arial, Helvetica, sans-serif; | |
+ | font-size: 12px; | ||
+ | line-height: 22px; | ||
+ | color: #ffffff; | ||
+ | background: #000000 url(https://static.igem.org/mediawiki/2012/archive/9/98/20120923184816%21Bg.jpg); | ||
} | } | ||
- | . | + | .clear{ |
- | + | clear: both; | |
} | } | ||
- | + | #bg_top{ | |
- | + | background: url(images/bg_top.jpg) no-repeat center top; | |
- | + | min-height: 100%; | |
} | } | ||
- | + | #wrap{ | |
- | + | width: 1016px; | |
+ | margin: 0 auto; | ||
+ | padding: 9px 0px 0px 0px; | ||
} | } | ||
+ | #wrap_bg{ | ||
+ | width: 1216px; | ||
+ | margin: 0 auto; | ||
+ | |||
+ | } | ||
- | + | /*menu*/ | |
- | + | ||
+ | #menu{ | ||
+ | float: right; | ||
+ | width: 573px; | ||
+ | height: 39px; | ||
} | } | ||
- | + | #menu ul { | |
- | + | padding-left: 10px; | |
+ | padding-top: 7px; | ||
+ | margin: 0px; | ||
} | } | ||
- | + | #menu li { | |
- | + | display: inline; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #menu a { | |
- | + | font-family: Arial, Helvetica, sans-serif; | |
+ | font-size: 14px; | ||
+ | font-weight: normal; | ||
+ | display: block; | ||
+ | float: left; | ||
+ | width: 108px; | ||
+ | height: 26px; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | color: #AFAFAF; | ||
+ | padding-right: 2px; | ||
+ | padding-top: 3px; | ||
} | } | ||
- | + | #menu .but1_menu a:hover, #menu .but1_menu .active { | |
- | color: | + | height: 26px; |
+ | background: url(images/menu_active1.png) no-repeat center top; | ||
+ | color: #ffffff; | ||
} | } | ||
- | + | #menu .but2_menu a:hover, #menu .but2_menu .active { | |
- | + | height: 26px; | |
- | + | background: url(images/menu_active1.png) no-repeat center top; | |
- | + | color: #ffffff; | |
} | } | ||
- | + | #menu .but3_menu a:hover, #menu .but3_menu .active { | |
- | color: # | + | height: 26px; |
+ | background: url(images/menu_active1.png) no-repeat center top; | ||
+ | color: #ffffff; | ||
} | } | ||
- | + | #menu .but4_menu a:hover, #menu .but4_menu .active { | |
- | . | + | height: 26px; |
- | + | background: url(images/menu_active1.png) no-repeat center top; | |
+ | color: #ffffff; | ||
} | } | ||
- | # | + | #menu .but5_menu a:hover, #menu .but5_menu .active { |
- | + | height: 26px; | |
+ | background: url(images/menu_active1.png) no-repeat center top; | ||
+ | color: #ffffff; | ||
} | } | ||
+ | /*logo*/ | ||
- | # | + | #logo{ |
- | + | height: 110px; | |
- | padding: | + | padding-top: 70px; |
- | + | margin-top:-70px; | |
- | + | margin-bottom:30px; | |
+ | margin-left:10px; | ||
} | } | ||
+ | #logo h1 a{ | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | font-size: 16px; | ||
+ | color: #ffffff; | ||
+ | font-style: italic; | ||
+ | font-weight: normal; | ||
+ | } | ||
- | # | + | #logo a small{ |
- | + | font-family: Arial, Helvetica, sans-serif; | |
- | + | font-size: 12px; | |
- | + | color: #ffffff; | |
- | + | font-style: italic; | |
- | + | font-weight: normal; | |
} | } | ||
+ | /*prew_box*/ | ||
- | # | + | #prew_box{ |
+ | background: url(https://static.igem.org/mediawiki/2012/3/36/Prew_bg.png) no-repeat top left; | ||
+ | height: 329px; | ||
+ | padding: 11px; | ||
+ | } | ||
+ | |||
+ | #prew_but_box{ | ||
+ | width: 76px; | ||
margin: 0 auto; | margin: 0 auto; | ||
- | + | height: 20px; | |
+ | padding-top: 20px; | ||
} | } | ||
+ | #prew_but_left{ | ||
+ | float: left; | ||
+ | } | ||
- | + | #prew_but_right{ | |
- | + | float: right; | |
} | } | ||
- | + | /*content*/ | |
- | + | ||
- | + | #content{ | |
+ | color: #ffffff; | ||
+ | |||
+ | margin-top: 10px; | ||
+ | padding: 10px; | ||
} | } | ||
- | + | .text{ | |
- | + | padding: 10px 0px 0px 0px; | |
} | } | ||
- | + | .italic_style{ | |
- | + | font-style: italic; | |
- | + | ||
- | font | + | |
- | + | ||
} | } | ||
- | + | .read{ | |
- | { | + | float: right; |
- | + | padding: 0px 10px 0px 0px; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .read a{ | |
- | { | + | color: #c70000; |
- | + | font-weight: normal; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .read a:hover{ | |
- | { | + | color: #000000; |
- | + | ||
} | } | ||
- | # | + | #left_column{ |
- | + | width: 633px; | |
- | + | float: left; | |
- | + | ||
} | } | ||
- | + | .left_news_top{ | |
+ | height: 22px; | ||
+ | padding-top: 13px; | ||
+ | } | ||
- | + | .left_news_bg{ | |
- | + | padding: 0px 20px 0px 20px; | |
- | + | ||
- | + | ||
- | padding | + | |
} | } | ||
+ | .left_news_bot{ | ||
+ | height: 22px; | ||
+ | } | ||
- | # | + | #right_column{ |
- | + | width: 360px; | |
- | + | float: right; | |
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | { | + | .right_news_top{ |
- | + | height: 22px; | |
+ | padding-top: 13px; | ||
} | } | ||
+ | .right_news_bg{ | ||
+ | padding: 0px 20px 0px 20px; | ||
+ | } | ||
- | # | + | .right_news_bot{ |
+ | height: 22px; | ||
+ | } | ||
+ | |||
+ | /*footer*/ | ||
+ | |||
+ | #footer{ | ||
+ | padding: 10px 0px 20px 0px; | ||
+ | color: #ffffff | ||
+ | } | ||
+ | |||
+ | #footer a{ | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | |||
+ | #footer a:hover{ | ||
+ | color: #c70000; | ||
+ | } | ||
+ | |||
+ | |||
+ | #footer_bottom | ||
{ | { | ||
- | + | padding-top: 10px; | |
- | + | font-size: 10px; | |
- | + | padding-left: 60px; | |
} | } | ||
- | # | + | #footer_bottom a{ |
- | + | font-weight: normal; | |
} | } | ||
- | #menu li { | + | |
- | + | .row-top {width:100%;padding:33px 0 42px;} | |
- | + | .row-padding {padding:0 62px} | |
- | + | .col-1, .col-2, .col-3, .col-4 {float:left} | |
+ | .list-services li {line-height:24px;padding-left:28px; list-style:none} | ||
+ | .list-services li a {color:#9d9d9d;text-decoration:none} | ||
+ | .list-services li a:hover {text-decoration:underline} | ||
+ | .list-services li.item-1 {background:url(images/facebook.png) 0 3px no-repeat} | ||
+ | .list-services li.item-2 {background:url(https://static.igem.org/mediawiki/2012/3/35/Twitterads.png) no-repeat} | ||
+ | .list-services li.item-3 {background:url(images/linkedin.png) 0 3px no-repeat} | ||
+ | .menu li a, .list-1 li a, {text-decoration:none} | ||
+ | .list-1 li {line-height:24px;padding-left:10px;background:url(images/marker.gif) 0 10px no-repeat; list-style:none} | ||
+ | .list-1 li a {display:inline-block;color:#9d9d9d} | ||
+ | .list-1 li a:hover {text-decoration:underline} | ||
+ | |||
+ | .indent3 {padding-top:28px} | ||
+ | .footer-logo {display:block;color:#666666;font-size:30px;line-height:1em;text-transform:uppercase;letter-spacing:-3px;font-weight:400;margin-bottom:5px} | ||
+ | .footer-logo strong {color:#666666;text-transform:none;display:inline-block} | ||
+ | .phone {display:inline-block;font-size: 24px;line-height:1.2em;color:#666666;letter-spacing:-1px;padding-left:5px} | ||
+ | .phone strong {color:#666666} | ||
+ | .col-1 {width:190px;margin-right:55px} | ||
+ | .col-2 {width:110px;margin-right:55px} | ||
+ | .col-3 {width:140px;margin-right:65px} | ||
+ | .col-4 {width:235px} | ||
+ | |||
+ | |||
+ | .ls{ | ||
+ | list-style: none; | ||
+ | padding-left: 0px; | ||
} | } | ||
- | + | .ls li{ | |
- | + | background: url(images/ls.gif) no-repeat 0px 7px; | |
- | + | margin-bottom: 4px; | |
- | + | padding-left: 15px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .ls2{ | |
- | + | list-style: none; | |
- | + | padding-left: 0px; | |
- | + | padding-top: 5px; | |
- | + | ||
- | + | ||
} | } | ||
+ | .ls2 li{ | ||
+ | background: url(images/ls2.gif) no-repeat 0px 7px; | ||
+ | padding-bottom: 4px; | ||
+ | padding-left: 15px; | ||
+ | } | ||
+ | .button_box{ | ||
+ | padding-top: 5px; | ||
+ | } | ||
+ | .button_box a{ | ||
+ | padding-right: 20px; | ||
+ | } | ||
- | + | /*blog*/ | |
- | { | + | |
- | + | .news_top{ | |
- | + | clear: both; | |
} | } | ||
- | + | .layer_border{ | |
- | { | + | background: url(images/title_bg.jpg) repeat-x bottom; |
- | + | padding-bottom: 3px; | |
- | + | ||
- | + | ||
- | + | ||
- | background: url(images/ | + | |
- | + | ||
- | + | ||
} | } | ||
- | + | .news_top_left{ | |
- | + | background: url(images/date_bg.jpg) no-repeat right; | |
+ | width: 45px; | ||
+ | height: 42px; | ||
+ | float: left; | ||
+ | text-align: center; | ||
+ | margin: 5px 0px 0px 0px; | ||
} | } | ||
- | + | ||
- | { | + | .news_top_left .date_day{ |
- | font: | + | color: #ffffff; |
- | + | font-family: Arial, Helvetica, sans-serif; | |
+ | font-size: 12px; | ||
+ | font-weight: normal; | ||
+ | padding-top: 8px; | ||
+ | line-height: 12px; | ||
} | } | ||
- | + | ||
- | { | + | .news_top_left .date_month{ |
- | + | color: #ffffff; | |
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | font-size: 12px; | ||
+ | font-weight: normal; | ||
} | } | ||
- | + | .news_top_right{ | |
- | + | float: left; | |
- | + | padding-left: 15px; | |
+ | width: 529px; | ||
+ | } | ||
+ | .title_post_left{ | ||
+ | float: left; | ||
} | } | ||
- | + | .title_post_right{ | |
- | { | + | float: right; |
- | + | ||
} | } | ||
- | #right a { | + | /*gallery*/ |
+ | |||
+ | .gallery_top{ | ||
+ | background: url(images/gallery_top.jpg) no-repeat; | ||
+ | height: 21px; | ||
+ | } | ||
+ | |||
+ | .gallery_bg{ | ||
+ | background: url(images/gallery_bg.jpg) repeat-y left; | ||
+ | padding: 0px 11px 0px 11px; | ||
+ | } | ||
+ | |||
+ | .gallery_bot{ | ||
+ | background: url(images/gallery_bot.jpg) no-repeat; | ||
+ | height: 21px; | ||
+ | } | ||
+ | |||
+ | .gal{ | ||
+ | background: url(images/gal_bg.jpg) no-repeat 0px 0px; | ||
+ | width: 457px; | ||
+ | height: 250px; | ||
+ | padding: 10px 10px 10px 10px; | ||
+ | float: left; | ||
+ | margin: 0px 10px 0px 10px; | ||
+ | } | ||
+ | |||
+ | .gal h3{ | ||
+ | background: none; | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | .gal_img{ | ||
+ | border: 1px solid #ffffff; | ||
+ | } | ||
+ | |||
+ | .gal p{ | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | .razd{ | ||
+ | height: 10px; | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | .pagenav{ | ||
+ | padding-left: 10px; | ||
+ | } | ||
+ | |||
+ | .pagenav ul{ | ||
+ | list-style: none; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | .pagenav ul li a{ | ||
+ | display: block; | ||
+ | float: left; | ||
+ | background: url(images/pagenav_bg.jpg) no-repeat; | ||
+ | width: 20px; | ||
+ | height: 21px; | ||
+ | line-height: 21px; | ||
+ | text-align: center; | ||
+ | color: #ffffff; | ||
+ | margin-right: 5px; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | |||
+ | .pagenav ul li a:hover{ | ||
color: #ffffff; | color: #ffffff; | ||
+ | background: url(images/pagenav_select.jpg) no-repeat; | ||
} | } | ||
- | + | ||
+ | .pagenav ul li .select{ | ||
color: #ffffff; | color: #ffffff; | ||
+ | background: url(images/pagenav_select.jpg) no-repeat; | ||
} | } | ||
- | + | /*about*/ | |
- | { | + | |
- | + | .date_news{ | |
- | + | text-decoration: underline; | |
} | } | ||
- | . | + | .news{ |
- | { | + | padding: 10px 0px 20px 0px; |
- | padding: 10px; | + | |
} | } | ||
+ | /*contact*/ | ||
- | # | + | #contact_form fieldset { |
- | { | + | border: none; |
- | + | padding-top: 20px; | |
- | + | ||
- | border: | + | |
- | padding: | + | |
} | } | ||
+ | #contact_form input { | ||
+ | margin-bottom: 5px; | ||
+ | } | ||
- | # | + | #contact-submit, #contact-clear{ |
- | { | + | width: 74px; |
- | + | height: 19px; | |
- | + | color: #efefef; | |
- | + | background: url(images/contact_but.jpg); | |
- | + | background-repeat: no-repeat; | |
+ | background-position: left bottom; | ||
+ | border: none; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | font-size: 12px; | ||
+ | font-weight: normal; | ||
+ | font-style: italic; | ||
+ | margin-right: 40px; | ||
} | } | ||
- | #left | + | #con_name, #con_email, #con_website { |
- | + | width: 571px; | |
- | color: # | + | height: 29px; |
- | + | padding-top: 0px; | |
+ | padding-left: 10px; | ||
+ | padding-right: 10px; | ||
+ | border: none; | ||
+ | background: url(images/contact_input.jpg); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: left top; | ||
+ | color: #373636; | ||
+ | line-height: 29px; | ||
} | } | ||
- | # | + | #con_mess { |
- | + | width: 571px; | |
- | + | height: 103px; | |
- | font-size: | + | padding-top: 4px; |
+ | padding-left: 10px; | ||
+ | padding-right: 10px; | ||
+ | padding-bottom: 15px; | ||
+ | border: none; | ||
+ | background: url(images/contact_mess.jpg); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: left top; | ||
+ | color: #373636; | ||
+ | margin-bottom: 15px; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | font-size: 12px; | ||
} | } | ||
- | + | .pad_left{ | |
- | + | padding-left: 30px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .contact_news{ | |
- | { | + | padding-top: 15px; |
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
+ | |||
+ | /*=================================*/ | ||
+ | /* Nivo Slider Demo | ||
+ | /* November 2010 | ||
+ | /* By: Gilbert Pellegrom | ||
+ | /* http://dev7studios.com | ||
+ | /*=================================*/ | ||
+ | |||
+ | |||
+ | #slider-wrapper { | ||
+ | background:url(images/top.jpg) no-repeat; | ||
+ | width:994px; | ||
+ | height: 299px; | ||
+ | margin:0 auto; | ||
} | } | ||
- | . | + | #slider { |
- | + | position:relative; | |
+ | width: 994px; | ||
+ | height: 299px; | ||
+ | background:url(https://static.igem.org/mediawiki/2012/c/cf/Syu6.gif) no-repeat 50% 50%; | ||
+ | } | ||
+ | #slider img { | ||
+ | position:absolute; | ||
+ | top:0px; | ||
+ | left:0px; | ||
+ | display:none; | ||
+ | } | ||
+ | #slider a { | ||
+ | border:0; | ||
+ | display:block; | ||
+ | } | ||
+ | .nivo-controlNav { | ||
+ | position:absolute; | ||
+ | left: 440px; | ||
+ | bottom:-42px; | ||
+ | |||
+ | } | ||
+ | .nivo-controlNav a { | ||
+ | display:block; | ||
+ | width:22px; | ||
+ | height:22px; | ||
+ | background:url(https://static.igem.org/mediawiki/2012/7/72/Loadingggs.gif) no-repeat; | ||
+ | text-indent:-9999px; | ||
+ | border:0; | ||
+ | margin-right:3px; | ||
+ | float:left; | ||
+ | } | ||
+ | .nivo-controlNav a.active { | ||
+ | background-position:0 -22px; | ||
} | } | ||
+ | .nivo-directionNav a { | ||
+ | display:block; | ||
+ | width:30px; | ||
+ | height:30px; | ||
+ | background:url(https://static.igem.org/mediawiki/2012/2/2c/Tahu.png) no-repeat; | ||
+ | text-indent:-9999px; | ||
+ | border:0; | ||
+ | } | ||
+ | a.nivo-nextNav { | ||
+ | background-position:-30px 0; | ||
+ | right:15px; | ||
+ | } | ||
+ | a.nivo-prevNav { | ||
+ | left:15px; | ||
+ | } | ||
+ | .nivo-caption { | ||
+ | text-shadow:none; | ||
+ | font-family: Helvetica, Arial, sans-serif; | ||
+ | } | ||
+ | .nivo-caption a { | ||
+ | color:#efe9d1; | ||
+ | text-decoration:underline; | ||
+ | } | ||
+ | /*-----------------*/ | ||
+ | #floatMenu { | ||
+ | position:absolute; | ||
+ | top:10px; | ||
+ | left:65%; | ||
+ | margin-left:-870px; | ||
+ | width:100px;} | ||
+ | #floatMenu ul {list-style-type: none;} | ||
+ | #floatMenu ul li a { | ||
+ | display:block; | ||
+ | background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent; | ||
+ | background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b)); | ||
+ | border:0px solid #99; | ||
+ | border-left:3px solid #fff; | ||
+ | text-decoration:none; | ||
+ | color:#fff; | ||
+ | padding:5px 5px 5px 25px; | ||
+ | width:100px; | ||
+ | -moz-border-radius-topleft: 5px; | ||
+ | -moz-border-radius-bottomright: 5px; | ||
+ | -moz-border-radius-bottomleft: 15px; | ||
+ | -moz-border-radius-topright: 15px; | ||
+ | -webkit-border-top-right-radius: 15px; | ||
+ | -webkit-border-bottom-left-radius: 15px; | ||
+ | -webkit-transition: all 0.6s ease-out; | ||
+ | box-shadow: #333 0px 0px 10px; | ||
+ | -moz-box-shadow: #333 0px 0px 10px; | ||
+ | -webkit-box-shadow: #333 0px 0px 10px; | ||
+ | } | ||
+ | #floatMenu ul li a:hover { | ||
+ | color:#AD3D29; | ||
+ | background-color: #000; | ||
+ | border-right:3px solid #999; | ||
+ | width:100px; | ||
+ | -moz-border-radius-topleft: 15px; | ||
+ | -moz-border-radius-topright: 5px; | ||
+ | -moz-border-radius-bottomright: 15px; | ||
+ | -moz-border-radius-bottomleft: 5px; | ||
+ | -webkit-border-top-left-radius: 15px; | ||
+ | -webkit-border-top-right-radius: 0px; | ||
+ | -webkit-border-bottom-right-radius: 15px; | ||
+ | -webkit-border-bottom-left-radius: 0px; | ||
+ | } | ||
+ | #floatMenu ul.menu1 li a:hover {border-color:#bdbdbd;} | ||
+ | #s { | ||
+ | background:#AD3D29; | ||
+ | color:#00ff00; | ||
+ | width:230px; | ||
+ | padding-left:15px; | ||
+ | font-weight:bold; | ||
+ | font-size:10px; | ||
+ | padding:1px; | ||
+ | border-bottom:1px solid #F0F0F0; | ||
+ | border-right:1px solid #F0F0F0; | ||
+ | border-top:1px solid #F0F0F0; | ||
+ | border-left:0; | ||
+ | font-family: Verdana; | ||
+ | } | ||
- | # | + | |
- | + | ||
- | + | /*accordion menu tutorial for you | |
- | + | **************************************/ | |
+ | |||
+ | #isinya{ | ||
+ | color:#000; | ||
+ | } | ||
+ | |||
+ | |||
+ | .verticalaccordion>ul { | ||
+ | margin: 0; | ||
+ | margin-left:0px; | ||
+ | margin-top:0px; | ||
+ | padding: 0; | ||
+ | list-style:none; | ||
+ | width: 300px; | ||
+ | |||
} | } | ||
- | + | .verticalaccordion>ul>li { | |
- | + | display:block; | |
- | + | overflow: hidden; | |
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | list-style:none; | |
+ | height:40px; | ||
+ | width: 300px; | ||
+ | |||
+ | /* Decorative CSS */ | ||
+ | background-color:#f0f0f0; | ||
+ | |||
+ | /* CSS3 Transition Effect */ | ||
+ | transition: height 0.3s ease-in-out; | ||
+ | -moz-transition: height 0.3s ease-in-out; | ||
+ | -webkit-transition: height 0.3s ease-in-out; | ||
+ | -o-transition: height 0.3s ease-in-out; | ||
+ | |||
} | } | ||
- | + | .verticalaccordion>ul>li>h3 { | |
- | color: # | + | font-weight:normal; |
+ | margin: 0; | ||
+ | padding:10px; | ||
+ | height:19px; | ||
+ | |||
+ | |||
+ | /* Decorative CSS */ | ||
+ | border-top:#f0f0f0 1px solid; | ||
+ | font-family: Flavors, Helvetica, sans-serif; | ||
+ | text-decoration:none; | ||
+ | color: #000; | ||
+ | background: #cccccc; | ||
+ | |||
+ | /* CSS3 Gradient Effect */ | ||
+ | background: -moz-linear-gradient( top, #999999, #cccccc); | ||
+ | background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc)); | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */ | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */ | ||
} | } | ||
+ | .verticalaccordion>ul>li>div { | ||
+ | margin:0; | ||
+ | overflow: auto; | ||
+ | padding:10px; | ||
+ | height:600px; | ||
+ | } | ||
+ | .verticalaccordion>ul>li:hover { | ||
+ | height: 600px; | ||
+ | } | ||
+ | |||
+ | .verticalaccordion:hover>ul>li:hover>h3 { | ||
+ | /* Decorative CSS */ | ||
+ | color:#FFF; | ||
+ | background: #000000; | ||
+ | |||
+ | /* CSS3 Gradient Effect */ | ||
+ | background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */ | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */ | ||
+ | } | ||
+ | |||
+ | .verticalaccordion>ul>li>h3:hover { | ||
+ | cursor:pointer;} | ||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 22:34, 26 September 2012