/* ----------------------------------------------- Hay Festival v1.0 - Portal Stylesheet Author: Finn Beales - hello@madebyfinn.com Version: 02/2011 CONTENTS: 1 Button colours 2 Navigation colour styles 3 Header logo 4 Picture boxes on right hand side of homepage 5 Homepage sales image 6 Standard content page ----------------------------------------------- */ .festival-list ul li { text-transform:uppercase; } .sales-block { background:#fff; width:100%; border-bottom:1px solid #ccc; padding-bottom:15px; margin-bottom:32px; } .sales-block h2 { border:none; font-family: 'TradeGothicNextW02-Ligh 694371'; font-size:24px; text-align:center; margin-bottom:15px; padding-bottom:15px; } .sales-block h2 a { display:inline; } .action-block { text-align:center; overflow:hidden; padding-top:18px; padding-left:72px; } .action { width:260px; text-align:center; float:left; } /*.middle { border-left:1px solid #ccc; border-right:1px solid #ccc; }*/ .action p { text-transform:uppercase; font-size:18px; } .action a { display:block; } .action em {text-transform:lowercase; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:12px; color:#333; } .CMSTextContent h2 { border:none; font-family: 'TradeGothicNextW02-Ligh 694371'; font-size:24px; margin-bottom:15px; } .soldOutLink, #genre-filter-wrapper, #download, #search-keyword-wrapper, #date-filter-wrapper, #genre-grid, .booking-info { display:none; } #prog-audio { margin:10px 0; } /* 0 Temporary Styles */ .greenlight { background:url(images/bg-greenlight.jpg) repeat-x top left; height:208px; margin-top:-28px; margin-bottom:25px; } .greenlight-wrap { width:936px; padding:5px 28px 0 36px; margin:0 auto; } .greenlight-copy { float:left; margin-top:130px; background:url(images/bg-px-50.png) repeat; color:#fff; padding:15px 20px; padding-bottom:17px; width:175px; font:20px 'Trade Gothic Next W02', Arial, Helvetica, sans-serif; } .greenlight-link { background:url(images/bg-px-red.png) repeat; float:left; margin-top:130px; padding:15px 20px 17px 30px; font:20px 'Trade Gothic W02 Bold 2', Arial, Helvetica, sans-serif; color:#FFF; } .greenlight-copy a, .greenlight-link a { color:#fff; } .greenlight-link:hover { background:url(images/bg-px-green.png) repeat; } /* 1 portal buttons (Red) ----------------------------------------------- */ .button, .btn, .AddToCartButton, .back, .checkout, .UpdateCartButton, .ContinueShoppingButton, .ContinueCheckoutButton, .CartDeleteButton, .ContinueShoppingButton, .CheckoutNowButton, .PaymentPageContinueCheckoutButton, .ReviewPageContinueCheckoutButton, .normalButtons, .SelectAddressButton, .EditAddressButton, .AccountPageContinueCheckoutButton, .UpdateAccountButton, CreateAccount, .EditAddressButton, .ProductNavLink, input.btn-login { color: #fff; border: solid 1px #b20000; background: #cc0000; background: -webkit-gradient(linear, left top, left bottom, from(#cc0000), to(#a70000)); background: -moz-linear-gradient(top, #cc0000, #a70000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc0000', endColorstr='#a70000'); } .button:hover, .btn:hover, .AddToCartButton:hover, .back:hover, .checkout:hover, .UpdateCartButton:hover, .ContinueShoppingButton:hover, .ContinueCheckoutButton:hover, .CartDeleteButton:hover, .ContinueShoppingButton:hover, .CheckoutNowButton:hover, .PaymentPageContinueCheckoutButton:hover, .ReviewPageContinueCheckoutButton:hover, .normalButtons:hover, .SelectAddressButton:hover, .EditAddressButton:hover, .AccountPageContinueCheckoutButton:hover, .UpdateAccountButton:hover, CreateAccount:hover, .EditAddressButton:hover, .ProductNavLink:hover, input.btn-login:hover { background: #cc0000; background: -webkit-gradient(linear, left top, left bottom, from(#a70000), to(#940000)); background: -moz-linear-gradient(top, #a70000, #940000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a70000', endColorstr='#940000'); } .button:active, .btn:active, .AddToCartButton:active, .back:active, .checkout:active, .UpdateCartButton:active, .ContinueShoppingButton:active, .ContinueCheckoutButton:active, .CartDeleteButton:active, .ContinueShoppingButton:active, .CheckoutNowButton:active, .PaymentPageContinueCheckoutButton:active, .ReviewPageContinueCheckoutButton:active, .normalButtons:active, .SelectAddressButton:active, .EditAddressButton:active, .AccountPageContinueCheckoutButton:active, .UpdateAccountButton:active, CreateAccount:active, .EditAddressButton:active, .ProductNavLink:active, input.btn-login:active { color: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#940000), to(#b20000)); background: -moz-linear-gradient(top, #940000, #b20000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#940000', endColorstr='#b20000'); } /* 2 Navigation colour styles ----------------------------------------------- */ #nav .active span, #nav a:hover span, #nav li:hover a span, #nav li.hover a span, .add-nav .active a, .add-nav .active span, .add-nav a:hover span, .add-nav li:hover a span, .add-nav li.hover a span { background:url(images/arrow-portal.png) no-repeat; } #nav .active a, #nav a:hover, #nav li:hover a, #nav li.hover a, .add-nav a:hover, .add-nav li:hover a, .add-nav li.hover a { background:#cc0000; } #nav ul { border-bottom:5px solid #cc0000; } #main { border:none; /*font-family: 'TradeGothicLTStdRegular';*/ } .add-nav ul { border-bottom:5px solid #cc0000; } .title,.title-full { border-bottom:5px solid #cc0000; } .sub-nav { margin-bottom:25px; } .sub-nav-holder { padding:13px 0 13px 10px; width:961px; overflow:hidden; } .sub-nav strong { float:left; font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#000; text-transform:uppercase; } /* 3 Logo ----------------------------------------------- */ .header-holder { padding-top:27px; height:78px; } .logo { background:url(images/logo-portal.gif) no-repeat; width: 323px; height: 61px; margin:6px 0 0 3px; } .colour-blocks { padding:13px 0 0; } .data-section { margin:4px 0 0; padding:32px 0 0; background:url(images/bg-data-section.gif) no-repeat; } .data-section strong.nextup a { text-transform:uppercase; font-family: Arial, Helvetica, sans-serif; margin-bottom:3px; color:#fff; text-decoration:none;} .data-section strong.nextup a:hover { color:#ccc; } /* 4 Picture boxes on right hand side of homepage ----------------------------------------------- */ /* Portal Presents block */ div.present-block { margin:0 0 3px; } h1.present { text-transform:uppercase; color:#cc0000; font-size:14px; margin:0; } .article { padding: 0 0 24px; } .article h2 { margin:0 0 2px -3px; color:#000; font:36px/46px 'TradeGothicLTStdBoldNo.2', Arial, Helvetica, sans-serif; border:none; padding:0; } .article h2 a { color:#000; } .article h2 a:hover { text-decoration:none; color:#444; } /* Name of news story */ .container { margin:0 0 16px; } /* Picture boxes on right hand side of homepage */ .text-box a { color:#fff; display:block; background:url(images/bg-text-box-portal.png); width:211px; padding:10px 5px 8px 10px; cursor:pointer; } .text-box a:hover { background:url(images/bg-text-box-portal-hover.png); text-decoration:none; } .box:hover .text-box-holder, .aside .hover .text-box-holder { background:url(images/bg-text-box-portal-hover.png); } #livebar { padding:14px 0 0; } .aside { padding:11px 0 0; } /* 5 Homepage - Around the World - Map and festival list ----------------------------------------------- */ .action { font-size:16px; } div.lists { margin-top:20px; } .around-world { width:100%; background:#fff; overflow:hidden; border-top:1px solid #ccc; padding:30px 0 57px; float:left; position:relative; } .around-world-holder { width:100%; overflow:hidden; } /* Festivals */ .festivals { float:left; width:338px; margin-right:-117px; line-height:22px; } .festivals h2 { margin:0 0 24px; color:#000; font:18px/24px 'TradeGothicLTStdBoldNo.2', Arial, Helvetica, sans-serif; border:none; padding:0; } .festivals strong { text-transform:uppercase; font:12px 'TradeGothicLTStdBoldNo.2', Arial, Helvetica, sans-serif; } /* 2 column list of festivals container */ .festival-lists { width:100%; overflow:hidden; margin:0 0 5px; } /* festival-list */ .festival-list { float:left; width:110px; margin:0; padding:0 10px 0 0; list-style:none; } .festival-list li { font:14px/16px 'TradeGothicLTStdBoldNo.2', Arial, Helvetica, sans-serif; padding:0 0 22px; } .festival-list li a { text-transform:uppercase; } .festival-list li em { display:block; font-style:normal; font-size:10px; clear:left; } /* Map */ .map { width:699px; float:right; padding:20px 11px 0 0; } .map img { display:block; } /* Content underneath Map - Quotes/Awards */ .map-blocks { width:566px; padding:0 0 0 133px; } .map-blocks:after { content:""; display:block; clear:both; } /* Quotes */ .quotes { float:left; width:430px; padding:43px 0 0 10px; position:relative; } .quotes h3 { margin:0 0 4px; color:#000; font:14px/22px 'TradeGothicLTStdBoldNo.2', Arial, Helvetica, sans-serif; } .blockquote-holder { padding:0 0 9px } .quotes q { margin:0; font-size:14px; line-height:16px; color:#333; } .quotes span { font-size:10px; text-transform:uppercase; font-style:normal; font-family: 'TradeGothicLTStdBoldNo.2'; } /* Awards */ .awards-block { margin:0; padding:0; position:relative; float:left; } .queens { clear:left; float:left; margin:30px 10px 0 0; } .queens img { display:block; } .partners { float:left; width:500px; padding:0; } .partners h3 { margin:0 0 7px; font:11px/18px 'TradeGothicLTStdBoldNo.2', Arial, Helvetica, sans-serif; color:#333; text-transform:uppercase; } .partners strong { float:left; } .global { float:left; } .media { float:left; margin-left:20px; } .fellowship { float:left; margin-top:20px; } /*.global strong.logo1 { display:block; text-indent:-9999px; overflow:hidden; background:url(images/bc-logo.gif) no-repeat; width: 102px; height: 35px; } .global strong.logo1 a { display:block; height:100%; } .global strong.logo2 { display:block; text-indent:-9999px; overflow:hidden; background:url(images/amnesty-logo.gif) no-repeat; width: 102px; height: 35px; margin:0 10px 0 3px; } .global strong.logo2 a { display:block; height:100%; } .global strong.logo3 { display:block; text-indent:-9999px; overflow:hidden; background:url(images/oxfam-logo.gif) no-repeat; width: 102px; height: 35px; } .global strong.logo3 a { display:block; height:100%; }*/ .media strong.logo4 { display:block; text-indent:-9999px; overflow:hidden; background:url(images/telegraph-logo.gif) no-repeat; width: 130px; height: 21px; margin-top:8px; } .fellowship strong.logo5 { display:block; text-indent:-9999px; overflow:hidden; background:url(images/sponsors-fellowship.gif) no-repeat; width: 256px; height: 35px; margin-top:5px; } /* 6 Standard content page ----------------------------------------------- */ h2 { border-bottom:5px solid #cc0000; margin:0 0 20px 0; padding:0 0 15px 0; position:relative; } /* 7 Weblingo colour changes ----------------------------------------------- */ #tabnav A.active:link, #tabnav A.active:visited { background-color:#cc0000; color:#fff; } #tabnav A:hover { background-color:#cc0000; color:#fff; } table#calendar_of_events td.session { background-color:#ecfdfe; border-bottom-color:#cc0000; } table#calendar_of_events td.session:hover { background-color:#e2feff; } /* 8 IE Specific styles ----------------------------------------------- */ * html #nav a:hover span, * html #nav li:hover a span, * html #nav li.hover a span, * html .add-nav a:hover span, * html .add-nav li:hover a span, * html .add-nav li.hover a span { background-position:-9999px -9999px; filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/arrow-portal.png', sizingmethod='crop'); } * html .text-box a { background:none; filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/bg-text-box-portal.png', sizingmethod='scale'); } * html .text-box a:hover { background:none; filter: progid:dximagetransform.microsoft.alphaimageloader(src='images/bg-text-box-portal-hover.png', sizingmethod='scale'); } /* 9 Homepage 2012 ----------------------------------------------- */ .head-block { width:350px; } .advert-section { /* background:url(../../css/images/icon-advert-section.gif) 20px 22px no-repeat #121212;*/ float:right; padding:10px 0 10px 0; margin-right:10px; margin-top:15px; } .advert-section b a { color:#fff; line-height:18px; font-size:13px; } .advert-section b a:hover { color:#666; text-decoration:none; } .advert-section span { color:#fff; font-style:normal; font-size:13px; } .column { width:465px; } .article img { /*width:130px;*/ margin:8px 0 10px 10px; border:3px; border:1px solid #666; float:right; -moz-box-shadow: 0 0 1px 1px #888; -webkit-box-shadow: 0 0 1px 1px #888; box-shadow: 0 0 1px 1px #888;} img.wider { width:445px; } .actions { overflow:hidden; margin-top:25px; } .article a.calltoaction { font-size:14px; float:left; } .secondlinks { float:left; margin-left:20px; } .secondarticle { border-bottom:1px solid #ccc; padding-bottom:18px; margin-bottom:24px; } .secondarticle h2 { border-bottom:none; margin:0 0 5px 0; padding:0; position:relative; } .secondarticle h3 { text-transform:uppercase; } .secondarticle img { float:right; width:133px; margin-left:18px; border:1px solid #666; margin-bottom:27px; -moz-box-shadow: 0 0 1px 1px #888; -webkit-box-shadow: 0 0 1px 1px#888; box-shadow: 0 0 1px 1px #888; } .image { float:left; margin:0 14px 0 0; } .thumb-list img { border:1px solid #666; -moz-box-shadow: 0 0 1px 1px #888; -webkit-box-shadow: 0 0 1px 1px#888; box-shadow: 0 0 1px 1px #888; } .thumb-list img a:hover { border:none; } #livebar { padding-top:0 ; } #emailcheck p { padding-top:9px; } #history { float:left; width:211px; padding-left:20px; } #history h3 { font-size:14px; line-height:18px; margin:0 0 7px 0; } #history ul { margin-bottom:18PX; } #history ul li { text-transform:uppercase; margin-bottom:9px; } .sub-nav { background:url(../../css/images/bg-add-nav-home.gif); } .add-nav1 { padding-left:4px; width:120px; padding-top:1px; margin-right:10px; } .add-nav1 li a { color:#fff; font: 12px/16px Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight:normal;} .add-nav1 li a:hover { color:#666; text-decoration:none; } .add-nav1 li.tweet { margin-top:-2px; padding-left:10px; padding-right:5px; float:right; } .add-nav1 li.tweet a { text-indent:-9999px; background:url(../../css/images/icon-twitter.png) top left; width:19px; height:19px; } .add-nav1 li.tweet a:hover { opacity:0.4; filter:alpha(opacity=40); } .add-nav1 li.fb { margin-top:-2px; padding-right:5px; float:right; } .add-nav1 li.fb a { text-indent:-9999px; background:url(../../css/images/icon-facebook.png) top; width:19px; height:19px; } .add-nav1 li.fb a:hover { opacity:0.4; filter:alpha(opacity=40); } ul li.google { margin-top:-2px; padding-right:10px; float:right; } .add-nav1 li.google a { text-indent:-9999px; background:url(../../css/images/icon-googleplus.png) top; width:19px; height:19px; padding:0;border: none; } .add-nav1 li.google a:hover { opacity:0.4; filter:alpha(opacity=40); } .footer-section { background: #000; color:#fff; } .footer-section h3 { font-size:18px; color:#fff; font-weight:normal; margin-bottom:24px; } .footer-section a { color:#fff; } .footer-section a:hover { color:#666; text-decoration:none; } .section-block { width:227px; } .section-block p { font-size:12px; line-height:18px;} .section-block p a { border-bottom:1px dotted #fff; } .section-block p a:hover { border-bottom:none; } .section-holder { background:url(/css/images/footer-bg.gif) 35px 0 no-repeat; padding-left:35px; } #footer { background:#000; color:#fff; } .footer-holder, #footer h4, #footer a, #footer dd a { color:#fff; } #divRss { padding:10px 0 0 0; } .ItemTitle a { font-weight:bold; color:#336699; } .ItemTitle a:hover { color:#666; text-decoration:none; } .ItemDate { margin:5px 0; font-size:12px; color:#666; } .ItemDate p { margin-bottom:10px; } .ItemDate { border-bottom:1px dotted #666; margin-bottom:20px; padding-bottom:20px; } .ItemContent img { display:none; }