/* Theme Name: Cupcake Theme URI: http://www.my-igloo.net Description: A lovely jubbly colourful fun theme for cupcakehq Version: 1.0 Author: Evie Milo @ Eskymo New Media Design Author URI: http://www.my-igloo.net */ /* COLOURS H1 & LINKS #D30259 [dark pink] H2 MAIN SITE PAGES #DF92BF [light pink] H2 SIDEBAR TITLES #84C045 [green] MAIN TEXT #333333 [dark grey] */ /* RESET */ /* -------------------------------------------------------------------------------------------*/ * { margin:0; padding:0; } body { font-size: small; font-family:Arial, Helvetica, sans-serif; color: #333333; text-align:left; background:url(/images/bgrpt_crosshatch.jpg) repeat-x top left; } * html body { font-size: x-small; /* for IE5/Win */ f\ont-size: small; /* for other IE versions */ } /* The below restores some sensible defaults */ strong { font-weight: bold; } em { font-style: italic; } a img { border:none; } /* Gets rid of IE's blue borders */ /* LAYOUT */ /* ----------------------------------------- */ /* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */ .aligncenter { display:block; margin:0 auto; } .alignleft { float:left; } .alignright { float:right; } .wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px; } /* FLOATED ELEMENTS */ /* -------------------------------------------------------------------------------------------*/ .left { float: left; } .right { float: right;} .clearleft { clear: left; } .clearright { clear: right; } .clearboth { clear: both; } /* TYPOGRAPHY */ /* -------------------------------------------------------------------------------------------*/ h1 {font-size: 180%; font-weight:100; color: #D30259; margin: 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} h1.archivecategory { color: #DF92BF;} h1 a:link, h2 a:visited { color: #D30259; text-decoration: none; } h1 a:hover, h2 a:active { color: #D30259; text-decoration: underline; } h2 {font-size: 180%; font-weight:normal; color: #D30259; margin: 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} h2.archivecategory { color: #DF92BF;} h2 a:link, h2 a:visited { color: #D30259; text-decoration: none; } h2 a:hover, h2 a:active { color: #D30259; text-decoration: underline; } h3 {font-size: 160%; font-weight:normal; color: #84C045; font-family: Georgia, "Times New Roman", Times, serif;} p {margin: 5px 0px 15px 0px; font-size: 90%; line-height:1.5em;} a:link, a:visited { color: #D30259; text-decoration: none; } a:hover, a:active { color: #D30259; text-decoration: underline; } /* WRAPPER IS 1000PX WIDE AND HAS THE CURVED EDGE IMAGE AS A REPEATING BACKGROUND */ /* -------------------------------------------------------------------------------------------*/ #wrapper { width: 1000px; margin: 0 auto; background: url(/images/bgrpt_curvypageedges.gif) repeat-y top left; } /* TOPLINKS IS THE TOP PINK BAR CONTAINING EMAIL AND TWITTER LINKS */ /* -------------------------------------------------------------------------------------------*/ #toplinks { width: 1000px; height: 50px; margin: 0 auto; background: url(/images/bgrpt_toplinks.jpg) no-repeat top center; color: #ffffff; } #toplinks .left {width: 500px;} #toplinks .right {width: 500px; text-align: right;} #toplinks .left p {padding: 8px 0px 0px 45px; font-size: 140%; font-family: Georgia, "Times New Roman", Times, serif; margin: 0px 0px 0px 20px;} #toplinks .right p {padding: 8px 30px 0px 0px; font-size: 140%; font-family: Georgia, "Times New Roman", Times, serif; margin: 0px 0px 0px 0px;} #toplinks a:link, #toplinks a:visited {color: #ffffff; text-decoration: none;} #toplinks a:hover, #toplinks a:active {color: #ffffff; text-decoration: underline;} p[class ="twitter"] { background: url(/images/icon_twitter.jpg) no-repeat center left; } /* HEADER IS 880PX WIDE AND HOLDS THE LOGO ON THE LEFT AND THE RANDOMISED IMAGES ON THE RIGHT */ /* -------------------------------------------------------------------------------------------*/ #header { width: 880px; margin: 0 auto; } #header .left { width: 250px;} #header .right { width: 630px; text-align: right;} /* NAVIGATION SITS UNDER THE HEADER AND IS 880PX WIDE */ /* -------------------------------------------------------------------------------------------*/ #navigation { width: 880px; height: 43px; margin: 0 auto; padding: 0px; background: url(/images/navigation.jpg) no-repeat; } #nav { width: 880px; height: 43px; background: url(/images/navigation.jpg) no-repeat; margin: 0px; padding: 0px; position: relative; } #nav li { margin: 0px; padding: 0px; list-style: none; display: block; position: absolute; text-indent: -3000px; } #nav a { display: block; height:43px; text-decoration: none; } /* POSITION OF THE NAVIGATION BUTTONS ---------------------------------------------------------------------------------------------------------------*/ #home {left:0px; top:0px; width:88px; height:43px;} #about {left:99px; top:0px; width:90px; height:43px;} #themoneyboxselection {left:200px; top:0px; width:335px; height:43px;} #blog {left:547px; top:0px; width:70px; height:43px;} #stockists {left:629px; top:0px; width:128px; height:43px;} #contact {left:769px; top:0px; width:111px; height:43px;} #home a, #about a, #themoneyboxselection a, #blog a, #stockists a, #contact {height:43px;} /* HOVER AND ACTIVE STATES OF THE NAVIGATION BUTTONS ---------------------------------------------------------------------------------------------------------------*/ #home a:hover, #home .active {background:url(/images/navigation.jpg) -0px -43px no-repeat; width:88px; height:43px;} #about a:hover, #about .active {background:url(/images/navigation.jpg) -99px -43px no-repeat; width:90px; height:43px;} #themoneyboxselection a:hover, #themoneyboxselection .active {background:url(/images/navigation.jpg) -200px -43px no-repeat; width:335px; height:43px;} #blog a:hover, #blog .active {background:url(/images/navigation.jpg) -547px -43px no-repeat; width:70px; height:43px;} #stockists a:hover, #stockists .active {background:url(/images/navigation.jpg) -629px -43px no-repeat; width:128px; height:43px;} #contact a:hover, #contact .active {background:url(/images/navigation.jpg) -769px -43px no-repeat; width:111px; height:43px;} body.page-id-69 #home {background:url(/images/navigation.jpg) -0px -43px no-repeat; width:88px; height:43px;} body.page-id-70 #about {background:url(/images/navigation.jpg) -99px -43px no-repeat; width:90px; height:43px;} body.page-id-72 #themoneyboxselection {background:url(/images/navigation.jpg) -200px -43px no-repeat; width:335px; height:43px;} body.parent-pageid-72 #themoneyboxselection {background:url(/images/navigation.jpg) -200px -43px no-repeat; width:335px; height:43px;} body.page-id-74 #stockists {background:url(/images/navigation.jpg) -629px -43px no-repeat; width:128px; height:43px;} body.page-id-76 #contact {background:url(/images/navigation.jpg) -769px -43px no-repeat; width:111px; height:43px;} body.blog #blog, body.single #blog, body.archive #blog,body.error404 #blog {background:url(/images/navigation.jpg) -547px -43px no-repeat; width:70px; height:43px;} /* CONTENT - THIS IS 866PX and is used for the blog only ---------------------------------------------------------------------------------------------------------------*/ #content{ margin: 0 auto; width: 866px; padding: 25px 0px 20px 0px; } #content .left { width: 626px;} #content .right { width: 200px;} #content blockquote { padding:0px 0px 0px 40px; margin: 0px 0px 0px 10px; background:url(/images/blockquote.gif) no-repeat top left; } .post cite { padding:0px 0px 0px 40px; margin: 0px 0px 0px 10px; } /* CONTENTHOME - THIS IS 866PX and is used for the home page only ---------------------------------------------------------------------------------------------------------------*/ #contenthome{ margin: 0 auto; width: 866px; padding: 25px 0px 20px 0px; } #contenthome .left { width: 390px;} #contenthome .right { width: 457px;} #contenthome h1{font-size: 180%; font-weight:100; color: #D30259; margin: 0px 0px 5px 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} #contenthome h2{font-size: 140%; font-weight:100; color: #DF92BF; margin: 0px 0px 10px 0px; padding: 0px; font-family:Arial, Helvetica, sans-serif;} #contenthome h3{font-size: 180%; font-weight:100; color: #D30259; margin: 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} #contenthome h4{font-size: 100%; font-weight:bold; color: #333333; margin: 0px 0px 10px 0px; padding: 0px; font-family:Arial, Helvetica, sans-serif;} #contenthome a:link, #contenthome a:visited { color: #D30259; text-decoration: underline; } #contenthome a:hover, #contenthome a:active { color: #D30259; text-decoration: none; } /* CONTENTABOUT - THIS IS 866PX and is used for the about page only ---------------------------------------------------------------------------------------------------------------*/ #contentabout{ margin: 0 auto; width: 866px; padding: 25px 0px 20px 0px; } #contentabout .left { width: 490px;} #contentabout .right { width: 346px;} #contentabout .fullwidth {width: 866px; margin-top: 20px;} #contentabout .column1 {width: 279px; float:left;} #contentabout .column2 {width: 279px; float:left;} #contentabout .column3 {width: 278px; float:left;} #contentabout .column1 p {width: 264px;} #contentabout .column2 p {width: 264px;} #contentabout h1{font-size: 180%; font-weight:100; color: #D30259; margin: 0px 0px 5px 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} #contentabout h2{font-size: 140%; font-weight:100; color: #DF92BF; margin: 0px 0px 10px 0px; padding: 0px; font-family:Arial, Helvetica, sans-serif;} #contentabout h3{font-size: 180%; font-weight:100; color: #D30259; margin: 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} #contentabout h4{font-size: 180%; font-weight:100; color: #D30259; margin: 0px 0px 10px 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} #contentabout a:link, #contentabout a:visited { color: #D30259; text-decoration: underline; } #contentabout a:hover, #contentabout a:active { color: #D30259; text-decoration: none; } /* CONTENTTMBS - THIS IS 866PX and is used for the the monry box selection page only ---------------------------------------------------------------------------------------------------------------*/ #contenttmbs{ margin: 0 auto; width: 866px; padding: 25px 0px 20px 0px; } #contenttmbs .fullwidth {width: 866px;} #contenttmbs .column1, #contenttmbs .column2, #contenttmbs .column3, #contenttmbs .column4, #contenttmbs .column5, #contenttmbs .column6 {width: 124px; float:left; margin: 0px 0px 10px 0px;} #contenttmbs .column7 {width: 122px; float:left; margin: 0px 0px 10px 0px;} #contenttmbs span{display:none;} #contenttmbs h1{font-size: 180%; font-weight:100; color: #D30259; margin: 0px 0px 20px 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} a#btn_cupcake {display: block; width: 124px; height: 125px; background: url(/images/btn_cupcake.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_cupcake:hover {background: url(/images/btn_cupcake.jpg) no-repeat 0 -125px; outline:none;} a#btn_chocslice {display: block; width: 124px; height: 125px; background: url(/images/btn_chocslice.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_chocslice:hover {background: url(/images/btn_chocslice.jpg) no-repeat 0 -125px; outline:none;} a#btn_lolly {display: block; width: 124px; height: 125px; background: url(/images/btn_lolly.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_lolly:hover {background: url(/images/btn_lolly.jpg) no-repeat 0 -125px; outline:none;} a#btn_wellyboot {display: block; width: 124px; height: 125px; background: url(/images/btn_wellyboot.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_wellyboot:hover {background: url(/images/btn_wellyboot.jpg) no-repeat 0 -125px; outline:none;} a#btn_turtle {display: block; width: 124px; height: 125px; background: url(/images/btn_turtle.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_turtle:hover {background: url(/images/btn_turtle.jpg) no-repeat 0 -125px; outline:none;} a#btn_giantcupcake {display: block; width: 124px; height: 125px; background: url(/images/btn_giantcupcake.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_giantcupcake:hover {background: url(/images/btn_giantcupcake.jpg) no-repeat 0 -125px; outline:none;} a#btn_lemonslice {display: block; width: 122px; height: 125px; background: url(/images/btn_lemonslice.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_lemonslice:hover {background: url(/images/btn_lemonslice.jpg) no-repeat 0 -125px; outline:none;} a#btn_greedybug {display: block; width: 124px; height: 125px; background: url(/images/btn_greedybug.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_greedybug:hover {background: url(/images/btn_greedybug.jpg) no-repeat 0 -125px; outline:none;} a#btn_fablolly {display: block; width: 124px; height: 125px; background: url(/images/btn_fablolly.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_fablolly:hover {background: url(/images/btn_fablolly.jpg) no-repeat 0 -125px; outline:none;} a#btn_apple {display: block; width: 124px; height: 125px; background: url(/images/btn_apple.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_apple:hover {background: url(/images/btn_apple.jpg) no-repeat 0 -125px; outline:none;} a#btn_icecreamcone {display: block; width: 124px; height: 125px; background: url(/images/btn_icecreamcone.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_icecreamcone:hover {background: url(/images/btn_icecreamcone.jpg) no-repeat 0 -125px; outline:none;} a#btn_doughnut {display: block; width: 124px; height: 125px; background: url(/images/btn_doughnut.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_doughnut:hover {background: url(/images/btn_doughnut.jpg) no-repeat 0 -125px; outline:none;} a#btn_penguin {display: block; width: 124px; height: 125px; background: url(/images/btn_penguin.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_penguin:hover {background: url(/images/btn_penguin.jpg) no-repeat 0 -125px; outline:none;} a#btn_toadstool {display: block; width: 122px; height: 125px; background: url(/images/btn_toadstool.jpg) no-repeat 0 0; text-align: left; outline:none;} a#btn_toadstool:hover {background: url(/images/btn_toadstool.jpg) no-repeat 0 -125px; outline:none;} /* CONTENTSTOCKISTS - THIS IS 866PX and is used for the stockists page only ---------------------------------------------------------------------------------------------------------------*/ #contentstockists{ margin: 0 auto; width: 866px; padding: 25px 0px 20px 0px; } #contentstockists .left { width: 390px;} #contentstockists .right { width: 457px;} #contentstockists h1{font-size: 180%; font-weight:100; color: #D30259; margin: 0px 0px 5px 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} #contentstockists h2{font-size: 140%; font-weight:100; color: #DF92BF; margin: 0px 0px 10px 0px; padding: 0px; font-family:Arial, Helvetica, sans-serif;} #contentstockists h3{font-size: 180%; font-weight:100; color: #D30259; margin: 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} #contentstockists a:link, #contentstockists a:visited { color: #D30259; text-decoration: underline; } #contentstockists a:hover, #contentstockists a:active { color: #D30259; text-decoration: none; } /* CONTENTCONTACT - THIS IS 866PX and is used for the contact page only ---------------------------------------------------------------------------------------------------------------*/ #contentcontact{ margin: 0 auto; width: 866px; padding: 25px 0px 20px 0px; } #contentcontact .left { width: 490px;} #contentcontact .right { width: 346px;} #contentcontact h1{font-size: 180%; font-weight:100; color: #D30259; margin: 0px 0px 5px 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} #contentcontact h2{font-size: 140%; font-weight:100; color: #DF92BF; margin: 0px 0px 10px 0px; padding: 0px; font-family:Arial, Helvetica, sans-serif;} #contentcontact h3{font-size: 180%; font-weight:100; color: #D30259; margin: 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} #contentcontact h4{font-size: 180%; font-weight:100; color: #D30259; margin: 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} #contentcontact a:link, #contentcontact a:visited { color: #D30259; text-decoration: underline; } #contentcontact a:hover, #contentcontact a:active { color: #D30259; text-decoration: none; } /* CONTENTDETAIL - THIS IS 866PX and is used for the detail page only ---------------------------------------------------------------------------------------------------------------*/ #contentdetail{ margin: 0 auto; width: 866px; padding: 25px 0px 20px 0px; } #contentdetail .left { width: 406px;} #contentdetail .right { width: 430px;} #contentdetail h1{font-size: 180%; font-weight:100; color: #D30259; margin: 0px 0px 5px 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} #contentdetail h2{font-size: 140%; font-weight:100; color: #DF92BF; margin: 0px 0px 10px 0px; padding: 0px; font-family:Arial, Helvetica, sans-serif;} #contentdetail h3{font-size: 180%; font-weight:100; color: #D30259; margin: 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} #contentdetail h4{font-size: 180%; font-weight:100; color: #D30259; margin: 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif;} #contentdetail a:link, #contentdetail a:visited { color: #D30259; text-decoration: underline; } #contentdetail a:hover, #contentdetail a:active { color: #D30259; text-decoration: none; } /* --------------------------------------------Posts Content----------------- */ .post {padding-bottom:30px;} .post h2 {margin: 0px; padding: 0px;} .post h3 {font-size: 120%; font-weight:bold; color: #84C045;} .datestyle { margin: 0; padding: 0px 0px 10px 0px; color:#DF92BF; } .postthumb { float: left; margin: 0px 15px 5px 0px; padding-top:8px; } .postinfo { text-transform:uppercase; font-size: 80%; color: #DF92BF; border-top: 1px dotted #CCCCCC; padding-top: 3px; clear: left; } /* comment styles */ .comments-template{ margin: 10px 0 0; padding: 10px 0 0; } .comments-template ol{ margin: 0; padding: 0 0 15px; list-style: none; } .comments-template ol li{ margin: 10px 0px 0px 0px; line-height: 15px; padding: 5px 0px 0px 0px; border-bottom: 1px dashed #ccc; } .comments-template h2, .comments-template h3{ font-family: Georgia, Sans-serif; font-size: 16px; } .commentmetadata{ font-size: 12px; } .commentmetadata em{ color: #990000; font-weight: bold; } .comments-template p.nocomments{ padding: 0; } .comments-template textarea{ font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; } .commentlist li { list-style: none; list-style-type:none; } .commentlist li .avatar { float:left; background: #fff; border: 1px solid #bbb; padding:5px; margin: 0px 15px 0px 0px; list-style: none; list-style-type:none; } .comments-template cite { padding:0px; margin: 0px; font-style:normal; font-weight: bold; } .says{display:none;} .more-link{ padding: 5px; background: #FCF4F8; color: #DF92BF;} a.more-link:link {color: #DF92BF} /* unvisited link */ a.more-link:visited {color: #DF92BF} /* visited link */ a.more-link:active {color: #DF92BF} /* selected link */ a.more-link:hover {color: #DF92BF} /* mouse over link */ /* next previous */ .previous a {float:left;} .next a {float:right;} /* --------------------------------------------Sidebar Content----------------- */ /* Begin Lists Special stylized non-IE bullets Do not work in Internet Explorer, which merely default to normal bullets. */ html>body .entry ul { margin-left: 0px; padding: 0 0 0 30px; list-style: none; padding-left: 2px; text-indent: -2px; } html>body .entry li { margin: 7px 0 8px 2px; } .entry ul li:before, #sidebar ul ul li:before { content: "\00BB \0020"; } .entry ol { padding: 0 0 0 35px; margin: 0; } .entry ol li { margin: 0; padding: 0; } .postmetadata ul, .postmetadata li { display: inline; list-style-type: none; list-style-image: none; } #sidebar ul, #sidebar ul ol { margin: 0; padding: 0; } #sidebar ul li { list-style-type: none; list-style-image: none; margin-bottom: 15px; } #sidebar ul p, #sidebar ul select { margin: 5px 0 8px; } #sidebar ul ul, #sidebar ul ol { margin: 5px 0 0 2px; } #sidebar ul ul ul, #sidebar ul ol { margin: 0 0 0 2px; } ol li, #sidebar ul ol li { list-style: decimal outside; } #sidebar ul ul li, #sidebar ul ol li { margin: 3px 0 0; padding: 0; } #sidebar .widgettitle { font-size: 150%; font-weight:normal; color: #84C045; margin: 0px; padding: 0px; } /* End Entry Lists */ /* --------------------------------------------Width of drop downs----------------- */ select { width: 200px; font-size: 1em; } /* FOOTER IS 1294PX WIDE TO ACCOMODATE THE DOTTED LINE */ /* -------------------------------------------------------------------------------------------*/ #footer { width: 1000px; margin: 0 auto; padding: 25px 0px; background: url(/images/bgrpt_footerline.jpg) top left no-repeat; color: #D30259; } #footer p, #footer ul{ font-size: 85%;} #footer .left {width: 500px;} #footer .right {width: 500px; text-align:right;} #footer ul { list-style-type: none; margin: 0; padding: 0px 0px 5px 0px; } #footer ul li { display: inline; } #footer a:link, #footer a:visited { color: #D30259; text-decoration: none; } #footer a:hover, #footer a:active { color: #D30259; text-decoration: underline; }