/* custom.css — custom styles for Cutline that YOU define ------------------------------------------------------ */ /* Colours Used: #634953 - purple #7FAFD6 - blue #293547 - dark blue #6EA554 - light green #40861F - middle green #20331F - dark green (text) #929F6D - tan (alternate) #F0F0E0 - light tan (for backgrounds) for testing: #FF00FF - fuchsia #00FF00 - lime */ /* Read More text link */ /*a.more-link { color: #6EA554 ; float: right; text-decoration: none; text-align: right;}*/ /*a.more-link:hover { color: #7FAFD6 ; float: right; text-decoration: none; text-align: right;}*/ a.more-link { color: #634953; float: right; text-decoration: none; text-align: right;} a.more-link:hover { color: #6EA554 ; float: right; text-decoration: none; text-align: right;} a.more-link:visited { color: #7FAFD6 ; float: right; text-decoration: none; text-align: right;} body { background: #fff; color: #333; font: 62.5% "Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center; } * { padding: 0; margin: 0; } #container { width: 970px; margin: 0px auto 0 auto; } /* header ( images + navigation bar) at the top of the page*/ #header_img { position: relative; margin: 0 0 3.0em 0; border-bottom: 1px solid #000; float: left; clear: both; } #masthead h1{ letter-spacing: 0.05em; padding: 0.4em 0 0.2em 0; border-top: 8px solid #634953; text-align: center; clear: both; } h1 a, h1 a:visited {} h1 a:hover { color: #634953; text-decoration: none; } #masthead h3 { margin: 0 0 0.75em 0; font-weight: normal; font-size: 1.8em; text-transform: none; color: #7FAFD6; text-align: center; } ul#nav { list-style: none; width: 950px; padding: 0 10px; background: url('images/hr_dot_purple.gif') repeat-x; border-bottom: 3px solid #000; float: left; clear: both; } ul#nav li { padding: 0.85em 40px 0.7em 0; font: bold 1.4em; text-transform: uppercase; float: left; } ul#nav li a, ul#nav li a:visited { color: #6EA554; text-decoration: none; } ul#nav li a:hover { color: #634953; text-decoration: underline; } ul#nav li a.current, ul#nav li a.current:visited { color: #929F6D; text-decoration: underline; } ul#nav li a.current:hover { color: #634953; text-decoration: underline; } ul#nav li.rss { padding: 0.85em 0 0.7em 0; float: right; } ul#nav li.rss a { padding: 0 18px 0 0; background: url('images/icon_rss.gif') 100% 50% no-repeat; } /*---< Calendar widget styles >---*/ #calendar_wrap { font-size: 1em; } #wp-calendar {text-align: center; width: 100%; border-collapse: collapse; padding: 0; margin: 0; font-size: 1em;} #wp-calendar tbody td {width:41px;} #wp-calendar tbody td a {color:#634953;text-decoration:none;margin:2px;-moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border:1px solid #7FAFD6;} #wp-calendar tbody td a:hover {color:#FFFFFF; background-color: #7FAFD6; border:1px solid #634953;} #wp-calendar tbody td a:active {color:#634953; background-color: #7FAFD6; } #wp-calendar caption a, #wp-calendar caption a:hover {background: transparent; } #wp-calendar th {font-weight: bold; } #wp-calendar a {text-decoration: none; display: block; color: black;} #wp-calendar td, #wp-calendar th {text-align: center; } #wp-calendar caption { letter-spacing: 0.1em; padding: 0.2em 1em 0.2em 0em;font-weight: normal;text-align: center;font-size: 1.2em; } /*all links on page */ a { color: #6EA554; text-decoration: none; } a:visited { color: 7FAFD6; text-decoration: none; } a:hover { color: #634953; text-decoration: underline; } a img { border: none; } h2 { font-size: 15px; font-family: Helvetica, Arial, sans-serif; color: #6EA554; } h2 a { color: #6EA554; text-decoration: none;} h2 a:visited { color: #6EA554; text-decoration: none; } h2 a:hover { color: #634953; text-decoration: none; } h4 { font: 1.2em; font-family: Arial, Trebuchet MS, Helvetica, sans-serif; color: #293547; font-style:normal; } h4 a, h4 a:visited { color: #293547; text-decoration: none; } h4 a:hover { color: #634953; text-decoration: underline; } #_content.posts h4 { margin: 0 0 1.25em 0; padding: 0 0 1.0em 0; background: #ffffff;} /* this is the css for WP-SNAP! (WordPress System for Navigating Alphabetized Posts) */ .snap_center{text-align: center; } ol.snap_nav {background:#ffffff; width:100%; height:30px; margin: 0px; padding: 0px; display: inline; clear: both; list-style: none;} ol.snap_nav li {text-decoration: none; padding: 0; text-transform: lowercase; font-size:24px; font-weight: bold; display: inline;} ol.snap_nav li a {color:#634953; text-decoration: none;} ol.snap_nav li a:hover {background:#7FAFD6; color:#ffffff; text-decoration: none;} ol.snap_nav li.snap_selected a {text-decoration: none; color:#634953; list-style: none;} ol.snap_nav li.snap_selected a:hover {background:#7FAFD6; text-decoration: none; color:#ffffff; list-style: none;} ol.snap_titles { clear: both; display: block; border: 0; list-style: none;} /* to make the date box and title box */ .title_border{position:relative; border:1px solid #7FAFD6; border-left:none; border-right:none;/* ?? */ padding:0px; background-color:#ffffff; margin-left: 0px; height:52px; } /* to make the date box*/ .contentdate{background:#634953; float:left; width:50px; height:52px; margin:0 15px 0 0; padding:0px; text-align: center;} .month{font-family:Georgia, Times, Helvetica, Sans-Serif; color:#7FAFD6; font-size:15px; font-weight:bold; padding:0px 0 0 0px; margin: 0; text-transform:lowercase;} .date{font-family:Georgia, Times, Helvetica, Sans-Serif; color:#ffffff; font-size:18px; font-weight:bold; padding:0px 0px 0px 0px; margin:0; text-align:center;} .year{font-family:Arial, Trebuchet MS, Helvetica, sans-serif; color:#F0F0E0; font-size:9px; text-align: right; padding:0 5px 0 0;} /* to make the title box */ .title_author_box {} .title_border h2.title_line{font-size: 15px; padding: 7px 0px 0px 0px; margin: 0px 0px 0px 0px;} .title_border h4.author_line {color:#7FAFD6; font-size:12px; padding:5px 0px 0px 0px; margin: 0px 0px 0px 0px;} .title_border h4.author_line span{padding: 0px 0px 0px 18px; margin: 0px 0px 0px 0px; background: url(images/comment_icon.gif) no-repeat;} .pages h2, h2.page_header { margin: 0 0 0.75em 0; padding: 0 0 0.6em 0; } .posts h4 { margin: 0 0 1.25em 0; padding: 0 0 1.0em 0;} /* image caption and box */ .wp-caption-text {color:#634953; font-size:0.9em; text-align: center;} .wp-caption {border: 1px solid #634953; padding: 20px 20px 10px 20px; margin: 0px 0px 30px 0px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .entry img {display: block; margin-left: auto; margin-right: auto; } .aligncenter, div.aligncenter {display: block; margin-left: auto; margin-right: auto; } .gallery-caption {color:#634953; font-size:0.9em; text-align: center;} /* "Filed under: categories" */ .tagged { padding: 0.4em 0 0 0; background: url('images/hr_tag_sep.gif') no-repeat; font-size: 1.2em; line-height: 1.6em; clear: both; } .tagged a, .tagged a:visited {color: #634953; font-weight:bold; text-decoration: none; padding: 0.25em; } .tagged a:hover { color: #ffffff; font-weight:bold; background: #7FAFD6; text-decoration: none; } /* to make the page headings */ h2.pretitle_head { color: #634953; font-weight: bold !important; font-size: 15px !important; text-transform: uppercase !important; letter-spacing: 3px !important; margin: 0 0 1.8em 0 !important; padding: 0.4em 2px !important; border-top: 2px solid #634953 !important; background: url('images/hr_dot_purple.gif') 0 100% repeat-x !important; } /* controls navigation between posts */ .post_navigation { width: 500px; font-size: 1.4em; float: left; } .post_previous { padding: 0 20px 0 0; float: left; } .post_next { float: right; } /* sidebar styles */ #sidebar { width: 210px; padding: 0 0 0 15px; float: right; } #l_sidebar { width: 210px; padding: 0 0 0 15px; float: left; } ul.sidebar_list { list-style: none; } ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 210px; margin: 0 0 2.5em 0; font-size: 1.3em; float: left; } h2.widgettitle, li.linkcat h2 { color: #634953; font-weight: bold !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: 3px !important; margin: 0 0 1.8em 0 !important; padding: 0.4em 2px !important; border-top: 2px solid #634953 !important; background: url('images/hr_dot_purple.gif') 0 100% repeat-x !important; } li.widget p { margin: 0 0 1.5em 0; padding: 0 10px; } li.widget ul, li.linkcat ul { list-style: square; margin: 0 0 0.5em 20px; } li.widget ol, li.linkcat ol { margin: 0 0 0.5em 20px; } li.widget li, li.linkcat li { margin: 0 0 0.7em 0; } li.widget li a, li.widget li a:visited, li.linkcat li a, li.linkcat li a:visited { text-decoration: none; } li.widget li a:hover, li.linkcat li a:hover { text-decoration: underline; } li.widget li .recent_date { padding: 0 0 0 8px; font-weight: bold; color: #888; } /* snazzy archives width override */ #archive_width { width: 900px; padding: 0 0 0 20px;} /* Comments*/ /*Comment CSS */ #commentarea {padding:10px;margin-top:20px;border-top:1px solid #bbb;text-decoration:none;} #commentarea ul, #commentarea ol {list-style-type:none;margin:0;} .comment_H3 {color:#634953; font-size:1.5em; font-weight:bold;} .commentlist {list-style-type:none;margin:0;} .commentlist li.comment {padding:5px;} .commentlist li, #commentform input {font-size: 0.9em;} .commentlist li.depth-1 {border: 1px solid #eee;background-color: #fff;padding-top: 4px;margin:0px 0px 10px 0px;-moz-border-radius: 3px;-khtml-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;} .commentlist li ul li {font-size: 1em;} .commentlist li {font-weight: bold;} .commentlist li .vcard {height:34px;line-height:34px;background:##E5ECF9;color:##6EA554;-moz-border-radius: 3px;-khtml-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;font-weight:normal;} .commentlist li .avatar {margin:0px 5px 0px 0px;border: 1px solid #ccc;float:left;} .commentlist cite {font-style:normal; font-size:1.5em; font-weight:bold; color:#6EA554} .commentlist span.says {font-size:1.4em;font-weight:normal;} .commentlist cite a:link, .commentlist cite a:visited {font-weight:bold;color:#3C78A7;} .commentlist p {font-weight: normal;line-height: 1.6em;text-transform: none;clear:left;font-size:1.5em;} .commentmetadata {font-weight: normal;color:#634953;font-size:1.3em;text-align:right;} #commentarea .commentmetadata a:link, #commentarea .commentmetadata a:visited {color:#666;} #commentarea .commentmetadata a:hover, #commentarea .commentmetadata a:active {color:#7eaf36;} #commentarea .children {border: 1px solid #ccc;background-color: #f2f5fb;padding-top: 4px;margin: 10px 10px 10px 20px;-moz-border-radius: 3px;-khtml-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;} #commentarea .children .children {background-color:#fff;margin-left:10px;} #commentarea .reply {text-align:right;} #commentarea .reply a:link, #commentarea .reply a:visited {padding:3px;border: 1px solid #7FAFD6;background-color: #ffffff;margin:0px;-moz-border-radius: 2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;font-size:1.2em;font-weight:bold;color:#634953;} #commentarea .reply a:hover, #commentarea .reply a:active {border-color:#634953;color:#ffffff;background:#7FAFD6;text-decoration:none;} #commentform #respond {padding-top:20px;clear:both;} #commentform label {color:#666;font-size:1.3em;} #commentform #author, #commentform #email, #commentform #url {padding:5px;width:300px;border:1px solid #ccc;font-size:1em;color:#666;} #commentform textarea {border:1px solid #ccc;padding:5px;width:98%;color:#666;} #commentform #author:focus, #commentform #email:focus, #commentform #url:focus, #commentform textarea:focus {border:1px solid #0066cc;color:#222} #commentform #submit {padding:3px;border: 1px solid #7FAFD6;background-color: #ffffff;margin:0px;-moz-border-radius: 2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;font-size:1em;font-weight:bold;color:#634953; float:right;} #commentform #submit:hover {cursor:pointer;border-color:#634953;color:#ffffff;background:#7FAFD6;} p.logged_in_as {font-size:1.1em;} /* footer styles */ #footer { width: 970px; padding: 3em 0 0 0; border-top: 8px solid #634953; float: left; clear: both; } #footer p { margin: 0 0 0em 0; font-size: 1.2em; color: #888; text-align: center; } #footer a, #footer a:visited { color: #7FAFD6; text-decoration: none; } #footer a:hover { color: #6EA554; text-decoration: none; } /*---:[ search form styles ]:---*/ #search_form { } #search_form .search_input { width: 201px; padding: 6px; color: #7FAFD6; font: normal 10px Arial, Trebuchet MS, Helvetica, sans-serif; border: 1px solid #634953;} li.widget .search_input { font-size: 1.1em !important; } #search_form .search_input:focus { border-top: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } /* MY CSS CHEAT SHEET ================================= padding:top right bottom left; Class vs. ID Use IDs when there is only one occurrence per page. Use classes when there are one or more occurrences per page. ID = A person's Identification (ID) is unique to one person. Class = There are many people in a class. class selector p.right {text-align: right} p.center {text-align: center} example:

This paragraph will be right-aligned.

This paragraph will be center-aligned.

To apply more than one class per given element separate them with a space

This is a paragraph.

The paragraph above will be styled by the class "center" AND the class "bold". class selector without the HTML tag name .center {text-align: center} example: all HTML elements with class="center" will be center-aligned

This heading will be center-aligned

This paragraph will also be center-aligned.

id selector define styles for HTML elements with the id selector (#). example: #green {color: green}

This paragraph has an ID name of "green"

you can add HTML tags: p#para1 {text-align: center; color: red}

This paragraph is centered and red.

This paragraph will be unaffected.

*/