/* Start of CMSMS style sheet 'Stone Layout no sidebar' */ /* taken from the Layout: Left sidebar + 1 column browsers interpret margin and padding a little differently, we'll remove all default padding and margins and set them later on */ * { margin: 0; padding: 0; } /*Stone Church: 75% makes the title appear fully side-to-side on a Mini laptop and a large one without pushing things around. The 0.6em spaces the title up and down. Adding a font-weight element to bold changes the bold of all text on the site, but doesn't seem to affect the title much. */ body { text-align: center; font-family:"Times New Roman", Times, serif; font-weight:bold; font-size: 75%; line-height: 0.6em; } /*Stone Church: changing this to 2em at least quadruples the size of the title. Template says this rule sets font size for all divs, this overrides some body rules*/ div { font-size: 1.0em; font-weight: bold; } /*Stone Church: Changing this did not change either of the two images (background or thumbnail). if img is inside "a" it would have borders, we don't want that*/ img { border: 0; } /*default link styles*/ a, a:link a:active { /* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit background color from parent element */ background-color: inherit; /* this is a color (blueish) you change for all default link colors */ color: #18507C; } a:visited { /* keeps the underline */ text-decoration: underline; background-color: inherit; /* a different color is used for visited links */ color: #18507C; } a:hover { /* remove underline on hover */ text-decoration: none; background-color: inherit; /* using a different color makes the hover obvious */ color: black; } /*****************basic layout *****************/ body { margin: 0; padding: 5; /* default text color for entire site. Stone Church: set to #000000, which is black */ color: #000000; /* Stone Church: sun in the sky background for the whole page */ background: url(uploads/images/SC_images/fainter-sun-rays-in-a-blue-sky.jpg) no-repeat center center; background-attachment:fixed } div#pagewrapper { /* min max width, IE wont understand these, so we will use java script magic in the */ max-width: 99em; min-width: 60em; /* now that width is set this centers wrapper */ margin: 0 auto; } /* Stone Church: this is where the details for the thumbnail picture at the top left are held. header, we will hide h1 a text and replace it with an image, we assign a height for it so the image wont cut off */ div#header { /* adjust according your image size */ height: 100px; margin: 10; padding: 0; /* Stone Church: this is the little thumbnail picture at the upper left; the drawing, like on the front of the bulletin. Adding a border element below the background puts a border around the entire top rectangle, the whole width of the page. */ background: url(uploads/images/SC_images/2_2.jpg) no-repeat left; } div#header h1 a { /* you can set your own image here */ background: url() no-repeat left top; /* this will make the "a" link a solid shape */ display: block; /* adjust according your image size */ height: 100px; /* this hides the text */ text-indent: -999em; /* old firefox would have shown underline for the link, this explicitly hides it */ text-decoration: none; } div#header h1 { margin: 0; padding: 0; } div#header h2 { /* this is where the site name is */ float: right; line-height: 2.2em; /* Stone Church: below is the font size which pushes the search bar into the gray menu bar and sizes the title of the site in the upper right. Changing the line-height element above lets you mess with the title without disrupting a lot of extra */ font-size: 4.3em; /* keeps the size uniform */ /* Stone Church: this color below is for the website words' gray title color */ color: #606060; } div.crbk { /* sets all to 0. Stone Church: no idea what these change, as changing them didn't do anything */ margin: 0; padding: 0; /* you can set your own image here */ background: url() no-repeat right bottom; } div.breadcrumbs { /* CSS short hand rule first value is top then right, bottom and left */ padding: 1em 2em 1em 1em; /* Stone Church: 80% font size allows breadcrumbs on one line. its good to set font sizes to be relative, this way viewer can change his/her font size */ font-size: 80%; /* css shorthand rule will be opened to be "0px 0px 0px 0px" */ margin: 0px; /* you can set your own image here */ background: url() no-repeat left bottom; } div.breadcrumbs span.lastitem { font-weight: bold; } div#search { /* position for the search box */ float: right; /* Stone Church: values below further refine position of the search box. Changing the margin to 12 em moved the search box to the right. CSS short hand rule (for padding) first value is top then right, bottom and left enough width for the search input box */ width: 27em; text-align: right; text-decoration: none; color: white; padding: 0.5em 1.5 1.0em 0; margin: 0 5em; } /* Stone Church: changed border from "none" to "double line" to create a button. Rest below is a class for Submit button for the search input box */ input.search-button { border-style:outset; color: white; height: 22px; width: 53px margin-left: 5px; padding: 0px 2px 5px 5px; /* makes the hover cursor show, you can set your own cursor here */ cursor: pointer; /* you can set your own image here */ background: url() no-repeat center center; } div#content { /* Stone Church: changing margin-left to 3% from 21% moves the body text to the left so it's more snug. I added a margin-right but can't figure out how it works. Also added a line-height rule that wasn't there before, which gives the main body text a double-spaced look. */ margin-left: 3%; margin-right: 5% padding: 0px; line-height: 2.8em } /* this gets all the outside calls that were used on the div#main before */ div.back1 { /* Stone Chuch: changed the margin-right rule from 2% to 5%, but it didn't seem to do anything. this will give room for sidebar to be on the left side, make sure this number is bigger than sidebar width */ margin-left: 15%; /* and some air on the right */ margin-right: 5%; /* you can set your own image here */ background: blue no-repeat right top; } /* this is an IE6 hack, you may see these through out the CSS */ * html div.back1 { /* unlike other browser IE6 needs float:right and a width */ float: right; width: 69%; /* and we take this out or it will stop at the bottom */ margin-left: 0%; /* and some air on the right */ margin-right: 10px; /* you can set your own image here */ background: url() no-repeat right top; } div#main { /* this is the last inside div so we set the space inside it to keep all content away from the edges of images/box */ /*padding: 10px 15px;*/ /* you can set your own image here */ background: url() no-repeat right bottom; } div.footback { /* keep footer below content and menu */ clear: both; /* this sets 10px on right to let the right image show, the balance 10px left on next div */ padding: 0px 10px 0px 0px; /* you can set your own image here */ background: url() no-repeat right top; } div#footer { /* this sets 10px on left to balance 10px right on last div */ padding: 0px 0px 0px 10px; /* color of text, the link color is set below */ color: black; /* you can set your own image here */ background: url() no-repeat left top; } div.leftfoot { float: left; width: 30%; margin-left: 20px } div#footer p { /* sets different font size from default */ font-size: 0.8em; /* some air for footer */ padding: 1.5em; /* centered text */ text-align: center; margin: 0; } div#footer p a { /* footer link would be same color as default we want it same as footer text */ color: black; } /* as we hid all hr for accessibility we create new hr with div class="hr" element */ div.hr { height: 1px; padding: 1em; border-bottom: 1px dotted black; margin: 1em; } /* relational links under content */ div.left49 { /* combined percentages of left+right equaling 100% might lead to rounding error on some browser */ width: 70%; } div.right49 { float: right; width: 29%; /* set right to keep text on right */ text-align: right; } /********************CONTENT STYLING*********************/ /* HEADINGS */ div#content h1 { /* font size for h1 */ font-size: 2.5em; line-height: 5em; margin: 0; } div#content h2 { color: black; /* Stone Church: this is the heading under the menu bar */ font-size: 4.0em; text-align: center; /* some air around the text */ padding-left: 0.0em; padding-bottom: 1px; /* set borders around header */ border-bottom: 1px ; border-left: 0.0em ; /* a larder than h1 line height */ line-height: 1.5em; /* and some air under the border */ margin: 0 0 0.5em 0; } div#content h3 { color: #294B5F; font-size: 2.0em; line-height: 1.3em; margin: 0 0 0.5em 0; } div#content h4 { color: #294B5F; font-size: 1.2em; line-height: 1.3em; margin: 0 0 0.25em 0; } div#content h5 { color: #294B5F; font-size: 1.1em; line-height: 1.3em; margin: 0 0 0.25em 0; } h6 { color: #294B5F; font-size: 1em; line-height: 1.3em; margin: 0 0 0.25em 0; } /* END HEADINGS */ /* TEXT */ p { /* default p font size, this is set different in some other divs. Stone Church: changing this moves the text down but doesn't change fonts! */ font-size: 1em; /* some air around p elements */ margin: 0 0 1.5em 0; line-height: 2.4em; padding: 0; } blockquote { border-left: 10px solid #ddd; margin-left: 10px; } strong, b { /* explicit setting for these */ font-weight: bold; } em, i { /* explicit setting for these */ font-style: italic; } /* Wrapping text in tags. Makes CSS not validate */ code, pre { /* css-3 */ white-space: pre-wrap; /* Mozilla, since 1999 */ white-space: -moz-pre-wrap; /* Opera 4-6 */ white-space: -pre-wrap; /* Opera 7 */ white-space: -o-pre-wrap; /* Internet Explorer 5.5+ */ word-wrap: break-word; font-family: "Courier New", Courier, monospace; font-size: 1em; } pre { /* black border for pre blocks */ border: 1px solid #000; /* set different from surroundings to stand out */ background-color: #ddd; margin: 0 1em 1em 1em; padding: 0.5em; line-height: 1.5em; font-size: 90%; } /* Separating the divs on the template explanation page */ div.templatecode { margin: 0 0 2.5em; } /* END TEXT */ /* LISTS */ /* lists in content need some margins to look nice */ div#main ul, div#main ol, div#main dl { font-size: 1.0em; line-height: 1.4em; margin: 0 0 1.5em 0; } div#main ul li, div#main ol li { margin: 0 0 0.25em 3em; } /* definition lists topics on bold */ div#main dl { margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #c0c0c0; } div#main dl dt { font-weight: bold; margin: 0 0 0 1em; } div#main dl dd { margin: 0 0 1em 1em; } /* END LISTS */ /* END TEXT */ /* hide accessible hr tags */ .accessibility {display: none !important;} /* End of 'Stone Layout no sidebar' */