Changeset 2410

Show
Ignore:
Timestamp:
2006-08-30 01:34:53 (2 years ago)
Author:
ped039
Message:

Search, detail and big monitor page nearly ready (footer is missing)

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • design/trunk/hanami/ index.html

    r2385 r2410  
    99  <script src="src/unittest.js" type="text/javascript"></script> 
    1010<link href="main.css" rel="stylesheet" type="text/css" media="screen" /> 
     11<link href="video-monitor.css" rel="stylesheet" type="text/css" media="screen" /> 
    1112 
    1213   
    …… 
    1819 
    1920<div id="header"> 
    20  
    21 <!--<div id="logo">&nbsp;</div>--> 
    22 <div id="wiki-title-story">&nbsp;</div> 
    23  
    24 <div id="menu-main"> 
     21<div id="title-cmml">&nbsp;</div> 
     22<div id="title-wiki-story">&nbsp;</div> 
     23 
     24<div id="menu-main-left"> 
    2525<ul> 
    2626<li><a href="#">home</a></li> 
    …… 
    3535</div><!--end menu-main--> 
    3636 
    37 <div id="menu-story"> 
     37<div id="menu-main-right"> 
    3838<ul> 
    3939<li><a href="#">metadata</a></li> 
    …… 
    4444</ul> 
    4545</div><!--end menu-story--> 
    46  
    4746</div><!--end header--> 
    4847 
    …… 
    5049 
    5150<div id="random-storys"> 
    52 <img class="clip01" src="dummy02.gif" /> 
    53 <img class="clip02" src="dummy02.gif" /> 
    54 <img class="clip03" src="dummy02.gif" /></div> 
     51<p>RANDOM STORYS</p> 
     52</div> 
    5553 
    5654<div id="searcharea" > 
    57         <span class="seachtitle">&nbsp;</span> 
     55        <span class="sub-title">search</span> 
    5856                        <form  name="search" action="http://media.annodex.net/cmmlwiki/Special:Search" method="get"> 
    5957                        <input type="hidden" name="fulltext" value="Search"/> 
    …… 
    6361</div><!--end searcharea--> 
    6462 
    65 <div id="tag-box"> 
    66 <span class="tag-title">&nbsp;</span> 
    67 <p>Sed purus id sapien <strong>sollicitudin</strong> ultricies hendrerit volutpat wisi condimentum tempus <strong>praesent</strong> gravida metus vitae massa aliquam neque magna fringilla porta Pellentesque habitant morbi tristique senectus malesuada fames turpis egestas proin lorem ultrices amet condimentum vitae vehicula massa.</p> 
    68 </div> 
    69 </div> 
    70 <!--end content-left--> 
     63 
     64<div id="recent-tag-box"> 
     65<div class="sub-title">recent tags</div> 
     66                                <span><a href="#" class="tag-size04">amsterdam</a></span> 
     67                                <span><a href="#" class="tag-size01">animal</a></span> 
     68                                <span><a href="#" class="tag-size09">architecture</a></span> 
     69                                <span><a href="#" class="tag-size15">art</a></span> 
     70                                <span><a href="#" class="tag-size01">august</a></span> 
     71                                <span><a href="#" class="tag-size11">baby</a></span> 
     72                                <span><a href="#" class="tag-size06">barcelona</a></span> 
     73                                <span><a href="#" class="tag-size17">beach</a></span> 
     74                                <span><a href="#" class="tag-size08">berlin</a></span> 
     75                                <span><a href="#" class="tag-size17">birthday</a></span> 
     76                                <span><a href="#" class="tag-size03">black</a></span> 
     77                                <span><a href="#" class="tag-size10">blue</a></span> 
     78                                <span><a href="#" class="tag-size04">boston</a></span> 
     79                                <span><a href="#" class="tag-size05">camping</a></span> 
     80                                <span><a href="#" class="tag-size12">canada</a></span> 
     81                                <span><a href="#" class="tag-size05">car</a></span> 
     82                                <span><a href="#" class="tag-size12">cat</a></span> 
     83                                <span><a href="#" class="tag-size11">chicago</a></span> 
     84</div><!--end recent-tag-box-->  
     85 
     86<div id="tag-arrows">            
     87<a href="#" onclick="new Effect.SlideUp('more-tags',{duration:1.5}); return false;"><p class="tags-arrows-up">&nbsp;</p></a> 
     88<a href="#" onclick="new Effect.SlideDown('more-tags',{duration:1.5}); return false;"><p class="tags-arrows-down">&nbsp;<span class="more-tags-title">more tags</span></p></a></div> 
     89 
     90<div id="more-tags"> 
     91<div style="overflow:hidden"> 
     92 
     93                                <span><a href="#" class="tag-size05">church</a></span> 
     94                                <span><a href="#" class="tag-size11">city</a></span> 
     95                                <span><a href="#" class="tag-size06">clouds</a></span> 
     96                                <span><a href="#" class="tag-size02">color</a></span> 
     97                                <span><a href="#" class="tag-size08">concert</a></span> 
     98                                <span><a href="#" class="tag-size06">day</a></span> 
     99                                <span><a href="#" class="tag-size01">dogs</a></span> 
     100                                <span><a href="#" class="tag-size20">family</a></span> 
     101                                <span><a href="#" class="tag-size08">festival</a></span> 
     102                                <span><a href="#" class="tag-size07">florida</a></span> 
     103                                <span><a href="#" class="tag-size14">flowers</a></span> 
     104                                <span><a href="#" class="tag-size20">friends</a></span> 
     105                                <span><a href="#" class="tag-size09">fun</a></span> 
     106                                <span><a href="#" class="tag-size12">germany</a></span> 
     107                                <span><a href="#" class="tag-size04">girl</a></span> 
     108                                <span><a href="#" class="tag-size01">graduation</a></span> 
     109                                <span><a href="#" class="tag-size04">graffiti</a></span> 
     110                                <span><a href="#" class="tag-size07">hawaii</a></span> 
     111                                <span><a href="#" class="tag-size02">hiking</a></span> 
     112                                <span><a href="#" class="tag-size12">holiday</a></span> 
     113                                <span><a href="#" class="tag-size08">house</a></span> 
     114                                <span><a href="#" class="tag-size09">india</a></span> 
     115                                <span><a href="#" class="tag-size02">island</a></span> 
     116                                <span><a href="#" class="tag-size19">japan</a></span> 
     117                                <span><a href="#" class="tag-size07">kids</a></span> 
     118                                <span><a href="#" class="tag-size04">landscape</a></span> 
     119                                <span><a href="#" class="tag-size18">london</a></span> 
     120                                <span><a href="#" class="tag-size01">losangeles</a></span> 
     121                                <span><a href="#" class="tag-size09">macro</a></span> 
     122                                <span><a href="#" class="tag-size15">me</a></span> 
     123                                <span><a href="#" class="tag-size09">mexico</a></span> 
     124                                <span><a href="#" class="tag-size01">mountain</a></span> 
     125                                <span><a href="#" class="tag-size13">music</a></span> 
     126                                <span><a href="#" class="tag-size03">newyorkcity</a></span> 
     127                                <span><a href="#" class="tag-size12">night</a></span> 
     128                                <span><a href="#" class="tag-size03">ocean</a></span> 
     129                                <span><a href="#" class="tag-size15">paris</a></span> 
     130                                <span><a href="#" class="tag-size21">party</a></span> 
     131                                <span><a href="#" class="tag-size13">people</a></span> 
     132                                <span><a href="#" class="tag-size01">photo</a></span> 
     133                                <span><a href="#" class="tag-size09">portrait</a></span> 
     134                                <span><a href="#" class="tag-size09">red</a></span> 
     135                                <span><a href="#" class="tag-size05">river</a></span> 
     136                                <span><a href="#" class="tag-size01">school</a></span> 
     137                                <span><a href="#" class="tag-size06">scotland</a></span> 
     138                                <span><a href="#" class="tag-size08">seattle</a></span> 
     139                                <span><a href="#" class="tag-size01">show</a></span> 
     140                                <span><a href="#" class="tag-size12">sky</a></span> 
     141                                <span><a href="#" class="tag-size08">spring</a></span> 
     142                                <span><a href="#" class="tag-size02">sun</a></span> 
     143                                <span><a href="#" class="tag-size11">sunset</a></span> 
     144                                <span><a href="#" class="tag-size02">sydney</a></span> 
     145                                <span><a href="#" class="tag-size08">thailand</a></span> 
     146                                <span><a href="#" class="tag-size10">tokyo</a></span>zs 
     147                                <span><a href="#" class="tag-size05">trees</a></span> 
     148                                <span><a href="#" class="tag-size17">trip</a></span> 
     149                                <span><a href="#" class="tag-size08">uk</a></span> 
     150                                <span><a href="#" class="tag-size03">urban</a></span> 
     151                                <span><a href="#" class="tag-size13">usa</a></span> 
     152                                <span><a href="#" class="tag-size19">vacation</a></span> 
     153                                <span><a href="#" class="tag-size07">vancouver</a></span> 
     154                                <span><a href="#" class="tag-size13">water</a></span> 
     155                                <span><a href="#" class="tag-size22">wedding</a></span> 
     156                                <span><a href="#" class="tag-size07">white</a></span> 
     157                                <span><a href="#" class="tag-size10">winter</a></span> 
     158                                <span><a href="#" class="tag-size02">york</a></span> 
     159                                <span><a href="#" class="tag-size07">zoo</a></span>  
     160        </div> 
     161</div><!--end more tags--> 
     162</div><!--end content-left--> 
    71163 
    72164                         
    …… 
    74166<div id="content-right"> 
    75167 
    76 <div id="absolute_positioned_element"><img class="centre-video" src="dummy01.jpg"/></div> 
    77  <script type="text/javascript" language="javascript" charset="utf-8"> 
    78 // <![CDATA[ 
    79   new Draggable('absolute_positioned_element',{ghosting: true}); 
    80   new Draggable('absolute_positioned_element2',{ghosting: true, revert:true}); 
    81 // ]]> 
    82 </script> 
    83  
    84  
    85 <div id="menu-video"> 
    86 <ul> 
    87 <li><p class="arrows-up">&nbsp;<a href="#" onclick="new Effect.SlideUp('storybox',{duration:1.5}); return false;"></a></p> 
    88 <p class="arrows-down">&nbsp;<a href="#" onclick="new Effect.SlideDown('storybox',{duration:1.5}); return false;"></a><span class="menu-title">story</span></p> 
    89 </li> 
    90  
    91 <li><p class="arrows-up">&nbsp;<a href="#" onclick="new Effect.SlideUp('comment',{duration:1.5}); return false;"></a></p> 
    92 <p class="arrows-down">&nbsp;<a href="#" onclick="new Effect.SlideDown('comment',{duration:1.5}); return false;"></a><span class="menu-title">comment</span></p> 
    93 </li> 
    94  
    95 <li><p class="arrows-up">&nbsp;<a href="#" onclick="new Effect.SlideUp('transcription',{duration:1.5}); return false;"></a></p> 
    96 <p class="arrows-down">&nbsp;<a href="#" onclick="new Effect.SlideDown('transcription',{duration:1.5}); return false;"></a><span class="menu-title">transcription</span></p> 
    97 </li> 
     168<div id="monitor-big"> 
     169<p class="centre-video"><img src="material/dummyVideo.gif"/></p> 
     170<p class="centre-cliplengthBar"><img src="material/picture-cliplength.gif" /></p> 
     171<div class="menu-video"> 
     172<ul> 
     173<li class="back">&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     174<li class="play">&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     175<!--<li class="pause">&nbsp;&nbsp;&nbsp;&nbsp;</li>--><!--this is instead of play--> 
     176<li class="forward">&nbsp;&nbsp;&nbsp;&nbsp;</li> 
     177</ul> 
     178 
     179</div> 
     180 
     181</div><!--end monitor-big--> 
     182 
     183 
     184 
     185<div id="menu-video-content"> 
     186<ul> 
     187<li><a href="#" onclick="new Effect.SlideUp('storybox',{duration:1.5}); return false;"><p class="arrows-up">&nbsp;</p></a> 
     188<a href="#" onclick="new Effect.SlideDown('storybox',{duration:1.5}); return false;"><p class="arrows-down">&nbsp;<span class="menu-title">story</span></p></a></li> 
     189 
     190<li><a href="#" onclick="new Effect.SlideUp('comment',{duration:1.5}); return false;"><p class="arrows-up">&nbsp;</p></a> 
     191<a href="#" onclick="new Effect.SlideDown('comment',{duration:1.5}); return false;"><p class="arrows-down">&nbsp;<span class="menu-title">comment</span></p></a></li> 
     192 
     193<li><a href="#" onclick="new Effect.SlideUp('transcription',{duration:1.5}); return false;"><p class="arrows-up">&nbsp;</p></a> 
     194<a href="#" onclick="new Effect.SlideDown('transcription',{duration:1.5}); return false;"><p class="arrows-down">&nbsp;<span class="menu-title">transcription</span></p></a></li> 
    98195</ul> 
    99196</div><!--end menu-video--> 
    …… 
    117214        <div style="overflow:hidden"> 
    118215                <h3>Comments</h3> 
    119                 <img src="user01.jpg" /> 
     216                <img src="material/user01.jpg" /> 
    120217                <p>stcope says:</p> 
    121218                <p>This video is really great.</p> 
    122219                <p class="comment_posted">posted 4 day ago</p> 
    123220                <br /> 
    124                 <img src="user02.jpg" /> 
     221                <img src="material/user02.jpg" /> 
    125222                <p>Willi says:</p> 
    126223                <p>I realy like this one. It has many differend aspects. check out the end.</p> 
    127224                <p class="comment_posted">posted 10 day ago</p> 
    128225                <br /> 
    129                 <img src="user03.jpg" /> 
     226                <img src="material/user03.jpg" /> 
    130227                <p>rafmat says:</p> 
    131228                <p>Love it!</p> 
    …… 
    134231</div> 
    135232</div><!--end content-right--> 
    136 </div><!--end wrapper--> 
     233</div> 
     234<!--end wrapper--> 
    137235</body> 
    138236</html> 

  • design/trunk/hanami/main.css

    r2385 r2410  
    44body { 
    55        font-family: Geneva, Arial, Helvetica, sans-serif; 
    6         background-image: url(bg_gray04.jpg); 
     6        background-image: url(material/bg_blackwhite.jpg); 
    77        background-repeat:no-repeat; 
    88        background-color: #C4C4C4; 
    9 } 
     9}        
     10 
     11#wrapper { 
     12        margin: 0 auto; 
     13        width: 100%; 
     14        text-align: left; 
     15        position: relative; 
     16        min-height: 100%; /* For Modern Browsers */ 
     17        height: auto !important; /* For Modern Browsers */ 
     18        height: 100%; /* For IE */ 
     19} 
     20h1 { 
     21        font-size: 1.3em; 
     22        margin-bottom: 0.25em; 
     23        } 
     24h2 { 
     25        font-size: 1.2em; 
     26        margin-bottom: 0.25em;  
     27        } 
    1028 
    1129h3 { 
    …… 
    1331        margin-bottom: 0.25em; 
    1432        } 
    15  
    16 #wrapper { 
    17         clear: both;  
    18         width: 100%; 
    19         margin: 0 auto; 
    20 } 
     33.bold { 
     34        font-weight: bold; 
     35        } 
    2136 
    2237#header { 
    …… 
    2439} 
    2540 
    26 #content-left { 
    27         float: left; 
    28         width: 428px; 
    29         height: 400px; 
    30         position: absolute; 
     41#content-left {  
     42        float: left; 
     43        width: 413px; 
     44        height: auto; 
    3145        } 
    3246         
    3347#content-right { 
    3448        float: left; 
    35         width: 50%; 
     49        height: auto; 
     50        width: 45%; 
    3651        padding-top: 1em; 
    37         padding-left: 1.3em; 
    38         margin-left: 430px; 
    39         position: absolute; 
    4052                } 
    4153                 
    4254/*Logo*/ 
    4355 
    44 #logo { 
    45         background-image: url(logo.jpg); 
    46         height: 65px; 
    47         width: 80px; 
    48         margin-left: 20px; 
    49         margin-top: 20px; 
    50         position: absolute; 
    51         opacity:0.6;/*  filter:alpha(opacity:90);*/ 
    52         } 
    53 #wiki-title-story { 
    54         background-image: url(wikiStory.jpg); 
     56#title-cmml { 
     57        background-image: url(material/logo-cmml.jpg); 
     58        background-repeat:no-repeat; 
     59        height: 32px; 
     60        width: 87px; 
     61        margin-left: 315px; 
     62        margin-top: 37px; 
     63        position: absolute;      
     64        } 
     65 
     66#title-wiki-story, #title-wiki-search, #title-wiki-detail { 
     67        background-image: url(material/wikiStory.jpg); 
    5568        background-repeat:no-repeat; 
    5669        height: 125px; 
    5770        width: 300px; 
    58         margin-left: 432px; 
    59         margin-top: 0; 
     71        margin-left: 410px; 
    6072        position: absolute;      
    6173        } 
    62 #wiki-title-search { 
    63         background-image: url(wikiSearch.jpg); 
    64         background-repeat:no-repeat; 
    65         height: 125px; 
    66         width: 300px; 
    67         margin-left: 432px; 
    68         margin-top: 0; 
    69         position: absolute;      
    70         } 
    71          
    72 /*main menu (left)*/ 
    73  
    74 #menu-main ul { 
    75         float:left; 
    76         margin-top: 6em; 
    77         padding-left:2em; 
     74#title-wiki-search { 
     75        background-image: url(material/wikiSearch.jpg); 
     76        } 
     77#title-wiki-detail { 
     78        background-image: url(material/wikiDetail.jpg); 
     79        }        
     80         
     81/*sub-titles*/ 
     82 
     83.sub-title { 
     84        color: #BFBFBF; 
     85        text-transform: lowercase; 
     86        letter-spacing: .2em; 
     87        } 
     88         
     89/*menu main*/ 
     90 
     91/*left*/ 
     92#menu-main-left ul { 
     93        float:left; 
     94        margin-top: 96px; 
     95        padding-left: 1.2em; 
    7896        font-weight: bold; 
    7997        width: 400px; 
    8098        position: absolute;      
    8199        } 
    82 #menu-main li { 
    83         float: left; 
    84         padding-right: 1em; 
     100#menu-main-left li { 
     101        float: left; 
     102        padding-right: .9em; 
    85103        list-style-type: none;   
    86104        } 
    87105         
    88 #menu-main a { 
     106#menu-main-left a { 
    89107        font-size: 0.65em; 
    90108        color: #FFFFFF; 
    91109        text-decoration: none;           
    92110        } 
    93 #menu-main a:hover { 
     111#menu-main-left a:hover { 
    94112        text-decoration: underline;              
    95113        } 
    96          
    97 /* menu story (right)*/ 
    98  
    99 #menu-story ul { 
    100         float: left; 
    101         margin-top: 6em; 
    102         margin-left: 430px; 
     114 
     115/*right*/ 
     116#menu-main-right ul { 
     117        float: left; 
     118        margin-top: 96px; 
     119        margin-left: 408px; 
    103120        padding-left: .5em; 
    104121        font-weight: bold; 
    105122        position: absolute;      
    106123        } 
    107 #menu-story li { 
    108         float: left; 
    109         padding-right: 1em; 
     124#menu-main-right li { 
     125        float: left; 
     126        padding-right: .9em; 
    110127        list-style-type: none;   
    111128        } 
    112129         
    113 #menu-story a { 
     130#menu-main-right a { 
    114131        font-size: 0.65em; 
    115132        color: #000000; 
    116133        text-decoration: none;           
    117134        } 
    118 #menu-story a:hover { 
     135#menu-main-right a:hover { 
    119136        text-decoration: underline;              
    120137        } 
    …… 
    123140 
    124141#searcharea { 
    125         width: 14.5em; 
    126         margin-left: 1.8em; 
    127         margin-top: 2em; 
    128         } 
    129 span.seachtitle{ 
    130         display:block; 
    131         background-image: url(search.gif); 
    132         background-repeat: no-repeat; 
    133 } 
     142        width: auto; 
     143        padding-left: 1.2em; 
     144        margin-bottom: 2em; 
     145        margin-top: 4em; 
     146        } 
    134147 
    135148#searcharea input#button { 
     149        height: auto; 
    136150        background: none; 
    137         color: #FFFFFF; 
     151        color: #999999; 
    138152        border: none; 
    139153        font-weight: bold; 
    …… 
    142156 
    143157#searcharea input#button:hover{ 
    144         color: #999999; 
     158        color: #FFFFFF; 
    145159} 
    146160 
    147161#searcharea input, text { 
    148 /*      margin-bottom: 0;*/ 
    149162        font-size: 0.7em; 
    150163        border: 1px solid #FFFFFF; 
    …… 
    157170 
    158171/*random storys*/ 
     172/*AP: This could change later. It depends on how we put up random storys.*/ 
    159173 
    160174#random-storys { 
    161         margin-top: 3.5em; 
    162         width: 415px; 
    163         height: 90px; 
    164         } 
    165 img.clip01 { 
    166         margin-left: 16em; 
    167         position:absolute; 
    168         z-index: 100; 
    169         } 
    170 img.clip02 { 
    171         width: 20%; 
    172         padding-top: .5em; 
    173         margin-left: 14em; 
    174         position:absolute; 
    175         z-index: 50; 
    176         } 
    177 img.clip03 { 
    178         width: 15%; 
    179         padding-top:1em; 
    180         margin-left: 13em; 
    181         position:absolute; 
    182         z-index: 10; 
    183         } 
     175        padding-top: 2em; 
     176        color: #FFFFFF; 
     177        text-align: center; 
     178        } 
     179 
    184180/*tags*/ 
    185181 
    186 #tag-box { 
    187         font-size: 1em; 
    188         width: 20em; 
    189         margin-left: 1.8em; 
    190         margin-top: 1.5em; 
    191         position: relative; 
    192         z-index: 100; 
    193         color: #FFFFFF; 
    194         } 
    195  
    196 span.tag-title{ 
    197         display:block; 
    198         background-image: url(tags.gif); 
    199         background-repeat: no-repeat; 
    200 } 
     182#recent-tag-box, #more-tags { 
     183        color: #FFFFFF; 
     184        padding-left: 1.2em; 
     185        padding-right: 3em; 
     186        height: auto; 
     187        text-align: justify; 
     188        line-height: 1.35em; 
     189        } 
     190.more-tags-title{ 
     191        color: #CCCCCC; 
     192        font-size: 0.7em; 
     193        margin-left: 1em; 
     194        line-height: 4px; 
     195        vertical-align: text-top; 
     196        letter-spacing: .1em; 
     197} 
     198 
     199#recent-tag-box a, #more-tags a { 
     200        text-decoration: none; 
     201        color: #FFFFFF; 
     202        } 
     203#tag-arrows { 
     204        width: auto; 
     205        margin-left: 1.3em; 
     206        margin-top: .7em; 
     207        }        
     208.tags-arrows-up { 
     209        float: left; 
     210        width: 8px; 
     211        background-image: url(material/arrow_gray_up.gif); 
     212        background-repeat:no-repeat; 
     213        } 
     214.tags-arrows-down { 
     215        margin-left: 10px; 
     216        background-image: url(material/arrow_gray_down.gif); 
     217        background-repeat:no-repeat; 
     218        } 
     219.tags-arrows-up:hover { 
     220        background-image: url(material/arrow_white_up.gif); 
     221        background-repeat:no-repeat; 
     222        } 
     223.tags-arrows-down:hover { 
     224        background-image: url(material/arrow_white_down.gif); 
     225        background-repeat:no-repeat; 
     226        } 
     227.tag-size01 { 
     228        font-size: 70%;          
     229        } 
     230.tag-size02 { 
     231        font-size: 74%;          
     232        } 
     233.tag-size03 { 
     234        font-size: 78%;          
     235        } 
     236.tag-size04 { 
     237        font-size: 82%;          
     238        } 
     239.tag-size05 { 
     240        font-size: 85%;          
     241        } 
     242.tag-size06 { 
     243        font-size: 88%;          
     244        } 
     245.tag-size07 { 
     246        font-size: 90%;          
     247        } 
     248.tag-size08 { 
     249        font-size: 93%;          
     250        } 
     251.tag-size09 { 
     252        font-size: 95%;          
     253        } 
     254.tag-size10 { 
     255        font-size: 98%;          
     256        } 
     257.tag-size11 { 
     258        font-size: 100%;                 
     259        } 
     260.tag-size12 { 
     261        font-size: 103%;                 
     262        } 
     263.tag-size13 { 
     264        font-size: 105%;                 
     265        } 
     266.tag-size14 { 
     267        font-size: 108%;                 
     268        } 
     269.tag-size15 { 
     270        font-size: 110%;                 
     271        } 
     272.tag-size16 { 
     273        font-size: 112%;                 
     274        } 
     275.tag-size17 { 
     276        font-size: 116%;                 
     277        } 
     278.tag-size18 { 
     279        font-size: 119%;                 
     280        } 
     281.tag-size19 { 
     282        font-size: 122%;                 
     283        } 
     284.tag-size20 { 
     285        font-size: 125%;                 
     286        } 
     287.tag-size21 { 
     288        font-size: 128%;                 
     289        } 
     290.tag-size22 { 
     291        font-size: 130%; 
     292        } 
    201293 
    202294/*content right*/ 
    203295         
    204 #absolute_positioned_element { 
    205         background-image: url(monitorframe.gif);         
    206         background-repeat:no-repeat; 
    207         width: 182px; 
    208         height: 141px; 
    209         margin-left:1em; 
    210         } 
    211 .centre-video { 
    212         border: 2px solid #666666; 
    213         margin: 18px 23px; 
    214         } 
    215          
    216 /*menu video (story, comment, transcription)    */ 
    217  
    218 #menu-video  { 
     296#menu-video-content  { 
    219297        margin-top: 0.8em; 
    220         margin-left: 1em; 
     298        margin-left: 2.5em; 
    221299        }        
    222 #menu-video ul  { 
     300#menu-video-content ul  { 
    223301        font-size: 0.7em; 
    224302        padding-left: 10px; 
    225303        float:left; 
    226304        } 
    227 #menu-video li  { 
     305#menu-video-content li  { 
    228306        padding-right: 10px; 
    229307        width: auto; 
    …… 
    231309        list-style-type: none; 
    232310        } 
    233 span.menu-title { 
     311.menu-title { 
    234312        margin-left: 1em; 
    235313        color: #999999; 
    …… 
    237315        vertical-align: text-top; 
    238316        }        
    239 p.arrows-up { 
     317.arrows-up { 
    240318        float: left; 
    241319        width: 8px; 
    242         background-image: url(arrow_black_up.gif); 
    243         background-repeat:no-repeat; 
    244         } 
    245 p.arrows-down { 
     320        background-image: url(material/arrow_black_up.gif); 
     321        background-repeat:no-repeat; 
     322        } 
     323.arrows-down { 
    246324        margin-left: 10px; 
    247         background-image: url(arrow_black_down.gif); 
     325        background-image: url(material/arrow_black_down.gif); 
    248326        background-repeat:no-repeat; 
    249327        } 
    250328.arrows-up:hover { 
    251         background-image: url(arrow_gray_up.gif); 
     329        background-image: url(material/arrow_gray_up.gif); 
    252330        background-repeat:no-repeat; 
    253331        } 
    254332.arrows-down:hover { 
    255         background-image: url(arrow_gray_down.gif); 
    256         background-repeat:no-repeat; 
    257         } 
     333        background-image: url(material/arrow_gray_down.gif); 
     334        background-repeat:no-repeat; 
     335        } 
     336         
    258337/*story, comment, transcription*/        
    259338 
    …… 
    262341        color: #333333; 
    263342        float:left; 
    264         width: 80%; 
    265343        height: auto; 
    266344        margin-top: 0.5em; 
    267         padding-left: 1em; 
     345        padding-left: 4em; 
    268346} 
    269347.comment_posted { 
    …… 
    271349        font-size: 0.75em; 
    272350        } 
     351         
    273352/*search-result*/ 
    274353 
    275 #search-result { 
    276         padding-left: 1em; 
     354#search-result, #detail-result { 
     355        padding-left: 2em; 
    277356        } 
    278357#searchblock{ 
    279358        float: left; 
    280         clear: right; 
    281         width:100%;      
    282         } 
     359        } 
     360#search-result-items, #detail-result-headline { 
     361        font-size: .75em; 
     362        margin-bottom: .8em; 
     363        }        
    283364.monitor-small{ 
    284         background-image: url(monitorframe-small.gif); 
     365        background-image: url(material/monitorframe-small.gif); 
    285366        background-repeat: no-repeat; 
    286         height: 99px; 
    287         width: 128px; 
    288         margin-right: .7em; 
    289         margin-bottom: .5em; 
    290         float:left; 
    291         } 
    292 .video-text-search { 
    293         font-size: .8em; 
    294         width: 70%; 
    295         float:left; 
    296         } 
    297 .headline-video-search-01 a { 
    298         font-size: .8em; 
    299         font-weight: bold; 
    300         text-decoration: underline;      
    301          
     367        height: 135px; 
     368        width: 176px; 
     369        margin-bottom: 2em; 
     370        float:left; 
     371        } 
     372.centre-small-video { 
     373        width: 178px; 
     374        text-align:center; 
     375        padding-top: 9px;        
     376        } 
     377#searchresult-text { 
     378        font-size: .75em; 
     379        margin-left: 184px; 
     380        } 
     381.headline-text-search a { 
     382        font-weight: bold; 
     383        text-decoration: underline;              
    302384        } 
    303385.video-text { 
    304         font-size: .75em; 
    305386        padding-top: .5em; 
    306387        padding-bottom: .5em; 
    307388        } 
    308389.video-info { 
     390        font-size: .6em; 
     391        font-weight: bold; 
     392        padding-top: 7px; 
     393        text-align: center; 
     394        } 
     395 
     396/*detail-page (see searchresult too)*/ 
     397 
     398#metadata-box { 
     399        color: #FFFFFF; 
     400        padding-left: 1.2em; 
     401        padding-right: 3em; 
     402        height: auto; 
     403        line-height: 1.35em; 
     404        } 
     405#metadata-box p{ 
     406        font-size: .8em; 
     407        color: #FFFFFF; 
     408        } 
     409#metadata-box a  { 
     410        text-decoration: underline; 
     411        color: #FFFFFF; 
     412        } 
     413         
     414/*Clips*/ 
     415 
     416#block-clips{ 
     417        float: left; 
     418        margin-left: 40px; 
     419        } 
     420#clips-result { 
    309421        font-size: .75em; 
    310         font-weight: bold; 
    311         } 
    312          
    313          
     422        margin-left: 142px; 
     423        width: 80%; 
     424        } 
     425.tools-main-clip { 
     426        font-size: .7em; 
     427        font-weight: bold; 
     428        padding-top: 5px; 
     429        padding-left: .8em; 
     430        } 
     431.tools { 
     432        font-size: .6em; 
     433        font-weight: bold; 
     434        padding-top: 3px; 
     435        padding-left: 1.5em; 
     436        } 
     437.tools ul, .tools-main-clip ul { 
     438        Float: left; 
     439        margin-top: .5em; 
     440        } 
     441.tools li, .tools-main-clip li{ 
     442        Float: left; 
     443        list-style:none; 
     444        padding-right: 0.5em; 
     445        color: #666666; 
     446        } 
     447.tools li a, .tools-main-clip li a{ 
     448        text-decoration: none; 
     449        color:#000000; 
     450        } 
     451.tools li a:hover, .tools-main-clip li a:hover{ 
     452        color: #999999;  
     453        } 
     454 
     455.monitor-clips{ 
     456        background-image: url(material/monitorframe-clips.gif); 
     457        background-repeat: no-repeat; 
     458        height: 102px; 
     459        width: 134px; 
     460        margin-bottom: 2em; 
     461        float:left; 
     462        } 
     463.centre-clip-video { 
     464        width: 136px; 
     465        text-align:center; 
     466        padding-top: 7px;        
     467        } 
     468 
     469#clips-result a  { 
     470        text-decoration: underline; 
     471        color: #000000; 
     472        } 
     473.title-clips { 
     474        width: 100%; 
     475        height: 56px; 
     476        float:left; 
     477        margin-left:3.5em; 
     478        } 
     479.time { 
     480        margin-bottom: .5em; 
     481        } 
     482 
     483         
     484         

  • design/trunk/hanami/search.html

    r2385 r2410  
    1818 
    1919<div id="header"> 
    20  
    21 <!--<div id="logo">&nbsp;</div>--> 
    22 <div id="wiki-title-search">&nbsp;</div> 
    23  
    24 <div id="menu-main"> 
     20<div id="title-cmml">&nbsp;</div> 
     21<div id="title-wiki-search">&nbsp;</div> 
     22 
     23<div id="menu-main-left"> 
    2524<ul> 
    2625<li><a href="#">home</a></li> 
    …… 
    3534</div><!--end menu-main--> 
    3635 
    37 <div id="menu-story"> 
     36<div id="menu-main-right"> 
    3837<ul> 
    3938<li><a href="#">rights</a></li> 
    …… 
    4847 
    4948<div id="random-storys"> 
    50 <img class="clip01" src="dummy02.gif" /> 
    51 <img class="clip02" src="dummy02.gif" /> 
    52 <img class="clip03" src="dummy02.gif" /></div> 
     49<p>RANDOM STORYS</p> 
     50</div> 
    5351 
    5452<div id="searcharea" > 
    55         <span class="seachtitle">&nbsp;</span> 
     53        <span class="sub-title">search</span> 
    5654                        <form  name="search" action="http://media.annodex.net/cmmlwiki/Special:Search" method="get"> 
    5755                        <input type="hidden" name="fulltext" value="Search"/> 
    …… 
    6159</div><!--end searcharea--> 
    6260 
    63 <div id="tag-box"> 
    64 <span class="tag-title">&nbsp;</span> 
    65 <p>Sed purus id sapien