/*@charset "UTF-8";*/ /* Screen CSS Document for Rownd a Rownd */ /*--------------------------------------------------------- S4/C Style Sheet ----------------------------------------------------------- For page(s): Rownd a Rownd Last modified: 12/08/2008 Modified by: Stephen Wood, Freelance Web Additional notes: If anything is unclear - please ask me! ---------------------------------------------------------*/ /*Valid CSS*/ /*-----general styling & containing divs------*/ *{font-size:100%;} html{margin:0 0 20px 0;padding:0;} body{margin:0;padding:0;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:0.80em;text-align:center;line-height:1.4em;color:#fff;background:#fff;} /*s4c-wrap-bg contains the whole rar site (betwen S4C header & footer)*/ div#s4c-wrap-bg{clear:both;width:100%;margin:0;padding:0;background:url(../../img/bg-grad.jpg) repeat-x top #252991;font-size:100%; font-weight:normal; font-family:Verdana, Arial, Helvetica, sans-serif; color:#ffffff;font-size:1.05em;text-align:center;} /*rarsite is another container (within s4c-wrap-bg) - 758px wide */ div#rarsite{margin:0px auto;background:url(../../img/bg.jpg) no-repeat top left #252991;width:758px;overflow:hidden;text-align:left;} div#rarsite h1, h2, h3, h4, h5{color:#f7f144; font-family:"Courier New", Courier, monospace; font-weight:normal; margin:0; padding:0;} div#rarsite h1 {font-size:2.0em;} div#rarsite h2 {padding:0.3em 0 0.2em 0;font-size:1.8em;} div#rarsite h3, h4, h5 {padding:0.2em 0 0.1em 0; font-size:1.4em;} /*column_1 and column_2 are used for display purposes - to ensure consistency across browsers;within rarsite*/ div#column_1{width:302px;float:left;margin:0;padding:0;} div#column_2{width:448px;float:right;margin:0;padding:0;} /*-----END general styling & containing divs------*/ /*-----within column_1------*/ /*-----branding area------*/ /*branding contains non displayed h1 & p (semantic) and the logo, height 700px it to ensure page is at least 700 px high. It is placed at the top of column_1.*/ div#branding{width:100%; height:700px;} div#branding h1, div#branding p{display:none;} div#branding img{width:100%; height:284px; margin:0; border:0; padding:0;} div#branding a{width:100%; height:284px; margin:0; border:0; padding:0;} /*-----END branding area------*/ /*-----content_sub area------*/ /*content_sub is placed beneath branding, contains either local navigation or bebo links*/ div#content_sub{margin: 0;padding:0;} /*-----bebo links list------*/ /*used on homepages, positioning to ensure acceptable display in all browsers (except IE5.5 - which has modified rules in a different sheet)*/ ul#bebo-links {width:271px;height:364px;margin:0;padding:0;background:url(../../img/bebo.jpg) no-repeat 0 0;position:absolute;top:357px;} ul#bebo-links li {width:100%;margin:0;border:none;padding:0;list-style-type:none;display:block;vertical-align:top;} /*vertical-align is essential to avoid extra space in IE*/ /*specific cases of li - areas for text are not equally spaced on the background image*/ ul#bebo-links li.bebo-barry {height:100px;} ul#bebo-links li.bebo-sara {height:85px;} ul#bebo-links li.bebo-sion {height:84px;} ul#bebo-links li.bebo-ifan {height:95px;} ul#bebo-links li a {height:100%;padding:0px 0px 0px 120px;display:block;vertical-align:top;;color:#222463;text-decoration:none;font-family:"Courier New", Courier, monospace;} /*vertical-align is essential to avoid extra space in IE*/ ul#bebo-links li a:hover {color:#ffffff;} /*spans are used for final formatting, to ensure reasonable display in all bowsers - the distances used on the spans below are to the top of the content_sub div (even though this positioning is 'absolute'); 'width' within these spans is recognised by (and needed by) IE7 only*/ span#bj, span#bg, span#bs, span#bi {position:absolute; font-size:1.2em; width:150px;} span#bj {top:27px;} span#bg {top:112px;} span#bs {top:197px;} span#bi {top:282px;} /*-----END bebo links list------*/ /*-----TWITTER-----*/ /*-----END TWITTER------*/ /*-----local_nav links list------*/ /*used on homepages, positioning to ensure acceptable display in all browsers (except IE5.5 - which has modified rules in a different sheet)*/ ul#local_nav{margin:50px 37px 50px 20px; padding:11px 0 11px 0;float:none;background:url(../../img/panel.gif) top left repeat-y;line-height:1.2em;position:absolute;top:344px;} /*lined up with logo, except in IE 5.5*/ ul#local_nav li{background:url(../../img/panel_loc_off.gif) top left no-repeat;display:block;margin: 0;padding:0; width:245px; height: 30px;vertical-align:top;list-style-type:none;} ul#local_nav li a{margin:0 20px 0 0; padding: 10px 30px 5px 30px; margin: 0; display:block;font-size:1.1em;color:#222255;text-decoration:none;font-family:"Courier New", Courier, monospace;vertical-align:top;} ul#local_nav li a:hover {color:#ffffff;} /*combination of class and id used to 'highlight' the current location, if appropriate*/ div#content_sub.loc_this-week li#this-week, div#content_sub.loc_story-so-far li#story-so-far, div#content_sub.loc_playlist li#playlist, div#content_sub.loc_news li#news, div#content_sub.loc_video-blog li#video-blog, div#content_sub.loc_wallpaper li#papurwal, div#content_sub.loc_downloads li#tonffon, div#content_sub.loc_downloads li#podcasts, div#content_sub.loc_day-in-the-life li#day-in-the-life, div#content_sub.loc_cefn-y-cab li#cefn-y-cab, div#content_sub.loc_cefn-y-cab02 li#cefn-y-cab02 a, div#content_sub.loc_cefn-y-cab03 li#cefn-y-cab03 a, div#content_sub.loc_cefn-y-cab04 li#cefn-y-cab04 a, div#content_sub.loc_cefn-y-cab05 li#cefn-y-cab05 a, div#content_sub.loc_open-day li#open-day a, div#content_sub.loc_gallery li#gallery, div#content_sub.loc_teleri li#teleri, div#content_sub.loc_snec li#snec, div#content_sub.loc_quiz li#quiz {background:url(../../img/panel_loc_on.gif) top left no-repeat;} div#content_sub.loc_this-week li#this-week a, div#content_sub.loc_story-so-far li#story-so-far a, div#content_sub.loc_playlist li#playlist a, div#content_sub.loc_news li#news a, div#content_sub.loc_video-blog li#video-blog a, div#content_sub.loc_wallpaper li#papurwal a, div#content_sub.loc_downloads li#tonffon a, div#content_sub.loc_downloads li#podcasts a, div#content_sub.loc_day-in-the-life li#day-in-the-life a, div#content_sub.loc_cefn-y-cab li#cefn-y-cab a, div#content_sub.loc_cefn-y-cab02 li#cefn-y-cab02 a, div#content_sub.loc_cefn-y-cab03 li#cefn-y-cab03 a, div#content_sub.loc_cefn-y-cab04 li#cefn-y-cab04 a, div#content_sub.loc_cefn-y-cab05 li#cefn-y-cab05 a, div#content_sub.loc_open-day li#open-day a, div#content_sub.loc_gallery li#gallery a, div#content_sub.loc_teleri li#teleri a, div#content_sub.loc_snec li#snec a, div#content_sub.loc_quiz li#quiz a {padding: 10px 30px 5px 40px;} div#content_sub.loc_this-week li#this-week a:hover, div#content_sub.loc_story-so-far li#story-so-far a:hover, div#content_sub.loc_playlist li#playlist a:hover, div#content_sub.loc_news li#news a:hover, div#content_sub.loc_video-blog li#video-blog a:hover, div#content_sub.loc_wallpaper li#papurwal a:hover, div#content_sub.loc_downloads li#tonffon a:hover, div#content_sub.loc_downloads li#podcasts a:hover, div#content_sub.loc_day-in-the-life li#day-in-the-life a:hover, div#content_sub.loc_cefn-y-cab li#cefn-y-cab a:hover, div#content_sub.loc_cefn-y-cab02 li#cefn-y-cab02 a:hover, div#content_sub.loc_cefn-y-cab03 li#cefn-y-cab03 a:hover, div#content_sub.loc_cefn-y-cab04 li#cefn-y-cab04 a:hover, div#content_sub.loc_cefn-y-cab05 li#cefn-y-cab05 a:hover, div#content_sub.loc_open-day li#open-day a:hover, div#content_sub.loc_gallery li#gallery a:hover, div#content_sub.loc_teleri li#teleri a:hover, div#content_sub.loc_snec li#snec a:hover, div#content_sub.loc_quiz li#quiz a:hover, {color:#222255;} /*-----END local_nav links list------*/ /*-----END content_sub area------*/ /*-----END within column_1------*/ /*-----within column_2------*/ /*-----site navigation tabs------*/ /*site navigation - appears on all pages; sizes dictated by available space in column_2, to avoid going onto 2 lines when text is displayed normally*/ div#navigation{width:100%; height:100px;} div#navigation ul {list-style-type: none;margin:0;padding:0;float:right;} div#navigation li {float: left;background:url(../../img/tab-left-off.gif) top left no-repeat;display:block;margin: 0 0 0 2px;padding:0;} div#navigation li a {background:url(../../img/tab-right-off.gif) top right no-repeat;width:.1em;height:43px;display:block;vertical-align:bottom;font-size:.9em;padding: 15px 4px 5px 4px;margin: 0;color:#222255;text-decoration:none;white-space:nowrap;font-weight:normal; } div#navigation > ul a {width:auto;} div#navigation li a:hover {color:#ffffff;} div#navigation li.skip {position:absolute;left:-10000px;} /*combination of class and id used to 'highlight' the current location*/ div#navigation.loc_home li#home, div#navigation.loc_whats-happening li#whats-happening, div#navigation.loc_downloads li#downloads, div#navigation.loc_behind-the-scenes li#behind-the-scenes, div#navigation.loc_games li#games {background:url(../../img/tab-left-on.gif) top left no-repeat;} div#navigation.loc_home li#home a, div#navigation.loc_whats-happening li#whats-happening a, div#navigation.loc_downloads li#downloads a, div#navigation.loc_behind-the-scenes li#behind-the-scenes a, div#navigation.loc_games li#games a {background:url(../../img/tab-right-on.gif) top right no-repeat;color:#ffffff;} /*-----END site navigation tabs------*/ /*-----main content------*/ div#content_main{margin-bottom:20px;width:100%;} div#highlight {background:url(../../img/highlight.gif) top left no-repeat;margin-top:1em;} div#highlight h3 {margin:0;padding:18px 15px 20px 15px;} div#highlight p {margin:0;padding:10px 10px 3px 10px;line-height:1.2em;} div#highlight ul{list-style-type:none;text-decoration: none;} div#highlight-end {margin-bottom:20px;background:url(../../img/highlight-end.gif) top left no-repeat;height:12px;} div#sociallinks {margin-top:20px;} div#sociallinks ul{list-style-type: none; text-decoration: none; margin: 10px 0px 10px 0px;} div#sociallinks li{float: left;text-decoration: none;margin: 0px 3px 10px 3px;} .social {text-decoration: none;color: #252891;border="0";} .headimg {border="0";margin:0;padding:18px 2px 20px 2px;} .clic{text-decoration: none;color:#f7f144;font-weight:normal; margin:0; padding:0;} .download{text-decoration: none;color:#f7f144; font-family:"Courier New", Courier, monospace; font-weight:normal; margin:0; padding:0;} /*-----tablau papur wal-----*/ .papurwal{border-collapse: collapse; width: 445px; margin-left: auto; margin-right: auto;} .papurwal td {padding: 2px;margin-left: auto;margin-right: auto;} /*-----END tablau papur wal-----*/ /*-----END main content------*/ /*-----END within column_2------*/ /*-----END of stylesheet------*/