/* @override http://localhost:8888/townsend/themes/simple/css/layout.css?m=1428592718 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1493833014 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1493834747 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1493910640 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1493992041 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1493992229 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1493994973 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494084187 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494086672 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494090271 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494254534 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494257274 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494258172 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494259402 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494260642 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494321645 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494322349 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494324901 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494352300 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494353701 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494354714 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494360880 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494363091 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494364043 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494367400 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494368972 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494412583 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494419410 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494516238 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494521499 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494524736 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494587073 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494624910 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494688021 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494764504 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494771282 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1494844365 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496251286 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496266357 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496268353 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496307341 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496308652 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496310922 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496595329 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496599497 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496608441 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496749305 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496757222 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496781955 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496785441 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1496832986 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1497275990 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1497560755 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1497610334 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1497907042 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1497912883 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1497914283 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1497966818 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1497990086 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1497998894 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1498049154 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1498137609 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1498578048 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1498601870 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1498655759 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1498659473 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1498675311 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1498683633 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1498722582 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1498724735 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1498819786 http://localhost:8888/townsend/themes/simple/css/layout.css?m=1529074622 http://www.townsendproductions.org.uk/themes/simple/css/layout.css?* */ /** ---------------------------------------------------------- * * Contains the main layout of the page and the individual styles. * Acts as the main stylesheet for theme. * * Include your notes or table of contents below.... * Include color hex's or values of your grid * * 1. OOCSS GRID * 2. MAIN LAYOUT * 3. HEADER * - Brand * - Search Form * 4. Navigation * - Primary Navigation * - tablet Navigation * - Secondary Navigation * - Secondary Nav 2-5 Levels deep * 5. Mixed * 6. Footer * 7. Page Specific Layout * - Homepage * - Search Results * 8. Device and Responsive Layout * - Breakpoint 960px * - Breakpoint 640px * - Search Form * - Main Content * 9. Print Styles * - Simple Theme custom print styles * * @author Your Name * ------------------------------------------------------- */ /* OOCSS Grid * https://github.com/stubbornella/oocss/wiki/grids */ .line, /* line - Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling. */ .lastUnit { overflow:hidden; *overflow:visible; *zoom:1; padding: 0 10px; } .unit { /* unit - Base class which divides a line into sections (columns). */ float:left; padding: 0 0px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* box-sizing:border-box; creates a box-model where padding and border are NOT added onto the width - they are included in the width, so a 200px wide element with 20px padding will be 200px, NOT 240px wide */ } .footer .unit { padding-bottom: 10px; } .unitRightv { /* Use this class if you want to offset a column eg: |--content(.unit)--|--content(.unit)--|--no-content--|--no-content--|--content(.unitRighttv)--| */ float:right; } /* sizeXofY - Extends unit. Indicates the fractional width of the unit, for example size3of4 would take up three quarters, or 75%, of the horizontal space. The following fractions are supported: 1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5 */ /* It is possible to add more columns if you wish you will just have to add the fractions that are missing eg: .size1of6 {width:16.66666%;} */ .size1of1 { float:none; } .size1of2 { width:50%; } .size1of3 { width:33.33333%; } .size2of3 { width:66.66666%; } .size1of4 { width:25%; } .size3of4 { width:75%; } .size1of5 { width:20%; } .size2of5 { width:40%; } .size3of5 { width:60%; } .size4of5 { width:80%; } .lastUnit { /* lastUnit - Extends unit. Applied to the last child of every line. */ float:none; width:auto; _position:relative; /* Bug fix for IE6 - Internet Explorer 6 and below wouldn't fail on properties that were prefixed with non-alphanumeric characters. meaning that anything prefixed with _ wouldn't be picked up by any other browsers */ _left:-3px; _margin-right:-3px; } /* MAIN LAYOUT */ body { margin: 0; min-width: 240px; -webkit-text-size-adjust: none; overflow: hidden; } .ie7 body, .ie8 body { min-width: 860px; /* media queries are not supported in ie7/8 without a polyfill */ } .main { background: #fff; padding: 20px 0 0; min-height: 300px; } .mobile { display: none; } .FullBleedPage .content{ background: #E00034; /* Old browsers */ background: linear-gradient(90deg, #E00034, #FA198B, #A42CD6); background-size: 200% 200%; -webkit-animation: Gradient 10s ease infinite; -moz-animation: Gradient 10s ease infinite; animation: Gradient 10s ease infinite; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E00034', endColorstr='#A42CD6',GradientType=1 ); padding-top: 4%; padding-bottom: 4%; -moz-transition: 0.7s; /* this transition moves the arrow from left:2px to left:6px */ -webkit-transition: 0.7s; transition: 0.7s; } #cwrap, .FullBleedPage #fbp_titlewrap, .FullBleedPage .content p{ max-width: 1190px; margin-right: auto; margin-left: auto; color: white; margin-bottom: 30px; overflow: auto; } div#cwrapinner { float: left; width: 50%; } div#mailer { float: left; width: 50%; } .HomePage div#mailer { float: left; width: 100%; margin-top: 0px; } .FullBleedPage .inner{ max-width: 5000px; padding: 0; } .inner { max-width: 1190px; margin: 0 auto; padding: 0 100px; } .ie6 .inner { width: 1160px; } .no-sidebar .content-container { float: left; width:100%; /* makes content container full width when there is no sidebar */ } .sidebar { /* this is the sidebar element */ margin-top: 12px; } .no-sidebar .sidebar { display: none; } /* HOME PAGE */ #hometop { overflow: auto; text-align: center; margin-bottom: 15px; } div#tourdates a{ text-decoration: none; border: none; } #tourdates ul li span.t_datetitle { font-weight: bold; text-transform: uppercase; } .HomePage div#clm1 { width: 47%; padding-right: 3%; float: left; clear: left; } .HomePage div#clm2 { width: 47%; padding-right: 3%; float: left;} div#fullcolour { overflow: auto; background: #E00034; /* Old browsers */ background: linear-gradient(90deg, #E00034, #FA198B, #A42CD6); background-size: 200% 200%; -webkit-animation: Gradient 10s ease infinite; -moz-animation: Gradient 10s ease infinite; animation: Gradient 10s ease infinite; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E00034', endColorstr='#A42CD6',GradientType=1 ); //height: 300px; position: absolute; top: 6%; left: 0; right: 0; bottom: 6%; } #socialfeed { width: 40%; //text-align: center; float: left; margin-left: 10%; } .HomePage ul#dates { width: 50%; clear: both; margin-right: auto; margin-left: auto; float: left; } ul#dates { width: 100%; float: left; } div#socialholder { float: left; clear: both; width: 100%; } #currentshowholder { margin-top: 5px; text-align: center; position: relative; overflow: auto; } .lower-content, div#titlewrap, div#c_infowrap { width: 50%; margin-right: auto; margin-left: auto; max-width: 700px; min-width: 300px; overflow: auto; position: relative; z-index: 1; right: 0; left: 0; top: 0; } .lower-content h1{ padding-right: 0px; width: 100%; text-align: center; } .lower-content img { border: 0px; } div#titlewrap { text-align: left; margin-top: 20px; margin-bottom: 35px; } #currentimage img { border: none; float: left; width: 100%; -moz-transition: 0.4s ease; /* this transition moves the arrow from left:2px to left:6px */ -webkit-transition: 0.4s ease; transition: 0.4s ease; } #currentimage a img:hover { opacity: 0.8; } div#currentimage { border: 5px black solid; overflow: auto; background: black; padding: 3px; } /* ABOUT PAGE */ div#abouttopholder { margin-bottom: 50px; position: relative; overflow: auto; } div#abouttopholder.upcoming { width: 100%; margin-top: 60px; padding-top: 20px; position: relative; float: left; clear: both; height: auto; overflow: visible; margin-bottom: 70px; } div#aboutfullcolour{ background: #E00034; /* Old browsers */ background: linear-gradient(90deg, #E00034, #FA198B, #A42CD6); background-size: 200% 200%; -webkit-animation: Gradient 10s ease infinite; -moz-animation: Gradient 10s ease infinite; animation: Gradient 10s ease infinite; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E00034', endColorstr='#A42CD6',GradientType=1 ); position: absolute; top: 20px; left: 0; right: 0; bottom: 20px; } #aboouttopinfowrap { float: left; width: 100%; max-width: 500px; padding-top: 10px; } .ProjectHolderPage .upcoming div#aboutphoto, .HomePage div#aboutphoto { display: inline-block; width: 46%; //margin-right: 4%; z-index: 1; position: absolute; background: black; top: 50%; transform: translateY(-50%); left: 3%; } div#aboutphoto { display: inline-block; width: 46%; //margin-right: 4%; z-index: 1; background: black; position: absolute; top: 50%; transform: translateY(-50%); } .SupportPage div#aboutphoto { display: inline-block; width: 46%; //margin-right: 4%; z-index: 1; background: black; position: relative; top: auto; transform: translateY(0%); } #aboutphoto img { width: 100%; float: left; -moz-transition: 0.2s; /* this transition moves the arrow from left:2px to left:6px */ -webkit-transition: 0.2s; transition: 0.2s; padding: 1%; } #aboutphoto a img:hover { opacity: 0.9; } div#about_infowrap { width: 50%; float: left; color: white; padding: 5% 6% 30px 4%; z-index: 1; position: relative; } .upcoming div#about_infowrap { width: 50%; float: right; color: white; padding: 5% 6% 30px 4%; z-index: 1; position: relative; } #aboouttopinfowrap { color: white; } #about_infowrap2 { display: none; } div#about_c2wrap { margin-bottom: 30px; float: left; width: 50%; padding-right: 4%; } div#about_c3wrap { width: 50%; float: left; background: #E00034; /* Old browsers */ background: linear-gradient(90deg, #E00034, #FA198B, #A42CD6); background-size: 200% 200%; -webkit-animation: Gradient 10s ease infinite; -moz-animation: Gradient 10s ease infinite; animation: Gradient 10s ease infinite; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E00034', endColorstr='#A42CD6',GradientType=1 ); padding: 4%; margin-top: 44px; } div#aboutholder2 { overflow: auto; margin-bottom: 30px; width: 100%; } div#aboutholder3 { overflow: auto; margin-bottom: 50px; border-bottom: 5px solid black; padding-bottom: 0; } div#aboutholder { padding-right: 4%; padding-left: 4%; } div#about_c4wrap { float: left; width: 48%; padding-right: 2%; } div#c5wrap { float: left; width: 48%; padding-left: 2%; padding-top: 37px; margin-bottom: 40px; } span.sub_title { display: block; clear: both; margin-bottom: 3px; } #accordian span.p_about { overflow: hidden; display: none; } #accordian span.p_about .show { display: block; } /* COMPANY PHOTOS */ .profile { float: left; margin-bottom: 14px; } .profile img{ width: 100%; float: left; } #profile1,#profile2 { width: 47%; } .s_img { width: 30%; } #profile1 { margin-right: 5%; } #profile2 { } #profile4,#profile7,#profile10 { margin-left: 4.5%; margin-right: 4.5%; } /* HEADER */ .header { } .header .inner { padding-top: 10px; position: relative; min-height: 72px; padding-right: 40px; padding-left: 40px; max-width: 1280px; } /* SUPPORT PAGE */ .SupportPage div#about_c3wrap { background: white; padding: 0; width: 50%; margin-left: auto; margin-right: auto; overflow: auto; } .SupportPage div#aboutholder2 { border-bottom: 5px solid black; } .SupportPage div#about_c4wrap { width: 100%; padding: 0px; } .SupportPage div#c3wrap { width: 100%; float: left; clear: left; padding: 0 8%; margin-bottom: 50px; } .SupportPage div#c4wrap { width: 46%; padding-right: 4%; float: left; margin-bottom: 15px; } #c4wrap form img { background: none; border: none; } div#photowrap { //clear: both; margin-bottom: 20px; overflow: auto; } .AnnouncementPage #photowrap img { display: inline-block; width: 47%; margin: 1%; box-sizing: border-box; } .SupportPage div#c4wrap.part2{ width: 50%; padding-left: 0; padding-right: 0; float: left; } .SupportPage #about_c4wrap h2 { display: block; float: left; } .SupportPage div#c5wrap { width: 46%; float: left; background: #E00034; /* Old browsers */ background: linear-gradient(90deg, #E00034, #FA198B, #A42CD6); background-size: 200% 200%; -webkit-animation: Gradient 10s ease infinite; -moz-animation: Gradient 10s ease infinite; animation: Gradient 10s ease infinite; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E00034', endColorstr='#A42CD6',GradientType=1 ); padding: 4%; margin-top: 0; margin-right: 4%; color: white !important; height: 100%; } .SupportPage div#about_c5wrap { margin-top: 40px; overflow: auto; } .SupportPage div#photowrap { float: left; width: 50%; } .SupportPage div#photowrap img{ width: 100%; background-color: black; padding: 1%; border-style: none; } .sponsor a, .sponsor a img{ border: none; text-decoration: none; background-image: none; -moz-transition: 0.2s; /* this transition moves the arrow from left:2px to left:6px */ -webkit-transition: 0.2s; transition: 0.2s; } .sponsor a:hover, .sponsor a img:hover{ opacity: 0.8; } img.orientation0,img.orientation1 { float: left; width: 33%; padding: 5% 5% 0; border: 0px; background-image: none; } img.orientation2 { width: 40%; padding-top: 5%; border: 0px; background-image: none; float: left; padding-right: 5%; padding-left: 5%; } /* PROJECTS */ .FeaturedImage { float: left; width: 31%; position: relative; overflow: hidden; margin-bottom: 26px; } #FeaturesHolder img { border: none; float: left; background-color: black; } #FeaturesHolder a { text-decoration: none; } div#FeatureDetails { position: absolute; top: 0; right: 0; left: -100%; background-color: rgba(0,0,0,0.65); opacity: 0; -moz-transition: 0.4s ease; /* this transition moves the arrow from left:2px to left:6px */ -webkit-transition: 0.4s ease; transition: 0.4s ease; bottom: 0; width: 200%; } div#FeatureDetails:hover{ opacity: 1; left: 0px; } #FeatureImage2,#FeatureImage5,#FeatureImage8,#FeatureImage11,#FeatureImage14 { margin-right: 3.5%; margin-left: 3.5%; } div#back { margin-bottom: 20px; } #clm1 { float: left; width: 48%; margin-right: 2%; } div#showimg_holder { float: left; width: 48%; margin-left: 2%; } div#projecttext { text-align: justify; margin-top: 20px; margin-bottom: 20px; } #extrainfo div#projecttext { -webkit-columns: 2; /* Chrome, Safari, Opera */ -moz-columns: 2; /* Firefox */ columns: 2; -webkit-column-gap: 60px; /* Chrome, Safari, Opera */ -moz-column-gap: 60px; /* Firefox */ column-gap: 60px; } #1-project h2 { float: left; display: block; } div#donater { margin-top: 60px; float: left; margin-bottom: 9px; } .view-button a, #donate_button a{ background-color: #A42CD6; color: white; border-radius:0px; -moz-transition: 0.2s; /* this transition moves the arrow from left:2px to left:6px */ -webkit-transition: 0.2s; transition: 0.2s; font-family: fenwick; display: inline-block; padding: 6px 10px 5px; border: black 4px solid; box-shadow: black 4px 4px; margin-right: auto; margin-top: 6px; margin-left: auto; width: auto; margin-bottom: 30px; } .view-button a:hover, #donate_button a:hover{ box-shadow: black 4px 4px; background-color: rgba(164,44,214,0.8); color: white; } /* Brand */ header .brand { width: 20%; display: inline-block; float: left; } header .brand img{ width: 100%; padding: 0; background: #E00034; /* Old browsers */ background: linear-gradient(90deg, #E00034, #FA198B, #A42CD6); background-size: 200% 150%; -webkit-animation: Gradient 2s linear infinite; -moz-animation: Gradient 2s linear infinite; animation: Gradient 2s linear infinite; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E00034', endColorstr='#A42CD6',GradientType=1 ); float: left; } header .brand img:hover{ width: 100%; padding: 0; background: #E00034; /* Old browsers */ background: linear-gradient(90deg, #E00034, #FA198B, #A42CD6); background-size: 200% 150%; -webkit-animation: Gradient 6s linear infinite; -moz-animation: Gradient 6s linear infinite; animation: Gradient 6s linear infinite; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E00034', endColorstr='#A42CD6',GradientType=1 ); float: left; } .brand h1 { margin: 0; padding: 0; font-size: 48px; font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; font-weight: 600; font-stretch: normal; /* default value. No font stretching */ line-height: 1em; } .brand p { color: #888; margin-bottom: 22px; } /* Search form */ .search-bar { position: absolute; right: 13px; top: 12px; } .search-bar .field { margin: 0; padding: 0; } .search-bar form input.text { width: 155px; padding: 5px 34px 5px 15px; color: #888; margin: 0; border: none; -moz-border-radius: 14px; border-radius: 14px; background: #fff; } .search-bar form input.action { /* positions the search button icon over the top of the search input */ font-size: 14px; position: absolute; right: 5px; top: 0; cursor: pointer; border: none; padding: 5px; background: none; font-family: 'WebSymbolsRegular'; color: #848484; border-radius: 0; margin: 0; } .search-bar form input.active, .search-bar form input.action:hover { color: #000; } .search-bar form input:focus, .header textarea:focus { outline: none; /* removes default browser outlining on focus */ } .search-dropdown-icon { display: none; /* hides search-dropdown-icon when site is at full width - media queries set it to display:block when at mobile/tablet width */ } /* NAVIGATION */ /* Primary navigation */ .header .inner .unit { position: relative; /* used to position the main navigation */ } .header .primary ul { position:absolute; bottom: 40px; right:0; /* positions the main navigation */ } .header .primary li{ padding-bottom: 8px; margin: 0 5px; position: relative; white-space: nowrap; float: left; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; transition:all 500ms ease; background: url(../images/border.jpg) no-repeat center -20px; background-size: 90% 5px; } .header .primary li:hover, .header .primary li.section, .header .primary li.current { background: url(../images/border.jpg) no-repeat center 20px; background-size: 90% 5px; } span.divide { display: inline-block; height: 9px; float: left; position: relative; top: 2px; font-size: 12px; } span.divide.last{ display: none; } .header .primary li a { color: black; display: block; padding-top: 6px; padding-bottom: 7px; margin-left: 5px; margin-right: 5px; font: 12px fenwick, Helvetica, Arial, sans-serif; letter-spacing: 0.5px; font-weight: 700; } .header .primary li a:hover, .header .primary li.section a, .header .primary li.current a { color: #A42CD6; } .header .primary li.section a, .header .primary li.current a{ background: url(../images/border.jpg) repeat-x 0 20px; -webkit-transition:all 500ms ease; -moz-transition:all 500ms ease; transition:all 500ms ease; } .header .primary li.section:after, .header .primary li.current:after { content: '}'; /* adds triangle beneath current nav item ('}' is renders as a triangle when WebSymbolsRegular is set as the font) */ display: block; position: absolute; left: 50%; margin-left: -7px; bottom: -7px; font-family: 'WebSymbolsRegular'; font-size: 30px; color: #fff; text-align: center; line-height: 20px; } /* Tablet Navigation */ /* When navigation and logo overlap tablet-nav is initialized */ .tablet-nav .brand p { margin-bottom: 0; } .tablet-nav .header .inner { padding-top: 20px; } .tablet-nav .header .primary ul { float: right; clear: both; position: relative; margin: 0px 0 0 0px; white-space: nowrap; right: auto; /* resets the right property value that is set for the desktop site */ } .tablet-nav .header .primary ul li { white-space: nowrap; } /* Secondary navigation */ .main .secondary h3 { font-size: 20px; color: #AAA; margin: 0 0 8px 0; font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif; font-weight: normal; } .main .secondary { border-bottom: 1px solid #e5e5e5; } .main .secondary ul { padding: 0; margin: 0; } .main .secondary li { border-top: 1px solid #e5e5e5; position: relative; list-style-type: none; margin-bottom: 0; } .main .secondary li .arrow { color: #b80000; padding-right: 5px; display: block; font-size: 15px; line-height: 20px; position: absolute; left: 2px; top: 7px; -moz-transition: 0.2s; /* this transition moves the arrow from left:2px to left:6px */ -webkit-transition: 0.2s; transition: 0.2s; } .main .secondary li a:hover .arrow { left: 6px; /* this sets the final position for the arrow transition */ } .main .secondary li a { /* side nav link styling */ padding: 10px 0; display: block; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: #333; line-height: 17px; border-bottom: none; font-family: 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif; } .main .secondary li .text { padding-left: 28px; display: block; } .main .secondary li.current a.current { color: #b80000; background-color: #EDEDED; } .main .secondary li.section, .main .secondary li.current { background-color: #F3F3F3; } .main .secondary li.section a, .main .secondary li.current a { color: #000; } /* Secondary navigation 2-5 levels deep */ .main .secondary ul ul { display: none; } .secondary ul li.current ul, .secondary ul li.section ul { /* Only show child pages from selected parent */ display: block; } .secondary li.current ul ul { display: none; } .main .secondary ul ul li a { padding-left: 10px; } /* Indent all sidebar navigation levels*/ .main .secondary ul ul li a .arrow { left: 12px; } .main .secondary ul ul li a:hover .arrow { left: 16px; } .main .secondary ul ul ul li a { padding-left: 20px; } .main .secondary ul ul ul li a .arrow { left: 22px; } .main .secondary ul ul ul li a:hover .arrow { left: 26px; } .main .secondary ul ul ul ul li a { padding-left: 30px; } .main .secondary ul ul ul ul li a .arrow { left: 32px; } .main .secondary ul ul ul ul li a:hover .arrow { left: 36px; } .main .secondary ul ul ul ul ul li a { padding-left: 40px; } .main .secondary ul ul ul ul ul li a .arrow { left: 32px; } .main .secondary ul ul ul ul ul li a:hover .arrow { left: 36px; } .main .secondary li a:hover, .main .secondary li.section a:hover, .main .secondary li.current a:hover { color: #b80000; } /* MIXED */ header:after, .main:after, #Root:after, .search-bar:after, header .inner:after, footer:after { /* clearfix */ height: 0; content: "."; display: block; clear: both; visibility: hidden; } .search-bar form input.action, .header .primary li a, .footer a { /* adds color transition when links/inputs on hover */ -moz-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; } /* FOOTER */ .footer { color: white; padding: 16px 0 0; font-size: 11px; line-height: 22px; background: #E00034; /* Old browsers */ background: linear-gradient(90deg, #E00034, #FA198B, #A42CD6); background-size: 200% 200%; -webkit-animation: Gradient 10s ease infinite; -moz-animation: Gradient 10s ease infinite; animation: Gradient 10s ease infinite; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E00034', endColorstr='#A42CD6',GradientType=1 ); //position: fixed; bottom: 0; right: 0; left: 0; margin-top: 20px; } @-webkit-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @-moz-keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes Gradient { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } .footer .inner { position: relative; padding-left: 20px; padding-right: 20px; max-width: 1280px; padding-bottom: 11px; } .footer a { color: white; } a.footertitle { float: left; width: 10em; margin-right: 50px; } .footer a:hover { color: #efefef; } .footer .left { float: left; color: #000; display: block; margin-bottom: 10px; height: 70px; width: 46%; } div#social { height: 50px; text-align: left; padding-top: 10px; margin-right: auto; margin-left: auto; width: 20%; float: left; } .social { display: inline-block; width: 15%; margin-right: 1% !important; margin-left: 1%; padding: 0; max-width: 30px; height: 100%; } .social img{ width: 100%; height: auto; float: left; position: relative; } .social a{ position: relative; top: 10px; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease; } .social a:hover{ position: relative; top: 0px; } .footer .right { float: right; display: block; margin: 10px 0; width: auto; text-align: right; } div.right img { //width: 20; max-width: 250px; float: right; margin-left: 9px; height: 40px; margin-top: 5px; } .footer img.last { margin-left: 0; } .footer span { color: white; padding-top: 0; padding-bottom: 0; } .footercontact { display: block; height: 17px; letter-spacing: 0.5px; } .footercontact.title { letter-spacing: 1px; text-transform: uppercase; font: 13px fenwick; padding-top: 3px; } .footer .primary, .footer .primary ul { display: inline; margin: 0; padding: 0; } .footer .primary li { display: inline; } .ie6 .footer .primary li, .ie7 .footer .primary li { /* this is a bugfix for ie6/7 */ display: inline; zoom: 1; margin-right: 10px; } .footer .primary li:after { /* adds '/' to separate the footer navigation items */ padding: 0 3px 0 5px; content: '/'; color: #999; } .footer .primary li:last-child:after { content: ''; /* makes sure last nav item doesn't have a '/' following it */ } .footer .arrow { padding: 0 8px 0 5px; color: #b80000; font-size: 13px; } .footer .primary .nav-open-button { display: none; /* the footer includes the primary nav include - this makes sure the nav open close button doesn't show up */ } /* PAGE SPECIFIC LAYOUT */ /* Homepage */ /* currently no Hompage specific styles - feel free to add your own */ /* Search Results */ .typography .searchResults h1 { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .searchResults p.searchQuery { margin-bottom: 10px; font-size: 15px; font-weight: bold; } .searchResults ul#SearchResults { padding: 0; border-bottom: 1px solid #e5e5e5; margin:0; } .searchResults ul#SearchResults li { border-top: 1px solid #e5e5e5; padding: 20px 0; list-style-type: none; } .searchResults ul#SearchResults p { margin-bottom: 10px; } .searchResults #PageNumbers a { padding: 0 5px; } .searchResults #PageNumbers .pagination { border-bottom: 1px solid #e5e5e5; padding: 20px 0; display:table; /* displays the pagination as a table so that elements stay inline and the middle column adjusts its size to accomodate and the right arrow stays to the right */ width:100%; } .searchResults #PageNumbers .pagination span{ display:table-cell; /* each element in the pagination div displays as a table cell */ } .searchResults #PageNumbers p { text-align: center; padding:20px 0; } .searchResults #PageNumbers .next, .searchResults #PageNumbers .prev { font-size: 14px; padding: 0 20px; display:table-cell; /* each element in the pagination div displays as a table cell */ vertical-align: middle; border-bottom:0 !important; } .searchResults #PageNumbers .next { margin-left: 15px; } .searchResults #PageNumbers .prev { margin-right: 15px; } /* DEVICE & RESPONSIVE LAYOUT */ .header .nav-open-button { display: none; /* removes the nav toggle button for desktop site */ } #media-query-trigger { /* instead of detecting the width of the window in simple/javascript/script.js it detects the visibility of this element (which is set using media queries) instead to trigger the hiding/showing of nav and search in mobile mode */ display: none; visibility: hidden; } /* BREAKPOINT 1210px */ @media only screen and (max-width: 1210px) { .FullBleedPage .content, div#fbp_titlewrap { padding-right: 40px; padding-left: 40px; } } /* BREAKPOINT 960px */ @media only screen and (max-width: 960px) { .header .primary li a { color: black; display: block; padding-top: 6px; padding-bottom: 7px; margin-left: 5px; margin-right: 5px; font: 11px fenwick, Helvetica, Arial, sans-serif; letter-spacing: 0.5px; } a.footertitle { margin-right: 0; padding-right: 5px; } .footer h6{ margin-bottom: 5px; } .footercontact{ float: left; clear: both; } .footer .left { height: auto; width: 38%; } div#social { height: 50px; text-align: left; padding-top: 10px; margin-right: auto; margin-left: auto; width: 29%; float: left; } /* COMPANY PAGE */ div#about_c2wrap,div#about_c4wrap{ margin-bottom: 30px; float: none; width: 100%; padding-right: 0%; clear: both; margin-left: auto; margin-right: auto; overflow: auto; } div#about_c3wrap,div#c5wrap { margin-bottom: 30px; float: none; width: 92%; padding-right: 0%; clear: both; margin-left: auto; margin-right: auto; padding: 4%; } .SupportPage div#c5wrap { width: 100%; float: left; background: #E00034; /* Old browsers */ background: linear-gradient(90deg, #E00034, #FA198B, #A42CD6); background-size: 200% 200%; -webkit-animation: Gradient 10s ease infinite; -moz-animation: Gradient 10s ease infinite; animation: Gradient 10s ease infinite; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E00034', endColorstr='#A42CD6',GradientType=1 ); padding: 4%; margin-top: 0; margin-right: auto; color: white !important; margin-left: auto; } .content img { max-width: 100%; height: auto; } .header .primary ul { margin-left: 0px; -webkit-padding-start: 0px; } .lower-content, div#titlewrap, div#c_infowrap { width: 92%; max-width: 700px; } .lower-content { margin-top: 40px; } div#tourdates{ width: 100%; padding-right: 0%; clear: both; overflow: auto; margin-bottom: 30px; float: none; } .HomePage ul#dates { width: 100%; clear: both; margin-right: auto; margin-left: auto; float: left; } #socialfeed { width: 90%; padding-right: 0%; float: none; clear: both; margin-left: 0; } /* PROJECTS PAGE */ #about_infowrap h2 { font-size: 16px !important; line-height: 20px; margin-bottom: 0; padding-right: 0; } .inner { padding: 0 20px; } .SupportPage div#photowrap { float: left; width: 100%; } } /* BREAKPOINT 890px */ /* when changing the breakpoint below, change it ito the same value in the script.js file as well */ @media only screen and (max-width: 1100px) { .outer-menu, #media-query-trigger { visibility: visible; } /* Navigation*/ .tablet-nav .header .brand { float: none; display: inline-block; margin-left: 22px; margin-bottom: 0px; } .brand h1 { font-size: 40px; } .brand h1 { padding-right: 100px; /* padding stops .brand text from overlapping the search and nav buttons */ } .tablet-nav .header { padding: 0px; } .tablet-nav .header .inner { padding: 20px 0 0 0; min-height: 0; } .tablet-nav .header .primary .nav-open-button { /* styling and positioning of the nav toggle button */ z-index: 100; width: 20px; height: 20px; position: absolute; right: 20px; top: 35px; display: block; cursor: pointer; font-family: 'WebSymbolsRegular'; font-size: 20px; color: #A42CD6; -moz-transition: 0.7s; /* this transition moves the arrow from left:2px to left:6px */ -webkit-transition: 0.7s; transition: 0.7s; } .tablet-nav .header .primary .nav-open-button:hover { /* styling and positioning of the nav toggle button */ color: #E00034; } .tablet-nav .header .primary ul { z-index: 10; position: relative; display: none; margin: 0; padding: 0; white-space: normal; width: 100%; float: left; top: 0; } .tablet-nav .header .primary ul li { width: 100%; margin: 0; padding: 0; float: none; /* displays list items vertically */ background: none; position: relative; text-shadow: 0 1px #fff; } .tablet-nav .header .primary ul li:after { /* creates the arrow for the primary nav links */ content: '\003e'; display: block; position: absolute; right: 20px; top: 0px; font-family: 'WebSymbolsRegular'; font-size: 14px; color: #999; text-align: center; vertical-align: middle; line-height: 38px; } .tablet-nav .header .primary ul li a, .tablet-nav .header .primary ul li.current a, .tablet-nav .header .primary ul li.section a { /* styling the top level nav links */ padding: 10px 0 10px 22px; font-weight: bold; border-bottom: 1px solid #bbb; color: #434343; background: #e7e7e7; } .tablet-nav .header .primary ul li.current a, .tablet-nav .header .primary ul li.section a { background: #CCCCCC; /* makes background on current top level page slightly darker */ } .tablet-nav .header .primary ul li a:hover { color: inherit; } .tablet-nav .header .primary li.section:after, .tablet-nav .header .primary li.current:after { display: none; /* hides the link arrow on current top level page */ } .tablet-nav .tablet-nav .header nav.primary ul li { padding: 0; } } /* BREAKPOINT 680px */ /* when changing the breakpoint below, change it ito the same value in the script.js file as well */ @media only screen and (max-width: 680px) { body { max-width: 680px; } /* Brand */ header .brand { width: 30%; display: inline-block; float: left; } div.right img { margin-left: 9px; display: inline-block; float: none; } .footer img.first { margin-left: 0; } .footer img.last { margin-left: 5px; } div.right { padding-top: 6px; } .mobile{ display: block; } div#fbp_titlewrap { padding-right: 0px; padding-left: 20px; } .HomePage div#clm1 { width: 100%; padding-right: 0%; float: left; } #con-wrap { width: 100%; } #blog-top-images { float: none; width: 100%; } div#fullcolour { overflow: auto; background: #E00034; /* Old browsers */ background: linear-gradient(90deg, #E00034, #FA198B, #A42CD6); background-size: 200% 200%; -webkit-animation: Gradient 10s ease infinite; -moz-animation: Gradient 10s ease infinite; animation: Gradient 10s ease infinite; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E00034', endColorstr='#A42CD6',GradientType=1 ); //height: 300px; position: absolute; top: 6%; left: 0; right: 0; } div#aboutfullcolour{ background: #E00034; /* Old browsers */ background: linear-gradient(90deg, #E00034, #FA198B, #A42CD6); background-size: 200% 200%; -webkit-animation: Gradient 10s ease infinite; -moz-animation: Gradient 10s ease infinite; animation: Gradient 10s ease infinite; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E00034', endColorstr='#A42CD6',GradientType=1 ); position: absolute; top: 10px; left: 0; right: 0; bottom: 15px; } #currentshowholder { margin-top: 5px; text-align: center; position: relative; margin-bottom: 5px; overflow: auto; } .FullBleedPage div.inner.typography.line { padding: 0; } .FullBleedPage .content{ padding: 4% 20px; } .SupportPage div#about_c3wrap { width: 90%; margin-top: 10px; } .SupportPage div#c4wrap.part2,.SupportPage div#c4wrap { width: 100%; padding-right: 0%; margin-right: auto; margin-left: auto; clear: both; } .SupportPage div#c3wrap { width: 100%; padding: 0; margin-bottom: 50px; margin-right: auto; margin-left: auto; } div#cwrap { text-align: center; } div#cwrapinner { width: 100%; } div#mailer { float: left; width: 100%; margin-top: 50px; } #mc_embed_signup_scroll div.mc-field-group div.mce_inline_error { font-weight: normal; font-style: normal; margin-top: 6px; text-align: center; width: 100%; padding: 3px; background-color: transparent; margin-bottom: 0; } div#about_infowrap { width: 100%; float: left; color: white; padding: 9% 6% 30px 4%; z-index: 1; position: relative; } .upcoming div#about_infowrap { float: right; position: relative; width: 100%; } .SupportPage div#aboutphoto, div#aboutphoto { display: inline-block; width: 100% !important; z-index: 1; position: relative !important; background: black; left: 0 !important; top: 0% !important; transform: translate(0)!important; } /* PROJECTS */ .FeaturedImage { float: left; width: 48%; position: relative; overflow: hidden; margin-bottom: 26px; } #FeatureImage1,#FeatureImage3,#FeatureImage5,#FeatureImage7,#FeatureImage9 { margin-right: 3.5%; margin-left: 0%; } #FeatureImage2,#FeatureImage6,#FeatureImage8,#FeatureImage11,#FeatureImage14 { margin-left: 0%; margin-right: 0%; } div#FeatureDetails { position: absolute; top: 0; right: 0; left: 0%; background-color: rgba(0,0,0,0.1); opacity: 1; -moz-transition: 0.4s ease; /* this transition moves the arrow from left:2px to left:6px */ -webkit-transition: 0.4s ease; transition: 0.4s ease; bottom: 0; width: 100%; } /* Search Form */ .search-bar { /* adds new styling to mobile search bar */ width: 100%; position: relative; top: 0; right: 0; display: none; /* hides searchbar initially */ padding: 20px 0; margin: 0; background-color: #E7E7E7; } .search-dropdown-icon { /* styling for search toggle button */ display: block; cursor: pointer; width: 20px; height: 20px; position: absolute; right: 60px; top: 34px; font-family: 'WebSymbolsRegular'; font-size: 20px; color: #ededed; text-align: center; line-height: 20px; } .search-bar form { margin: 0; width: 100%; } .search-bar form fieldset { padding: 0 18px; left: 0; right: 0; position: relative; } .search-bar div.field { margin-bottom: 0; } .search-bar form input.text { width: 89%; /* makes search input full width - allowing for space either side */ max-width: 89%; padding: 8px 10% 8px 1%; text-indent: 15px; position: relative; display: block; right: 0; left: 0; border: 1px solid #e5e5e5; background: #fff; font-size: 17px; -moz-border-radius: 20px; /* increase border radius due to increased padding */ border-radius: 20px; } .search-bar form input.action { right: 5%; top: 2px; font-size: 18px; } /* projects page */ #aboouttopinfowrap { display: none; } .SupportPage #aboouttopinfowrap, .AnnouncementPage #aboouttopinfowrap, #about_infowrap2 { display: block; } .ProjectHolderPage .upcoming div#aboutphoto { display: inline-block; width: 100%; z-index: 1; position: relative; top: auto; transform: translateY(0%); left: auto; } div#aboouttopinfowrap_mobile { margin-bottom: 20px; } div#abouttopholder { margin-bottom: 20px; } /* Main Content */ .main { padding: 20px 0 5px; /* decrease padding so that more content can fit on screen */ } .content-container, .sidebar { width: 100%; /* sidenav is now shown above the page content */ margin-bottom: 30px; } .typography h1 { /* decrease size of page heading due to smaller screen */ font-size: 30px; line-height:35px; margin-bottom: 15px; // padding-bottom: 10px; } .typography p { font-size: 14px; line-height: 23px; } p.intro { font-size: 19px; line-height: 27px; } .main .inner { padding: 0 22px; } /* Secondry Nav */ .secondary li a { line-height: 24px; } .secondary li .arrow { line-height: 26px; } /* Footer */ div#social, .footer .left, .footer .right { margin: 0 auto 7px; float: none; width: 80%; clear: both; text-align: center; } a.footertitle, .footercontact{ clear: both; float: none; display: block; margin-right: auto; margin-left: auto; } } /* Print Styles */ /* Based on HTML5 boilerplate print styles */ @media print { * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; } a, a:visited { text-decoration: underline } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; height: auto; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } /* Simple theme custom print styles */ .header, .footer, .nav-open-button, .search-bar, .search-dropdown-icon, { display: none; } } /* BREAKPOINT 414px */ /* when changing the breakpoint below, change it ito the same value in the script.js file as well */ @media only screen and (max-width: 420px) { /* PROJECTS */ .FeaturedImage { float: left; width: 100%; position: relative; overflow: hidden; margin-bottom: 26px; } #FeatureImage1,#FeatureImage3,#FeatureImage5,#FeatureImage7,#FeatureImage9 { margin-right: 0%; margin-left: 0%; } #FeatureImage2,#FeatureImage5,#FeatureImage8,#FeatureImage11,#FeatureImage14 { margin-left: 0%; margin-right: 0%; } }