/* Mohunkys Repsonsive Framework V4.2 RWD Stylesheet */ /* ======================================================== Created by Mohunky on behalf of Reach Community Services - This style sheet should contain everything to make the website work on smaller devices. - Only minor typographic overrides should be in this sheet. - All @media queries should be in this document. - No @font-face rules should be in this document. - All my CSS flows in the following order .classOrID { display:; position/float:; width:; height:; margin:; padding:; border:; background:; text/font styles:; } ======================================================== */ /* ======== COLOURS ===================================== Primary Orange - #f07e4b Off Black - #3c3c3b Grey - #667379 Off White - #f3eeeb -- RINGS -- Inner/Outter - #f7b699 Middle - #f3986f ======================================================== */ /* ==================== EXAMPLES ==================== */ #examples [class*="span"] { min-height:3em; margin-bottom:1em; background-color:#4065AF; overflow:hidden; } #examples [class*="span"] span { display:inline-block; padding:1em 0.5em; color:#ffffff; } /* ==================== LAYOUTS ==================== */ /* Should your content be wrapped in an
? Answer = Can it be a stand alone peice of content, would it make sense if removed from the context of the page as a whole? If yes, then it can be an
if no, a div will do, correctly labeled with a class or ID */ .overflowfix { overflow-x:hidden; } article { position:relative; } section { } div.row { position:relative; z-index:2; } header#mainhdr { position:relative; padding:0em 0em 7em 0em; z-index:5; } header#mainhdr #logo { float:left; margin-top:1em; } footer#mainftr { margin-top:8em; border-top:1px solid #f07e4b; } footer#mainftr .outlinehands { position:absolute; top:-125px; right:0; width:201px; height:125px; background:url('/images/footer-hands.jpg') center bottom no-repeat; } .imgcrop { position:absolute; top:0; width:100%; height:0; padding-top:100%; -webkit-border-radius:50%; border-radius:50%; overflow:hidden; background-position:center; background-size:cover; z-index:3; } .imgcrop img { display:block; } /* -------- HEROSPACE -------- */ #herospace { padding-top:3em; } #herospace .bgrings { top:-420px; right:-765px; width:765px; height:765px; } #herospace .herobubbles { min-height:8em; } #herospace .herobubbles .upperleftimage { position:absolute; width:220px; height:220px; top:0em; right:26.5em; } #herospace .herobubbles .upperrightimage { position:absolute; width:210px; height:210px; top:1.5em; right:10.5em; } #herospace .herobubbles .centerimage { position:absolute; width:252px; height:252px; top:8.5em; right:18em; } #herospace .herobubbles .lowerimage { position:absolute; width:240px; height:240px; top:19.5em; right:11em; } #herospace .herobubbles .lowerrightimage { position:absolute; width:216px; height:216px; top:15em; right:0em; } #herospace .herobubbles .upperrightimage .bgrings { top:0; left:0; width:100%; height:100%; z-index:1; } #herospace .herobubbles .lowerimage .bgrings { top:0; left:0; width:100%; height:100%; z-index:1; -ms-transform:rotate(140deg); -webkit-transform:rotate(140deg); transform:rotate(140deg); } #herospace .approachbubbles { } #herospace .approachbubbles img { position:relative; z-index:3; } #herospace .approachbubbles .heroUpperImage { position:absolute; width:300px; height:300px; top:-0.5em; right:1em; } #herospace .approachbubbles .heroLowerImage { position:absolute; width:220px; height:220px; top:10em; right:14em; } #herospace .approachbubbles .heroUpperImage .bgrings { top:0; left:0; width:100%; height:100%; z-index:1; -ms-transform:rotate(140deg); -webkit-transform:rotate(140deg); transform:rotate(140deg); } /* -------- ACTIVITIES -------- */ #activities { margin-top:12em; padding:0em; } #activities .handsorange { top:-126px; right:0; } #activitiesdetail { margin-top:6em; } #activitiesdetail .row { padding:6em 0em; } #activitiesdetail .handsorange { top:-126px; right:0; } #nextactivity { position:absolute; right:0; width:270px; height:270px; padding:1.5em 0.5em; -webkit-border-radius:50%; border-radius:50%; box-sizing:border-box; text-align:center; } #nextactivity .activity { position:relative; z-index:3; } #nextactivity .bgrings { top:-5%; left:-5%; width:110%; height:110%; } #herospace #nextactivity { right:auto; left:2em; } .activitylist { margin:0; padding:0; list-style:none; overflow:hidden; } .activitylist li { float:left; width:25%; min-height:36px; margin:1em 0em; padding:9px 0px 0px 48px; box-sizing:border-box; background-position:center left; background-repeat:no-repeat; } .activitylist .arts { background-image:url('/images/icons/icon_arts.png'); } .activitylist .computer { background-image:url('/images/icons/icon_computer.png'); } .activitylist .cooking { background-image:url('/images/icons/icon_cooking.png'); } .activitylist .dance { background-image:url('/images/icons/icon_dance.png'); } .activitylist .drum { background-image:url('/images/icons/icon_drum.png'); } .activitylist .enterprise { background-image:url('/images/icons/icon_enterprise.png'); } .activitylist .gardening { background-image:url('/images/icons/icon_gardening.png'); } .activitylist .holidays { background-image:url('/images/icons/icon_holidays.png'); } .activitylist .music { background-image:url('/images/icons/icon_music.png'); } .activitylist .outings { background-image:url('/images/icons/icon_outings.png'); } .activitylist .sports { background-image:url('/images/icons/icon_sports.png'); } .activitylist .swim { background-image:url('/images/icons/icon_swim.png'); } .activitylist .travel { background-image:url('/images/icons/icon_travel.png'); } ul#activitydetail { margin:0; padding:0; list-style:none; font-size:1em; } #activitydetail .activity { position:relative; width:57.187%; min-height:360px; margin-top:5em; padding-left:31.500%; } #activitydetail .activity h3 { margin-bottom:1.5em; padding-top:0.250em; } #activitydetail .activityicon { position:relative; display:inline-block; float:left; width:36px; height:36px; margin:0em 1em 0.5em 0em; padding:0; background-position:center; background-repeat:no-repeat; } #activitydetail .activityimage { position:absolute; top:0; left:0; width:310px; height:310px; } #activitydetail .bgrings { top:-2%; left:-2%; width:104%; height:104%; z-index:1; } /* -------- SCHEDULE TABLE/CALENDAR -------- */ #scheduleScroll { overflow:auto; } #schedule { /*min-width:60em; border-radius:0.5em; background-color:#fff;*/ padding:0 0 0.5em 0.25em; overflow:auto; } #schedule h4 { margin:0.5em 0; text-align:center; font-weight:bold; } #schedule .day { float:left; width:16.6% } #schedule .dailySchedule { position:relative; height:24em; padding-bottom:1px; background:url('/images/schedule_background.png') top left; } #schedule .scheduleItems { display:block; position:relative; height:24em; margin:0 0.5em; padding:0; list-style:none; font-size:1em; color:#fff; } #schedule .scheduleItems li { position:absolute; left:0; box-sizing:border-box; width:100%; padding:0.25em 0.5em; border-radius:0.25em; } #schedule .scheduleItems li p { font-size:0.875em; line-height:1.25em; } /* -------- LOCATION -------- */ #location { padding:3em 0em; } #location .circlemap { position:relative; width:580px; height:580px; margin:-3em 0em -14em 0em; } #location .circlemap .maplink { position:relative; display:block; width:100%; height:100%; -webkit-border-radius:50%; border-radius:50%; overflow:hidden; z-index:3; } #location .circlemap .bgrings { top:-4%; left:-4%; width:108%; height:108%; } #location .upperimage { position:absolute; width:260px; height:260px; top:-12em; left:0; z-index:4; } #location .upperrightimage { position:absolute; width:260px; height:260px; top:-8em; right:-8em; z-index:4; } #location .lowerimage { position:absolute; width:274px; height:274px; bottom:-22em; left:-5em; z-index:4; } /* -------- CONTACT -------- */ #contact { padding:3em 0em 0em 0em; } #contact .bgrings { top:-350px; left:-800px; width:765px; height:765px; } #findcontact { padding:3em 0em; } /* -------- MISSION -------- */ #mission { margin-top:9em; } #mission .row { padding:5em 0em; } #mission .handsorange { top:-126px; right:0; } #mission .bgrings { top:-300px; left:-640px; width:765px; height:765px; } #mission blockquote:before { position:absolute; top:-0.375em; left:-0.500em; content:open-quote; font-size:6em; font-family:'CoreHumanistSans', Helvetica, Arial, sans-serif; font-style:normal; } #mission blockquote { position:relative; margin:0em 0em 0em 1em; font-size:1.250em; font-style:italic; } /* -------- QUALIFICATIONS -------- */ #qualifications { padding:3em 0em; } #qualifications .bgrings { top:-280px; right:-930px; width:1080px; height:1080px; -ms-transform:rotate(220deg); -webkit-transform:rotate(220deg); transform:rotate(220deg); } #qualifications .upperimage { position:absolute; top:-2em; left:50%; width:220px; height:220px; margin-left:0em; } #qualifications .lowerimage { position:absolute; top:7em; left:50%; width:210px; height:210px; margin-left:-6em; z-index:3; } #qualifications .upperimage .bgrings { top:0; left:0; width:100%; height:100%; z-index:1; } /* -------- LEGAL -------- */ #legal { padding:3em 0em; } /* -------- BACKGROUND RINGS -------- */ .bgrings { position:absolute; z-index:1; } .bgrings .outer { position:absolute; top:1%; left:0%; width:99%; height:99%; border:2px solid #f7b699; -webkit-border-radius:50%; border-radius:50%; } .bgrings .middle { position:absolute; top:2%; left:0.5%; width:97%; height:97%; border:2px solid #f3986f; -webkit-border-radius:50%; border-radius:50%; } .bgrings .inner { position:absolute; top:2.5%; left:2%; width:95%; height:95%; border:2px solid #f7b699; -webkit-border-radius:50%; border-radius:50%; } .bgrings.small { position:absolute; z-index:1; } .bgrings.small .outer { position:absolute; top:-6%; left:-4%; width:110%; height:110%; border:2px solid #f7b699; -webkit-border-radius:50%; border-radius:50%; } .bgrings.small .middle { position:absolute; top:-3.5%; left:-2%; width:106%; height:106%; border:2px solid #f3986f; -webkit-border-radius:50%; border-radius:50%; } .bgrings.small .inner { position:absolute; top:-2%; left:-1.5%; width:102%; height:102%; border:2px solid #f7b699; -webkit-border-radius:50%; border-radius:50%; } /* -------- HANDS -------- */ .handsorange { position:absolute; width:202px; height:126px; background:url('/images/hands_orange.png') center no-repeat; } /* -------- CURVED STRAPLINE -------- */ #strapline { position:absolute; left:-200px; width:603px; height:205px; } #strapline .bgrings { top:-410px; left:-5px; width:603px; height:603px; } #strapline span { position:absolute; top:-110px; left:284px; width:20px; padding-top:250px; font-size:1.5em; text-align:center; transform-origin: top center; } #strapline span:nth-child(1) { transform: rotate(19.75deg); } #strapline span:nth-child(2) { transform: rotate(17deg); } #strapline span:nth-child(3) { transform: rotate(14deg); } #strapline span:nth-child(4) { transform: rotate(11deg); } #strapline span:nth-child(5) { transform: rotate(8deg); } #strapline span:nth-child(6) { transform: rotate(5.5deg); } #strapline span:nth-child(7) { transform: rotate(3deg); } #strapline span:nth-child(8) { transform: rotate(0deg); } #strapline span:nth-child(9) { transform: rotate(-3deg); } #strapline span:nth-child(10) { transform: rotate(-6deg); } #strapline span:nth-child(11) { transform: rotate(-9deg); } #strapline span:nth-child(12) { transform: rotate(-12deg); } #strapline span:nth-child(13) { transform: rotate(-15deg); } #strapline span:nth-child(14) { transform: rotate(-18deg); } #strapline span:nth-child(15) { transform: rotate(-21deg); } #strapline span:nth-child(16) { transform: rotate(-24deg); } #strapline span:nth-child(17) { transform: rotate(-26.75deg); } #strapline span:nth-child(18) { transform: rotate(-29deg); } #strapline span:nth-child(19) { transform: rotate(-31.75deg); } #strapline span:nth-child(20) { transform: rotate(-35deg); } #strapline span:nth-child(21) { transform: rotate(-37.5deg); } #strapline span:nth-child(22) { transform: rotate(-39.75deg); } #strapline span:nth-child(23) { transform: rotate(-41.75deg); } #strapline span:nth-child(24) { transform: rotate(-44deg); } #strapline span:nth-child(25) { transform: rotate(-47deg); } /* -------- FOOTER STUFF -------- */ #btntotop { display:block; position:fixed; right:1em; bottom:1em; width:2.25em; height:2.25em; margin:0; padding:0; z-index:100; background:#4065AF url('/images/up.png') center no-repeat; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #btntotop:hover { background-color:#333333; } #btntotop.hidden { opacity:0; } footer#mainftr .madeforall { text-align:right; } .codetop { max-width:608px; height:22px; background:url('/images/code-top.png') no-repeat top center; -webkit-border-top-left-radius:22px; -webkit-border-top-right-radius:22px; -moz-border-radius-topleft:22px; -moz-border-radius-topright:22px; border-top-left-radius:22px; border-top-right-radius:22px; } .codebtm { max-width:608px; height:34px; margin-bottom:1.618em; background:url('/images/code-bottom.png') no-repeat top center; } pre { display:block; max-width:582px; margin:0; padding:1em 1em 0em 1em; font-size:0.8125em; color:#eaeae8; background:#262626; } /* -------- GALLERY -------- */ #gallerylist { margin:0; padding:0; list-style:none; } #gallerylist li { float:left; width:25%; padding:1px; box-sizing:border-box; background-color:green; } #gallerylist img { display:block; } /* -------- BLOG -------- */ #blogintro { } #blogintro .bgrings { top:-140px; right:-730px; width:840px; height:840px; -ms-transform:rotate(140deg); -webkit-transform:rotate(140deg); transform:rotate(140deg); } #bloglist .postthumb { position:relative; width:85%; padding-top:85%; } #bloglist .postthumb .imgcrop { position:absolute; top:0; width:100%; height:0; padding-top:100%; background-position:center; background-size:cover; } #bloglist .postthumb .bgrings { top:0; left:0; width:100%; height:100%; z-index:1; } #bloglist .postdetails { padding-bottom:2em; border-bottom:1px solid #f07e4b; } #bloglist .postdetails h3 { margin-bottom:0; } #blogpost .post { display:inline; float:left; max-width:60%; } #blogpost .postimg { display:inline; position:relative; float:right; width:53%; padding-top:53%; margin:-8em 0em 2em 2em; } #blogpost .postimg .imgcrop { position:absolute; top:0; width:100%; height:0; padding-top:100%; background-position:center; background-size:cover; } #blogpost .postimg .bgrings { top:-3%; left:-3%; width:106%; height:106%; z-index:1; } .sidebarposts { margin:0; padding:0; list-style:none; } .sidebarposts li { padding:1em 0em 0em 0em; border-bottom:1px solid #f3eeeb; } /* ==================== NAVIGATION ===================== */ /* -------- PRIMARY NAV -------- */ #rwd-menu { display:none; } nav#master { position:relative; float:right; padding:4.3125em 0em 0em 0em; z-index:100; } nav#master ul { float:right; margin:0; padding:0; } nav#master li { display:block; position:relative; float:left; } nav#master ul li a { display:block; padding:0em 1em; color:#f07e4b; } nav#master ul li a:hover { outline:none; color:#3c3c3b; text-decoration:none; } /* -------- SUB NAV -------- */ nav.subnav ul { margin:1em 0em 1em 0em; padding:0em; list-style:none; overflow:hidden; } nav.subnav li { float:left; } nav.subnav a { display:inline-block; margin:0.25em 0.450em 0.25em 0em; padding:0.450em 1em 0.3em 1em; background:#4065AF; font-size:0.750em; text-transform:uppercase; color:#eaeae8; } nav.subnav a:hover { color:#eaeae8; background:#333333; text-decoration:none; } /* -------- PAGINATION -------- */ .pagination { margin:0; padding:0; font-size:1em; list-style:none; } .pagination li { float:left; } .pagination .arrow.unavailable { display:none; } .pagination .button { width:38px; padding:0.2777775em 0em 0.2777775em 0em; box-sizing:border-box; text-align:center; } .pagination .button.prev, .pagination .button.next { width:auto; padding:0.2777775em 1em; } .pagination .current .button { color:#ffffff; background:#f07e4b; text-decoration:none; } /* ==================== COOKIE BAR =================== */ #cookie-bar { background:#3c3c3b; height:auto; padding:0.250em 0em; line-height:24px; color:#eeeeee; text-align:center; } #cookie-bar.fixed { position:fixed; top:0; left:0; width:100%; z-index:1000; } #cookie-bar p { margin:0; padding:0; font-size:1em; } #cookie-bar a { color:#ffffff; display:inline-block; margin:0em 0em 0em 1em; padding:0.2777775em 1em; border:2px solid #f07e4b; -webkit-border-radius:20px; border-radius:20px; font-size:1.125em; font-family:'CoreHumanistSans', Helvetica, Arial, sans-serif; color:#f07e4b; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #cookie-bar .cb-enable:hover { color:#ffffff; background:#f07e4b; text-decoration:none; } /* ==================== OVERRIDES ===================== */ .mobile-only { display:none; } .tablet-only { display:none; } /* ======================================================== */ /* ======================================================== */ /* ==================== SMALLER SCREENS =================== */ /* ================= LESS THAN 1200PX WIDE ================ */ /* ======================================================== */ /* ======================================================== */ @media only screen and (max-width: 1200px) { /* ==================== LAYOUTs ==================== */ /* -------- HEROSPACE -------- */ #herospace .herobubbles .upperleftimage { right:17.5em; } #herospace .herobubbles .upperrightimage { right:1.5em; } #herospace .herobubbles .centerimage { right:9em; } #herospace .herobubbles .lowerimage { right:2em; } #herospace .herobubbles .lowerrightimage { display:none; } #herospace .approachbubbles .heroUpperImage { right:-2em; } #herospace .approachbubbles .heroLowerImage { right:11em; } /* -------- ACTIVITIES -------- */ #activitydetail .activityimage { width:260px; height:260px; } /* -------- QUALIFICATIONS -------- */ #qualifications .upperimage { margin-left:-2em; } /* ==================== NAVIGATION ===================== */ /* -------- PRIMARY NAV -------- */ /* -------- SUB NAV -------- */ /* ==================== OVERRIDES ===================== */ } /* ======================================================== */ /* ======================================================== */ /* ==================== TABLET DEVICES ==================== */ /* ================= LESS THAN 1024PX WIDE ================ */ /* ======================================================== */ /* ======================================================== */ @media only screen and (max-width: 1023px) { /* ==================== LAYOUTs ==================== */ /* -------- HEROSPACE -------- */ header#mainhdr { padding-bottom:2em; } #herospace .approachbubbles .heroLowerImage { top:16em; right:5em; } /* -------- CURVED STRAPLINE -------- */ #strapline { display:none; } /* -------- ACTIVITIES -------- */ #activities { margin-top:10em; } .activitylist li { width:50%; } #nextactivity { top:2em; } #activitydetail .activity { padding-left:40.063%; } /* -------- LOCATION -------- */ #location { } #location .circlemap { width:400px; height:400px; } #location .upperimage { width:220px; height:220px; } #location .lowerimage { bottom:-21em; left:-2em; width:200px; height:200px; } /* -------- MISSION -------- */ #mission .bgrings { left:-700px; } /* -------- QUALIFICATIONS -------- */ #qualifications .bgrings { right:-960px; } #qualifications .upperimage { margin-left:-5em; } #qualifications .lowerimage { top:10em; } /* -------- BLOG ------- */ #blogpost .postimg { margin-top:-4em; } /* ==================== NAVIGATION ===================== */ /* -------- PRIMARY NAV -------- */ /* -------- SUB NAV -------- */ /* ==================== OVERRIDES ===================== */ .tablet-hide { display:none; } .tablet-only { display:block; } } /* ======================================================== */ /* ======================================================== */ /* ==================== MOBILE DEVICES ==================== */ /* ================= LESS THAN 777PX WIDE ================= */ /* ======================================================== */ /* ======================================================== */ @media only screen and (max-width: 777px) { /* ==================== LAYOUT ==================== */ footer#mainftr { text-align:center; } footer#mainftr .txtright { text-align:center; } /* -------- HEROSPACE -------- */ #herospace .herobubbles { position:relative; min-height:20em; margin:0 auto; } #herospace .herobubbles .upperleftimage { display:none; } #herospace .herobubbles .upperrightimage { top:-1.5em; right:50%; margin-right:-7.5em; } #herospace .herobubbles .centerimage { top:2em; right:50%; margin-right:2em; } #herospace .herobubbles .lowerimage { display:none; } #herospace .herobubbles .lowerrightimage { display:block; top:8em; right:50%; margin-right:-15em; } #herospace .approachbubbles { position:relative; min-height:20em; margin:0 auto; } #herospace .approachbubbles .heroUpperImage { top:0em; right:50%; margin-right:-12.5em; } #herospace .approachbubbles .heroLowerImage { top:11em; right:50%; } /* -------- ACTIVITIES -------- */ #activities .row { padding:3em 0em 0em 0em; } #activitiesdetail { margin-top:9em; } .activitylist li { margin:0.5em 0em; } #nextactivity { position:relative; top:auto; right:auto; margin:1em auto -2em auto; } #herospace #nextactivity { margin:2em 0em -6em 0em; } #activitydetail .activity { width:100%; padding-left:0em; } #activitydetail .activityimage { display:inline-block; position:relative; float:right; top:0; left:0; margin:0em 0em 2em 2em; } /* -------- LOCATION -------- */ #location { padding:3em 0em 0em 0em; } #location .circlemap { left:50%; width:400px; height:400px; margin-top:1em; margin-bottom:-5em; margin-left:-200px; } #location .upperimage { top:-4em; right:-3em; left:auto; } #location .lowerimage { bottom:0em; left:-5em; } /* -------- CONTACT -------- */ #contact .bgrings { display:none; } /* -------- MISSION -------- */ #mission .bgrings { display:none; } /* -------- QUALIFICATIONS -------- */ #qualifications { padding:3em 0em 0em 0em; } #qualifications .bgrings { right:-1080px; } #qualifications .staffbubbles { min-height:12em; } #qualifications .upperimage { margin-left:-2em; } #qualifications .lowerimage { top:-5em; margin-left:-13em; } /* -------- BLOG -------- */ #blogintro .bgrings { top:-330px; right:-830px; } /* ==================== NAVIGATION ===================== */ /* -------- PRIMARY NAV -------- */ #rwd-menu { display:block; } #rwd-toggle { float:right; margin:3em 0.450em 0.25em 0em; padding:0.2777775em 1em 0.2777775em 1em; border:2px solid #f07e4b; -webkit-border-radius:20px; border-radius:20px; font-size:1.125em; font-family:'CoreHumanistSans', Helvetica, Arial, sans-serif; color:#f07e4b; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #rwd-toggle:hover { cursor:pointer; color:#ffffff; background-color:#f07e4b; text-decoration:none; } #rwd-toggle .menuicon { position:relative; display:inline-block; top:3px; width:24px; height:17px; margin-right:0.250em; } #rwd-toggle .menuicon span { position:absolute; display:block; width:24px; height:3px; -webkit-border-radius:2px; border-radius:2px; background-color:#f07e4b; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #rwd-toggle .menuicon span.top { top:0; left:0; } #rwd-toggle .menuicon span.mid { top:7px; left:0; } #rwd-toggle .menuicon span.btm { top:14px; left:0; } #rwd-toggle:hover .menuicon span { background-color:#ffffff; } #rwd-toggle.rwd-active { color:#ffffff; background-color:#f07e4b; text-decoration:none; } #rwd-toggle.rwd-active .menuicon span { background-color:#ffffff; } nav#master { display:none; } nav#rwd-master { padding:6em 1em 0.375em 1em; } nav#rwd-master ul { display:none; height:auto; clear:both; margin:1em 0em 0em 0em; padding:0; overflow:hidden; list-style:none; } nav#rwd-master li { display:block; position:relative; float:left; width:100%; padding:0.125em 0em; text-align:center; } nav#rwd-master ul li a { display:block; margin:0em 0.450em 0.25em 0em; padding:0.2777775em 1em 0.2777775em 1em; border:2px solid #f07e4b; -webkit-border-radius:20px; border-radius:20px; font-size:1.125em; font-family:'CoreHumanistSans', Helvetica, Arial, sans-serif; color:#f07e4b; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } nav#rwd-master ul li a:hover { color:#ffffff; background:#f07e4b; text-decoration:none; } /* -------- SUB NAV -------- */ /* ==================== OVERRIDES ===================== */ .mobile-hide { display:none; } .mobile-center { text-align:center; } .mobile-only { display:block; } } /* ======================================================== */ /* ======================================================== */ /* ==================== MOBILE DEVICES ==================== */ /* ================= LESS THAN 520PX WIDE ================= */ /* ======================================================== */ /* ======================================================== */ @media only screen and (max-width: 520px) { /* ==================== LAYOUTS ==================== */ #logo img { max-width:120px; } /* -------- HEROSPACE -------- */ #herospace { padding-top:0em; } #herospace .bgrings { display:none; } #herospace #nextactivity { left:50%; margin:2em 0em 0em 0em; margin-left:-135px; } #herospace #nextactivity .bgrings { display:block; } /* -------- ACTIVITIES -------- */ .activitylist { font-size:1em; } .activitylist li { } #activitydetail .activityimage { width:220px; height:220px; } /* -------- LOCATION -------- */ #location .circlemap { left:50%; margin-left:-200px; } #location .upperimage { display:none; } #location .lowerimage { display:none; } #location .upperrightimage { display:none; } /* -------- BLOG -------- */ #blogintro .bgrings { display:none; } /* ==================== NAVIGATION ===================== */ #rwd-toggle { margin-top:2.125em; } } /* ======================================================== */ /* ======================================================== */ /* ==================== MOBILE DEVICES ==================== */ /* ================= LESS THAN 400PX WIDE ================= */ /* ======================================================== */ /* ======================================================== */ @media only screen and (max-width: 400px) { /* ==================== LAYOUTS ==================== */ footer#mainftr { margin-top:10em; } /* -------- ACTIVITIES -------- */ .activitylist { font-size:1.125em; } .activitylist li { width:100%; } #activitydetail .activity { min-height:0; text-align:center; } #activitydetail .activityicon { float:none; margin-right:0; } #activitydetail .activityimage { display:block; float:none; margin:0em auto 2em auto; } /* ==================== NAVIGATION ===================== */ }