/* * Upper Street Events 2013 * Main Stylesheet * * @author: Luke Sherrington * */ /* ============================================================= * SIMPLE RESET * ============================================================*/ html, body, div { margin: 0; padding: 0; } body { font-size: 100%; } h1, h2, h3, h4, h5, h6, table, th, td, caption, form, fieldset, legend, img, label, ul, li, p, ol { font-size: 100%; border: 0; margin: 0; padding: 0; } p { margin-bottom: 1em; } a { text-decoration: none; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; vertical-align: top; } input, textarea, select, button { font-family: inherit; font-size: inherit; outline: none; -webkit-border-radius:0px; } textarea { overflow: auto; } /* ============================================================= * LAYOUT * ============================================================*/ body { font-family: "proxima-nova",sans-serif; font-weight:400; line-height: 1.6em; color: #231f20; background: #fff; font-size:0.8em; } .wrapper { width: 960px; margin: 0 auto; } .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } .cf { *zoom:1; } .clear { clear: both; } /* ============================================================= * ELEMENTS * ============================================================*/ img, embed, object { } /* ============================================================= * TYPOGRAPHY * ============================================================*/ a { color: #a4a4a4; } a:hover, a:focus { color: #a4a4a4; text-decoration:underline; } #pagetitle { float:right; margin-top:90px; width:800px; padding-right:10px;} h1 { font-family: "proxima-nova",sans-serif; color: #9f9f9f; font-weight:600; font-size:3em; text-align:right; line-height:1em;} h2 { font-family: "proxima-nova",sans-serif; font-size: 2em; color: #231f20; margin-bottom: 10px; font-weight:600; line-height:1.1em;} h3 { font-family: "proxima-nova",sans-serif; font-size: 1.2em;color: #231f20; margin-bottom: 10px; font-weight:400; } h4 { font-family: "proxima-nova",sans-serif; font-size: 1.2em; color: #231f20; margin-bottom: 15px; font-weight:bold; } /* ============================================================= * SECTION: FLOATER * ============================================================*/ #section-floater-right { position: fixed; top: 210px; right: 0; } /* ============================================================= * SECTION: HEADER * ============================================================*/ #section-header { position: relative; padding-top:40px; } #header { width:150px; float:left; padding-bottom:22px;} #navigation { position: relative; z-index: 99; float:right; width:800px; padding-right:10px; } #navigation .sf-menu { list-style: none; } #navigation .sf-menu > li { float: right; position: relative; margin-left:5px; width:83px; border-top:4px solid #231f20;} #navigation .sf-menu > li:hover { border-top:4px solid #9f9f9f; text-decoration:none;} #navigation .sf-menu > li > a { color: #231f20; font-size: 1.2em; padding:10px 0px; font-weight:600; font-family: "proxima-nova",sans-serif;} #navigation .sf-menu > li:hover > a { color: #231f20; text-decoration:none; } #navigation .sf-menu > li.menu_on > a { color: #231f20; } #navigation .sf-menu > li.menu_on:hover > a { color: #231f20; } #navigation .sf-menu li ul { padding: 0px 0; display: none; width: 160px; top: 26px; font-size:1em; background:#231f20} #navigation .sf-menu li:hover ul { list-style: none; display: block; position: absolute; left: 0; text-decoration:none;} #navigation .sf-menu li ul li { padding: 3px 10px; float: left; clear: left; font-size: 0.9em; letter-spacing:normal; width:140px; } #navigation .sf-menu li ul li a { color: #fff; } #navigation .sf-menu li ul li:hover { color: #fff; background: #9f9f9f; text-decoration:none;} #navigation .sf-menu li ul li a:hover { color: #fff; text-decoration:none;} #navigation .menu_on { } /* ============================================================= * SECTION: MAIN * ============================================================*/ #section-main { padding:0px 0px 100px 0px;} #content ul { margin-left: 14px; list-style-type:square; } /* ============================================================= * SECTION: CONTENT * ============================================================* /* ------------------------------ * Home page content * ------------------------------*/ #lefthome { width:470px; height:470px; background:#231f20; margin-right:10px; float:left; position:relative;} #contenthome { width:480px; float:left; position:relative; min-height:450px;} #contenthome h3 {color:#fff; padding:15px; font-size:1.85em; line-height:1.1em;} #contenthome h2 {color:#fff; text-transform:uppercase; font-size:1em; padding:15px; line-height:1em; font-weight:700; background:#231f20; position:absolute; left:0; top:0; z-index:100;} #contenthome .fullsheet, #contenthome .leftsheet, #contenthome .rightsheet { float:left; width:230px; height:230px; background:#231f20; color:#fff; margin:0 10px 10px 0; position:relative;} #contenthome .plus a { position:absolute; top:205px; right:10px; font-size:24px; font-family:Helvetica, Arial, sans-serif;} #contenthome .plus a:hover { color:#fff; text-decoration:none;} #contenthome .lib_items { padding:30px 15px 15px 15px;} #contenthome .lib_item .col1 { padding-top:8px; color:#9d9d9d; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em;} #contenthome .lib_item .col2 { padding-bottom:8px; border-bottom:1px solid #44443f;} /* ------------------------------ * Sub page content * ------------------------------*/ #content { border-top:4px solid #1d1d1b; padding-top:20px; float:left; width:950px; padding-bottom:20px; font-size:1.2em; line-height:1.4em; min-height:450px;} .fullsheet { width: 950px; margin-bottom: 30px; position:relative; } .leftsheet { width: 470px; float: left; margin-right: 10px; clear: left; margin-bottom: 30px; } .rightsheet { width: 470px; float: left; margin-bottom: 30px;} .fullsheet2 { width: 950px; margin-bottom: 30px; position:relative; } .leftsheet2 { width: 230px; float: left; margin-right: 10px; clear: left; margin-bottom: 30px;} .rightsheet2 { width: 690px; float: left; margin-bottom: 30px; padding-left:20px; } .sheetbody_3 { font-size:1.7em; font-family: "proxima-nova",sans-serif; font-weight:400; line-height:1.2em;} /* ------------------------------ * Event landing page library * ------------------------------*/ #content .lib_items { width:1000px!important;} #content .lib_item li { border:1px solid #b2b2b2; width:228px; margin:0 10px 10px 0; float:left; position:relative; list-style:none; background:url(../g/2015/template/bg_event.png) no-repeat; padding:0; height:228px;} #content .lib_item li img { opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; padding:0;} #content .lib_item li:hover img { z-index: 999; filter: alpha(opacity=10); opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";} /* ------------------------------ * Event Entry page library * ------------------------------*/ .showentry { width:950px; float:left; background:#fff; margin-top:-24px;} .showentry .column1 { width:710px; float:left; padding-right:10px;} .showentry .column1 .row1 { width:710px; float:left; margin-bottom:15px;} .showentry .column1 .row1 img { height:230px; overflow:hidden;} .showentry .column1 .row2 { width:710px; float:left; border-top:4px solid #1d1d1d; padding:20px 0; font-size:1.7em; line-height:1.2em;} .showentry .column2 { width:230px; float:left; padding:0px;} .showentry .column2 .row4 { width:200px; float:left; padding:10px 15px; background-color:#1d1d1d; height:210px; overflow:hidden; color:#fff; margin-bottom:15px; font-size:2em; text-align:right; font-weight:600; line-height:1.1em;} .showentry .column2 .row4 .title_next { text-align:right; color:#9d9d9d; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.5em; font-weight:normal;} .showentry .column2 .row4 a { display:block; clear:both; color:#fff; font-size:0.5em; text-align:center; padding:4px; background:#333;margin-top:5px;} .showentry .column2 .row5 { width:230px; float:left; border-top:4px solid #1d1d1d; padding:7px 0 20px 0;} .showentry .column2 .row5 .title_eventdetails { text-transform:uppercase; font-weight:bold; margin-bottom:20px; font-size:0.9em;} .showentry .column2 .row6 { width:230px; float:left; border-top:4px solid #1d1d1d; padding:7px 0 20px 0;} .showentry .column2 .row6 .title_contactdetails { text-transform:uppercase; font-weight:bold; margin-bottom:20px; font-size:0.9em;} /* ------------------------------ * Press releases * ------------------------------*/ #content .col1 { color:#9d9d9d; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;} #content .col2 h2 { color:#1d1d1b; padding-top:5px; padding-bottom:5px; margin:0; } #content .col2 h2 a { color:#1d1d1b; } #content .col3 { padding-bottom:10px; border-bottom:1px solid #babab9; margin-bottom:10px;} #div_press14235pagenum { background-color:#1d1d1b; padding:10px; color:fff; float:left;} /* ==================================================== * C - LIBRARY: Spotlight Slider * ==================================================*/ /* ------------------------------ * C1 - Normal View * ------------------------------*/ #lefthome h4 {color:#fff; text-transform:uppercase; font-size:1em; padding:15px; line-height:1em; font-weight:700; background:#231f20; position:absolute; left:0; top:0; z-index:100;} #lefthome .panel_1 { width: 470px; position: relative; } #lefthome .panelbody_1 { width: 470px; height: 470px; position: relative; } .camera-slider { width: 470px; height: 470px; display: none; margin: 0; } .camera-wrap a,.camera-wrap img,.camera-wrap ol,.camera-wrap ul,.camera-wrap li,.camera-wrap table,.camera-wrap tbody,.camera-wrap tfoot,.camera-wrap thead,.camera-wrap tr,.camera-wrap th,.camera-wrap td,.camera_thumbs_wrap a,.camera_thumbs_wrap img,.camera_thumbs_wrap ol,.camera_thumbs_wrap ul,.camera_thumbs_wrap li,.camera_thumbs_wrap table,.camera_thumbs_wrap tbody,.camera_thumbs_wrap tfoot,.camera_thumbs_wrap thead,.camera_thumbs_wrap tr,.camera_thumbs_wrap th,.camera_thumbs_wrap td { background:none; border:0; font:inherit; font-size:100%; vertical-align:baseline; list-style:none; margin:0; padding:0 ;} .camera-wrap { display:none; float:left; position:relative; z-index:0; width:100%; margin-bottom:0!important;} .camera-wrap img { max-width:none!important; } .camera-fakehover { height:100%; min-height:60px; position:relative; width:100%; z-index:1; } .cameraCont,.cameraContents { height:100%; width:100%; z-index:1; position:absolute; } .cameraSlide { bottom:0; left:0; position:absolute; right:0; top:0; width:100%; } .cameraContent { bottom:0; display:none; left:0; position:absolute; right:0; top:0; width:100%; } .camera_target { bottom:0; height:100%; left:0; overflow:hidden; position:absolute; right:0; text-align:left; top:0; width:100%; z-index:0 ;} .camera_overlayer { bottom:0; height:100%; left:0; overflow:hidden; position:absolute; right:0; top:0; width:100%; z-index:0 ;} .camera_target_content { bottom:0; left:0; overflow:hidden; position:absolute; right:0; top:0; z-index:2 ;} .camera_target_content .camera_link { background:url(../g/2015/template/blank.gif); display:block; height:100%; text-decoration:none ;} .camera_loader { background:rgba(255,255,255,0.9) url(../g/2015/template/cameraloader.gif) no-repeat center; border:1px solid #fff; -webkit-border-radius:18px; -moz-border-radius:18px; border-radius:18px; height:36px; left:50%; overflow:hidden; position:absolute; top:50%; width:36px; z-index:3; margin:-18px 0 0 -18px ;} .camera_bar { bottom:0; left:0; overflow:hidden; position:absolute; right:0; top:0; z-index:3 ;} .camera_thumbs_wrap.camera_left .camera_bar { height:100%; position:absolute; width: auto; } .camera_thumbs_wrap.camera_right .camera_bar { height:100%; position:absolute; width: auto; } .camera_thumbs_wrap.camera_bottom .camera_bar { height:auto; position:absolute; width:100% ;} .camera_thumbs_wrap.camera_top .camera_bar { height:auto; position:absolute; width:100% ;} .camera_nav_cont { height:65px; overflow:hidden; position:absolute; right:9px; top:15px; width:120px; z-index:4 ;} .camera-title { font-size: 2.5em; font-family: "proxima-nova",sans-serif; font-weight:600; color:#fff; margin-bottom: 10px; line-height:1em;} .camera-slider-1 .camera-title a { color: #fff; } .camera-slider-1 .camera-title a:hover { color: #fff; } .camera-description { color:#9d9d9d; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;} .camera-title h2 { background: none; border-bottom: none; font-size:1.8em; color:#fff; } .camera-caption { bottom: 0px; right: 0px; display:block; position:absolute; width:470px; background: #231f20;} .camera-caption > div { color:#fff; padding:20px ;} .camerarelative { overflow:hidden; position:relative ;} .imgFake { cursor:pointer ;} .camera_prevThumbs { bottom:4px; cursor:pointer; left:0; position:absolute; top:4px; visibility:hidden; width:30px; z-index:10 ;} .camera_prevThumbs div { background:url(../g/2015/template/camera_skins.png) no-repeat -160px 0; display:block; height:40px; margin-top:-20px; position:absolute; top:50%; width:30px ;} .camera_nextThumbs { bottom:4px; cursor:pointer; position:absolute; right:0; top:4px; visibility:hidden; width:30px; z-index:10 ;} .camera_nextThumbs div { background:url(../g/2015/template/camera_skins.png) no-repeat -190px 0 #000; display:block; height:40px; margin-top:-20px; position:absolute; top:50%; width:30px ;} .camera_command_wrap { left:0; position:relative; right:0; z-index:4 ;} .camera-wrap .camera_pag { width:150px; position:absolute; right:50px; top:21px; z-index:100;} .camera-wrap .camera_pag .camera_pag_ul { list-style:none; text-align:right; margin:0; padding:0 ;} .camera-wrap .camera_pag .camera_pag_ul li { text-align:left; cursor:pointer; display:inline-block; height:12px; position:relative; text-indent:-9999px; width:12px; margin:20px 3px ;} .camera-wrap .camera_pag .camera_pag_ul li > span { height:12px; left:4px; overflow:hidden; position:absolute; top:4px; width:12px; background:#414143;} .camera-wrap .camera_pag .camera_pag_ul li:hover > span { background:#e0545f;} .camera-wrap .camera_pag .camera_pag_ul li.cameracurrent > span {background:#e0545f; } .camera_pag_ul li img { display:none; position:absolute; width:100px; height:auto; border:solid 5px #ddd; box-shadow:0 0 5px #231f20 ;} .camera_pag_ul .thumb_arrow { border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid; top:0; left:50%; margin-left:-2px; position:absolute ;} .camera_prev,.camera_next,.camera_commands { cursor:pointer; height:47px; margin-top:-20px; position:absolute; top:50%; width:47px; z-index:2 ;} .camera_prev { left:10px ;} .camera_prev:hover { opacity: 0.8; } .camera_prev > span { background:url(../g/2015/template/icon_left_arrow.png) no-repeat 0 0; display:block; height:47px; width:47px ;} .camera_next { right:10px ;} .camera_next:hover { opacity: 0.8; } .camera_next > span { background:url(../g/2015/template/icon_right_arrow.png) no-repeat 0 0; display:block; height:47px; width:47px ;} .camera_commands { display: none; right:71px ;} .camera_clear { clear:both; display:block; height:1px; position:relative; margin:-1px 0 25px ;} .camera-src,.camera_command_wrap .hideNav,.showIt { display:none ;} .camera_commands_emboss .camera_pag .camera_pag_ul li,.camera_commands_emboss .camera_pag .camera_pag_ul li:hover > span,.camera_commands_emboss .camera_thumbs_cont{ -moz-box-shadow:0 1px 0 rgba(255,255,255,1), inset 0 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow:0 1px 0 rgba(255,255,255,1), inset 0 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 0 rgba(255,255,255,1), inset 0 1px 1px rgba(0,0,0,0.2) ;} /* ============================================================= * SECTION: RIGHT * ============================================================*/ #right { width: 300px; float: right;} #right .panel_1 { margin-bottom: 20px; float: left; width: 285px;} #right .paneltitle_1 h4 { border-top:2px solid white; border-bottom:2px solid white; padding:4px 0; text-align:center; margin-bottom:5px; color:#009ada} #right .panelbody_1 { font-size: 0.875em;} /*PANEL: Opening Times*/ #right .panel_2 { margin-bottom: 20px; float: left; width: 300px;} #right .paneltitle_2 { padding:10px 0 0px 10px; color:#009ada; background:url(../g/2013/template/bg_panel_opening.png) no-repeat top left; height:50px; font-family:"Times New Roman", Times, serif; font-style:italic; font-size:1.8em;} #right .panelbody_2 { font-size: 0.9em; border-left:1px solid #a8dbd0; border-right:1px solid #a8dbd0; border-bottom:1px solid #a8dbd0; background:#e7f5f2; width:298px; color:#009ada;} #right .panelbody_2 a {color:#009ada;} #right .panelbody_2 p { margin:0; padding:0;} #right .panelbody_2 table tr td { border-bottom:1px solid #fff; padding:5px;} #right .panelbody_2 table tr:hover { background:#b9e2d9;} /*PANEL: Sponsor*/ #right .panel_4 { margin-bottom: 20px; float: left; width: 300px;} #right .paneltitle_4 { padding:15px 0 0px 0px; color:#009ada; background:url(../g/2013/template/bg_panel_sponsor_t.png) no-repeat top left; height:37px; font-family:"Times New Roman", Times, serif; font-size:1em; text-align:center;width: 300px;} #right .panelbody_4 { font-size: 0.9em; padding:20px; background:#e7f5f2; width:260px; color:#009ada; background:url(../g/2013/template/bg_panel_sponsor_bg.png) no-repeat bottom left;} /* ============================================================= * SECTION: FOOTER * ============================================================*/ #section-footer { font-size: 0.85em; background:#231f20; padding:10px; } #footer { float: right; } #footer ul { list-style: none; } #footer ul li { float: right; padding:3px;color: #231f20; font-family: "proxima-nova",sans-serif; font-weight:600;} #footer ul li:first-child { margin-left: 0; } #footer ul li:first-child + li + li + li + li { clear: left; } #footer ul li a { color: #ffffff; } #footer ul li a:hover { color: #ffffff; } /* ============================================================= * SECTION: FOOTER * ============================================================*/ #search {width:260px; float:left; padding-left:30px; padding-bottom:5px; padding-top:8px; height:32px; background:url(../g/2013/template/bg_search.png) no-repeat top left; border:none; margin-left:0px; margin-top:5px; color:#CCC;} #inp{float:right;} #inp input {float:right; border:none!important; background:none!important; padding:0px; width:230px; } #inpimg {float:left; margin:0; padding:0; border:none!important; background:none!important; width:20px;} /* PAGINATION -----------------------------------------------------------*/ .libPageNav {font-size: 1.0em; margin: 10px 0px 10px 0px;} .libPageNum {padding: 3px;} a.libPageNum {padding: 3px 6px; background:#fff; color: #1d1d1b; border: solid 1px #1d1d1b;} a.libPageNum:hover {padding: 3px 6px; background:#1d1d1b; border: solid 1px #1d1d1b; color: #fff;} .libPageNumActive {padding: 3px 6px; background:#1d1d1b; color: #fff; border: solid 1px #1d1d1b;}