/* Theme Name: The Playground Gym Theme URI: http://theplaygroundgym.com/ Description: The theme for the official website of The Playground Gym. Version: 1 Author: eljamez (J.Hall) Author URI: http://eljamez.com/ Tags: custom, fixed width, two columns The Playground Gym v1 http://theplaygroundgym.com/ This theme was designed and built by eljamez (J.Hall), whose site you will find at http://eljamez.com/ */ /************************************************************************ Listing Order: ============== 1 - GLOBAL 2 - HEADER 3 - CONTAINER 4 - FOOTER FONT SIZES =========== smaller = 10px middle = small header = large header = MAIN COLORS =========== Dark Blue Heading = #28697f Blue Border = #47b2d7 Body Text = #343c3f ************************************************************************* 1 - GLOBAL STYLES ************************************************************************/ /*Reset Styles (removing margins and padding before starting)*/ *{margin:0px; padding:0px;} body{background: #cbe9f4 url('images/site_bg.gif') top left repeat-x; color:#343c3f; font-family:'helvetica', 'arial', 'sans-serif'; font-size:12px; line-height:18px;} /* clearing and replacing */ .clear { clear: both; } .replace {text-indent: -10000px; display: block; width: 100%; height: 100%; outline: none;} .replace * {text-indent: -10000px; display: block; background-repeat: no-repeat; background-position: left top; background-color: transparent;} /* class for elements that are Floated Left, Displayed Block, Position Relative */ .flo_left_rel {display:block; float:left; position:relative;} /* images */ img{border:none;} /* links */ a{text-decoration:none; color:#899d10;} a:hover{text-decoration:underline; color:#ccc;} /* input */ input{border:none;} /************************************************************************ 2 - HEADER/NAV STYLES ************************************************************************/ div#header{background: url('images/site_header.png') top left no-repeat; width:940px; height:287px; margin:0px auto; position:relative; overflow:hidden; padding:0px 20px;} body.page-template-page_single_col-php div#header{background: url('images/site_header_single_col.png') top left no-repeat;} div#header a#banner{width:940px; height:200px; display:block; float:left;} ul#nav{display:block; width:940px; height:74px;} ul#nav li{list-style:none; float:left; display:block; height:74px;} ul#nav li a{background: url('images/menu_hover_sprite.gif');} ul#nav li#nav_home{width:150px;} ul#nav li#nav_home a{background-position:0px 0px;} ul#nav li#nav_about{width:240px;} ul#nav li#nav_about a{background-position:-150px 0px;} ul#nav li#nav_classes{width:220px;} ul#nav li#nav_classes a{background-position:-390px 0px;} ul#nav li#nav_faq{width:110px;} ul#nav li#nav_faq a{background-position:-610px 0px;} ul#nav li#nav_contact{width:220px;} ul#nav li#nav_contact a{background-position:-720px 0px;} /************************************************************************ 3 - CONTAINER STYLES ************************************************************************/ div#container{background: url('images/content_bg.png') top left repeat-y; width:980px; margin:0px auto; position:relative;} div#content{width:630px; padding:20px 0 30px 30px;} div#content_single_col{width:940px; padding:20px 0 30px 20px; margin-left:10px; background: #fff;} div#sidebar{width:300px; padding:20px 0 20px 20px;} /************************************************************************ 3 - SIDEBAR STYLES ************************************************************************/ div#sidebar{} div#sidebar ul li h2, form#searchform label, form#searchform input#s, form#searchform input#searchsubmit {background:url('images/sidebar_sprite.gif') top left no-repeat;} form#searchform{display:block; float:left; margin:0px 0 20px 0;} form#searchform label{background-position: 0 -75px; width:89px; height:23px; margin:0 0 10px 0;} form#searchform input#s{background-position: 0 -110px; color:#28697f; width:183px; height:24px; font-size:14px; font-weight:bold; padding:8px 10px 0 10px; display:block; float:left; margin-right:15px;} form#searchform input#searchsubmit{background-position: -100px -75px; width:52px; height:32px; cursor:pointer; display:block; float:left;} div#sidebar a.sidebar_ad{margin-top:10px; display:block;} div#sidebar ul{margin-bottom:10px;} div#sidebar ul li{list-style:none; margin-top:13px;} div#sidebar ul li h2{height:23px; margin-bottom:2px;} div#sidebar ul li ul{} div#sidebar ul li ul li{color:#28697f; margin-top:0px!important; list-style:circle inside; margin-left:15px;} div#sidebar ul li ul li a{color:#28697f; text-decoration:none;} div#sidebar ul li ul li a:hover{text-decoration:underline;} div#sidebar ul li.sidebar_latest_news h2{background-position: 0 0px; width:153px;} div#sidebar ul li.sidebar_archives h2{background-position: 0 -25px; width:97px;} div#sidebar ul li.sidebar_links h2{background-position: -160px 0px; width:67px;} div#sidebar ul li.sidebar_categories h2{background-position: 0 -150px; width:141px;} div#sidebar ul li.sidebar_friends h2{background-position: 0 -50px; width:98px;} div#sidebar ul li.sidebar_photos h2{background-position: 0 -180px; width:170px;} div#sidebar ul li.sidebar_photos ul li{list-style:none; display:block; float:left; margin:4px;} div#sidebar ul li.sidebar_photos ul li a{display:block;} div#sidebar ul li.sidebar_photos ul li a img{display:block; border:1px solid #48b2d7;} div#sidebar h4{clear:both; float:left; padding:4px;} div#sidebar h4 a{color:#48b2d7;} /************************************************************************ 3 - HOMEPAGE STYLES ************************************************************************/ div#home_whats_new{background: url('images/home_whats_new.png') top left no-repeat; width:611px; height:311px; margin-bottom:20px;} div#home_whats_new div.entry_excerpt{float:right; width:270px; height:260px; padding:35px 30px 20px 10px; overflow:hidden;} div#home_whats_new div.entry_excerpt h2 a{color:#28697f; font-size:18px; text-decoration:none;} div#home_whats_new div.entry_excerpt h4{color:#28697f; font-size:12px;} div#home_whats_new div.entry_excerpt p{font-size:13px; margin:7px 0;} div#home_whats_new div.entry_excerpt p.readmore a{color:#28697f; font-size:12px; font-weight:bold; text-transform:uppercase;} div#stay_connected{background: url('images/home_stay_connected.png') top left no-repeat; width:180px; height:260px; padding:30px 20px; color:white;} div#stay_connected p{font-size:16px; font-weight:bold; margin:10px 0 0 0;} div#stay_connected form input{margin:10px 0 0 0;} div#stay_connected input.email{background: url('images/stay_connected_input_bg.gif') top left no-repeat; color:#28697f; width:165px; height:25px; font-size:14px; font-weight:bold; padding:9px 10px 0 10px;} div#stay_connected input#signUp{background: #DDD url('images/stay_connected_sign_up.gif') top left no-repeat; width:104px; height:36px; cursor:pointer;} div#stay_connected h3{background: url('images/stay_connected_find_us.gif') top left no-repeat; width:80px; height:14px; display:block; float:left; margin:30px 0 10px 5px;} div#stay_connected div.stay_connected_social_links{border-top:1px solid #40a0c1; clear:both; padding-top:10px;} div#stay_connected div.stay_connected_social_links a{width:48px; height:48px; display:block; float:left;} div#stay_connected div.stay_connected_social_links a.facebook{background: url('images/stay_connected_fb.gif') top left no-repeat;} div#stay_connected div.stay_connected_social_links a.twitter{background: url('images/stay_connected_tw.gif') top left no-repeat; margin-left:15px;} div#stay_connected div.stay_connected_social_links a.flickr{background: url('images/stay_connected_flickr.gif') top left no-repeat; margin-left:15px;} div#map{height:298px; width:368px; margin-left:20px; border:2px solid #47b2d7; line-height:14px;}/*background: url('../images/home_where_we_are.png')top left no-repeat; */ div#map small{background:#47b2d7; padding:4px 8px; left:-2px; position:relative; top:3px;} div#map small a{color:white; font-weight:bold; text-transform:uppercase;} /************************************************************************ 4 - SUB PAGE STYLES ************************************************************************/ div.subpage{} div.subpage h2.sub_header{display:block; width:609px; height:38px; background: url('images/subheader_bg.gif') top left no-repeat;} div.subpage_single_col h2.sub_header{display:block; width:920px; height:38px; background: url('images/subheader_wide_bg.gif') top left no-repeat;} div.subpage h2#sub_header_About{background: url('images/subheader_about_us.gif') top left no-repeat;} div.subpage h2#sub_header_latest_posts{background: url('images/subheader_latest_posts.gif') top left no-repeat;} div.subpage h2#sub_header_archives{background: url('images/subheader_archives.gif') top left no-repeat;} div.subpage_single_col h2#sub_header_Classes{background: url('images/subheader_classes.gif') top left no-repeat;} div.subpage h2#sub_header_Contact{background: url('images/subheader_contact.gif') top left no-repeat;} div.subpage h2#sub_header_FAQ{background: url('images/subheader_faq.gif') top left no-repeat;} div.subpage h2#sub_header_search_results{background: url('images/subheader_search_results.gif') top left no-repeat;} div.subpage h2#sub_header_Sign_Up{background: url('images/subheader_sign_up.gif') top left no-repeat;} div.subpage div.subpage_content{background: url('images/subpage_content_bg.gif') top left repeat-y; width:549px; padding:10px 30px;} div.subpage div.subpage_bottom_cap{background: url('images/subpage_bottom_cap.gif') top left no-repeat; width:609px; height:30px;} /*single col pages*/ div.subpage_single_col{} div.subpage_single_col h2.sub_header{display:block; width:920px; height:38px;} div.subpage_single_col div.subpage_content{background: url('images/subpage_wide_content_bg.gif') top left repeat-y; width:900px; padding:10px 0 10px 30px;} div.subpage_single_col div.subpage_content p{margin:0 0 10px 0;} div.subpage_single_col div.subpage_bottom_cap{background: url('images/subpage_wide_bottom_cap.gif') top left no-repeat; width:920px; height:30px;} /*general for subpages */ div.subpage_content p{margin:0 20px 10px 0; padding-right:30px;} div.subpage_content ul{margin-left:20px;} div.subpage_content ul li{list-style:none;} div.subpage_content b, div.subpage_content strong {font-size:18px; color:#245c70} /*for posts*/ div.subpage_content h3{color:#48b2d7; text-transform:uppercase; font-size:20px; font-weight:bold;} div.subpage_content h4{color:#999; font-weight:bold; margin:4px 0 12px 0;} div.subpage_content h4 span{color:#666;} /*for archives*/ div.subpage_content h3.sub_sub_head{font-size:24px; color:#bbb; margin-bottom:20px; font-weight:normal;} div.subpage_content div.post_listing{border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px;} div.subpage_content div.post_listing a{color:#94a242;} /* Begin Images */ p img { padding: 0; max-width: 100%; } /* Using 'class="alignright"' on an image will (who would've thought?!) align the image to the right. And using 'class="centered', will of course center the image. This is much better than using align="center", being much more futureproof (and valid) */ img.centered { display: block; margin-left: auto; margin-right: auto; } img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; } .alignright { float: right; } .alignleft { float: left; } /* End Images */ /* Captions */ .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } /* End captions */ /* Contact Form*/ form.wpcf7-form input, form.wpcf7-form textarea{border:2px solid #c2e6f2; padding:5px; font-weight:bold;} form.wpcf7-form p.form_send input{cursor:pointer;} /************************************************************************ 4 - FOOTER STYLES ************************************************************************/ div#footer{background:#28697f; border-top:1px solid #848c8e; margin-left:10px; width:941px; font-weight:bold; font-size:11px; color:white; padding:10px 0 7px 20px;} div#footer a{color:white; padding:0px 5px;}