/* LAYOUT - Table of Contents ======================================================== 1. Presentational classes generated by WordPress 2. 960 Grid System 3. Typography 4. Header 4.1 Navigation 4.2 Contact & Share 4.3 Logo/Branding 5. Content 5.1 Comments 5.2 Comment Form 5.3 Vendors Single Page 5.3.1 Vendors Contact Gravity Form 5.4 Nivo Zoom Styles 5.5 Nivo Slider Styles 5.6 ShootQ Form 5.7 Hidden Link Mod 6. Footer 6.1 Widgets 6.1.1 Search Form 6.2 Bottom Logo 7. CSS3 Styles 8. Utility Styles ======================================================== */ /* ======================================================== 1. Presentational classes generated by WordPress ======================================================== */ .aligncenter { display:block; margin:0 auto; } .alignleft { float:left; margin:0 20px 20px 0; } .alignright { float:right; margin:0 0 20px 20px; } .wp-caption { border:1px solid #999; text-align:center; background:#eee; padding:10px; margin:10px; } /* ======================================================== 2. 960 Grid System ======================================================== */ /* 960 Grid System ~ Core CSS. Learn more ~ http://960.gs/ Licensed under GPL and MIT. */ /* `Containers ----------------------------------------------------------------------------------------------------*/ .container_12 { margin-left:auto; margin-right:auto; width:960px; } #page-wrapper { width:100% !important; background-color:#FFF !important; border:4px solid #5d6f73; min-height:auto !important; height:auto; margin:0 auto; } /* `Grid >> Global ----------------------------------------------------------------------------------------------------*/ .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12 { display:inline; float:left; position:relative; margin-left:10px; margin-right:10px; } .container_12 .grid_3 { width:220px; } .container_12 .grid_6 { width:460px; } .container_12 .grid_9 { width:700px; } .container_12 .grid_12 { width:940px; } /* `Grid >> Children (Alpha ~ First, Omega ~ Last) ----------------------------------------------------------------------------------------------------*/ .alpha { margin-left:0; } .omega { margin-right:0; } /* `Grid >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .grid_1 { width:60px; } .container_12 .grid_2 { width:140px; } .container_12 .grid_4 { width:300px; } .container_12 .grid_5 { width:380px; } .container_12 .grid_7 { width:540px; } .container_12 .grid_8 { width:620px; } .container_12 .grid_10 { width:780px; } .container_12 .grid_11 { width:860px; } /* `Prefix Extra Space >> Global ----------------------------------------------------------------------------------------------------*/ .container_12 .prefix_3 { padding-left:240px; } .container_12 .prefix_6 { padding-left:480px; } .container_12 .prefix_9 { padding-left:720px; } /* `Prefix Extra Space >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .prefix_1 { padding-left:80px; } .container_12 .prefix_2 { padding-left:160px; } .container_12 .prefix_4 { padding-left:320px; } .container_12 .prefix_5 { padding-left:400px; } .container_12 .prefix_7 { padding-left:560px; } .container_12 .prefix_8 { padding-left:640px; } .container_12 .prefix_10 { padding-left:800px; } .container_12 .prefix_11 { padding-left:880px; } /* `Suffix Extra Space >> Global ----------------------------------------------------------------------------------------------------*/ .container_12 .suffix_3 { padding-right:240px; } .container_12 .suffix_6 { padding-right:480px; } .container_12 .suffix_9 { padding-right:720px; } /* `Suffix Extra Space >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .suffix_1 { padding-right:80px; } .container_12 .suffix_2 { padding-right:160px; } .container_12 .suffix_4 { padding-right:320px; } .container_12 .suffix_5 { padding-right:400px; } .container_12 .suffix_7 { padding-right:560px; } .container_12 .suffix_8 { padding-right:640px; } .container_12 .suffix_10 { padding-right:800px; } .container_12 .suffix_11 { padding-right:880px; } /* `Push Space >> Global ----------------------------------------------------------------------------------------------------*/ .container_12 .push_3 { left:240px; } .container_12 .push_6 { left:480px; } .container_12 .push_9 { left:720px; } /* `Push Space >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .push_1 { left:80px; } .container_12 .push_2 { left:160px; } .container_12 .push_4 { left:320px; } .container_12 .push_5 { left:400px; } .container_12 .push_7 { left:560px; } .container_12 .push_8 { left:640px; } .container_12 .push_10 { left:800px; } .container_12 .push_11 { left:880px; } /* `Pull Space >> Global ----------------------------------------------------------------------------------------------------*/ .container_12 .pull_3 { left:-240px; } .container_12 .pull_6 { left:-480px; } .container_12 .pull_9 { left:-720px; } /* `Pull Space >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .pull_1 { left:-80px; } .container_12 .pull_2 { left:-160px; } .container_12 .pull_4 { left:-320px; } .container_12 .pull_5 { left:-400px; } .container_12 .pull_7 { left:-560px; } .container_12 .pull_8 { left:-640px; } .container_12 .pull_10 { left:-800px; } .container_12 .pull_11 { left:-880px; } /* `Clear Floated Elements ----------------------------------------------------------------------------------------------------*/ /* http://sonspring.com/journal/clearing-floats */ .clear { clear:both; } /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */ .clearfix:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0; } * html .clearfix { height:1%; } /* ======================================================== 3. Typography ======================================================== */ /* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 28, 2010 */ @font-face { font-family: 'BlairMdITCTTMedium'; src: url('font/blairmditcttmedium-webfont.eot'); src: url('font/blairmditcttmedium-webfont.eot?#iefix') format('embedded-opentype'), url('font/blairmditcttmedium-webfont.woff') format('woff'), url('font/blairmditcttmedium-webfont.ttf') format('truetype'), url('font/blairmditcttmedium-webfont.svg#webfontbyqjLGXq') format('svg'); src: local(BlairMdITCTTMedium), url('font/blairmditcttmedium-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } body { background-color: #41474a; font:15px/1.6 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; font-weight: 200; } a {text-decoration: none;} a:focus { outline:1px dotted; } a:hover {text-decoration: underline;} hr { border:0 #ccc solid; border-top-width:1px; clear:both; height:0; } h1,h2,h3 { font-weight: 200;} h1,h2 { font-size:29px;} h3 { font-size:20px;} h4 { font-size:18px;} h5 { font-size:16px;} h6 { font-size:14px;} small {font-size: 90%;} /* ======================================================== 4. Header ======================================================== */ #top { font-size: 15px; padding-top: 10px; } /* ` 4.1 Navigation -----------------------------------------------------*/ nav a { color: #b3d2d8; padding: 6px 20px; margin-right: 5px; text-decoration: none; } .menu-item a { text-decoration: none; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; behavior: url('/wp-content/themes/sterling/css/PIE/PIE.php'); } .menu-item:hover a, .current-menu-item a { background-color: #5d6f73; } .current-menu-item a { color: white; } nav > ul { position: relative; z-index: 999; } nav ul ul { background-color: #5d6f73; padding: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; behavior: url('/wp-content/themes/sterling/css/PIE/PIE.php'); } nav ul ul .menu-item a:hover { background-color: #71878C; } nav ul li { float:left; } nav ul li { float:left; position:relative; } nav ul ul { position:absolute; display:none; top:1.5em; z-index: 10; margin: 0;} nav ul li ul a { width:12em; height:auto; float:left; margin: 0; } nav ul ul ul { top:-5px; -moz-box-shadow: 0px 0px 4px #333; -webkit-box-shadow: 0px 0px 4px #333; box-shadow: 0px 0px 4px #333; behavior: url('/wp-content/themes/sterling/css/PIE/PIE.php'); } nav ul li ul ul { left:12em; margin:0 0 0 10px; } nav ul li:hover ul ul,nav ul li:hover ul ul ul,nav ul li:hover ul ul ul ul { display:none; } nav ul li:hover ul,nav ul li li:hover ul,nav ul li li li:hover ul,nav ul li li li li:hover ul { display:block; } /* ` 4.2 Contact & Share -----------------------------------------------------*/ #top aside { color: #9fdbf4; text-align: right; } #top aside span.phone a { color: #9FDBF4; text-decoration: underline; } /* ` 4.3 Logo/Branding -----------------------------------------------------*/ .logo { font-family: 'BlairMdITCTTMedium', Helvetica, sans-serif; font-size: 40px; text-align: center; margin: 0px 0;} .logo a { color: #80def7 !important; text-decoration: none;} .logo span { color: #5d6f73;} /* ======================================================== 5. Content ======================================================== */ /* Hide the "Home" header on the home page */ body.home > article.page > header {display:none;} .single article { margin-top:-15px; } .blog article.post, .archive article.post, .category article.post { background: transparent url('../images/postBreak.png') no-repeat bottom center scroll; } .blog article, .archive article, .category article { background-color:#FFF !important; } article.grid_12 {width: 894px !important; padding: 20px 0px 40px 0px; margin:0 32px;} .single article.grid_12 {width: 894px !important; padding: 20px 0px 40px 0px; margin:0 18px;} article.post header, article.page header {margin-bottom: 20px; position: relative;} article.post header p { margin: 0 0 23px; line-height: 23px;} article.post header a, article.page header a {color: #444;} article.page header h2, article.post header h2, article.page header h1, article.post header h1 { padding-right: 80px; } article.page header a.fb, article.post header a.fb { position: absolute; top: 12px; right: 0; } article.post p, article.page p {margin-bottom: 20px; color: #000;} .postNav a, article.post a, article.page a {color: #5d6f73;} article.post .post-meta, article.page .post-meta { color: #5d6f73; clear:both; } article.post .post-meta a, article.page .post-meta a { font-style: italic; } section img, body.archive article img, body.category article img {-moz-box-shadow: 0px 0px 4px #888; -webkit-box-shadow: 0px 0px 4px #888; box-shadow: 0px 0px 4px #888; behavior: url('/wp-content/themes/sterling/css/PIE/PIE.php');} .fb {float: right; position: relative; top: 10px;} .twitter-share-button {float: right; position: relative; top: 10px; } .postNav {margin: 15px 15px 0px 15px !important; } .postNav a, .postNav h3 {padding: 0;} .more-link { text-align: center; display: block; font-size: 18px; } article.post > footer, article.page > footer { clear:both; text-align: center; } article.post > footer a, article.page > footer a { padding: 0 5px; margin: 0 5px; } .category .postNav * { line-height:120%; margin-bottom:-10px; z-index:100; position:relative; } /* ` 5.1 Comments -----------------------------------------------------*/ #comments-title {margin-bottom: 20px;} article.comment {padding: 20px;} article.comment:first {margin:0;} article.comment {margin: 20px 0 0;} article.comment.depth-1, article.comment.depth-3, article.comment.depth-5 { background-color: #fcfcfc;} article.comment.depth-2, article.comment.depth-4 { background-color: #efefef;} span.author-img { display: block; float: left; background-color: #fff; padding: 5px; margin-right: 10px;} span.author-img img { vertical-align: bottom; } article.comment.depth-1 span.author-img, article.comment.depth-3 span.author-img, article.comment.depth-5 span.author-img {border: 1px solid #ccc;} article.comment.depth-2 span.author-img, article.comment.depth-4 span.author-img {border: 1px solid #aaa;} ul.children {padding-top: 10px;} /* had to specify the CSS3 values locally */ .comment-reply-link {padding: 3px 5px;color: #ffffff!important;-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; behavior: url('/wp-content/themes/sterling/css/PIE/PIE.php');} .depth-1 > .comment-reply-link, .depth-3 > .comment-reply-link, .depth-5 > .comment-reply-link {background-color: #aaa!important;} .depth-2 > .comment-reply-link, .depth-4 > .comment-reply-link {background-color: #777!important;} /* ` 5.2 Comment Form -----------------------------------------------------*/ #respond { margin-top: 40px; } #reply-title { margin-bottom: 20px; } input[type=text], input[type=email], input[type=url], textarea { padding: 12px; font-size: 14px; font-style: italic; border: none; background-color: #CCC;} input[type=text], input[type=email], input[type=url] { width: 290px; } textarea { width: 610px; } #wp-email-popup textarea { width: auto; } /* had to specify the CSS3 values locally */ #commentform input[type=submit], #shootQ input[type=submit] { padding: 12px 18px; font-size: 16px; font-weight: 200; color: #fff; cursor: pointer; background-color: #41474A; border: none; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;-moz-box-shadow: 0px 0px 4px #888; -webkit-box-shadow: 0px 0px 4px #888; box-shadow: 0px 0px 4px #888; behavior: url('/wp-content/themes/sterling/css/PIE/PIE.php');} #commentform input[type=submit]:hover, #shootQ input[type=submit] { background-color: #4f5b5f; } /* ` 5.3 Vendors Single Page -----------------------------------------------------*/ #referenceImage {position: fixed; top: -9999px; left: -9999px; float: left;} .imageGrid img {margin: 10px;} .container_12 #ss-downloads {text-align: center;} .container_12 #ss-downloads h3 {font-weight: 200;} #ss-downloads h3 {font-weight: 200!important; line-height: 24px; } #ss-downloads p {margin-bottom: 0;} #ss-downloads .fb { top: -2px; } #ss-downloads .twitter-share-button { top: 2px; } #ss-downloads a.button { font-weight: 400!important; padding: 11px 18px !important; position: relative; top: 2px; } #wp-email-popup p { margin-bottom: 10px; } #email-share-link {float: right; } .cat-78-id #email-share-link { line-height: 50px;} #wp-email-popup input[type=text], #wp-email-popup textarea, .container_12 #ss-downloads input[type=text], .container_12 #ss-downloads input[type=email], .container_12 #ss-downloads input[type=url] { padding: 12px; font-size: 14px; font-style: italic; border: none; background-color: #fcfcfc; width: 290px; -moz-box-shadow: 0px 0px 2px #888; -webkit-box-shadow: 0px 0px 2px #888; box-shadow: 0px 0px 2px #888; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; behavior: url('/wp-content/themes/sterling/css/PIE/PIE.php'); } #ss-downloads a.button, #wp-email-button input[type=button], .container_12 #ss-downloads input[type=submit] { padding: 10px 18px; font-size: 16px; font-weight: 200; color: #fff; cursor: pointer; background-color: #41474A; border: none; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;-moz-box-shadow: 0px 0px 4px #888; -webkit-box-shadow: 0px 0px 4px #888; box-shadow: 0px 0px 4px #888; behavior: url('/wp-content/themes/sterling/css/PIE/PIE.php');} #ss-downloads a.button:hover, #wp-email-button input[type=button]:hover, .container_12 #ss-downloads input[type=submit]:hover { background-color: #4f5b5f; text-decoration: none;} /* ` 5.3.1 Vendors Contact Gravity Form -----------------------------------------------------*/ .container_12 .gform_wrapper {max-width: none;} .container_12 .gform_wrapper span.gform_description {font-weight: 200;} .container_12 .gform_title {display: none;} .container_12 .gform_body, .cat-77-id .gform_footer {max-width: 640px;} .container_12 .gform_wrapper .top_label .gfield_label {font-weight: 200;} .container_12 .ginput_container {overflow: visible; padding: 3px;} .container_12 .gform_wrapper input[type=text], .container_12 .gform_wrapper input[type=email], .container_12 .gform_wrapper input[type=url], .container_12 .gform_wrapper textarea { padding: 12px; font-size: 14px; font-style: italic; border: none; background-color: #fcfcfc; width: 290px; -moz-box-shadow: 0px 0px 2px #888; -webkit-box-shadow: 0px 0px 2px #888; box-shadow: 0px 0px 2px #888; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; behavior: url('/wp-content/themes/sterling/css/PIE/PIE.php'); } .container_12 .gform_wrapper textarea {width: inherit;} .container_12 .gform_wrapper input[type=submit] { padding: 10px 18px; font-size: 16px; font-weight: 200; color: #fff; cursor: pointer; background-color: #41474A; border: none; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;-moz-box-shadow: 0px 0px 4px #888; -webkit-box-shadow: 0px 0px 4px #888; box-shadow: 0px 0px 4px #888; behavior: url('/wp-content/themes/sterling/css/PIE/PIE.php');} .container_12 .gform_wrapper input[type=submit]:hover { background-color: #4f5b5f; color: #fff;} .container_12 #gform_ajax_spinner_1 {-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;} /* ` 5.4 LightBox 0.5 -----------------------------------------------------*/ .cat-77-id #lightbox-container-image-data-box {overflow: hidden;} /* ` 5.5 Nivo Slider Styles -----------------------------------------------------*/ /* The Nivo Slider styles */ .nivoSlider { position:relative; width:960px; height:auto; overflow: hidden; margin-left:-32px; margin-bottom:10px; background:#41474a !important; } .home .nivoSlider { margin-bottom:-60px; } .nivoSlider img { position:absolute; top:0px; left:0px; max-width: none; } .nivo-main-image { display: block !important; position: relative !important; width: 100% !important; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; top:0; } .nivo-box { display:block; position:absolute; z-index:5; overflow:hidden; } .nivo-box img { display:block; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; width:100%; z-index:8; padding: 5px 10px; opacity: 0.8; overflow: hidden; display: none; -moz-opacity: 0.8; filter:alpha(opacity=8); -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav { text-align:center; padding: 15px 0; } .nivo-controlNav a { cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } /* .nivo-controlNav a.active img {-moz-box-shadow: 0px 0px 8px #888; -webkit-box-shadow: 0px 0px 8px #888; box-shadow: 0px 0px 8px #888; behavior: url('/wp-content/themes/sterling/css/PIE/PIE.php');} */ .sliderFull { background:#fefefe url(../images/loading.gif) no-repeat 50% 50%; /* width: 874px; height: 709px; */ } .sliderFull > img {display: none; } .sliderFull .nivo-controlNav { position:absolute; bottom: -150px; width: 100%; text-align: center; } .sliderFull .nivo-controlNav img { display:inline; position:relative; margin-right:10px; } .sliderFull.rows1 {margin-bottom: 100px;} .sliderFull.rows1 .nivo-controlNav { bottom: -80px;} .sliderFull.rows2 {margin-bottom: 170px;} .sliderFull.rows2 .nivo-controlNav { bottom: -150px;} .sliderFull.rows3 {margin-bottom: 240px;} .sliderFull.rows3 .nivo-controlNav { bottom: -220px;} .sliderFull.rows4 {margin-bottom: 310px;} .sliderFull.rows4 .nivo-controlNav { bottom: -290px;} /* ` 5.6 ShootQ Form -----------------------------------------------------*/ #shootQ label.error { margin-left: 20px; color: #aa0000;} #ui-datepicker-div {font:15px/1.6 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; font-weight: 200;} .ui-datepicker-title { font-size: 16px; font-weight: 200;} .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary {font-weight: normal!important; color: #212121!important;} /* ! 5.7 Hidden Link Mod */ .hidden_link_wrapper { position:relative; width:auto; } .hidden_link { position:relative; } .pin_button_wrapper { position:absolute!important; top:15px!important; right:48%!important; opacity:.15; width:30px; height:15px; } .hidden_link_wrapper:hover .pin_button_wrapper { opacity:.7 } .hidden_link_wrapper .pin_button_wrapper:hover { opacity:1 } /* ======================================================== 6. Footer ======================================================== */ #bottomWrap { font-size: 15px; margin:0; overflow: hidden; float: left; padding: 0 20px; width: 960px; position: relative; left: -20px; } #bottom { background-color: #41474a; color: #fff; position: relative; bottom: -20px; width: 960px;} #bottom a { color: #b3d2d8;} /* ` 6.1 Widgets -----------------------------------------------------*/ #bottom ul.grid_4 { list-style: none; width: 260px; padding: 20px 20px 0;} #bottom ul li {margin-bottom: 20px;} #bottom ul ul { list-style: outside none url(../images/footerBullet.jpg); margin-left: 15px;} #bottom ul li ul li {padding: 0; margin-bottom: 0;} #facebook { background-color:#FFFFFF; border:1px solid #5D6F73; font-size:10px; padding:5px; float: left; height: 62px; width: 59px; display: block; position: relative; z-index: 120; } /* ` 6.1.1 Search Form -----------------------------------------------------*/ #searchform div { position: relative; z-index: 10; width: 260px; } #searchform div #s { background:#5d6f73 url('../images/magGlass.png') no-repeat right top !important; border: #5d6f73 1px solid; color: #e1eef0; padding: 7px 37px 7px 10px; font-size: 14px; font-style: italic; width: 191px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #searchform div #searchsubmit { border: none; background: none !important; cursor: pointer; height: 31px; position: absolute; right: 22px; width: 33px; } /* ` 6.2 Bottom Logo -----------------------------------------------------*/ #bottom .logo { margin: 0 10px; } #bottom .logo a {color: #6193a1 !important;} #bottom .logo a span {color: #4f5b5f !important;} /* ` 6.3 Popup Book -----------------------------------------------------*/ #fade { display: none; background: #000; position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; opacity: .80; z-index: 9999; } .popup_block{ display: none; background: #fff; padding: 20px; border: 20px solid #ddd; float: left; font-size: 1.2em; position: fixed; top: 50%; left: 50%; z-index: 99999; -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } img.btn_close { float: right; margin: -55px -55px 0 0; } .popup p { padding: 5px 10px; margin: 5px 0; } /*--Making IE6 Understand Fixed Positioning--*/ *html #fade { position: absolute; } *html .popup_block { position: absolute; } .pageContent.page1, .pageContent.page2, .pageContent.page3, .pageContent.page4, .pageContent.page0 { position: absolute; top: 0; left: 0; display: block; margin-left: 0; } .pageContent.pageN1 { position: absolute; top: 0; left: 0; width: 0; overflow: hidden; display: block; } #pagesContainer { background-color:#888888; position:relative; overflow: hidden; } .pageContent { display: none; } .pageContent > div { background-color: #b5b5b5; position: relative; } .pageContent > div p { position: absolute; bottom: -24px; text-align: center; width: 100%; display:none; } .pageContent > div:hover p { display: block; } .pageContent > div p span { padding: 5px 10px; background-color: rgba(255,255,255,0.3); font-size: 12px; } /* ======================================================== 8. Utility Styles ======================================================== */ .fl {float: left;} .fr {float: right;} .tar {text-align: right;} .tal {text-align: left;} .hide {display: none;} #wpstats {position: absolute;display: none!important;} .m0 {margin: 0!important;}