/* Site Name: Witchfactory Productions Ltd. Theme URI: http://www.witchfactory.com Description: Website styles for Witchfactory Productions website Version: 1.0 Author: Lauren Scime Author URI: http://witchfactory.com The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php */ /*Global Reset + Reload Styles -----------------------------------------------------------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: arial, helvetica, sans-serif; vertical-align: baseline; } :focus { outline: 0;} body { line-height: 1; color: #eee; background: #000 url(http://witchfactory.com/img/bkgd-wallpaper2.jpg) 0 0 repeat; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a img {border: none !important; } p {line-height: 1.3; } a:link, a:visited {color: #990066; } a:hover, a:active {color: #069; } .right {text-align: right; } #shadow {width: 1050px; margin: 0 auto; background: url(http://witchfactory.com/img/shadow.png) 0 0 repeat-y; } #wrap {background: #000; min-height: 600px; width: 1024px; margin: 0 auto; /*border-right: 2px solid #000; border-left: 2px solid #000;*/ } /* NAVIGATION MENU STYLES ----------------------------------------------------------------------------------------------*/ /* Reset */ #menu-container { width: 600px; float: right; clear: none; margin-right: 0px; z-index: 1000; position: relative; } #menu * { margin: 0px; padding: 0px; list-style-type: none; text-decoration: none; } div#menu { position:relative;} /* Geometrical arrangement */ #menu ul.menu li { display: inline-block; height: 46px; position: relative; } #menu ul.menu li div { position: absolute; top: 33px; left: 0px; } *:first-child+html #menu ul.menu li div { top: 40px; } /* Escaping style for lower levels */ #menu ul.menu li div ul li { display: block; float: none; width: auto; height: auto; } /* Horizontal sliding doors */ #menu ul.menu li a { display: inline-block; margin: 10px 10px 10px 10px; font-size: 20px; color: #fff; } #menu ul.menu li a { /*padding-left: 0px; display: inline-block;*/ height: 31px; line-height: 31px; cursor: pointer; } *:first-child+html #menu ul.menu li a {display: inline-block; height: auto; } #menu ul.menu li:hover a { background-position: left -54px; } #menu ul.menu li:hover a span { background-position: right -81px; } #menu ul.menu li.active a { background-position: left 0px; } /*#menu ul.menu li.active a span { color: #FFFFFF; background: #990066; -moz-border-radius: 10px; -webkit-border-radius: 10px; }*/ /* Escape Horizontal doors */ #menu ul.menu li div ul li a { display: block; padding: 0 0 5px 0; margin: 0px; background: none; } #menu ul.menu li div ul {margin-left: 10px; } #menu ul.menu li div ul { margin-top: 5px; } #menu ul.menu li div ul li a span { display: block; padding: 0px; background: none; height: auto; width: 185px; padding: 10px 5px 10px 9px; white-space: normal; } /* Vertical sliding doors */ #menu ul.menu li div ul { padding: 0; } /* Main header line */ #menu { height: 30px; padding-left: 44px; margin-bottom: 0px; margin-top: -60px; } /* Text shadow */ #menu li a span { padding: 5px 14px !important; } #menu li:hover>a>span { color: #fff; background: #990066; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #menu li:hover>a.parent>span {-moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0;} /* Fonts */ #menu ul.menu li a span { font-family: Trebuchet MS, Verdana, sans-serif; font-size: 16px; font-weight: 600; } #menu ul.menu li div ul li a span { color:#ccc; font-family: Trebuchet MS; font-size: 15px; font-weight: 400; } /* Menu logic */ #menu li>div { visibility: hidden; } #menu li:hover>div { visibility: visible; } /* Hover Effect on Submenus */ #menu ul.menu ul li {background: url(http://witchfactory.com/img/subnav-bkgd.jpg) 0 0 repeat-x; } #menu ul.menu ul li:hover { background: url(http://witchfactory.com/img/subnav-hover.jpg) 0 0 repeat-x; color: #fff; } /* Lines between li */ /* #menu ul.menu ul a.parent { margin-right: -1px; } */ #menu ul.menu a.on {background: #990066; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #menu ul.menu ul li a.on {background: url(http://witchfactory.com/img/subnav-hover.jpg) 0 0 repeat-x; -moz-border-radius: 0; -webkit-border-radius: 0; } /* ie7 */ #menu ul.menu li { *zoom: 1; *display: inline; } #menu ul.menu li a { *zoom: 1; *display: inline; } #menu ul.menu li a span { *zoom: 1; *display: inline; } *:first-child+html #menu ul.menu li a span {padding-bottom: 5px; } /* IE6 */ #menu ul.menu li div ul { background: #3a3438; border-top: 5px solid #990066; border-bottom: 5px solid #990066; border-left: 2px solid #990066; border-right: 2px solid #990066; } #menu ul.menu li a:hover { _background-position: left -54px; } #menu ul.menu li a:hover span { background-position: right -81px; color: #FFFFFF; } #menu ul.menu li li a:hover span { color:#fff; } /* Menu logic for IE6 */ #menu div { _display: none; } #menu div li:hover div { _visibility: visible;_display: block; } #menu div li:hover li:hover div { _display: block; } #menu div li:hover li:hover li:hover div { _display: block; } /* END MENU STYLES */ #content {padding: 0 0 20px 0; background:#000; clear: both; } #content:after {clear:both;content:".";display:block;height:0;visibility:hidden;} /* HOMEPAGE PROJECT SHOWCASE */ .sliderwrapper{ /*z-index: 1; position: relative;*/ /*leave as is*/ border-bottom-width: 6px; width: 1024px; /*width of featured content slider*/ min-height: 370px; overflow: visible; } * html .sliderwrapper {height: 370px; } .sliderwrapper .contentdiv {width: 1004px; padding: 20px 10px; /*background:#272e32; */ background: #171919; margin-bottom: 30px; /*leave as is position: absolute; left: 0; top: 0; leave as is*/ filter:progid:DXImageTransform.Microsoft.alpha(opacity=100); -moz-opacity: 1; opacity: 1; } * html .sliderwrapper .contentdiv {height: 200px; } .contentdiv {margin-bottom: 20px; } .contentdiv img {border: 15px solid #1f2022; -moz-border-radius: 10px; webkit-border-radius: 10px; float: left; width: 500px; margin-right: 20px; } .contentdiv h1 {color: #990066; font: 24pt "Courier New", Courier, monospace bold; font-weight: bold; text-align: left; } .contentdiv h1 .introsubtext {font: 22pt helvetica, arial, sans-serif; line-height: 1; } .sliderwrapper .contentdiv:after, .sliderwrapper:after, .pagination:after {clear:both;content:".";display:block;height:0; visibility:hidden;} #wrapper #content .sliderwrapper .contentdiv #featureimg {margin-left: 20px !important;} .contentdiv .projtext {line-height: 1.4; float: left; clear: none; width: 400px !important; } .contentdiv .projtext h1 {font-size: 30pt; } .contentdiv .projtext p { width: 400px; margin-right: 0; margin-left: 0; font-size: 15pt; margin-top: 20px; } .pagination { padding-left: 15px; /*z-index: 12;*/ padding-top: 40px; background: #272e32; padding-bottom: 20px; } .pagination a.toc { border: 10px solid #1f2022; -moz-border-radius: 10px; webkit-border-radius: 10px; margin-right: 10px; width: 168px; height: 103px; display: block; float: left; clear: none; padding: 0; } .pagination img {margin: 0; padding: 0; } .pagination img.last {margin-right: 0px; } .pagination a.toc:hover, .pagination a.selected {border: 10px solid #990066;} #row3 {margin-top: 40px; width: 1024px; } #intro {width: 500px; float: left; clear: none; margin: 0 20px 0px 30px; } #intro h1 {color: #990066; font: 22pt "Courier New", Courier, monospace bold; font-weight: bold; margin-bottom: 15px; } #intro p {line-height: 1.5; width: 500px; margin: 10px 0 10px 0;} #intro p.leadtext {font-size: 15pt; font-weight: bold; } /*HOMEPAGE SOCIAL LINKS ------------ */ #social {margin: 30px 0; padding: 10px 20px; background: #111; border: 5px solid #222; } #social:after {clear:both;content:".";display:block;height:0;visibility:hidden;} #social p {width: 48px; height: 48px; display: block; float: left; clear: none; margin-right: 20px; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } #social .connect {margin-top: 10px; font-size: 20pt; width: 500px; margin-right: 0; margin-bottom: 10px; padding-bottom: 0; line-height: .2; color: #eee; font-family: "Courier New", Courier, monospace; height: 25px; } #blogteaser { width: 414px; float: right; margin-right: 20px; border: 5px solid #637b7d; } #blogheader { background: url(http://witchfactory.com/img/blogheaderbkgd.jpg) 0 0 repeat-x; width: 414px; } #blogheader h1 {font: 24pt "Courier New", Courier, monospace; font-weight: bold; color: #99c9cc; display: block; background: url(http://witchfactory.com/img/rss.png) 2px 5px no-repeat; padding: 13px 0 13px 60px; margin: 0 10px 0px 10px; } #blogteaser .entry {background: #354142 url(http://witchfactory.com/img/entry-bkgd.jpg) 0 0 repeat-x; padding: 20px 10px;} #blogteaser .entry h2 {color: #99c9cc; font-size: 20px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; padding-left: 0; padding-right: 0; } #blogteaser .entry h2 a {margin: 0; padding: 0; text-decoration: none; font-weight: bold; font-style: normal; color: #99c9cc !important; } #blogteaser .entry h2 a:hover, #blogheader .entry h2 a:active { color: #990066 !important; } #blogteaser .entry p {clear: both; margin-left: 10px; margin-right: 10px;} #blogteaser .entry p a:link, #blogteaser .entry a:visited {color: #990066; text-decoration: none;} #blogteaser .entry p a:hover, #blogteaser .entry a:active {color: #09C; text-decoration: none;} #blogteaser:after {clear:both;content:".";display:block;height:0;visibility:hidden;} /*Newsletter Signup */ #newsletterbox {width: 971px; background: #3c1630 url(http://witchfactory.com/img/bracket.png) center center no-repeat; float: left; clear: both; display: block; margin: 30px 15px; border: 10px solid #1f0b18; } #newsprompt {width: 460px; float: left; clear: none; margin: 20px 0 0 30px; } #newsprompt p {line-height: 1.5; color: #c9b5c3; font-size: 16pt; } .newsletterhead {font: 24pt "Courier New", Courier, monospace; font-weight: bold; margin-bottom: 15px; margin-top: 35px; } #signupform {width: 420px; float: right; clear: none; margin: 20px 0 20px 0; } .home #signupform .mc_custom_border_hdr {display: none; } .mc_input, .mc_merge_var {margin: 3px 0 10px 20px; float: left; clear: left; } .mc_input {width: 300px; size: 50; margin-left: 0px;} #mc-indicates-required {font-size: 9pt; margin-left: 10px; } .mc_signup_submit {width: 80px !important; float: left; clear: left; } #mc_unsub_link {visibility: hidden; } .button {width: 100px !important; font-size: 12pt; float: left; clear: none; margin-left: 0px; } #mc_message {width: 300px; margin: 0 0 10px 10px; } .mc_success_msg { display: block; margin-bottom: 10px; } #mc-indicates-required {float: left; clear: both; display: block; width: 200px; } /*Begin Footer styles ----------------------------------------------------------------------------------------------*/ #footer {min-height: 200px; background: #1F2022 url(http://witchfactory.com/img/witchfactory-logo-sm.png) top right no-repeat; clear: both; margin: 0 auto 0 auto; width: 994px; padding: 15px; } #footer .footernav {width: 500px; float: left; clear: none; } #footer .footernav li {display: inline; margin-right: 10px; } #footer .footernav li a {text-decoration: none; } #footer .footernav li a:hover, #footer .footernav li a:active {color: #09C; } #footer .copy {text-align: right; width: 400px; color: #990066; float: right; clear: none; padding-right: 150px; margin-top: 20px; font-size: 9pt; } /* SECTION PAGE STYLES ----------------------------------------------------------------------------------------------*/ #bodysection #content { min-height: 500px; } /*SUBNAV MENU*/ #sectionnav ul {width: 230px; float: right; clear: none; background: #990066; padding: 5px 1px; margin: 80px 15px 10px 0; } #sectionnav ul li a:link, #sectionnav ul li a:visited {background: url(http://witchfactory.com/img/subnav-bkgd.jpg) 0 0 repeat-x; display: block; color: #fff; padding: 12px 20px 7px 20px; text-decoration: none; } #sectionnav ul li {border-bottom: 1px solid #222; } #sectionnav ul li a:hover, #sectionnav ul li a:active {background: url(http://witchfactory.com/img/subnav-hover.jpg) 0 0 repeat-x; } #sectionnav ul li.current_page_item a {background: url(http://witchfactory.com/img/subnav-on.jpg) 0 0 repeat-x; } #sectionnav ul li a.projects {background: url(http://witchfactory.com/img/subnav-proj.jpg) 0 0 repeat-x; } #sectionnav ul li {border-bottom: 1px solid #222; } /*SECTION CONTENT*/ #content #sectioncontent:after {clear:both;content:".";display:block;height:0;visibility:hidden;} #content #sectioncontent { margin-bottom: 20px; } #content #sectioncontent h1 {color: #990066; font: 30pt "Courier New", Courier, monospace; font-weight: bold; margin: 0 15px 10px 30px; float: left; clear: none; } #content #sectioncontent h1 span {color: #eee; font: 24pt Trebuchet MS, Helvetica, Arial, sans-serif; font-weight: normal; } #content h2 {color: #d0cfb3; font: 18pt Helvetica, sans-serif; font-weight: normal; float: left; clear: left; margin: 0px 15px 10px 30px; font-style: italic; } #content #sectioncontent p { float: left; clear: left; margin: 10px 15px 10px 30px; width: 720px; text-align: justify; line-height: 1.5; } #content #sectioncontent h2 {width: 720px; } #content #sectioncontent h3 {color: #906; font: 15pt Helvetica, Sans-serif; font-weight: bold; float: left; clear: none; width: 720px; margin: 10px 15px 5px 30px;} #status p {border: 2px solid #212; background: #111; padding: 10px; width: 700px !important; font-size: 12px; } #content #sectioncontent img {float: left; clear: none; margin: 0px 15px 10px 20px; border: 10px solid #111; -moz-border-radius: 10px; webkit-border-radius: 10px } #projectcontainer {width: 720px; float: left; clear: none; } #sectionnav ul li.pagenav h2 {display: none; } /* POP UP DIV STYLES -----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .pop {position: absolute; z-index: 20000 !important; left: 50%; display: none; background: #fff; top: 300px; } #overlay {background: #033334; opacity: .80; position: absolute; top: 0; left: 0; width: 100%; z-index: 1500; display: none; } #overlay:after {content: "."; clear: both; height: 0; visibility: hidden; display: block;} * html #overlay {filter:alpha(opacity=50); z-index: 1;} *:first-child+html #overlay {filter:alpha(opacity=50); z-index: 15000;} .close {width: 22px; height: 22px; float: right; clear: none; margin: 5px ; display: block; background: url(images/close-button.jpg) 0 0 no-repeat; } * html .close {margin-right: 5px; } .close:hover {background: url(images/close-button-on.jpg) 0 0 no-repeat; } .pop {width: 600px; margin-left: -300px; background: #4C721D; border: 2px solid #4C721D; padding: 20px; } .innerPop {background: #fff; padding: 5px; border: 3px solid #ff0066; } .innerPop p {margin: 20px; } /* WEBLOG STYLES -----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #content #sectioncontent .entry {width: 620px; float: left; clear: left; margin: 0px 0 20px 0px; } #content #sectioncontent .post h1, #content #sectioncontent .entry h1 {font-size: 22pt !important; font-family: "Courier New", Courier, monospace; font-weight: bold; font-style: normal; border-bottom: 1px solid #990066; width: 620px; display: block; margin: 20px 0 0px 0; } #content #sectioncontent .post h1 a, #content #sectioncontent .entry h1 a {text-decoration: none; } #content #sectioncontent .post p {clear: both; text-align: justify; margin: 10px 0 0px 0; padding: 0; width: 620px !important; } #content #sectioncontent .post .postmetadata small {display: block; width: 615px; clear: left; border-bottom: 1px solid #990066; padding: 0 5px 10px 0px; font-size: 9pt; margin-top: 0px; } #content #sectioncontent .boxedup small {display: block; width: 100%; clear: left; border: none; padding: 0px 5px 0 0; font-size: 9pt; } #content #sectioncontent #postcontainer {width: 620px; float: left; clear: none; margin: 20px 0 20px 30px;} #content #sectioncontent .post img, #content #sectioncontent .entry img {margin: 10px 0; border: 0; } /* Comment Form Styles */ .boxedup {background: #1F2022; border: 1px solid #333; padding: 0; width: 620px; float: left; clear: left; margin: 20px 0px; } .boxedup:after {content: "."; clear: both; height: 0; visibility: hidden; display: block;} #commentform p {margin-left: 30px !important; margin-right: 30px !important; } .boxedup p {margin-left: 30px; margin-right: 30px;} select {width: 140px;} #content #sectioncontent .boxedup h3#respond, #content #sectioncontent .boxedup h3#comments {margin: 30px 0px 25px 30px; color: #990066; font-size: 20pt; border-bottom: 1px solid #990066; width: 560px; } #commentform input {width: 170px; padding: 2px; margin: 5px 5px 1px 0px; border: 1px solid #ccc; background: #fafafa;} #commentform input:focus {border: 1px solid #aaa; background: #f6f6f6;} #commentform textarea {width: 437px; padding: 2px; border: 1px solid #ccc; background: #fafafa; margin-left: 0px;} #commentform textarea:focus {border: 1px solid #aaa; background: #f6f6f6;} #commentform #submit {border: 1px solid #ccc; color: #fff; background: #990066; vertical-align: top; margin-left: 0px; margin-bottom: 20px; } #commentform #submit:hover {border: 1px solid #aaa; background: #069;} .comment_no {padding-top: 5px; float: left; font-size: 3.5em; color: #eee; display: none; margin-left: 10px; } .commentlist {padding: 0; margin: 5px 0 5px -40px; list-style: none; margin-left: 0px;} .commentlist li {clear: both; list-style: none outside !important; padding: 15px 0px 15px 0px !important; background: transparent; } .boxedup .commentlist li:after{content: "."; clear: both; height: 0; visibility: hidden; display: block;} .comment-text {margin: 0 30px 15px 30px !important; font-size: 12pt; } .boxedup .commentlist li .commentauth {color: #333; margin: 0px 30px 0 30px !important; font-size: 10pt; } .boxedup .commentlist li {margin-top: 0; margin-bottom: 0; } .boxedup .commentlist li.alt {background: #222;} .alt {clear: both;} #sidebar { width: 300px; float: right; clear: none; background: transparent; min-height: 200px; margin: 30px 30px 30px 0; padding: 20px 10px; color: #fff; } #sidebar p {width: 260px !important; } #sidebar .widget {margin: 20px 0; } #sidebar ul li {margin: 20px 0 30px 0px; } #content #sectioncontent #sidebar .widgettitle {float: none; font-size: 20px; color: #ddd; font-style: normal; margin: 0 0 10px 0; border-bottom: 1px solid #ddd; width: 300px; } #sidebar ul li.widget_search div {margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 20px; } .widget_search:after {content: "."; clear: both; height: 0; visibility: hidden; display: block;} .widget_search input#s {width: 145px; } /*Additional text font and other touchup styles */ #content p span.subhead {color: #990066; font: 13pt Arial, Helvetica, sans-serif; font-weight: bold; } #sidebar #mailchimp-widget div input {margin: 2px 0 5px 0 !important; width: 300px !important;} #sidebar #mailchimp-widget div .mc_signup_submit .button {width: 80px !important; margin-bottom: 20px !important; } #sidebar ul li ul li {margin-bottom: 10px !important;} .widgettitle a {text-decoration: none; } /*IMAGE STYLES */ #content #sectioncontent .page .entry img {margin-left: 30px; border: 5px solid #1F2022; -moz-border-radius: 5px; webkit-border-radius: 5px; } #content #sectioncontent .post img, #content #sectioncontent .entry img.alignleft {margin: 5px 10px 10px 0; float: left; clear: none; border: none; -moz-border-radius: 0; webkit-border-radius: 0; } #content #sectioncontent .post img, #content #sectioncontent .entry img.alignright { float: right; clear: none; margin: 5px 0 10px 10px !important; border: none; -moz-border-radius: 0; webkit-border-radius: 0; } /* SLOPPY HACK FOR MENU ON CONTACT PAGE -------*/ .page-id-44 #sectionnav {display: none; } .page-id-44 .entry, .page-id-44 #post {width: 1000px !important; } .column {width: 450px !important; float: left !important; clear: none !important; margin-right: 20px; } .column p, .column h3, .column h2 {width: 420px !important; text-align: left !important;} /*IE6 HACKS MOTHER FUCKER GODDAMMIT ------*/ * html #blogteaser {width: 350px; } /*IE7 Hacks */ *:first-child+html #blogteaser { width: 425px; } *:first-child+html #blogheader {width: 425px; } *:first-child+html #social .connect { height: 45px; line-height: 1; } *:first-child+html #footer {margin-top: 40px; }