/* JD_Dark-Orange CSS Template for Joomla Created By: Kris Smeds Date: 05-03-2007 */ /* -------------COLOUR LEGEND----------------- #202c33 - background, sectiontable1 bg #2e404a - sectiontable2 bg, module background #3f5866 - borders #e6e6e6 - text, module header text, link hover, active menu, top menu bg #ff6600 - link, top menu hover, orange #000001 - footer color, top menu link #000000 - module header bg ------------------------------------------- */ /* -----------BROWSER RESET------------ */ * { margin:0; padding:0; } /* --------------------------------------------------------- PAGE LAYOUT - 3 column tableless fluid width using floats - also includes header, top-menu, pathway, banner, tab-menu, dashboard, and footer sections - supports column hiding (coded in index.php) --------------------------------------------------------- */ body { margin:0; padding:0; background-color: #202c33; } #wrap { min-width: 640px; } #headerbg { background: url(../images/headerbg.jpg) repeat-x; height: 112px; } #header { background: url(../images/header.jpg) no-repeat; height: 112px; } #search { float: right; width: 16%; margin: 10px; } #top-menu { clear: both; width: 100%; margin: 0; padding: 0;} #container { float: left; width: 81%; } #left-sidebar { float:left; width: 22%; overflow: hidden; } #main-body { float: right; width: 76.8%; overflow: hidden; } #pathway { padding: 0.3em; } #banner { width: 100%; text-align: center; } #tab-menu {} #content {} #dash-top { width: 100%; margin: 0; text-align: center; } #dash-left { float: left; width: 49.5%; text-align: left; margin: 0; } #dash-right { float: right; width: 49.5%; text-align: left; margin: 0; } #dash-bot { clear: both; width: 100%; margin: 0; text-align: center; } #right-sidebar { float: right; width: 18%; /* margin-left: -3px; /*for IE */ overflow: hidden; } #footer { clear: both; margin-top: 20px; padding: 0.3em; background: #e6e6e6; border-top: 1px solid #3f5866; border-bottom: 1px solid #3f5866; color: #000001; text-align: center; } /* ----------------------------------------------------------- BASIC FORMATING ----------------------------------------------------------- */ body { font-size:76%; font-family: Arial, sans-serif; line-height:1.3em; color: #e6e6e6; } h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {padding: 0.3em 0;} li,dd {margin-left:1em;} fieldset {padding: 0.5em;} /*textarea {width: 80%;}*/ p {} /*formatting all
(division) items. This is a catch-all that only applies when no other style has been defined.*/ td {} /*formatting all items. This default setting is used when no other style has been defined.*/ tr {} /*formatting all items. This default setting is used when no other style has been defined.*/ ul {} /*formatting all UL (unordered list) items. This default setting is used when no other style has been defined.*/ a {text-decoration: none;} a:link, a:visited { color: #ff6600;} /* general links style*/ a:hover { color: #e6e6e6; text-decoration: none; } a.popup:hover { color: #ff6600; text-decoration: none; } hr {} /* horizontal line in your template*/ hr.separator {} /* ---------------------------------------------------------- JOOMLA SPECIFIC ---------------------------------------------------------- */ /* --------------MODULE CONTAINERS--------------- */ /* BASE MODULE */ div.moduletable, div.module { background: #2e404a url(../images/corner-tl.png) 0 0 no-repeat; margin: 5px 0; } div.moduletable div, div.module div { background: url(../images/corner-tr.png) 100% 0 no-repeat; } div.moduletable div div, div.module div div { background: url(../images/corner-bl.png) 0 100% no-repeat; } div.moduletable div div div, div.module div div div{ background: url(../images/corner-br.png) 100% 100% no-repeat; padding: 0 5px 5px 5px; width: auto !important; width: 100%; } div.moduletable div div div div, div.module div div div div{ padding: 0; margin: 0; background: none; } div.moduletable h3, div.module h3 { color: #e6e6e6; font-weight: bold; font-size: 1em; text-align: center; margin: 0 3px 0 3px; height: 25px; background: url(../images/module-bar.png) repeat-x; } div.moduletable div.title, div.module div.title { color: #e6e6e6; font-weight: bold; font-size: 1em; text-align: center; margin: 0 3px 0 3px; height: 25px; background: url(../images/module-bar.png) repeat-x; } div.module-left div.title { color: #e6e6e6; font-weight: bold; font-size: 1em; text-align: center; margin: 0 3px 0 -5px; height: 25px; background: url(../images/module-bar.png) repeat-x; } div.module-right div.title { color: #e6e6e6; font-weight: bold; font-size: 1em; text-align: center; margin: 0 -5px 0 3px; height: 25px; background: url(../images/module-bar.png) repeat-x; } table.modtitle { margin-top: 4px; margin-bottom: 4px; } .moduletable a, .module a {font-weight: bold;} /*needed for formatting newest users and online users modules */ span.moduletable {border-style: none;} span.moduletable a {font-family: Arial, sans-serif; font-size: 12px;} span.moduletable a:link, span.moduletable a:visited {color: #ff6600;} span.moduletable a:hover{color: #e6e6e6;} /* TOP MENU MODULETABLE */ .moduletable-top { background: #e6e6e6; border-bottom: 1px solid #3f5866; border-top: 1px solid #3f5866; margin: 0; padding: 0; } /* LEFT MODULETABLE */ div.moduletable-left, div.module-left { background: url(../images/side-tr.png) 100% 0 no-repeat; margin-top: 20px; } div.moduletable-left div, div.module-left div { background: url(../images/side-br.png) 100% 100% no-repeat; padding: 0 5px 5px 5px; width: auto !important; width: 100%; } div.moduletable-left div div, div.module-left div div { margin: 0; padding: 0; background: none; } div.moduletable-left h3, div.module-left h3 { color: #e6e6e6; font-weight: bold; font-size: 1em; text-align: center; margin: 0 3px 0 -5px; height: 25px; background: url(../images/module-bar.png) repeat-x; } .moduletable-left a, .module-left a {font-weight: bold;} /* RIGHT MODULE */ div.moduletable-right, div.module-right { background: url(../images/side-tl.png) 0 0 no-repeat; margin-top: 20px; } div.moduletable-right div, div.module-right div { background: url(../images/side-bl.png) 0 100% no-repeat; padding: 0 5px 5px 5px; width: auto !important; width: 100%; } div.moduletable-right div div, div.module-right div div { margin: 0; padding: 0; background: none; } div.moduletable-right h3, div.module-right h3 { color: #e6e6e6; font-weight: bold; font-size: 1em; text-align: center; margin: 0 -5px 0 3px; height: 25px; background: url(../images/module-bar.png) repeat-x; } .moduletable-right a, .module-right a {font-weight: bold;} /* SEARCH MODULETABLE */ .moduletable-search { text-align: center; overflow: hidden; } /* BANNER MODULE */ .moduletable-banner, .module-banner { margin: 5px 0; padding: 0; text-align: center; } /* -----------------MENUS------------------*/ /* BASE MENU (LEFT)*/ ul#mainlevel {} ul#mainlevel li{ font-size: 1em; font-weight: bold; line-height: 1.3em; list-style-type: none; list-style-position: outside; } a.mainlevel:link, a.mainlevel:visited {} #active_menu {color: #e6e6e6;} /* this styling is for the menu item when it is active, even in main/sub position*/ #active_menu:hover {color: #e6e6e6;} ul#mainlevel-nav {} ul#mainlevel-nav li{} #mainlevel-nav a:link {} #mainlevel-nav a:visited{} #mainlevel-nav a:hover {} a.sublevel{} /* this styling is for menu items that HAS A PARENT */ a.sublevel:link {} a.sublevel:visited {} a.sublevel:hover {} /* TOP MENU */ ul#mainlevel-top { margin: 0; padding: 0; font-size: 1.2em; line-height: 2em; font-weight: bold; } ul#mainlevel-top li { margin: 0; padding: 0; list-style: none; display: inline; border-right: 1px dotted #000000; } ul#mainlevel-top li a { padding: 3px 1em; text-decoration: none; } a.mainlevel-top:link, a.mainlevel-top:visited {color: #000001;} a.mainlevel-top:hover {color: #ff6600;} #active_menu-top{color: #ff6600;} #active_menu-top:hover{color: #ff6600;} /* TABBED SUB-MENU */ .moduletable-tabs {} ul#mainlevel-tabs { margin-bottom:2px; padding: 2px 0; border-bottom: 1px solid #3f5866; font: bold 14px Arial, sans-serif; } ul#mainlevel-tabs li { line-height: 16px; padding-left: 1px; padding-top: 0px; background-image: none; list-style: none; margin: 0; display: inline; } ul#mainlevel-tabs li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #3f5866; border-bottom: none; background: #2e404a; text-decoration: none; } ul#mainlevel-tabs li a:link, ul#mainlevel-tabs li a:visited { color: #ff6600;} ul#mainlevel-tabs li a:hover { color: #e6e6e6; background: #202c33; } ul#mainlevel-tabs li a#active_menu-tabs, ul#mainlevel-tabs li a.mainlevel_current-tabs { color: #e6e6e6; background: #202c33; border-bottom: 1px solid #202c33; } /* ------------FORMS SETTINGS------------ */ /* all buttons */ .button-left, .button, .button-right, #submitchat, #moresmileys { border: 1px solid #3f5866; background: #e6e6e6 url(../images/silver-btn.png) repeat-x; padding: 3px 5px; margin: 0 2px; cursor: pointer; } /* This is controlled from the modules settings in the joomla backend #chatoutput {border:0;} /* to delete blue border around shoutbox #shoutboxname, #chatbarText {margin:0 0 0 8px;} /* fixing box's position */ .inputbox {} .search {} /* -----------NAVIGATION SETTINGS------------- */ .pagenavbar {}/*Sets the style for the footer navigation ("<< Start < Prev Next > End >>") when they do not appear as hyperlinks (when only a few articles exist).*/ .pagenavbar:link {} /*Style for the footer navigation ("<< Start < Prev Next > End >>") when they become hyper links*/ .pagenavbar:visited {} .pagenav {} /* as the name implies, this is for formatting texts for those "<< Start < Previous 1 Next > End >>" links */ a.pagenav:link {} a.pagenav:visited {} a.pagenav:hover {} a.readon:link {} /*Style for the "Read More" link that is displayed for large content items*/ a.readon:hover {} a.readon:visited {} .back_button {} /*Style for the "BACK" button*/ .pagenav_prev {} /*Style for the PRE button*/ .pagenav_next {} /*Style for the NEXT button*/ /* -----------------PATHWAY------------------- */ .pathway{} /* ----------LATEST NEWS/MOST READ MODULES-------------- */ .latestnews ul {} /*Style for latest news list - by default, latest news is user1 module*/ .latestnews li {} .mostread ul{} /*Style for most popular list - by default, most popular is user2 module*/ .mostread li{} /* ----------------CONTENT PAGE SETTINGS---------------- */ a.category:link {} a.category:hover {} a.category:visited {} .blogsection {} /* Formatting the links in Blog section */ .blog_more {} /*The "More" text in blog section*/ a.blogsection:link {} /* set the link format */ a.blogsection:visited {} /* same as above, but to set the visited link format */ a.blogsection:hover {} /* same as above, but for links with mouse pointer over it */ .componentheading {}/* Title of the component being used to display the content.*/ .contentheading { font-weight: bold; } /* Title of the content, article, etc. being displayed.*/ .contentpane {} /* Table that holds all non-article information (components, category lists, contact forms, etc).*/ .contentpaneopen {width: 100%;} /* Table that holds the actual text for an article.*/ .contentpagetitle {} /*Title of articles*/ a.contentpagetitle:hover {} /*Title of articles when appeare as links */ a.contentpagetitle:link {} a.contentpagetitle:visited {} .contentdescription {} /* Formating the "DESCRIPTION" of sections, categories (News/Weblinks/Latest news...) */ table.contenttoc {} /* Formating the table of the Tables of Contents for multiple pages content or article */ table.contenttoc td {} /* same as above, used to format the td and able cells */ table.contenttoc th {} /* same as above, used to format the th of "Tables of Content" ( normally Article Index)*/ table.contenttoc td.toclink {} /* same as above, used to format toc link texts*/ a.toclink:link {} /* same as above, used to format toc link text status*/ a.toclink:visited {} a.toclink:hover {} /* ---------------SECTION LISTINGS---------------- */ .sectiontableheader { background: #000000; color: #e6e6e6; padding: 0.1em 0.3em; } .sectiontableheader .sectiontableentry1 {background: none; color: #e6e6e6;} /*for Missus*/ .sectiontableheader .sectiontableentry1 a:link {color: #e6e6e6;} /*for Missus */ .sectiontableentry1 { background-color: #202c33; padding: 0.3em; } .sectiontableentry2 { background-color: #2e404a; padding: 0.3em; } .sectiontableentry1 a, .sectiontableentry2 a {font-weight: bold;} /*----------TABLE MODULE CONTAINERS (shouldn't be needed)------------- */ table.moduletable {} /* Formatting the module table */ table.moduletable th {} /* Formatting the module header, and the module titles */ table.moduletable td {} /* Formatting the table cells of the module table */ /* ----------------MISCELLANEOUS------------------- */ /* Dates , Authors*/ .createdate {} /* For styling the date the content/articles are created under contents title */ .modifydate {} /* Formating "Last updated on" text at the end of articles/contents */ .small {} /* Formating "Written by:...." text */ .smalldark {}/*Found in poll result page, for " Number of Voters".. text */ /* Polls */ .poll { width: 100%;} /* format the td of poll table */ .pollstableborder {} /* set the border properties of the polls voting table */ /* Weblinks */ .weblinks{} /* well.. to format the link's titles under the "Weblinks" section on the frontend */ a.weblinks:hover {} /* same as above, but for link with mouseover */ /* Newsfeeds */ .newsfeedheading {} /* The newsfeed title. NOTE: This will not affect the newsfeed's news title! */ .newsfeeddate {} /* yeah.. the date on the newsfeed */ .fase4rdf {} /* this is the body text of the newsfeed */ /* Search page */ table.searchintro {} /* This is for formatting the box with "Search Keyword: test returned 4 matches" box that appears after you have entered a search value. It appears on the mainbody with the search results */ /* -------------JOOMLA - MAMBO TABBED FRONTEND ADMIN INTERFACE---------------- */ /* The CSS below efines how the frontend admin interface when logged in */ .ontab {}/* For styling of the "Tab" buttons when editing contents through the frontend as admin. This .ontab is the styling for the tab when it is active or after its "clicked" */ .offtab {} /* Same as above, used for styling of the "Tab" buttons when editing contents through the frontend. This the styling for the tab when it is NOT active or when it is NOT "clicked" */ .tabpadding {} /* this style is used set the size of the tab in the above */ .tabheading {} /* Not too sure what this is used for. Couldn't find anything related to it yet at the moment */ .pagetext {} /* this style is used to style the content of the editing form contents (where HTMLArea sits and all its forms + contents) in the frontend Administration interface */ /* ------------------- CUSTOM ENTRIES FOR JD EXTENSIONS ------------------------*/ /* JD EVENT REGISTRATION */ .participant-list { } .participant-list form { display: inline; } .participant-list ol { text-align: left; list-style-type: decimal; list-style-position: inside; } .participant-list li { padding: 0.3em; } .reg-form { text-align: center; } .event-count td { text-align: center; padding: 0.2em; } .participant-count { font-weight: bold; font-size: 2em !important; color: #000000 !important; text-align: center; width: 40px; } /* MY EVENTS & JCAL WEEKLY */ .jdlist-table1 { background: #2e404a; border-top: 1px solid #3f5866; border-left: 1px solid #3f5866; margin: 2px 0; } .jdlist-table1 td { padding:0.2em 0.3em; border: 1px solid #3f5866; border-top: none; border-left: none; } .jdlist-table2 { background: #202c33; border-top: 1px solid #3f5866; border-left: 1px solid #3f5866; margin: 2px 0; } .jdlist-table2 td { padding:0.2em 0.3em; border: 1px solid #3f5866; border-top: none; border-left: none; } .jdlist-inline { margin 0; padding 0; } .jdlist-inline li { list-style: none; display: inline; margin: 0; padding: 0 0.3em; border-right: 1px solid #3f5866; } .jdlist-title { font-size: 14px; font-weight: bold; } .jdlist-desc { font-size: 11px; } .public-event { color: #33FF00; font-weight: bold; } .private-event { color: #3366FF; font-weight: bold; } /*EVENTS MODULE */ .participant-count-small { font-weight: bold; font-size: 1.4em !important; color: #000000 !important; text-align: center; width: 25px; } .jdlist-title-small { font-size: 12px; font-weight: bold; } .jdlist-desc-small { font-size: 10px; } /* ALERTS MODULE */ table.mod_login-left { font-size: 1em; } /* POLLS MODULE */ table.poll-right { font-size: 1em; } table.pollstableborder-right { font-size: 1em; } /* NEWEST MEMBERS MODULE */ div.module-right div div div table { font-size: 1em; } /* ONLINE MEMBERS MODULE */ div.module div div div table { font-size: 1em; }