/* File: custom.css Description: Custom styles for Thesis BASIC USAGE: If you have enabled the custom stylesheet in the Thesis options panel, the tag will be appended with the "custom" class, like so: . You can use the "custom" class to override *any* CSS declarations contained in the style.css file. For example, if you wish to change the default link color to green, you would add the following declarations to this file: .custom a, .custom a:visited { color: #090; } <--- This makes links green .custom a:hover { color: #00f; } <--- This makes links blue when you mouse over them WHY THIS WORKS: By using the "custom" class, you are creating more specific CSS declarations for HTML elements. CSS styling is applied through rules of specificity, and because declarations prepended with .custom are more specific, they get applied when the page is rendered! More information about styling your Thesis installation using this file can be found in the User's Guide: http://diythemes.com/thesis/rtfm/customizing-thesis-with-customcss/ */ /* --------- TWITTER CONFERENCE SITE ------------- */ .custom #header { border-bottom: 0px double #82A237; } /* adding header image */ .custom #header { background: url('images/140tc.png') no-repeat; height: 95px; padding-bottom: -10;} .custom #logo a {display:block; width:900px; height:95px; text-indent:-9999px;} /* mimicing the twitter look with a background image */ body.custom {background: #a2daf6;} .custom #page {background: white; margin-top: 20px; -moz-border-radius: 5px; } /****************************** Conference Schedule Page - split into columns for two-track event *******************************/ /* Building the two-column structure */ .custom #column1 {width: 48%;} .custom #column2 {width: 48%; float: right;} .custom h3.top {margin-top: 0; color: #88B9C1; font-size: 200%; font-weight: bold;} /* styling tables for the event schedule */ .custom .time {width: 6em;} .custom table {background: #eee; border: 1px solid #ddd; padding: .5em;} .custom hr {text-align: left;} .custom td {border: 1px solid #ddd; padding: .5em; background: #fff;} /* special styling so that the ticket pricing list doesn't look crappy */ .custom .ugh {line-height: 90%; padding-left: 1em; padding-top: .5em; padding-bottom: .5em;} /* making a the speakers list in the session grid look a little bit awesome */ .custom .speakers {font-size: 90%; color: #555; margin-bottom: .2em;} .custom .speakers a {color: #555;} /* putting some division into the expanded session list */ .custom .session {border-bottom: 1px dotted #ddd; margin-bottom: 1.5em;} .custom .speakers2 {font-size: 90%; color: #555; margin-bottom: 1em;} .custom .speakers2 a {color: #555;} /* adding an extra style so that things "pop"...don't fracking ask */ .custom h4 {font-family: Trebuchet MS; font-size: 110%} .custom h4.times {color: #666;} .custom h3 {font-size: 140%;} .custom .sch3 { background: #88B9C1; color: white; padding-left: 2px; padding-top: 1px; padding-bottom: 1px; text-align-center;} /* making a custom alertbox color */ .custom .alertbox {background: #9AE4E8; border: 1px solid #88B9C1; padding: .5em; padding-left: 1em;} /* positioning the hashtag image - now the event promo image */ .custom .hashtag {margin-top: -2em; margin-left: 34em;} /************************ Custom work for the social media tweeting / twitturly mashup page *************************/ .custom .numtweets {float: left; width: 60px; height: 55px; margin-right: .8em; color: #1F607D; background: #DEEEF2; padding: .3em; border: 1px solid #c8e6ee;} /* eliminating the bullets */ .custom .cets_embedRSS { list-style-type: none; margin-left: 0;} /* hacking the format to make the items line up */ .custom .tweetbox {width: 69%; margin-top: 1.4em; padding-bottom: 1.7em;} /* adding a kind of sidebar-ish thing, which is easier than using the regular sidebars, mostly because I don't want to research how to set it up that way and I'm in a hurry. Long term, it's probably cleaner to use the built-in Thesis structure */ .custom .twitsidebar {width: 200px; float: right; margin-right: 3.5em; margin-top: -1px;} /* Setting font in text areas */ .custom .topic {font-family: Lucida Grande, Trebuchet MS, Sans-Serif; font-size: 1.1em; font-weight: bold; line-height: 85%;} .custom .numtweets {font-family: Lucida Grande, Trebuchet MS, Sans-Serif; font-size: 1.2em; text-align: center;} .custom .rssSummary {font-family: Lucida Grande, Trebuchet MS, Sans-Serif; font-size: .8em;} .custom .topic a {text-decoration: none; color: #1F607D;} .custom .topic a:hover {text-decoration: underline;} /************************ Styling the "who's coming" page so that we can show off how cool our guest list is ;) *************************/ .custom .attendee {float: left; width: 284px; height: 78px; margin: 0 10px 15px 0; padding: 5px 2px 4px 7px; overflow: hidden; font-size: 80%; line-height: 150%; -moz-border-radius: 6px; background: #efefef; border: 1px solid #ddd;} .custom .attendee img {float: left; margin-right: .5em; width: 73px; height: auto;} .custom .attendee .photowrapper {float: left;} /* Quick add for promo coloring */ .custom .attendee.promo {background: #BBD6E3; border: 1px solid #5599BB;} /* .custom .attendee an {font-size: 130%; font-weight: bold; font-family: 'Trebuchet MS', Sans-Serif; padding-bottom: 3px; color: black;} */ /* Make sure that the web and org lines are limited to one */ .custom .atline {width: 200px; height: 19px; overflow:hidden; word-wrap: break-word;} .custom .twitwrapper {width: 70%; border: 1px solid black; float: left;} .custom .namewrapper {font-size: 130%; font-weight: bold; font-family: 'Trebuchet MS', Sans-Serif; padding-bottom: 3px; color: black;} /* And now, for Mountain View attendees */ .custom .mountainview {float: left; width: 290px; height: 78px; margin: 0 10px 15px 0; padding: 5px 2px 4px 7px; overflow: hidden; font-size: 80%; line-height: 150%; -moz-border-radius: 6px; background: #ddd;} .custom .mountainview img {float: left; margin-right: .5em; width: 73px; height: auto;} /* .custom .mountainview an {font-size: 130%; font-weight: bold; font-family: 'Trebuchet MS', Sans-Serif; padding-bottom: 3px; color: black;} */ /* Making sure the page is properly split by attendees */ .custom .mntvsplit {float: left; font-size: 1.1em; width: 900px; color: #555; border-bottom: 2px solid #aaa; padding-bottom: .2em; margin-bottom: 1.5em;} /********* Modifying the who's coming style for the test page so I can make a custom background for the Twitter 140tc page ***********/ .custom .attendee-twt {width: 180px; height: 45px; margin: 0 10px 15px 0; padding: 5px 2px 4px 7px; overflow: hidden; font-size: 80%; line-height: 150%; -moz-border-radius: 6px; background: #efefef; border: 1px solid #ddd;} .custom .attendee-twt img {float: left; margin-right: .5em; width: 43px; height: auto;} .custom .attendee-twt .photowrapper {float: left;} .custom .attendee-twt .atline {height: auto; width: auto;} /************ The speaker images on the home page *************/ .custom #speaking-rotator {height: 470px; width: 520px; padding-bottom: .2em;} .custom .spkr-promo {float: left; padding-right: 1.3em;} /* Request an Invite form - flagging the required fields */ .custom .fldrequired { background: #cdcdcd; } /********** Schedule Page *************/ .custom #box-column {width: 430px; float: left; padding: 10px;} .custom .session-sd-big {border-bottom: 1px dotted #ddd; margin-bottom: 1.5em; height: 440px;} .custom .session-sd-sm {border-bottom: 1px dotted #ddd; margin-bottom: 1.5em; height: 240px;} .custom .session-sd-lunch {border-bottom: 1px dotted #ddd; margin-bottom: 1.5em; height: 100px;} /********** Extra CFORMS Styling *************/ /* RSVP page - mostly it's good already */ .custom #ces_rsvp_yes, #ces_rsvp_no, .custom #ces_fld_optOutOfEmail {width: 25px;} .custom #ces_lbl_twitterID {color: red;} /* RSVP page opt out list items for NAB */ .custom .cf-before {width: 380px; float: right;} /* Request an Invite form - flagging the required fields */ .custom .fldrequired { background: #cdcdcd; } /* Formatting the Featured Post box */ .custom #feature_box {padding: 1em; font-size: 115%;} .custom #feature_box h2 {margin-bottom: .5em; font-size: 120%;} .custom #my-feature-box {font-size: 120%;} .custom .featurereadmore {margin-top: .5em;} /********** Locations Page *************/ .custom .locationbox1 {height: 200px; width: 900px;} .custom .eventnav {margin-left: 1.4em; float: left;} /********** Custom Nav for no sidebars pages *************/ .custom .customnavbox {border: 3px dotted #00ACEA; float: right; width: 385px; margin-left: 1.5em; padding: 1em; background: #a5dbef; padding-bottom: 0em;} /********** Custom code for bar on event-specific WP pages *************/ .custom .eventpageheader {height: 30px; color: white; background: #8e9099; padding: .3em; padding-bottom: 0; font-family: 'Trebuchet MS', 'Lucida Sans', Sans-Serif;} .custom #loc-date {float: left; width: 500px; padding-left: .7em;} .custom .loc {display: inline; font-size: 2em;} .custom .dat {display: inline; font-size: 2em; margin-left: .5em; font-style: italic;} .custom #extramenu {float: right; font-size: 2em;} .custom #extramenu ul {display: inline;} .custom #extramenu ul li {display: inline; list-style: none;} .custom #extramenu ul li a {color: #F0EEC2;} .custom #extramenu ul li a:hover {text-decoration: underline;} .custom #extramenu ul li:after {content: " // ";} .custom #extramenu ul li.last:after {content: "";} .custom .sponsorbox {float: right; border: 3px dotted #5599bb; background: #c0deed; width: 300px; height: 250px;} /********** The Box at the bottom of the sponsors page *************/ .custom .howtobox {background: #a5dbef; border: 3px dotted #00ACEA; padding: 1.5em; padding-bottom: 0em; width: 80%; algin: middle; margin-bottom: 2em; margin-left: 4em;} .custom .howtobox h3 {margin-top: 0em;} .custom .benefitsbox {width: 175px; margin-right: .5em; float: left;} .custom .benefits-spacer {height: 270px; width: 100%;} /********** This CSS file is getting huge. Oh well. Here's for the "who attends" celeb rotator. *************/ /* .custom #cyclerotator {margin-left: 2.5em;} */ /* RSVPdot style again, etc */ .custom .rsvpbox {width: 250px; height: 65px;} .custom .rsvpline {float: left; width: 75px;} .custom .rsvpdot {width:20px;} .custom .rsvpline2 {width: 400px; margin-bottom: 1em; } .custom .rsvpline3 {width: 400px; margin-bottom: 1em; height: 180px; } .custom .rsvpconfirm {height: 250px; float: left; width: 300px; padding-top: 10px;} .custom .optout {width: 470px; } .custom .optouttop {float: left; height: 200px;} .custom .optoutbottom {float: left; height: 100px;} .custom .optoutbox {float: left; width: 210px; margin-right: 10px;} .custom .rsvpconfirm input {float: left;} .custom .rsvpline3 input {margin-top: 60px;} .custom .response-div {} .custom .response-line {float: left; width: 460px; height: 25px;} .custom .response-button {float: left; width: 460px; height: 25px;} .custom .response-line input {width: 20px;} /* Bit for the Tweethouse Twitter app */ .custom .joinme {margin-top: .5em; border-bottom: 3px dotted #666; height: 60px;} .custom .joinme_image {float: left; width: 60px;} .custom .joinme_username {float: left; width: 150px; color: #666; font-weight: bold;} .custom .joinme_button {float: right; width: 190px;} .custom .tweet_text {padding: .5em; background: #BBD6E3; border: 1px solid #5599BB;} .custom .center-icon {margin-left: 145px;} .custom .center-icon input[type="image"] {border: none; background: transparent; width: 180px;} /* The "standoutline" for setting out things on a page */ .custom .standoutline {height: 2px; width: 350px; margin-left: 3em; border-bottom: 3px dotted #A2DAFC; margin-bottom: 1.5em;}