[Opda-develop] OPDA/themes/default/stylesheets default.css, 1.6, 1.7
Brought to you by:
digitalpodcast
Menu
▾
▴
[Opda-develop] OPDA/themes/default/stylesheets default.css, 1.6, 1.7
|
From: Alex N. <dig...@us...> - 2006-07-23 06:25:55
|
Update of /cvsroot/opda/OPDA/themes/default/stylesheets In directory sc8-pr-cvs3.sourceforge.net:/tmp/cvs-serv14702/themes/default/stylesheets Modified Files: default.css Log Message: made major changes to css to improve ui. font size will need to be tuned up across the app. Old default.css moved to default-old.css. Also updated default.rhtml to use new css Index: default.css =================================================================== RCS file: /cvsroot/opda/OPDA/themes/default/stylesheets/default.css,v retrieving revision 1.6 retrieving revision 1.7 diff -C2 -d -r1.6 -r1.7 *** default.css 22 Jul 2006 22:57:47 -0000 1.6 --- default.css 23 Jul 2006 06:25:50 -0000 1.7 *************** *** 1,70 **** - /**************************** - PAGE CONTROL - html - overall setting - body - overall setting - page - set width for app - - content - set width for content - threecolumnright - right column for 3 column page - threecolumnmiddle - middle column for 3 column page - threecolumnleft - left column for 3 column page - wideleftcontent - left column for listings/details pages - - *****************************/ ! html { ! color: #000000; ! background-color: #3F4B50; } body { color: #000000; ! background-color: #3F4B50; ! margin: 0; ! padding: 0; ! text-align: center; ! font-size: 62.5%; /* Resets 1em to 10px */ ! font-family: Verdana, Arial, sans-serif; ! } ! #page { ! width: 95em; ! margin: 0 auto; ! padding: 0; ! position: relative; ! background-color: #FFFFFF; } ! #content { ! } ! p { ! margin:0; ! padding:0; } - #threecolumnright, #threecolumnmiddle, #threecolumnleft { - width: 32%; } ! #threecolumnright { ! padding: 0; ! float:right; ! background-color:#FFF; ! } ! #threecolumnmiddle { ! padding: 0; ! float:right; ! background-color:#FFF; ! margin-right: 2%; } ! #threecolumnleft { ! padding: 0; ! float:left; ! background-color:#FFF; } --- 1,226 ---- ! /** Global **/ ! /* technique explained @ http://leftjustified.net/journal/2004/10/19/global-ws-reset/ */ ! * { ! margin:0; ! padding:0; ! } ! h2 { ! font:bold 2em/1.4 "Lucida Bright", Georgia, Times, serif; ! color:#8B9F86; ! } ! h3 { ! font:bold 1em/1.6 "Lucida Bright", Georgia, Times, serif; ! color:#845697; ! } ! /* links */ ! a { ! color:#4C53E0; ! } ! a:focus, a:hover, a:active { ! color:#EB8518; } + /** end global **/ + body { + background:#3F4B50; + font-size:62.5%; /* Resets 1em to 10px */; + } + + + #outer { + margin:0 auto; + width:94%; + min-width:70em; + max-width:95em; + border:10px solid #3F4B50; + border-width:0 10px; + background:#f8f8f8; + } + + /* float clearing - technique explained @ http://www.csscreator.com/attributes/containedfloat.php */ + ul#nav:after, #outer:after, #sub:after, form:after, form div:after { + content:"."; + display:block; + visibility:hidden; + clear:both; + height:0; + } + * html #nav, * html #content, * html form, * html form div { + height:1%; + } + + /** hiding of elements for assistive devices (screen readers etc) **/ + ul#access, .off { + position:absolute; + left:-1000em; + top:-1000em; + } + /* <hr />'s added to mark-up for browsers without CSS */ + hr {display:none} + + /** Title **/ + #header { + background:#000000; + border:1px solid #3F4B50; + } + + + #header div.floatright { + text-align: right; + position: relative; + float: right; + margin: 0 1em 0 0; + padding:0; + } + /*------------------------------------------------- + PAGE NAVBAR MENU + -------------------------------------------------*/ + #pagemenu { + min-width:500px; + margin: 0px 0 0 30px; + height: 3em; + padding: 0 0 0 0; + } + + #pagemenu ul { + margin: 0; + padding:0; + } + + #pagemenu li { + display: inline; + margin: 0; padding: 0; + list-style: none; + border: none; + background-color:#2C9B9B; + } + + #pagemenu a { + display: block; + float: left; + border: 1px solid #666666; color: #000000; ! background-color: #99D9F5; ! text-decoration: none; ! font-size: 12px; ! font-weight: normal; ! padding: 4px 8px 6px 8px; ! margin: 0; ! } + #pagemenu a:hover { + background-color: #FFFF66; + } ! #pagemenu a.current { ! background-color: #2C9B9B; ! color: #006600; ! cursor: default; ! border-bottom: 1px solid #2C9B9B; } ! #pagemenu li.right a { ! float: right; ! margin-right: 0px; } ! #pagemenu li.farright a { ! float: right; ! margin-right: 30px; } + + /** Unused Navigation **/ + ul#nav { + list-style:none; + margin:3px 0 1em; + text-align:center; + background:#fff; + padding-bottom:2px; + border-top:2px solid #D7E7D3; + border-bottom:2px solid #845697; + } + #nav li { + list-style:none; + width:25%; + float:left; + display:block; + text-align:center; + background:#EAF0E6 url(img/mnu-btm.gif) repeat-x left bottom; + } + * html #nav li { + /** IE/PC hack due to haphazard line breaks when combined widths = 100% **/ + \width:24.9%; + } + #nav a { + display:block; + font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif; + text-decoration:none; + color:#845697; + margin:1px; + background:transparent url(img/mnu-top.gif) repeat-x left top; + } + #nav a:focus, #nav a:hover, #nav a:active { + border:1px inset #8B9F86; + margin:0; + color:#EB8518; + text-decoration:underline; + } + /** current menu item **/ + ul#nav li#active { + background:#F6F4F8; + font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif; + color:#000; + text-decoration:underline; } ! ! /** Content Containers **/ ! #content { ! ! border:10px solid #F8F8F8; ! border-width:0 10px; ! background:#F8F8F8; } ! #sub, #right { ! font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif; ! word-spacing:.1em; ! margin-bottom:1em; } ! /****** ! div#sub is an extra wrapper, which allows the center column to come first in the source. ! #sub is floated left, with #center -the content column- nested within and floated to the right. ! concept from http://www.positioniseverything.net/piefecta-rigid.html ! ******/ ! #sub { ! width:66%; ! float:left; ! position:relative; ! } ! ! /*** ! Containers should be named according to what they contain. not where they sit in the layout. ! To make identifying each column more simple, I have named them according to their position. ! ***/ ! #center { ! width:49%; ! float:right; ! margin: 10px 0 0 0; ! ! } ! #left { ! width:49%; ! float:left; ! margin: 10px 0 0 0; ! ! } ! #right { ! width:33%; ! float:right; ! margin: 10px 0 0 0; ! } *************** *** 72,82 **** text-align: left; float:left; ! width: 740px; ! margin: 10px 0 0 10px; padding: 0; } /*************************************************** CHANNEL --- 228,362 ---- text-align: left; float:left; ! width: 70em; ! margin: 0 0 0 0; padding: 0; } + + /** Main Col Contents **/ + #center p { + margin:.5em 2% .5em 0; + } + img.img-right { + float:right; + } + + /** Left Col Contents**/ + #left h2 { + color:#845697; + font-size:1.5em; + } + #left p { + font-size:.9em; + } + a.serviceBtn { + display:block; + clear:right; + padding:.1em 2%; + margin:.5em 0; + text-align:center; + text-decoration:none; + color:#845697; + font:bold 1em/2 'Lucida Grande', arial, tahoma, verdana, sans-serif; + background:#F6F4F8 url(img/btn-purple.gif) repeat-x left bottom; + border:2px outset #845697; + } + a.serviceBtn:focus, a.serviceBtn:hover, a.serviceBtn:active { + text-decoration:underline; + border-style:inset; + } + /** New Products Special offers **/ + .offerList { + background:#EEFAEA; + border:1px solid #C8DCC2; + margin:1em 0; + } + .offerList h2 { + color:#3A4F3B; + margin:.1em 2%; + } + .offerList ul { + margin:.1em 2%; + list-style:none; + } + .offerList ul li { + list-style:none; + padding-left:20px; + margin:.3em 0; + background:transparent url(img/bullet.gif) no-repeat 2px 50%; + } + /** Forms **/ + form { + margin:1em 0; + } + legend { + font:bold 1.1em/1.5 'Lucida Grande', Arial, tahoma, verdana, sans-serif; + color:#3A4F3B; + } + input.txt { + width:98%; + margin:0 auto .5em; + border:2px solid #A5ACB2; + background:#fff; + } + input.btn { + background:#BED2B8 url(img/btn.gif) repeat-x; + padding:.1em; + width:7em; + float:right; + color:#fff; + font:bold 1em/1.4 "Lucida Bright", Georgia, Times, serif; + cursor:pointer; + } + input:focus, input.focus { + border-style:inset; + } + label { + display:block; + margin-top:.5em; + } + /* search */ + #search fieldset { + border:1px solid #C8DCC2; + padding:.3em .5em; + } + /* subscribe */ + #subscribe { + background:#F6F4F8; + border:1px solid #B2A9B9; + + } + #subscribe div { + margin:.3em .5em; + } + #subscribe h2 { + color:#845697; + } + + /** Footer **/ + #footer { + clear:both; + margin-top:1em; + font:.9em/1 'Lucida Grande', Arial, tahoma, verdana, sans-serif; + border-top:3px double #C8DCC2; + } + #footer p { + margin:1em 1em 1em 0; + float:right; + width:30%; + text-align:right; + } + #footer ul { + list-style:none; + margin-top:.7em; + } + #footer li { + display:inline; + border-right: 1px solid #C8DCC2; + padding:.3em 2%; + } + /*************************************************** CHANNEL *************** *** 97,101 **** text-align: left; float:left; ! width: 72em; margin: 0 0 0 0px; padding: 0; --- 377,381 ---- text-align: left; float:left; ! width: 70em; margin: 0 0 0 0px; padding: 0; *************** *** 108,114 **** float:left; width: 100%; ! background: #99D9F5; margin: 0 0 0 0; padding: 0.5em 0 0.5em 0; } --- 388,395 ---- float:left; width: 100%; ! background: #2C9B9B; margin: 0 0 0 0; padding: 0.5em 0 0.5em 0; + border-bottom: 10px solid #F8F8F8; } *************** *** 146,150 **** text-align: left; float:left; ! width: 72em; margin: 1em 0 0 0; padding: 0; --- 427,431 ---- text-align: left; float:left; ! width: 70em; margin: 1em 0 0 0; padding: 0; *************** *** 155,159 **** text-align: left; float:left; ! width: 70em; margin: 1em 0 0 1em; padding: 0; --- 436,440 ---- text-align: left; float:left; ! width: 68em; margin: 1em 0 0 1em; padding: 0; *************** *** 162,172 **** .itemtitle { ! font-size: 1.5em; font-weight: bold; } .itemtext { ! font-size: 1.3em; ! line-height: 1.4em; } .boxtitle { --- 443,453 ---- .itemtitle { ! font-size: 1.8em; font-weight: bold; } .itemtext { ! font-size: 1.5em; ! line-height: 1.6em; } .boxtitle { *************** *** 174,177 **** --- 455,459 ---- margin: 0 0 .2em 1em; color: #34384B; + } .channeltext { *************** *** 180,352 **** } - /*************************************************** - FOOTER - ***************************************************/ - - #footer { - clear: left; - font-size: 9px; - color: #666; - margin: 4px 0 20px 30px; - text-align: center; - padding-bottom: 15px; - } - - #footer a:link, #Footer a:visited { - color: #666; - padding: 0; - } - - #footer a:hover { - color: #fff; - background: #666; - } - - #footer span.Right { - float:right; - text-align:right; - color: #666; - margin: 0 50px 0 0; - - } - #footer span.Left { - float:left; - text-align:left; - color: #666; - - } - - - - /*************************************************** - HEADER - ***************************************************/ - #header { - /*width: 100%;*/ - background:#910002; - padding: 4px 0 0.5px 0; - margin: 0; - text-align: left; - position: relative; - } - - #header h1{ - color: #FFFFFF; - font-weight: bold; - font-size: 25px; - text-align: left; - padding: 0; - margin: 0 0 0 30px; - - - } - - - #header h1 a:link, h1 a:visited { - color: #FFFFFF; - text-decoration: none; - padding: 0; - - } - - #header h1 a:hover { - color: #fc0; - text-decoration: underline; - background-color:#ffc; - } - - - #header p { - padding: 0 30px 10px 32px; - margin: 7px 0 0 0; - font-size: 9px; - font-weight: normal; - font-family: verdana; - text-align: left; - color: #fff; - } - - #header p a { - color: #fff; - } - - #header p a:hover { - color: #000; - background-color: #ffc; - } - - #header p a.current { - color: #fc0; - font-weight: bold; - text-decoration: none; - } - - #header p a.current:hover { - color: #fc0; - background-color: #036; - } - - - #header p span.floatright { - text-align: right; - width: 300px; - position: relative; - float: right; - } - /*------------------------------------------------- - PAGE NAVBAR MENU - -------------------------------------------------*/ - #pagemenu { - min-width:500px; - margin: 10px 0 0 30px; - height: 30px; - padding: 0; - } - - #pagemenu ul { - margin: 0; - padding:0; - } - - #pagemenu li { - display: inline; - margin: 0; padding: 0; - list-style: none; - border: none; - background-color:#5D6487 - } - - #pagemenu a { - display: block; - float: left; - border: 1px solid #666666; - color: #000000; - background-color: #FFFFCC; - text-decoration: none; - font-size: 12px; - font-weight: normal; - padding: 4px 8px 6px 8px; - margin: 0; - } - #pagemenu a:hover { - background-color: #FFFF66; - } - #pagemenu a.current { - background-color: #E6E6E6; - color: #006600; - cursor: default; - border-bottom: 1px solid #E6E6E6; - } - #pagemenu li.right a { - float: right; - margin-right: 0px; - } - #pagemenu li.farright a { - float: right; - margin-right: 30px; - } /*************************************************** --- 462,468 ---- *************** *** 460,464 **** margin: 1em 0.5em 0 0px; text-align:left; ! background-color:#FFFFFF; border-left: 1px dashed; --- 576,580 ---- margin: 1em 0.5em 0 0px; text-align:left; ! background-color:#F8F8F8; border-left: 1px dashed; *************** *** 469,473 **** margin: 0.5em 0 1em 1em; padding: 0; ! font-size: 1.1em; font-weight: bold; color: #333; --- 585,589 ---- margin: 0.5em 0 1em 1em; padding: 0; ! font-size: 1.5em; font-weight: bold; color: #333; *************** *** 486,490 **** margin: 0 0 0.4em 1em; padding: 0; ! font-size: 1em; color: #999; } --- 602,606 ---- margin: 0 0 0.4em 1em; padding: 0; ! font-size: 1.4em; color: #999; } *************** *** 570,579 **** .smalltitle { ! font-size: 1.1em; font-weight: bold; } .smalldescription { ! font-size: 1em; } --- 686,695 ---- .smalltitle { ! font-size: 1.3em; font-weight: bold; } .smalldescription { ! font-size: 1.2em; } |
