/* Theme Name: Warpees Theme URI: http://liquidninedesigns.com Description: The exciting new website for Warpees. Version: 2.8 Author: Jacob Sowinski Author URI: http://liquidninedesigns.com */ * { margin: 0; padding:0; } body { font-size: 62.5%; font-family: "Comic Sans MS", Georgia, Arial, sans sarif; background: url(images/bg-bubbles.png) repeat-x top center #D4EFFB; margin: 0; padding: 0; } #page-wrap { width: 1200px; overflow: hidden; background:none; } h1 { font-size: 3.0em; font-weight:normal; color:#306; margin: 15px 0 20px 0; text-transform: lowercase; } h2 { font-size: 1.8em; font-weight:normal; color:#306; margin: 15px 0 20px 0; text-transform: lowercase; } h3 { font-size: 1.6em; font-weight:bold; color:#306; margin: 15px 0 20px 0; text-decoration: underline; text-transform: lowercase; } h4 { font-size: 1.8em; font-weight:normal; color:#306; margin: 0 0 20px 0; text-transform: lowercase; } .clear { clear: both } a img { border: none } a { color:#306; text-decoration: none; outline: none; } a:hover { color:#30C; } .hideme { display: none; } #header { height: 102px; width: 1200px; z-index: -999; } #header #logo { float: left; padding-left: 95px; padding: 23px 0 0 0; margin: 0 0 0 80px; } #header #twitter { float: right; padding: 0 260px 0 0; margin: -40px 0 0 0; } #main-content { width: 550px; background: #FFF; float: left; margin: 0 0 140px 80px; overflow: hidden; padding: 20px 30px; font-size: 1.3em; line-height: 1.5em; text-align: left; border: 2px solid #9DCEF5; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #main-content p { font-size: 1.1em; line-height: 1.5em; color: #333; text-align: left; font-family: "Comic Sans MS", Georgia, serif; margin: 0 0 15px 0; } #side-bar { width: 490px; float: left; margin: 19px 0 0 5px; overflow: hidden; } #menu { list-style:none; text-transform: lowercase; margin: 0 0 50px 0; } #menu li { font-size: 24px; margin: 0 0 0 20px; line-height: 35px;} #menu li a { color:#306; text-decoration:none; display: block; width: 180px; height: 40px; padding: 0 0 0 35px; background: none;} #menu li a:hover { background: url(images/sprite.png) left -40px no-repeat; } #menu li.current_page_item a { background: url(images/sprite.png) left top no-repeat; color: #FFF; } #warp-bg { height: 430px; width: 460px; background: url(images/warpee.png) bottom right no-repeat; } #twitter-box { width: 200px; margin: 0 0 0 20px; background: url(images/twitter-gradient.png) left top repeat-x #D6E8F6; font-size: 1.05em; font-family: "Comic Sans MS", Georgia, serif; line-height: 1.5em; color: #306; padding: 15px 15px 20px 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: #555 0 1px 7px; -webkit-box-shadow: #555 0 1px 7px; } #twitter-box img { float: right; margin: 0 0 10px 10px; } #blogroll { margin: 0 0 0 55px; list-style: outside; list-style:disc; } #blogroll li { padding: 15px 0; margin: -20px 0 0 0; } #blogroll li a { font-size:1.3em; } .dates { font-size: 9px; color: #999; margin: -15px 0 0 0; } .entry { margin: 0 0 15px 0; border-bottom: 1px dotted #AAA; } #footer { height: 108px; background: url(images/grass.png) repeat-x bottom; vertical-align: bottom; bottom: 0px; width: 100%; position: fixed; overflow: hidden; } /*** Adoption Center ***/ .preview { float: left; width: 196px; height: 276px; display: block; background: url(images/sprite-warpee-preview.jpg); text-indent: -9999px; border: 1px solid #999; } .desc { float: right; overflow: hidden; width: 330px; } .desc h4 { font-size: 3.0em; font-weight:light; color:#609; margin: 8px 0 20px 0; text-transform: lowercase; } .enlarge { display: none; float: left; clear: both; width: 93px; height: 32px; text-align: center; background: url(images/sprite-warpee-button.png) left -32px; line-height: 32px; margin: 10px 0 0 0; } .enlarge:hover { background-position: left top; cursor: pointer; } .enlarge a { color: #FFF; font: 12px; text-decoration: none; } .purchase { float: left; clear: right; width: 93px; height: 32px; text-align: center; background: url(images/sprite-warpee-button.png) right -32px; line-height: 32px; margin: 10px 0 0 16px; } .purchase:hover { background-position: right top; cursor: pointer; } .purchase a { color: #FFF; font: 12px; text-decoration: none; } /*** Kennel ***/ ul#warpee-roll { float: left; clear: both; margin: 30px 0 0 0; list-style: none; padding: 0; } ul#warpee-roll li { display: block; float: left; text-indent: -9999px; margin: 0 9px 15px 0; background: url(images/sprite-warpee-thumbs.jpg); } ul#warpee-roll li a { display: block; width: 56px; height: 80px; border: 1px solid #999; padding: 1px; text-indent: -9999px; } ul#warpee-roll li:hover a { display: block; width: 56px; height: 80px; border: 1px solid #609; padding: 1px; text-indent: -9999px; } #tommi { display: block; } #bandit { display: none; } #shinobi { display: none; } #ralph { display: none; } #jose { display: none; } #gabby { display: none; } #ace { display: none; } #tommi div.preview { background-position: 0 0; } #bandit div.preview { background-position: -200px 0; } #shinobi div.preview { background-position: -400px 0; } #ralph div.preview { background-position: -600px 0; } #jose div.preview { background-position: -800px 0; } #ace div.preview { background-position: -1000px 0; } #gabby div.preview { background-position: -1200px 0; } ul#warpee-roll li.tommi { background-position: 0 0; } ul#warpee-roll li.bandit { background-position: -60px 0; } ul#warpee-roll li.shinobi { background-position: -120px 0; } ul#warpee-roll li.ralph { background-position: -180px 0; } ul#warpee-roll li.jose { background-position: -240px 0; } ul#warpee-roll li.ace { background-position: -300px 0; } ul#warpee-roll li.gabby { background-position: -360px 0; } /*** Merchandise ***/ .merch-preview { float: left; width: 196px; height: 276px; display: block; background: url(images/sprite-merch-preview.png); text-indent: -9999px; border: 1px solid #999; } ul#merchandise-roll { float: left; clear: both; margin: 30px 0 0 0; list-style: none; padding: 0; } ul#merchandise-roll li { display: block; float: left; text-indent: -9999px; margin: 0 9px 15px 0; background: url(images/sprite-merch-thumbs.png); } ul#merchandise-roll li a { display: block; width: 56px; height: 80px; border: 1px solid #999; padding: 1px; text-indent: -9999px; } ul#merchandise-roll li:hover a { display: block; width: 56px; height: 80px; border: 1px solid #609; padding: 1px; text-indent: -9999px; } #keychains { display: block; } #beanies { display: none; } #scarfs { display: none; } #blankets { display: none; } #pillows { display: none; } #keychains div.merch-preview { background-position: 0 0; } #beanies div.merch-preview { background-position: -200px 0; } #scarfs div.merch-preview { background-position: -400px 0; } #blankets div.merch-preview { background-position: -600px 0; } #pillows div.merch-preview { background-position: -800px 0; } ul#merchandise-roll li.keychains { background-position: 0 0; } ul#merchandise-roll li.beanies { background-position: -60px 0; } ul#merchandise-roll li.scarfs { background-position: -120px 0; } ul#merchandise-roll li.blankets { background-position: -180px 0; } ul#merchandise-roll li.pillows { background-position: -240px 0; } /*** Contact Form ***/ #main-content #contact-area p { margin: 0; } #contact-area { width: 560px; margin-top: 25px; } #contact-area input, #contact-area textarea { padding: 5px; width: 430px; font-family: "Comic Sans MS", Arial, sans-serif; color: #555; font-size: 1.2em; margin: 0 0 10px 0; border: 2px solid #DDD; } #contact-area textarea { height: 90px; margin: -20px 0 0 0; } #contact-area textarea:focus, #contact-area input:focus { border: 2px solid #609; } #contact-area input.submit-button { width: 100px; float: right; font-family: "Comic Sans MS", Arial, sans-serif; background: #609; color: #FFF; cursor: pointer; margin: 5px 0 0 0; } #contact-area input:hover.submit-button { background: #306; cursor: pointer; margin: 5px 0 0 0; } #contact-area label { float: left; text-align: right; margin-right: 15px; width: 100px; padding-top: 5px; font-size: 1.2em; } /*** Custom Form ***/ #custom-warpee-form { float: left; width: 550px; font: 10px Arial, Tahoma, Verdana; color: #306; } #custom-warpee-form h3 { font-weight: normal; font-size: 22px; color:#777; margin: 6px 0 10px 0; text-decoration: none; text-transform: lowercase; border-bottom: 1px dotted #AAA; } #custom-warpee-form ul { list-style: none; float: left; clear: both; } #custom-warpee-form ul li { float: left; display: block; width: 75px; height: 100px; text-align: center; background: url(images/sprite-form.png) 0 0 no-repeat; margin: 0 16px 10px 0; overflow: hidden; } #custom-warpee-form span { float: right; font: italic 9px Verdana, Geneva, sans-serif; color: #777; margin: 0 0 5px 0; } #custom-warpee-form span.notation { float: left; margin: -5px 0 10px 0; color: #609; } #custom-warpee-form input { margin: 70px 0 0 0; } #custom-warpee-form div { float: left; clear: both; margin: 0 0 30px 0; width: 550px; } #custom-warpee-form p { font-size: 1.2em; color: #306; margin: 0; padding: 0; } #custom-warpee-form label { float: left; width: 300px; padding-top: 5px; font: 1.2em "Comic Sans MS", Arial, sans-serif; color: #306; } #custom-warpee-form input.collect-info, #custom-warpee-form textarea.collect-info { padding: 5px; width: 300px; font: 1.2em "Comic Sans MS", Arial, sans-serif; color: #555; margin: 0 0 10px 0; border: 2px solid #DDD; } #custom-warpee-form textarea:focus, #custom-warpee-form input:focus { border: 2px solid #609; } #custom-warpee-form input.submitbutton { width: 100px; float: left; clear: both; padding: 6px; font: 1.6em "Comic Sans MS", Arial, sans-serif; background: #609; color: #FFF; cursor: pointer; margin: 5px 0 0 0; } #custom-warpee-form input:hover.submitbutton{ background: #306; cursor: pointer; margin: 10px 0 0 0; } #custom-warpee-form a { text-decoration: underline; } .getup { margin: -65px 0 0 0; } #custom-warpee-form #custom-warpee-form #custom-warpee-form ol { margin: 0 0 0 20px; padding: 0 0 10px 0; } #custom-warpee-form ol li { font: 1.2em "Comic Sans MS", Arial, sans-serif; margin: -60px 0 0 20px; } #custom-warpee-form ol li label { margin: 0 5px 0 5px;} #custom-warpee-form li.empty { background-position: -9999px -9999px; } #custom-warpee-form li.other { background-position: 0px -890px; } #custom-warpee-form li.round { background-position: 0px -390px; } #custom-warpee-form li.oval { background-position: -150px -390px; } #custom-warpee-form li.square { background-position: -450px -390px; } #custom-warpee-form li.rectangle { background-position: -300px -390px; } #custom-warpee-form li.roundpeak { background-position: -75px -390px; } #custom-warpee-form li.ovalpeak { background-position: -228px -390px; } #custom-warpee-form li.squarepeak { background-position: -525px -390px; } #custom-warpee-form li.rectanglepeak { background-position: -375px -390px; } #custom-warpee-form li.straightup-l { background-position: -150px -90px; } #custom-warpee-form li.bear-l { background-position: -600px -95px; } #custom-warpee-form li.curvedout-l { background-position: -600px 5px; } #custom-warpee-form li.monkey-l { background-position: 0px 0px; } #custom-warpee-form li.girafffe-l { background-position: -150px 0px; } #custom-warpee-form li.floppy-l { background-position: -300px 0px; } #custom-warpee-form li.upbentout-l { background-position: -450px 0px; } #custom-warpee-form li.horn-l { background-position: 0px -190px; } #custom-warpee-form li.puppy-l { background-position: -300px -90px; } #custom-warpee-form li.upbentin-l { background-position: -450px -90px; } #custom-warpee-form li.wavyfloppy-l { background-position: 0px -95px; } #custom-warpee-form li.straightup-r { background-position: -225px -90px; } #custom-warpee-form li.bear-r { background-position: -675px -95px; } #custom-warpee-form li.curvedout-r { background-position: -675px 5px; } #custom-warpee-form li.monkey-r { background-position: -75px 0px; } #custom-warpee-form li.girafffe-r { background-position: -225px 0px; } #custom-warpee-form li.floppy-r { background-position: -375px 0px; } #custom-warpee-form li.upbentout-r { background-position: -525px 0px; } #custom-warpee-form li.horn-r { background-position: -75px -190px; } #custom-warpee-form li.puppy-r { background-position: -375px -90px; } #custom-warpee-form li.upbentin-r { background-position: -525px -90px; } #custom-warpee-form li.wavyfloppy-r { background-position: -75px -95px; } #custom-warpee-form li.twoholebutton-l { background-position: -75px -295px; } #custom-warpee-form li.fourholebutton-l { background-position: -225px -295px; } #custom-warpee-form li.x-l { background-position: -375px -295px; } #custom-warpee-form li.eyepatch-l { background-position: -225px -190px; } #custom-warpee-form li.twoholeeyelashes-l { background-position: -450px -295px; } #custom-warpee-form li.fourholeeyelashes-l { background-position: -600px -290px; } #custom-warpee-form li.twoholebutton-r { background-position: -150px -295px; } #custom-warpee-form li.fourholebutton-r { background-position: -300px -295px; } #custom-warpee-form li.x-r { background-position: -375px -295px; } #custom-warpee-form li.eyepatch-r { background-position: -150px -190px; } #custom-warpee-form li.twoholeeyelashes-r { background-position: -525px -295px; } #custom-warpee-form li.fourholeeyelashes-r { background-position: -675px -290px; } #custom-warpee-form li.eyespot { background-position: 3px -305px; } #custom-warpee-form li.smile-mouth { background-position: 0px -790px; } #custom-warpee-form li.straight-mouth { background-position: -225px -790px; } #custom-warpee-form li.frown-mouth { background-position: -300px -790px; } #custom-warpee-form li.smallopensmile-mouth { background-position: -376px -794px; } #custom-warpee-form li.largeopensmile-mouth { background-position: -452px -794px; } #custom-warpee-form li.o-mouth { background-position: -526px -793px; } #custom-warpee-form li.x-mouth { background-position: -600px -790px; } #custom-warpee-form li.wavy-mouth { background-position: -675px -790px; } #custom-warpee-form li.v-mouth { background-position: -675px -390px; } #custom-warpee-form li.rectangle-mouth { background-position: -75px -790px; } #custom-warpee-form li.beak-mouth { background-position: -150px -790px; } #custom-warpee-form li.armsatside { background-position: 0px -590px; } #custom-warpee-form li.wavingright { background-position: -675px -590px; } #custom-warpee-form li.wavingleft { background-position: -150px -590px; } #custom-warpee-form li.armsouttoside { background-position: -525px -590px; } #custom-warpee-form li.discoright { background-position: -75px -590px; } #custom-warpee-form li.discoleft { background-position: -375px -590px; } #custom-warpee-form li.bird { background-position: -450px -590px; } #custom-warpee-form li.pumpkin { background-position: -600px -590px; } #custom-warpee-form li.saltshaker { background-position: -225px -590px; } #custom-warpee-form li.bat { background-position: -300px -590px; } #custom-warpee-form li.armscurvedup { background-position: 0px -690px; } #custom-warpee-form li.armsstraightup { background-position: -75px -690px; } #custom-warpee-form li.longsleeve { background-position: -225px -690px; } #custom-warpee-form li.shortsleeve { background-position: -300px -690px; } #custom-warpee-form li.tanktop { background-position: -375px -693px; } #custom-warpee-form li.bikinitop { background-position: -150px -690px; } #custom-warpee-form li.pants { background-position: -450px -690px; } #custom-warpee-form li.shorts { background-position: -525px -690px; } #custom-warpee-form li.bikini { background-position: -600px -690px; } #custom-warpee-form li.skirt { background-position: -675px -690px; } #custom-warpee-form li.differentfeet { background-position: -525px -490px; } #custom-warpee-form li.x-laces { background-position: -600px -490px; } #custom-warpee-form li.chucks { background-position: -675px -490px; } #custom-warpee-form li.ipod { background-position: -148px -494px; } #custom-warpee-form li.guitar { background-position: -225px -490px; } #custom-warpee-form li.flower { background-position: -75px -490px; } #custom-warpee-form li.bag { background-position: -2px -491px; } #custom-warpee-form li.tail { background-position: -300px -490px; } #custom-warpee-form li.patch { background-position: -375px -490px; }