/* Copyright (c) 2007, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.4.1 */ html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;} body{text-align:center;}#ft{clear:both;}#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.301em;min-width:750px;}#doc2{width:73.074em;*width:71.313em;}#doc3{margin:auto 10px;width:auto;}#doc4{width:74.923em;*width:73.117em;}.yui-b{position:relative;}.yui-b{_position:static;}#yui-main .yui-b{position:static;}#yui-main{width:100%;}.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}.yui-t1 .yui-b{float:left;width:12.3207em;*width:12.0106em;}.yui-t1 #yui-main .yui-b{margin-left:13.3207em;*margin-left:13.0106em;}.yui-t2 .yui-b{float:left;width:13.8456em;*width:13.512em;}.yui-t2 #yui-main .yui-b{margin-left:14.8456em;*margin-left:14.512em;}.yui-t3 .yui-b{float:left;width:23.0759em;*width:22.52em;}.yui-t3 #yui-main .yui-b{margin-left:24.0759em;*margin-left:23.52em;}.yui-t4 .yui-b{float:right;width:13.8456em;*width:13.512em;}.yui-t4 #yui-main .yui-b{margin-right:14.8456em;*margin-right:14.512em;}.yui-t5 .yui-b{float:right;width:18.4608em;*width:18.016em;}.yui-t5 #yui-main .yui-b{margin-right:19.4608em;*margin-right:19.016em;}.yui-t6 .yui-b{float:right;width:23.0759em;*width:22.52em;}.yui-t6 #yui-main .yui-b{margin-right:24.0759em;*margin-right:23.52em;}.yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}#yui-main .yui-b{float:none;width:auto;}.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gb .yui-u,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{float:left;margin-left:2%;width:32%;}.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u{*margin-left:1.8%;_margin-left:4%;}.yui-g .yui-gb .yui-u{_margin-left:.8%;}.yui-gb .yui-u{float:right;}.yui-gb div.first{margin-left:0;float:left;}.yui-g .yui-gb div.first,.yui-gb .yui-gb div.first{*margin-right:0;*width:32%;_width:31.7%;}.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u{width:32%;_float:right;margin-right:0;_margin-left:0;}.yui-gb .yui-gc div.first{width:66%;*float:left;*margin-left:0;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;}.yui-g .yui-gc div.first,.yui-g .yui-ge div.first,.yui-g div.first,.yui-gc div.first,.yui-gc div.first div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first{float:left;}.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:49%;*width:48.1%;*margin-left:0;}.yui-g .yui-g div.first{*margin:0;}.yui-gb .yui-g div.first{*margin-right:4%;_margin-right:1.3%;}.yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{*width:48.1%;*margin-left:0;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}.yui-g .yui-gc div.first,.yui-gc div.first,.yui-gd .yui-g,.yui-gd .yui-u{width:66%;}.yui-gd div.first,.yui-gb .yui-gd div.first{width:32%;}.yui-g .yui-gd div.first{_width:29.9%;}.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf div.first{width:24%;}.yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u{float:right;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first {float:left;}.yui-ge div.first,.yui-gf .yui-g,.yui-gf .yui-u{width:74.2%;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}#bd:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#bd,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}.yui-gb .yui-u{float:left;} html {background:#121316;} body { background: #fff; font-family: 'Helvetica Neue', Arial, Helvetica, Myriad, sans-serif; text-align:left; } .middle_bit {width: 960px; margin: 0px auto;} #header {position:relative;clear: both;} #primary_bar {background: #fff url(i/primary_bg.png) top center repeat-x; height: 78px;} #primary_bar a {margin-left:10px;} #primary_bar .middle_bit {position:relative;} #header img#logo {position:relative;left:5px;top:5px; float: left;} ul#primary-nav {position:absolute;top: 18px;right:20px;} ul#primary-nav li{display: inline; float: left; font-size: 12px; } ul#primary-nav li.selected{font-weight:bold; } ul#primary-nav li.first{} ul#primary-nav li.last{border-right:0;} ul#primary-nav li.last a {color: #fff; border-right:0; font-weight: bold;} ul#primary-nav li a{color: #ededed; text-decoration: none; padding: 10px 7px;} ul#primary-nav li a:hover{color: #fff; background-color: #0295BC; } #secondary_bar {background-color: #0295BC; border-bottom: 2px solid #676767; height: 25px;} #header h3#boiler-plate {width: 300px; font-family: Georgia, serif; font-style: italic; padding: 5px 0; color: #7CC5D6; float: left;} #appeal {background: #bdebfb url(i/bluebg.jpg) top center no-repeat; height: 140px; border-bottom: 2px solid #333;} #appeal p.tour_text {width: 600px; float: left; font-family: Georgia, serif; font-style: italic; line-height: 1.5em; padding-top: 40px; height: 100px; color: #0C8AA8; background: transparent url(i/tour-appeal-samples.gif) bottom right no-repeat;} #appeal #action-items {float: right; margin-top: 10px;} #action-items li {text-align: right; font-family: Georgia, serif; font-style: italic; font-size: 1.5em; padding-top: 8px; } #action-items li a { color: #fff; text-decoration: none; background-color: #7acae7; padding: 5px 10px 5px 25px;} #action-items li a:hover {background-color: #5ba5c1; } .access-aid {display:none;} #contents {width: 960px; margin: 35px auto; clear: both; font-size: 13px;color:#222222;} #contents #left {width: 680px; float: left; margin-left: 20px; display: inline;} #contents #right {margin-left:740px;} #contents #all_middle {padding:0px 20px;} #contents h1 {font-size:300%;margin-bottom:10px;line-height: 0.9em; letter-spacing: -0.03em; font-weight: lighter;} #contents h1 a {color: #151515; text-decoration: none;} #contents h1 a:hover {color: #151515;} #contents h2 {font-size: 130%; color: #0398CC; font-family: Georgia, serif; font-style: italic; margin-bottom: 1em;} #contents h2 a {color: #77A019; text-decoration:none;} #contents h2 a:hover {color: #3399CC; text-decoration:underline;} #contents h3 {font-size: 110%; color: #77A019; font-weight:bold;padding: 0; margin: 0;padding-top:10px;} #contents h4 {font-size: 110%; font-weight:bold;margin-top:0.5em;margin-bottom:0.5em;} #contents p {line-height: 1.4em;margin-bottom:1em;} #contents p.tagline {color:#0398CC;font-size:140%;} #contents a {color: #3399CC; text-decoration: underline;} #contents a:hover {color: #6F9D1B; text-decoration: none;} #contents blockquote { font-size: 1.2em; font-family: georgia, garamond, constantia, serif; font-style: italic;padding:0px 30px;margin-bottom:1.5em;} #contents blockquote p {margin-bottom:0.5em;} #contents blockquote cite {font-family: Helvetica, 'Helvetica Neue', Myriad, Arial, sans-serif; display:block;text-align:right; font-size: 0.8em; color: #666;} #contents p.attribution {text-align: right; font-family: georgia, garamond, constantia, serif; margin-right: 40px;} #contents strong {font-weight: bold; } #contents em {font-style:italic; } #contents sub {font-size: 0.8em; color: #666;} #contents ul {margin-bottom:1em;} #contents ul {list-style-type:disc;} #contents ul ul {list-style-type:circle;padding-left:20px;} #contents ul ul ul{list-style-type:square;} #contents ol {margin-bottom:1em;} #contents ol {list-style-type:decimal;} #contents ol ol {list-style-type:lower-alpha;} #contents ol ol ol {list-style-type:lower-roman;} #contents li {list-style-type:inherit;list-style-position:inside;} #contents ul ul, div#content ol ol, div#content ul ol, div#content ol ul {margin-bottom:0;} form#submit { padding: 0.5em;} form#submit div { clear: both; padding: 4px; margin: 2px 0px 15px 0px; width: 500px;} form#submit div label, form#submit div span { float: left; display: span; width: 30%; text-align: right; } form#submit div input, form#submit div textarea { float: right; width: 65%; text-align: left; background-color: #e2f1f8;} form#submit div textarea { height: 8em; } form#submit input#mySubmit { float: right; margin: 0 0 0 30%; width: 20%; text-align: center;margin-bottom: 30px; } form#submit div.required input, form#submit div.required textarea {background: #556B80; color: #DE8221; font-weight:bold;} form#submit div.required label, form#submit div.required span {color: #556B80; font-weight:bold;)} fieldset {margin: 0px 0 10px 0; border: 1px solid #cde98d; padding: 10px;} label { font-weight: normal; margin: 0px 5px; c} legend {padding: 5px; color: #77A019; font-weight: bold;} table.comment_fields td {padding:3px;} table.comment_fields th {text-align:right;vertical-align:top;} table.comment_fields th label {font-weight:bold;padding-top:5px;display:block;} /* HOMEPAGE */ body.home #primary_bar {height:54px;} body.home #contents_container {background: url(i/hp_content_bg.png) top left repeat-x; border-top: 2px solid #999;} body.home #contents {margin:0px auto;padding-top:10px;} body.home #contents h3 {font-size:150%;font-weight:normal;} body.home #contents a {color:#77A019;text-decoration:none;} body.home #contents a:hover {text-decoration: underline; } #hp_claim_container {background:url(i/hp_claim_bg.png) top center repeat;} #hp_claim {width:440px;padding:20px;float:left;} #hp_claim h1 {font-size:300%;margin-bottom:10px;line-height: 0.9em;color:#333;padding-top:15px;} #hp_claim p.tagline {color:#0398CC;font-size:140%;padding-bottom:10px;} #hp_claim_container .middle_bit {position:relative;} #hp_slideshow {position:absolute;height:365px;width:400px;top:10px;right:40px;background:url(i/hp_slideshow_bg.gif) top right no-repeat;} #hp_slideshow #hp_slides {position:absolute; top:17px;left:15px;} #hp_slideshow span {position:absolute;bottom:0px;right:0px;color:#666;font-size:110%;} #hp_slideshow a {color:#77A019;text-decoration:none;} #hp_buttons {background:#fff;clear:both;border-top:3px solid #ddd;} #hp_buttons .middle_bit {padding:50px 20px;} #hp_buttons a {margin-left:20px;margin-right:20px;} #hp_feature_box {width:440px;padding:5px 17px;float:left;background:#fff;border:3px solid #bbb;} body.home #hp_feature_box h3, body.home #hp_bwtm h3 {color:#0398CC;font-size:120%;font-weight:bold; } #hp_feature_box .hp_feature {width:200px;float:left;} #hp_feature_box #hp_feature_blog, #hp_feature_box #hp_feature_gallery {margin-right:40px;} #hp_feature_box .hp_feature img {float:left;} #hp_feature_box .hp_feature p {clear:left;} #hp_bwtm {width:200px;float:left;clear:left;padding:0px 17px 17px 17px;margin-top:-3px;background:#fff;border:3px solid #bbb;border-top:0px;} body.home #hp_bwtm h3 {margin-top: 0; padding-top: 0; padding-bottom: 10px; } body.home #hp_bwtm li {padding-bottom: 3px;} #hp_quotables {margin-left:480px;border-bottom:5px solid #ddd;padding:0px 20px 20px 20px;} #hp_quotables h3 {color:#222;} #hp_quotables blockquote {background:url(i/hp_quote_bg.gif) top center no-repeat;padding:0 40px;text-align:right; margin-top: 10px; margin-bottom: 0;} #hp_cost {margin-left:480px;padding:10px 20px;position:relative;} #hp_cost h3 {color:#0398CC;} #hp_cost h3 img {vertical-align:middle;} #hp_cost ul {width:140px;position:absolute;left:20px;top:45px;color:#666;font-size:90%;} #hp_cost p {margin-left:180px;} #hp_blogpulls {width:440px;float:left;border-top:5px solid #ddd;padding:10px 20px;} #hp_blogpulls h3 {color:#666;} #hp_blogpulls p.published_at {color:#bbb;font-family: Georgia, serif;font-style:italic;font-size:90%;} #hp_twitterpulls {width:200px;float:left;border-top:5px solid #ddd;padding:10px 20px;} #hp_twitterpulls h3 {color:#666;} #hp_twitterpulls ul li {list-style: none none;margin:1em 0;padding:0;} /* FEATURES */ #contents .feature_detail { border-bottom: 2px solid #eee; padding: 15px 0px;clear:both;} #contents .feature_detail img.feature_icon {float:left;} #contents .feature_detail .feature_content {margin-left:100px;} #contents .feature_content h2 {color: #3399CC; font-size: 1.4em; display: inline; padding-right:17px;margin-right:10px;} #contents .feature_content p.first_paragraph {display: inline; padding-left: 10px;} #contents .feature_content p.top {display: block;text-align: right; font-style: italic; font-size: 0.9em;margin-bottom:0;} #contents .feature_content p.top a {text-decoration: none;text-transform:lowercase;} #contents .feature_content p.top a:hover {text-decoration: underline;} /* SIDEBAR */ #contents #sidebar_wrapper {} #contents #sidebar {background: transparent url(i/sidebar_top2.gif) top left repeat-x; padding-top: 0px;} #contents #sidebar h3 {font-family: Georgia, serif; font-style: italic; font-weight: normal; text-transform: capitalize; color: #777; padding-top: 10px;} #contents #sidebar h3, #sidebar p, #sidebar ul {width: 180px; margin-left: 10px;} #contents #sidebar img {border: 1px solid #bcdbeb; padding: 4px; background-color: #fff; margin: 5px 0 5px 10px;} #contents #sidebar p {line-height: 1.2em;} /* CONTACT */ table.contact {width: 500px;} table.contact td {padding: 0px 5px 5px 0px; width: 160px; vertical-align: top;} table.contact label { float: right; font-weight: bold;} fieldset {width: 540px;} table.contact input, table.contact textarea {background-color:#E2F1F8; width: 300px;} table.contact textarea {height: 100px;} /* QUOTE */ div.quote {clear:both;} div.quote div.dropbox_liner {float:left;margin-right:20px; } /* LIST of CHURCHES */ ul#list_of_churches li {padding-top: 5px; } ul#list_of_churches span {color: #999;} /* PORTFOLIO */ #contents ul#portfolio li {list-style: none;margin-left: 0px; width: 200px; height: 230px; float: left; padding: 8px 10px 0 10px; margin-right: 3px; background: #fff url(i/portfolio_box_225.gif) top center no-repeat; } #contents ul#portfolio li img {border: 1px solid #ccc;} #contents ul#portfolio li h3 {padding-top: 5px;} #contents ul#portfolio li h3 a:hover{text-decoration: unerline;} #contents ul#numbers, #contents ul#churches {padding-top: 5px;} #contents ul#numbers li, #contents ul#churches li {list-style: none;margin-left: 0px; color: #666; padding-bottom: 3px; line-height; 1.05em;} /* BLOG */ div.blogpost {clear:both; border-top: 20px solid #EDEDED; margin-top: 10px; padding-top: 10px; line-height: 1.5em; } #contents div.blogpost h2 {font-size: 2em; font-family: 'Helvetica Neue', Arial, Helvetica, Myriad, sans-serif; font-style: normal; font-weight: bold; margin-bottom: 0px; padding-bottom: 5px;} #contents div.blogpost h2 a {color: #3399CC;} #contents div.blogpost h3.published_at {font-family: Georgia, serif; font-style: italic; font-weight: normal; padding: 5px 0 10px 0;} #contents div.blogpost p.posted_by {font-family: Georgia, serif; font-style: italic; font-weight: normal; } #contents ul#recent_posts {list-style: none; } #contents ul#recent_posts li {margin-left: 0; padding-top: 5px; } #contents ul#recent_posts li a {text-decoration: none; } #contents ul#recent_posts li span {color: #999;} /* FOOTER */ #footer {font-size:90%;clear: both; padding: 10px 0; border-top: 3px solid #666; background: #121316 url(i/footer_bg.jpg) top center repeat-x; color: #ddd;} #footer table {margin:0px auto;width:960px;} #footer table td {width:25%;padding:10px 20px;vertical-align:top;} #footer table td h4 {font-size:150%; font-weight: bold; padding:4px 0px;} #footer table td a {color:#70CAF2;text-decoration:none;} #footer table td a:hover {text-decoration: underline; } #footer table td p {margin-bottom:1em;} #footer_cg {padding-left:38px !important;background:url(i/footer_cg_bg.gif) top left no-repeat;} #footer_plug {color: #70CAF2; padding: 0; margin: 0; font-family: Georgia, serif; font-style: italic; margin-bottom: 1em;} #footer_more_info a { color:#ddd !important;} #footer_legal a { color:#ddd !important;} #footer_nav {} #footer_nav li {float:left;display:block;width:90px;margin-bottom:0.5em; padding-top: 0.5em; border-top: 1px solid #333; margin-right: 5px; } #citygates_twitter_updates li {margin-bottom:1em;} /* DROPBOXES */ .dropbox_liner {} .liner_960 {padding-bottom:28px;background:url(i/dropbox_960.png) bottom left no-repeat;width:960px;} .liner_480 {padding-bottom:28px;background:url(i/dropbox_480.png) bottom left no-repeat;width:480px;} .dropbox {background:#ECECEC;border:1px solid #C6C6C6;padding:20px;} /* TABLES - Support page */ table#support_matrix {margin-top:10px;} table#support_matrix th {padding:0px 10px;text-align:center;color:#98C93C;font-size:150%;vertical-align:top;width:25%;} table#support_matrix th span {display:block;border-bottom:4px solid #ddd;padding:5px 0px;} table#support_matrix td {padding:5px 20px;vertical-align:top;width:25%;} table#support_matrix td.link_out a {font-weight: bold; display:block;background:#ccc;padding:7px;text-align:center;text-decoration:none;color:#666;} table#support_matrix td.link_out a:hover {background:#0398CC;color:#fff;} /* TABLES - in the pricing page */ table.pricing {margin-bottom:30px;} table.pricing caption {font-size: 120%; color: #0C8AA8; font-family: Georgia, serif; font-style: italic;margin-bottom:5px;} table.pricing tr {} table.pricing tr td {vertical-align:top;} table.pricing tr td.dollar_amount {width:100px;text-align:right;font-weight:bold;} table.pricing tr td.whatcha_get {padding-left:10px;} table.pricing tr td.or {width:100px;text-align:right;color: #0C8AA8; font-family: Georgia, serif; font-style: italic;} /* LIGHTBOX */ ul.lightbox_ul {padding:25px 0px 0px 0px; list-style-type: none;} #contents li.lightbox_li {float:left;margin-bottom:10px;margin-left:25px; list-style-type: none;} a.lightbox_link {position:relative;display:block;} a.lightbox_link span {display:block;position:absolute;top:-15px;left:-15px;height:50px;width:50px;text-indent:-1000px;background:url(i/lightbox.png) top left no-repeat;} a.lightbox_link img {border:2px solid #0398CC;} #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(/javascripts/lightbox2.04/images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(/javascripts/lightbox2.04/images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }