/*CSS written by Christopher Field 2005 December-2006 January for the University of North Carolina Wilmingon - Randall Library website. This CSS styles approximately 620 pages. Pieces from it may be used under the Creative Commons License, so long as you do not mind using code from someone who roots for the Pittsburgh Steelers NFL football team.*/ body{font-family: Verdana, Arial, Helvetica, sans-serif; color:#000000;background-color:#f5f5f5;font-size:76%; margin:0px auto;width:770px;} /*The "auto" attribute of 'margin' allows us to center content on high- resolution monitors */ /* These pseudo-classes control the appearance and behavior of all hyperlinks in the library website. If you want to change this behavior, please override it using an internal style sheet in the tag of the HTML page you wish to affect. ie: */ A:link {color:#000099; text-decoration: none; border:none;} A:visited {color: #009; text-decoration: none; border:none;} A:active {color: #069; text-decoration: none; } A:hover {color: #009; text-decoration: none; background-color:#9cf; border:none;} A img{border:none; background-color:#fff;} /*These next class controls the position of the UNCW header of the temple, faded teal banner */ .mastheadimage{margin-top:3px;margin-left:0px;} /* Controls the library name beneath the banner */ .heading {font-size:1.4em; font-family:Helvetica, sans-serif;color:#000066;font-weight:600;margin-left:45px; clear:both; border-bottom:1px solid #006;} /* Content and Page Boxes NOTE: there are more content boxes in other style sheets*/ /*this class holds all the content of each page */ #wrapper{margin:3px auto; width:700px; background-color:#f5f5f5;} /* This class controls the _main_ content area for each template. It is very important.*/ .bigbox{padding:10px; background-color:#fff;border:1px solid #ccc; margin-top:25px;float:left; width:96%;} .bigbox#slim{width:600px;border-top:1px dashed #ccc;} /* for a slimmer box*/ /*the next two classes are used in the Two_Columns and the More_Information templates*/ .twoboxesone {float:left;margin:20px 2px 20px 5px;width:55%;} .twoboxestwo {float:right;margin:20px 2px 20px 5px;width:40%;} /* next four control a three-column lay-out on the databases index and the subject guides index*/ .columns{float:left;width:33%;padding:0px;margin:0px;} .columns ul {list-style-type:none;list-style-position:outside;padding:0px 2px 0 0;margin:10px 0 0 0;background-color:#fff; border:1px solid #ccc;} .columns ul#colored{background-color:#f3f7e3;border-left:none;border-right:none;} .columns ul li{ padding:0px; margin-left:8px; margin-bottom: 10px; margin-top: 5px; } /* This ends three column layout area */ /* END content and page boxes */ /*This is the page title that the viewer sees on each page */ #title{text-align:left; font-size:1.6em; background-color:#fff; padding:5px 0px 5px 5px; border:1px solid #ccc;margin-top:16px;} /*Breadcrumbs class controls the "breadcrumbs" trail at the top of every page which helps the user find their way through the website */ .breadcrumbs{font-size:0.8em; padding:1px; margin:1px 0px 5px 25px;} /*this is just to ensure that a break tag clears left */ br{ clear:left; } p#title{margin-bottom:0px;} /* Creates the horizontal menu found in each subject guides page & the email link on CMC pages.*/ #nav {clear:both;} #nav ul {} #nav ul li{margin:0px 15px 20px 0px; padding:1px 0px;float:left; list-style-type:none;} #collections li{list-style-type:none; float:left;} /* this controls the persistent navigation links */ .mainlinks{margin:2px 0px 10px 0px; text-align:right;} .mainlinks a{margin:0 0 0 8px;padding:2px;border:1px solid #ccc;border-top:none; background-color:#fff;} .mainlinks a:visited{border:1px solid #ccc;border-top:none;} .mainlinks a:active{border:1px solid #ccc;border-top:none;background-color:#ff0;} .mainlinks a:hover{border:1px solid #ccc;border-top:none;background-color:#fff;text-decoration:none;} .mainlinks a#home:hover{border-bottom:2px solid #066;} .mainlinks a#research:hover{border-bottom:2px solid #09c;} .mainlinks a#services:hover{border-bottom:2px solid #c90;} .mainlinks a#collections:hover{border-bottom:2px solid #f60;} .mainlinks a#about:hover{border-bottom:2px solid #9cc;} .mainlinks a#ask:hover{border-bottom:2px solid #ff0;} /* table-less forms layout graciously explained to the masses by www.quirksmode.org */ form{background-color:#9cf; border:1px solid black;margin:10px;padding:10px; width:550px;} label,input {display:block;margin-bottom:10px;float:left;} label {text-align:left;width:95px; margin-right:10px;} textarea {text-align:left;} form#radio label{width:auto; margin:2px 10px 2px 2px;} /*The "for" attribute binds a label to another element. In your HTML, set the value of the "for" attribute equal to the value of the "id" attribute of the related element. - from w3schools.com SO "for" and "id" must be the same between the label and input values. The "display:block" additionally helps to bind them together*/ /* END table-less forms */ /*the next three classes create the colored "post-it" note boxes (top banner colored with trim)*/ .textbox {float:right; padding:0px; margin:10px;border:1px solid #CCC; width:auto; height:auto;} .textboxtitle {background-color:#6699FF; padding: 3px 0px;} .textbox #text{padding: 3px 5px;} /*these are also used on the homepage style sheet */ .textbox#help{border-color:#FF0000; padding:5px;} /* Styles for Databases A-Z */ /* Gives you the decoration and placement of the horizontal list of letters */ .letter{text-decoration:none;text-align:center;text-transform:uppercase;font-weight:400;letter-spacing:0.2em;font-size:1.5em;} .letter a#on{color:#000;font-size:1.3em;} /*use this class to create hanging indents such as for citations. */ .hanging {text-indent:-25px; margin-left:25px;} /* The title of each database item*/ .dbtitle{font-size:1.3em;float:left;overflow:visible;padding-left:30px; width:98%;} /* The information about each database */ .summary{float:left;color:#000000;margin:5px 0px 20px 40px;} /* END of A-Z Database List Pages */ /*this positions the footer element - basically just font and centering it */ .footer{font-size:.9em;text-align:center;margin:5px auto;} li { margin-bottom: 3px; } .floatright { margin: 5px; float: right; } .beta {float:right; width:200px; padding: 5px 5px 5px 5px; border: 2px dotted #006666;} .beta img { float:left; margin-right: 3px;}