/* Theme Name: bluesky gallery Theme URI: http://blueskygallery.org Description: Blue Sky Gallery theme February 2010 Version: 1.0 Author: Brandon Sorg Author URI: http://brandonsorg.com */ @import "lib/css/reset.css"; /*could potentially use these - keep ie as conditionals */ /* @import "lib/css/typography.css"; */ /* @import "lib/css/layout.css"; */ /***************************************************** site.com - style.css *****************************************************/ /* IMPORTS */ @import url("lib/css/reset.css"); @import url("lib/css/fonts.css"); /* maybe just include in here, one less request */ /* MAIN / LAYOUT ----------------------------------------------- */ body { background-color: #fff; color: #666; font-size: 12px; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 18px; /* remove? */ } /* ### THEME SWITCHER ### */ ul#themeswitcher { position: absolute; top: 0px; right: 0px; background-color: #eee; font-size: 10px; text-transform: uppercase; line-height: 12px; } #themeswitcher li { margin: 0px; padding: 6px; } #themeswitcher li a { color: #777; padding: 4px 4px 2px 4px; } #themeswitcher li a:hover { color: #777; background-color: #ddd; } div#themeswitcher-new { position: absolute; top: 0px; left: 0px; padding: 6px; text-transform: uppercase; background-color: #eee; color: #777; font-size: 10px; } div#themeswitcher-new { display: none; } /* leave this ON for OLD theme, OFF for NEW theme */ /* ### THEME SWITCHER ### */ #container { width: 950px; margin: 15px auto 0px auto; padding: 0 0 30px 0; position: relative; /* helps with positioning of elements within and z-index */ } #content { float: right; margin: 0 40px 0 0; width: 630px; } /* header */ #header { height: 110px; background: transparent url(lib/imgs/barVertical.jpg) no-repeat right 50px; } h1 a { /* for image replacement */ text-indent: -5000px; width: 170px; height: 161px; display: block; background: transparent url(lib/imgs/siteLogo.png) no-repeat; position: absolute; top: 0px; left: 0px; } h1 a:active { position: absolute; top: 2px; } /* gives click feel */ #header p { text-transform: uppercase; color: #3dbcec; font-size: 22px; position: absolute; right: 0px; top: 15px; } /* sidebar */ #sidebar { margin: 90px 0 0 0; letter-spacing: -.5px;} div.barHorizontal { /* inserted via jquery */ height: 7px; width: 56px; background-color: #3dbcec; margin: 0 0 16px 0; } #sidebar p { color: #666; line-height: 18px; } #sidebar .sidebarBox { margin: 0 0 30px 0; } /*sidebar buttons */ .button { text-indent: -5000px; display: block; margin: 25px 0 0 0; } a#buttonSearch { width: 75px; height: 38px; background: transparent url(lib/imgs/button-search.png) no-repeat; } a#buttonSearch:hover { background-position: 0px 0px; } a#buttonJoinNow { width: 85px; height: 38px; background: transparent url(lib/imgs/button-joinNow.png) no-repeat; } a#buttonBuyNow { width: 85px; height: 38px; background: transparent url(lib/imgs/button-buyNow.png) no-repeat; } /* @put all buttons on one sprite? */ /* footer */ #footer { background: transparent url(lib/imgs/footerGradient.jpg) repeat-x; height: 130px; width: 980px; margin: 0 auto; position: relative; bottom: 0px; } #footer .wrapper { width: 950px; margin: 0 auto; height: 130px; position: relative; /* needed for subsequent positioning */} /* trying this technique */ #footer #bsgLogoSmall { margin: 18px 0 0 0; } #footer ul#footerNav { position: absolute; top: 50px; left: 115px; font-size: 14px; } ul#footerNav li { display: inline; margin: 0 18px 0 0; } ul#footerNav li a { color: #fff; } #footer p { color: #333; font-size: 12px; line-height: normal; } #footer p#contact { position: absolute; top: 87px; left: 115px; } p#contact a { color: #333; } p#contact a:hover { color: #fff; } #footer p#copyright { position: absolute; top: 105px; left: 115px; } #footer #social { position: absolute; left: 790px; top: 20px; } #social img { margin: 0 8px 0 0; } #footer a#creditLink { position: absolute; left: 795px; top: 70px; } /* NAVIGATION ----------------------------------------------- */ #header div.nav { position: absolute; left: 280px; top: 70px; font-family: Helvetica, Arial, sans-serif; letter-spacing: -1.5px; /* for now do a fancy css font-family - still need to add helvetica neue thin condensed and just condensed options in there, then maybe cufon or this */ /* font-family: 'ContextRLCNormal', Georgia, Helvetica, sans-serif; */ /* maybe not absolutely position? */ } #header div.nav ul { list-style-type: none; text-transform: uppercase; font-size: 16px; /* actually 18px */ line-height: 18px; } #header div.nav li { display: inline; margin: 0 10px 0 0; } /* hovering styles for top level are in superfish.css */ .sf-menu a { /* padding: 7px; */ /* cursor: default; */ /* pads all links in menu */ } .sf-menu ul a { /* padding: 5px 7px; font-size: 12px; */} /* rest to menu are applied in own css, but this will likely need tweaking */ li.current_page_parent a.sf-with-ul { color: #444 !important; } #header .current_page_item { font-weight: bold; } /*hover styles for superfish, probably condense with superfish.css*/ .sf-menu li a:hover { color: #3dbcec; } /* make arrow for current pages in drop down when active or maybe something like below */ /* #header .current_page_item a { color: #888 !important; } */ /* HEADERS ----------------------------------------------- */ /* maybe condensed shared heading rules into one big h2, h3, h4 declaration since there is overlap */ h1 { /* currently site image */ } h2 { font-family: Arial, sans-serif; font-weight: bold; color: #8d8d8d; font-size: 34px; line-height: normal; letter-spacing: -1.5px; border-bottom: 7px solid #3dbcec; padding-bottom: 10px; margin-bottom: 15px; } h3 { font-family: Arial, sans-serif; font-weight: bold; color: #333; font-size: 16px; line-height: normal; letter-spacing: -1px; border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 20px; } h4 { font-family: Arial, sans-serif; font-weight: bold; color: #333; font-size: 12px; line-height: normal; letter-spacing: -1px; margin-bottom: 0px; margin-top: 0px; } /* sidebar headers - figured no h1, begin with h2 */ /* if possible pull styles that overlap out into main header */ #sidebar h2, #sidebar h3 { font-weight: normal; border: none; padding: 0; margin: 0; } #sidebar h2 { font-family: /*context,*/ Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 20px; color: #666; letter-spacing: -1.5px; line-height: 20px; margin: 0 0 16px 0; } #sidebar h3 { } ul#subpageOutput { } #subpageOutput li { margin-bottom: 2px; } #sidebar .current_page_item a { color: #666; } /* LINKS ----------------------------------------------- */ a { color: #3dbcec; text-decoration: none; } a:hover { color: #666; } .nav { } .nav a { color: #999; } .nav a:hover { color: #3dbcec; } .nav .active a { color: #666 !important; } /* TYPOGRAPHY / STYLING ----------------------------------------------- */ /* PARAGRAPHS */ p { line-height: 18px; margin-bottom: 20px; } #sidebar p { margin: 0px; } /* * p:last-child {margin-bottom: 0;} */ /* LISTS */ /* be careful, may interact with ul and li in nav */ ul { } li { } /* INDIVIDUAL PAGES ----------------------------------------------- */ /* HOME - #home */ #nowShowing { display: block; width: 630px; height: 620px; } #otherArt { border-top: 8px solid #3dbcec; margin: 35px 0 0 0; } .otherArtBox { background-color: #d9d9d9; display: block; height: 275px; width: 200px; float: left; margin: 15px 15px 0 0; } .otherArtBox a { width: 200px; height: 275px; display: block; } .otherArtBox:last-child { margin-right: 0px } /* won't work for all browsers */ /* front page headers - either move to pages section or incorpate better in general - temp */ #home h3 { color: #231f20; text-transform: uppercase; font-size: 20px; /* should be 24px */ letter-spacing: -1px; line-height: normal; margin: 15px 0 8px 8px; font-weight: normal; border: 0; } /*or if this is general h3, just fine tune with .otherArtBox h2 */ .otherArtBox img { border-bottom: 3px solid #fff; padding-bottom: 20px; } /*works for now to create line */ #blueskyMission { border-top: 8px solid #3dbcec; margin: 35px 0 0 0; } /* @should these borders be a class? */ #blueskyMission h3 { margin: 15px 0 28px 0; } #blueskyMission .readMore { float: right; margin: 15px 50px 0 0; font-size: 18px; } /* SUBMISSION */ ul#submissionGuidelines { margin: 0 0 0 30px; width: 540px; } #submissionGuidelines li { margin-bottom: 20px; list-style-type: disc; } span.submissionAddress { margin: 10px 0 0 50px; display: block; } /* indents the address */ /* EVENTS */ .page-id-33 #content h4 { margin-bottom: 10px; } /* MEMBERSHIP PAGE */ .page-id-34 h4 { margin-bottom: 15px; } .membershipPurchase { width: 630px; } .membershipPurchase span.price { font-size: 20px; margin-right: 15px; position: relative; bottom: 12px; } input.joinNow { position: relative; top: 0px; } a.collectorsclub { position: relative; bottom: 13px; margin: 0 0 0 20px; } input.printCode { width: 50px; } .membershipPurchase select { margin-right: 10px; } .firstPrintCode { font-size: 11px; } .firstPrintCode a { } .firstPrintCode input { } .secondPrintCode { font-size: 11px; padding-left: 5px; } p.membershipDesc { margin: 7px 0 25px 0; padding-bottom: 10px; border-bottom: 1px solid #ccc; } a.printcodeInfo { font-size: 10px; margin: 0 7px 0 0; } #seniorStudent { font-weight: bold; margin-bottom: 5px; } #donateSection { } #donateSection p { margin: 0px; } #donateSection form { } input#donateAmount { width: 100px; } #donateButtonSubmit { position: relative; bottom: -14px; padding-right: 10px; } /* remove print code fields where don't apply -first */ #ccToggleBasic .firstPrintCode, #ccToggleStudent .firstPrintCode, #ccToggleBook .firstPrintCode { display: none; } /* remove print code fields where don't apply - second */ #ccToggleBasic .secondPrintCode, #ccToggleStudent .secondPrintCode, #ccToggleBook .secondPrintCode, #ccTogglePrint150 .secondPrintCode, #ccTogglePrint275 .secondPrintCode { display: none; } /* LINKS */ .page-id-39 #content ul { margin-bottom: 30px; } /* COLLECTOR'S CLUB */ .page-id-38 #content ul { margin: 0 0 25px 30px; width: 540px; } .page-id-38 #content li { margin-bottom: 12px; list-style-type: disc; } /* CURRENTLY SHOWING */ #currentlyShowingBoxes { float: left; } #currentlyShowingBoxes a img { margin: 0 2px 10px 0; } /*PRINT PROGRAM */ div#jump-to a { font-size: 18px; margin: 4px; position: relative; top: 3px; } a.pricePoint { font-size: 24px; background-color: #ddd; display: block; width: 610px; padding: 10px; } a.pricePoint:hover { color: #3dbcec; } .printProgram-list { margin: 20px 0 50px 0; display: block; /* border: 1px solid red; */ } .printProgram-list li { margin: 15px 0 20px 0; } .printProgram-list span.info { vertical-align: top; display: block; /* border: 1px solid green; */ } .printProgram-list span.printcode { /* border: 1px solid yellow; */ } /* MISC ----------------------------------------------- */ a:focus, a:hover, a:active { outline:none } /* fixed ff outlining on links */ /* SELECTIONS */ /* ::-moz-selection {background: #3dbcec; color: #666;} ::selection {background: #3dbcec; color: #666;} */ strong { font-weight: bold; } em { font-style: italic; } .left { float: left; } .right { float: right; } a.button:active, #social a:active, a#creditLink:active img, #donorLogos img:active { position: relative; top: 2px; } /* gives click feel to these items */ hr { color: #ccc; background-color: #ccc; border: 0; height: 1px; } /* CLASSES ----------------------------------------------- */ .floatLeft { float: left; } .floatRight {float: right; } .hidden { display: none; } small { font-size: 10px; } /* new clearfix */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ /* TEMP IE HACKS */ /* just for ie7 to make superfish work properly */ .nav { z-index: 10; } /* KLUGES */ /* #containter, #content { border: 1px solid gray; } */