style.css

/*
Theme Name: Hacker X
Theme URI: https://github.com/PHX2600/Hacker-X
Description: Custom Wordpress theme for phx2600.org
Author: Chris Kankiewicz
Author URI: http://www.ChrisKankiewicz.com
Version: 1.0
Tags: black, red, white, fixed-width, custom-menu (optional)

License: Creative Commons Attribution 3.0 Unported
License URI: http://creativecommons.org/licenses/by/3.0/
*/

/* -------------------------------------------------------------------------- */
/* -----| GENERAL |---------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

html {
    background-color: #EEEDEA;
    font-size: 100%;
    height: 100%;
}

body {
    color: #333;
    font-family: Arial, Helvetica, sans-serif, Verdana;
    font-size: .9em;
    min-height: 100%;
    min-width: 780px;
    position: relative;
}

#bgImage {
    background: transparent url(images/phx2600_bird_transparent.png) no-repeat top left; 
    display: block;
    height: 275px;
    bottom: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 340px;
    z-index: -1337;
} 

a {
    color: #981B1E;
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
}

.widthConstraint {
    margin: 0 auto;
    width: 960px;
    position: relative;
}


/* -------------------------------------------------------------------------- */
/* -----| HEADER |----------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

#siteHeader {
    background: #020202 url(images/black_gradient.png) repeat-x left top;
    border-bottom: 5px solid #981B1E;
    padding: 15px 30px;
    overflow: hidden;
}

#siteTitle {
    display: inline-block;
    margin: 0 ;
}

#siteTitle a {
    background: transparent url(images/phx2600_logo.png) no-repeat center center;
    display: block;
    height: 40px;
    width: 214px;
}



/* -------------------------------------------------------------------------- */
/* -----| NAVIGATION |------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

#siteNavigation {
    display: inline-block;
    margin: 8px 0 0;
}

#siteNavigation li {
    display: inline-block;
    float: left;
    list-style: none;
    margin-left: 3px;
}

#siteNavigation li a {
    color: #CCC;
    display: block;
    font-size: .9em;
    padding: 4px 7px;
    text-decoration: none;
    text-shadow: 0px -1px 0px #000;
    text-transform: uppercase;
}

#siteNavigation li a:hover {
    color: #FFF;
}

#siteNavigation li.current_page_item a,
#siteNavigation li.current-menu-item a {
    color: #FFF;
    text-decoration: underline;
}


/* -------------------------------------------------------------------------- */
/* -----| CONTENT |---------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

.titleWrapper {
    border-bottom: 1px dotted #CCC;
    margin-bottom: 1em;
    padding-bottom: 3px;
}

.postTitle {
    font-size: 1.2em;
    font-weight: normal;
    margin: 0;
}

.postTitle a {
    text-decoration: none;
}

.postTitle a:hover {
    text-decoration: underline;
}

.postInfo {
    font-size: .9em;
}

.post-edit-link,
.comment-edit-link {
    background: url(images/icons/page_white_edit.png) no-repeat scroll left center transparent;
    display: inline-block;
    padding: 1px 0 1px 20px;
}

.postComments {
    background: transparent url(images/icons/comments.png) no-repeat left center;
    display: inline-block;
    padding: 1px 0 1px 20px;
}

.postFeaturedImage {
    display: block;
    margin: 1em 0;
}

#siteContent {
    padding: 0 30px 30px;
}

#siteContent p {
    line-height: 1.5em;
    text-align: justify;
}
    
#siteContent ul,
#siteContent ol {
    line-height: 1.5em;
}

#siteContent p {
    margin: 1em 0 0;
}

#definition, #footer {
    border-top: 1px solid #DEDEDE;
    border-bottom: 1px solid #F6F6F6;
    margin: 10px 0;
}

#definitionInner, #footerInner {
    border-top: 1px solid #F6F6F6;
    border-bottom: 1px solid #DEDEDE;
    color: #888;
    font-size: .9em;
    padding: 5px;
    text-align: center;
    text-shadow: 1px 1px 0 #FFF;
} 

.contentBox {
    background-color: #FFF;
    border: 1px solid #DFDFDF;
    border-radius: 10px;
    margin-bottom: 30px;
    padding: 20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

#meetingInfo {
    background-color: #EEC;
    margin-bottom: 20px;
    padding: 10px;
}

#meetingInfo .floatLeft {
    background-color: #FFF;
    border: 1px solid #CCC;
    padding: 3px;
    margin-right: -100%;
}

#meetingInfo .floatLeft small {
    display: none;
}

#meetingInfo .text {
    font-size: 1.2em;
    margin-left: 442px;
    text-align: center;
}

#meetingInfo .text h3 {
    color: #333;
    margin: 0 0 1em;
}

#nextMeetingWrapper {
    background-color: #555;
    border-radius: 10px;
    color: #ACACAC;
    display: inline-block;
    margin-top: 28px;
    padding: 20px 20px;
    text-align: left;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

#nextMeetingWrapper p {
    margin: 1em 0;
    text-align: center;
}

#nextMeetingWrapper .dateWrapper {
    display: inline-block;
}

#nextMeetingWrapper .meetingMonth,
#nextMeetingWrapper .meetingDay,
#nextMeetingWrapper .meetingYear {
    background-color: #FFF;
    border-radius: 8px;
    color: #121212;
    display: inline-block;
    font-size: 2.5em;
    font-weight: bold;
    margin: 3px;
    position: relative;
    -moz-border-radius: 8px;
    -moz-box-shadow: 0px 1px 3px #121212;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: 0px 1px 3px #121212;
}

#nextMeetingWrapper .number {
    padding: 16px 24px;
}

#nextMeetingWrapper .midLine {
    background-color: #121212;
    height: 1px;
    position: absolute;
    top: 50%;
    width: 100%;
}

#nextMeetingWrapper .meetingComma {
    color: #333;
    display: inline-block;
    font-size: 3.5em;
    font-weight: bold;
    padding: 16px 4px;
}

.sectionTitle {
    border-bottom: 1px dotted #666;
}

#meetingGuidelines ul,
#meetingGuidelines ol {
    margin-left: 40px;
}

#meetingGuidelines ul li,
#meetingGuidelines ol li {
    margin-bottom: .8em;
}

#meetingGuidelines ul ul li {
    list-style: circle;
}


/* -------------------------------------------------------------------------- */
/* -----| GALLERIES |-------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

.gallery-item {
    margin: 10px 0;
}

.gallery-item img {
    background-color: #121212;
    border: 5px solid #EEC !important;
    padding: 1px;
}

.gallery-item img:hover {
    border-color: #900 !important;
}

.gallery-item .gallery-caption {
    color: #666;
    font-size: .8em;
    padding: 0 10px;
}


/* -------------------------------------------------------------------------- */
/* -----| POST META DATA & COMMENTS |---------------------------------------- */
/* -------------------------------------------------------------------------- */

.postMetaData {
    background-color: #EEEECC;
    font-size: .85em;
    margin-top: 1em;
    padding: 10px;
}

.metaDataTop {
    margin-bottom: 5px;
}

.commentsTitle {
    border-top: 3px solid #CCC;
    border-bottom: 1px dotted #CCC;
    color: #999;
    font-size: .9em;
    font-weight: normal;
    margin: 1em 0 0;
    padding: 1em 0;
    text-transform: uppercase;
}

#comments .comment {
    padding: 20px; 
}

#comments .avatar {
    border-radius: 4px;
    margin-right: -80px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.commentWrapper {
    background-color: #F6F6F6;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
    display: block;
    padding: 20px;
    position: relative;
    width: 720px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.commentInfo {
    border-bottom: 1px dotted #CCC;
    color: #ACACAC;
    font-size: .9em;
    margin-bottom: 1em;
    padding-bottom: 3px;
}

.commentPermalink,
.commentPermalink:hover {
    background: transparent url(images/icons/link.png) no-repeat center center;
    display: inline-block;
    padding: 1px 0;
    width: 16px;
    text-decoration: none;
}

#comments .commentWrapper p {
    margin: 1em 0 0;
}

.commentNotch {
    background: transparent url(images/comment_notch.png) no-repeat right center;
    display: block;
    height: 22px;
    position: absolute;
    right: 100%;
    top: 17px;
    width: 15px;
}

#commentFormWrapper {
    border-top: 1px dotted #CCC;
}

#commentForm {
    width: 600px;
}

#commentForm .formRow {
    display: block;
    margin: 1em 0;
}

#commentForm .formLabel {
    color: #999;
    display: block;
    font-size: .85em;
    padding: 2px 0;
    text-transform: uppercase;
}

#commentForm label {
}

#commentForm label.input {
    width: 50%;
}

#commentForm input,
#commentForm textarea {
    border: 1px solid #CCC;
    border-top-color: #A9A9A9;
    box-sizing: border-box;
    display: block;
    font-size: 1.1em;
    padding: 5px;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#commentForm input {
    width: 50%;
}

#commentForm .required {
    color: #900;
    font-weight: bold;
    text-transform: uppercase;
}

#commentForm .formButtons {
    margin-top: 1em;
}


/* -------------------------------------------------------------------------- */
/* -----| FOOTER |----------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

.poweredBy {
    background: transparent url(images/icons/wpmini-grey.png) no-repeat left center;
    padding: 1px 0 0 20px;
}

.themeCredit {
    background: transparent url(images/icons/layout.png) no-repeat left center;
    padding: 1px 0 0 20px;
}

.blogFeed {
    background: transparent url(images/icons/feed.png) no-repeat left center;
    padding: 1px 0 0 20px;
}

.commentFeed {
    background: transparent url(images/icons/comment.png) no-repeat left center;
    padding: 1px 0 0 20px;
}


/* -------------------------------------------------------------------------- */
/* -----| WORDPRESS SPECIFIC |----------------------------------------------- */
/* -------------------------------------------------------------------------- */

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.625em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.625em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* -------------------------------------------------------------------------- */
/* -----| MISCELLANEOUS |---------------------------------------------------- */
/* -------------------------------------------------------------------------- */

.hideText {
    margin-left: -20000px !important;
}

.note {
    background-color: #FFD;
    border: 1px solid #000;
    margin: 2em 0;
    padding: 10px;
    font-size: .85em;
}