diff -r 6626b728b142 -r 86b62b98fea7 web/res/css/tweetcast.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/web/res/css/tweetcast.css Tue Dec 13 19:01:59 2011 +0100 @@ -0,0 +1,448 @@ +/* Browser-reset CSS */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +img a { + border: none; +} + +body { + font-family: 'PT Sans', Helvetica, Arial, sans-serif; background-color: #F7F6F6; background-image: url("twcx-img/bgd.jpg"); background-repeat: repeat-x; +} + +h2, h3, h4 { + font-family: 'PT Sans Narrow', Helvetica, Arial, sans-serif; +} + +p { + font-size: 12px; +} + +b { + font-weight: bold; +} + +i { + font-style: italic; +} + +.highlight { + background: #ffff00; +} + +.hidden { + display: none; +} + +/* feedback */ + +#sendUsFeedBack { + position: absolute; right: 0; top: 0; width: 100px; z-index: 999999; +} + +#container { + width: 960px; margin: 0 auto; +} + +#colgauche { + float: left; width: 455px; margin-right: 13px; +} + +.barre { + float: left; width: 100%; +} + +.greyed { + color: #999; font-style: italic; +} + +.rechercheCourante { + background: #ffa0ff; font-weight: bold; color: #000080; +} + + +/* Menu */ + +#headlogo { + float: left; margin-right: 10px; +} + +.menu { + border-left: 1px solid #C3C3C3; + float: left; + list-style: none; + font-size: 12px; + height: 62px; overflow: hidden; +} + +.menu li { + background: url("twcx-img/menu_underline.gif") left bottom no-repeat; + padding: 3px 0 0 5px; + height: 18px; + min-width: 80px; +} + +.menu a { + color: #000000; text-decoration: none; +} + +.menu a:hover { + color: #0099FF; +} + +/* Formulaire */ + +#twwWrap { + float: left; width: 450px; background: #ffffff; padding: 1px; border-width: 1px; border-style: solid solid none solid; border-color: #ababab; margin-top: 6px; +} +#tweetWriter { + width: 430px; padding: 10px; background: #efefef; +} +.loginbutton{ + margin: 10px auto; height: 60px; width: 330px; padding:5px; + background: url(../../images/tweetWriterBgdUnconnect.gif) no-repeat; + border: none; color:#fff; +} +.loginlink{ + text-decoration:none; + color:#fff; +} +textarea { + display: block; margin: 10px auto; height: 60px; width: 330px; padding:5px; + background: url(../../images/tweetWriterBgdTxtArea.gif) no-repeat; + border: none; resize: none; +} + +a#sendTweet { + background: transparent url('../../images/bg_button_a_w.png') no-repeat top right; + color: #444; display: block; font-size: 12px; height: 24px; line-height: 14px; + float:right; margin: 0 45px 0 50px; padding: 0 18px 0 0; text-decoration: none; +} +a#sendTweet span { + background: transparent url('../../images/bg_button_span_w.png') no-repeat; display: block; height: 14px; + padding: 5px 0 5px 18px; +} +a#sendTweet:hover, a#sendTweet:active { + background-position: right -24px; +} +a#sendTweet:hover span, a#sendTweet:active span { + background-position: 0 -24px; +} +a.tweetButton { + float:right; margin: 2px 5px 0 0; width:32px; height:20px; text-decoration: none; font: normal 12px; + color: #444; text-align:center; cursor: pointer; cursor: hand; +} + +#question { + background: transparent url('../../images/bt_blue.png') no-repeat; +} +#reference{ + background: transparent url('../../images/bt_yellow.png') no-repeat; +} +#positive{ + background: transparent url('../../images/bt_green.png') no-repeat; +} +#negative{ + background: transparent url('../../images/bt_red.png') no-repeat; +} + +#tweetCounter{ + float: left; background: transparent; border: none;font-weight:bold; margin: 2px 0 0 42px; padding: 0; +} +.tweetCounterNegative{ + color:red; +} + +/* Liste de Tweets */ + +#tweetviz { + float: left; width: 452px; border: 1px solid #999; +} + +/* Recherche */ + +#recherche { + position: relative; float: left; padding: 2px 0; width: 452px; border-bottom: 1px solid #999; +} + +#recherche input { + float: left; +} + +#inp_q { + width: 236px; border: none; padding: 1px; margin-left: 2px; height: 17px; font-size: 13px; +} + +#inp_submit, #inp_reset { + border: 0; padding: 0; width: 20px; height: 20px; overflow: hidden; text-indent: 800px; background: url(twcx-img/searchcancel.png) +} + +#inp_submit:hover { + background-position: -20px 0; +} + +#inp_submit:active { + background-position: -40px 0; +} + +#inp_reset { + background-position: 0 -20px; +} + +#inp_reset:hover { + background-position: -20px -20px; +} + +#inp_reset:active { + background-position: -40px -20px; +} + +#time_legende { + float: left; margin-left: 30px; width: 30px; height: 20px; background: url(twcx-img/scale.png) left; +} + +#time_scale { + float: left; font-size: 12px; margin: 3px 0 0; color: #666; width: 50px; text-align: center; +} + +#time_zoomout, #time_zoomin { + float: left; width: 12px; height: 20px; background: url(twcx-img/scale.png); +} + +#time_zoomout { + background-position: -30px; +} + +#time_zoomout.inactive { + background-position: -54px; +} + +#time_zoomin { + background-position: -42px; +} + +#time_zoomin.inactive { + background-position: -66px; +} + +#recherche_annot { + position: absolute; top: 20px; z-index: 4; background: #ffffff; border: 1px solid #ccc; padding: 4px; font-size: 12px; + display: none; box-shadow: 2px 2px 2px rgba(0, 0, 0, .5) +} + +#recherche_annot a { + padding: 1px; line-height: 13px; margin: 1px; font-weight: bold; text-decoration: none; color: #000000; +} + +/* Liste des tweets */ + +#tweetlist { + float: left; width: 280px; height: 480px; list-style: none; border-right: 1px solid #999; color: #585858; cursor: pointer; cursor: hand; background: #ffffff; +} + +#tweetlist a { + text-decoration: none; color: #1985B5; +} + +#tweetlist a:hover { + text-decoration: underline; color: #105060; +} + +li.tweet, li.placeholder { + border-bottom : 1px dotted; overflow: hidden; float: left; border-color: #ccc; +} + +li.tweet { + position: relative; background: #fff; +} + +li.full { + width: 270px; height: 117px; border-right: 10px solid #ff0; +} + +li.half { + width: 280px; height: 46px; +} + +li.icons { + width: 20px; height: 20px; border: none; +} + +li.placeholder { + visibility: hidden; +} + +.tweet p { + overflow: hidden; +} + +.full p.tweet_text { + font-size: 12px; margin: 5px 0 5px 58px; height: 108px; width: 207px; color: #000000; +} + +.half p.tweet_text { + font-size: 11px; margin: 5px 0 5px 49px; height: 36px; line-height: 12px; width: 216px; +} + +div.around_img { + float: left; +} + +.full .profile_image { + margin: 5px 5px 0 5px; width: 48px; height: 48px; +} + +.half .profile_image { + margin: 5px; width: 36px; height: 36px; +} + +.icons .profile_image { + margin: 2px; width: 16px; height: 16px; +} + +p.created_at { + font-size: 12px; text-align: center; font-style: italic; color: #999999; width: 58px; overflow: hidden; +} + +.annotations { + position: absolute; margin: 0; padding: 0; top: 0; left: 0; width: 100%; height: 100%; +} + +.icons .annotations { + position: absolute; width: 20px; height: 6px; left: 0; top: 16px; z-index: 3; +} + +div.annotation { + float: left; height: 100%; +} + +div.twmain { + position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; overflow: hidden; +} + +div.tweet_actions { + position: absolute; bottom : 2px; right: 4px; font-size: 11px; +} + +/* timeline */ + +#timeline { + float: left; height: 480px; width: 150px; border-right: 1px solid #999; cursor: pointer; cursor: hand; +} + +#scrollcont { + float: left; width: 20px; height: 480px; overflow: auto; +} + +#scrollin { + width: 1px; height: 8000px; +} + +/* hovertweet */ + +#hovertweet { + position: absolute; display: none; margin: -20px 0 0 15px; z-index: 12; +} + +div.full { + position: absolute; background: #eeeeee; width: 270px; height: 84px; border: 1px solid #808080; border-radius: 3px; box-shadow: 5px 5px 5px rgba(0,0,0,.3); +} + +#hoverarrow { + position: absolute; width: 10px; height: 18px; left: -9px; top: 13px; background: url(twcx-img/arrow.png); +} + +/* Colonne de droite */ + +#coldroite { + float: left; width: 492px; +} + +#vlWrap { + float: left; border: 5px solid #ffffff; background: #999999; padding: 1px; margin-top: 70px; +} + +#videoLivePlayer { + width: 480px; height: 320px; background: #000000; +} + +#out_fleche { + float: left; position: relative; width: 492px; height: 14px; background: url(twcx-img/bgnoarrow.png); +} + +#in_fleche { + position: absolute; left: 10px; width: 27px; height: 15px; background: url(twcx-img/arrowtop.png); +} + +#accordeon { + float: left; width: 492px; list-style: none; background: #999999; +} + +#accordeon h3 { + font-size: 16px; font-weight: bold; color: #666; +} + +#accordeon p { + margin: 5px 0; line-height: 1.5em; +} + +#accordeon li { + float: left; width: 480px; margin: 0 1px 1px 1px; padding: 4px; border: 1px solid #ffffff; +} + +li.acctitre { + background: #efefef; cursor: pointer; cursor: hand; +} + +li.acctexte { + background: url(twcx-img/bgdeplie.png) top repeat-x #efefef; +} + +/* Tag Cloud */ + +#motscles { + text-align: center; +} + +#motscles span { + padding: 2px; cursor: pointer; cursor: hand; +} + +/* Footer */ +.footer { + float: left; width: 100%; margin: 40px 0 10px; text-align: center; +} + +hr { + background: #cccccc; border: none; height: 1px; margin: 0 0 10px; width: 100%; +} + +a.footerLink { + text-decoration:none; margin:5px; color: #000000; + font-family: 'PT Sans Narrow', Arial, Helvetica, sans-serif; font-size: 13px; +} + +a.footerLink:hover { + color: #0099FF; +} + +