/*------------------------------------------------------------------------# VWN Template 1.0 - June, 2008# ------------------------------------------------------------------------# Copyright (C) VirtuaWorx.Net. All Rights Reserved.# @license - Copyrighted Commercial Software# Author: VirtuaWorx.Net# Website: http://www.virtuaworx.net# Email: office@virtuaworx.net# Tel./Fax: (+359 2) 4 923 945 -------------------------------------------------------------------------*/
/* ACCESSIBILITY */
ul.accessibility {
position: absolute;
top: -100%;
}
/* Printable Page */
body.contentpane {
width: auto;
margin: 1em 2em;
background: #FFFFFF;
color: #0274A0;
font-size: 12pt;
font-family: Arial, Verdana, sans-serif;
line-height: 120%;
}
/* PLACEHOLDERS */
/* MAIN LAYOUT DIVS--------------------------------------------------------- */
#wrapper {
width: 950px;
margin: 0 auto;
background: #FFFFFF;
}
.narrow #wrapper {
width: 750px;
}
.float #wrapper {
width: 90%;
}
/* HEADER--------------------------------------------------------- */
#headerwrap {
background: #EEEEEE;
position: relative;
/*height: 120px;
line-height: normal;
*/
}
#header {
height: 60px;
/* border-bottom: thick double #650000;*/
}
#headerl {
float: left;
padding: 4px 0px 0px 4px;
}
#headerr {
height: 25px;
text-align: right;
margin: 0;
display: block;
float: right;
padding: 4px 4px 4px 0px;
}
#headerr1 {
height: 25px;
text-align: right;
margin: 0;
display: block;
float: right;
padding: 4px 4px 4px 0px;
}
h1.logo {
font-size: 22px;
display: block;
float: left;
margin: 0;
/*padding: 45px 0px 0px 40px;
*/
/*width: 718px;
height: 48px;
*/
}
.narrow h1.logo {
/*width: 172px;
*/
}
.float h1.logo {
/*width: 90%;
*/
}
h1.logo a {
/*width: 717px;
*/
/*height: 48px;
*/
display: block;
float: left;
text-decoration: none;
text-transform: uppercase;
outline: none;
color: #E6C9A5;
background: url(../images/opaque-1.png);
clear: both;
height: 30px;
text-indent: -4000px;
/*background: url(../images/logo.gif) no-repeat;
*/
}
.narrow h1.logo a {
/*width: 172px;
background: url(../images/logo-narrow.gif) no-repeat;
*/
}
.float h1.logo a {
/*width: 90%;
background: url(../images/logo-narrow.gif) no-repeat;
*/
}
/* Pathway */
#pathwaywrap {
background: #FFFFFF;
/*background: url(../images/opaque-1.png);
*/
clear: both;
height: 28px;
}
#pathway {
display: block;
padding: 5px 0 5px;
color: #313131;
font-size: 80%;
width: 100%;
float: left;
text-indent: 20px;
position: relative;
border-bottom: thick double #D0D9DF;
}
#pathway strong {
margin-right: 10px;
}
#pathway img {
margin: 0 5px 0;
}
#pathway a {
font-weight: bold;
color: #144D92;
text-decoration: none;
}
#pathway a:hover, #pathway a:active, #pathway a:focus {
font-weight: bold;
color: #313131;
text-decoration: none;
}
/* MAIN NAVIGATION */
#mainnavwrap {
margin: 0;
clear: both;
/*padding: 0px 0px 0px 5px;
*/
background: #FFFFFF;
/*background: url(../images/dot.gif) repeat-y 218px 0;
*/
border-top: thick double #144D92;
border-right: thick double #144D92;
border-bottom: thick double #144D92;
border-left: thick double #144D92;
}
.narrow #mainnavwrap {
/*background: url(../images/dot.gif) repeat-y 173px 0;
*/
}
.float #mainnavwrap {
/*background: url(../images/dot.gif) repeat-y 173px 0;
*/
}
#mainnav {
height: 100px;
/*float: left;
*/
width: 100%;
}
#mainnavwrap a, #mainnavwrap a:hover, #mainnavwrap a:active, #mainnavwrap a:focus {
outline: none;
}
#subnavwrap {
}
#subnav {
}
#containerwrap, #containerwrap-fr, #containerwrap-fl, #containerwrap-f {
clear: both;
}
#containerwrap, #containerwrap-fr {
background: #C4E1FF;
background: url(../images/mainwrap-bg.gif) repeat-y 23%;
}
#containerwrap #container {
background: url(../images/dot.gif) repeat-y 77% 0;
}
#containerwrap-fl {
background: url(../images/dot.gif) repeat-y 75% 0;
}
#containerwrap-fl #container {
background: none;
}
#containerwrap-fr #container {
background: none;
}
#mainbody, #mainbody-fr {
float: right;
width: 77%;
}
#mainbody #contentwrap {
float: left;
width: 70%;
}
#mainbody-fl {
float: left;
width: 100%;
}
#mainbody-fl #contentwrap {
float: left;
width: 74.8%;
background: none;
}
#mainbody-fl #col2 {
float: right;
width: 25%;
}
#mainbody-f {
float: none;
width: 100%;
}
#container {
padding: 20px 0 0;
border-left: thick double #144D92;
border-right: thick double #144D92;
border-top: thick double #144D92;
border-bottom: thick double #144D92;}
#content {
padding: 0 20px;
margin: 0;
clear: both;
display: block;
}
#logo {
/* display: block;*/
height: 100px;
float: left;
margin: 0;
padding: 0px 0px 0px 20px;
width: 19.99%;
background: url(../images/7.gif) no-repeat center center;
/*width: 718px;
height: 42px;
font-weight: bold;
color: white;
*/
}
#newsflash {
/*line-height: normal;
position: relative;*/
margin: 5px;
height: 100px;
width: 45%;
float: right;
border: 1px solid #ccc;
/* background: url(../images/logo.jpg) no-repeat center right;
*/
}
#scroll_1, #scroll_2 {
background: #FFFFFF;
}
/*Added by VWN*/
#headertext {
font-size: 12px;
font-weight: bold;
font-family: Arial, Verdana, sans-serif;
line-height: 150%;
display: block;
float: left;
margin: 0;
padding: 0px 0px 0px 50px;
/*width: 718px;
height: 42px;
*/
/*font-weight: bold;
*/
color: #0274A0;
}
#tuv {
display: block;
float: right;
margin: 0;
padding: 0px 20px 0px 0px;
clear: right;
/*width: 718px;
height: 42px;
font-weight: bold;
color: white;
*/
}
/* SPOTLIGHT--------------------------------------------------------- */
/* Spotlight Box Style */
.box-full, .box-left, .box-right, .box-rightcol {
float: left;
overflow: hidden;
padding: 0;
}
.box-full div.moduletable, .box-left div.moduletable, .box-right div.moduletable, .box-rightcol div.moduletable {
padding: 0 20px 20px 20px;
}
.box-left div.moduletable h3, .box-full div.moduletable h3 {
background: #FFFFFF;
}
.box-left, .box-full {
background: #FFFFFF;
}
.box-right div.moduletable h3 {
background: #FFFFFF;
}
.box-right {
background: #FFFFFF;
}
.box-rightcol div.moduletable h3 {
background: #FFFFFF;
}
.box-rightcol {
background: #FFFFFF;
}
/* Top Spotlight */
#spottopwrap {
float: left;
clear: both;
width: 100%;
}
#spottop {
}
#spottop h3 {
color: #144D92;
margin: 0 -20px;
padding: 5px;
font-size: 100%;
text-transform: uppercase;
letter-spacing: 1px;
}
#spottop div.moduletable,#spottop div.moduletable-tema, #spottop div.moduletable-multi {
margin: 0;
}
#spottop ul {
padding: 0;
margin: 0 !important;
}
#spottop li {
padding: 0 0 0 13px;
margin: 0;
/* background: url(../images/bullet-list.gif) no-repeat 2px 10px;*/
}
#spottop td {
padding: 0;
}
#spottop .article_seperator {
display: none;
}
#spottop table {
border-spacing: 0;
border-collapse: collapse;
}
/* Bottom Spotlight */
#spotbottwrap {
float: left;
clear: both;
width: 100%;
}
#spotbott {
}
#spotbott h3 {
color: #144D92;
margin: 0 -20px 10px;
padding: 6px 20px;
font-size: 100%;
text-transform: uppercase;
letter-spacing: 1px;
}
#spotbott div.moduletable, #spotbott div.moduletable-tema, #spottop div.moduletable-multi {
margin: 0;
}
#spotbott ul {
padding: 0;
margin: 0 !important;
}
#spotbott li {
padding: 0 0 0 13px;
margin: 0;
/* background: url(../images/bullet-list.gif) no-repeat 2px 10px;*/
}
#spotbott td {
padding: 0;
}
#spotbott .article_seperator {
display: none;
}
#spotbott table {
border-spacing: 0;
border-collapse: collapse;
}
/* LEFT COLUMN + RIGHT COLUMN--------------------------------------------------------- */
#col1 {
float: left;
width: 21.9%;
overflow: hidden;
}
#col1 div.innerpad {
padding: 1px 5px 10px 5px;
}
#col2 {
float: right;
width: 30%;
overflow: hidden;
}
#col2 div.innerpad {
padding: 1px 20px 10px 10px;
}
#col1 table, #col2 table {
border-collapse: collapse;
border-spacing: 0;
}
#col1 ul li, #col2 ul li {
padding-left: 15px;
margin: 0;
background: url(../images/bullet-list.gif) no-repeat 3px 9px;
}
#col1 ul, #col2 ul {
margin: 0;
}
/* USER TOOLS--------------------------------------------------------- */
#usercolorswrap, #usertoolswrap {
position: absolute;
top: 0;
right: 15px;
font-size: 11px;
/* background: url(../images/opaque-1.png);
*/
}
*+html #usertoolswrap {
right: 0;
}
#usertools {
margin: 0;
padding: 4px 0 4px 0;
}
* html #usertools {
/*IE 6*/
float: right;
}
*+html #usertools {
/*IE 7*/
padding: 4px 8px 0 0;
}
#usercolors ul, #usertools ul {
margin: 0;
padding: 0;
float: left;
}
#usercolors ul li, #usertools ul li {
margin: 0;
padding: 0;
list-style: none;
background: none;
display: inline;
}
#usercolors img, #usertools img {
padding: 0;
margin: 0 0 0 2px;
}
#usercolors {
float: left;
padding: 10px 5px 4px;
}
/* FOOTER--------------------------------------------------------- */
#footerwrap {
/* border-top: thick double #144D92;
border-right: thick double #144D92;
border-bottom: thick double #144D92;
border-left: thick double #144D92;*/
padding: 15px 5px 5px 30px;
clear: both;
position: relative;
background: #EEEEEE;
/*background: url(../images/tuv.gif) no-repeat 55px 25px;
*/
}
#footer {
padding: 0;
width: 100%;
height: 30px;
float: right;
text-align: center;
position: relative;
font-weight: bold;
color: #313131;
/*background: url(../images/dot.gif) repeat-y 0 0;
*/
}
#footer small, #footer address {
padding: 0 0 0 20px;
font-style: normal;
display: block;
float: left;
font-size: 80%;
color: #313131;
}
#footer ul {
margin: 0 0 5px 20px;
padding: 0;
text-align: center;
}
#footer li {
margin: 0;
padding: 0;
display: inline;
background: none;
}
#footer li a {
display: inline;
padding: 0 20px 0 0;
line-height: normal;
text-decoration: none;
/* text-transform: uppercase;*/
font-weight: bold;
color: #144D92;
text-align: center;
}
#footer li a:hover, #footer li a:active, #footer li a:focus {
text-decoration: underline;
color: #313131;
}
/* Search */
#searchwrap {
width: 29.99%;
float: left;
/* background: url(../images/bg.jpg) no-repeat center left;
*/
height: 100px;
}
#search {
/* width: 40%
height: 50px; */
padding: 5px 0px 5px 0px;
/* margin: 40px 0 0 15px;
background: #999999;
border-top: thick double #FFFFFF;
border-bottom: thick double #FFFFFF;
*/
font-weight: bold;
font-size: 100%;
}
#search .inputbox {
width: 150px;
padding: 2px 5px 3px;
color: #00274A;
background: #FFFFFF;
border: 1px solid #0274A0;
}
.narrow #search .inputbox {
width: 100px;
}
.float #search .inputbox {
width: 100px;
}
/*------------------------------------------------------------------*/
/** * General Body Styling * -------------------- * These are normal css setup reccommended for your * HTML template although they are not neccessary */
html, body, form, fieldset {
margin: 0;
padding: 0;
}
body {
color: #313131;
background: #EEEEEE;
font-family: Arial, Verdana, sans-serif;
line-height: 120%;
}
body#bodywrap {
/*background: url(../images/body-bg.jpg) repeat-x top #75838B;
*/
}
/* Font size */
body.size1 {
font-size: 10px;
}
body.size2 {
font-size: 12px;
}
body.size3 {
font-size: 14px;
}
body.size4 {
font-size: 16px;
}
body.size5 {
font-size: 18px;
}
body.size6 {
font-size: 20px;
}
/* All text between TD and DIV tags */
td, div {
font-size: 100%;
}
p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
margin: 1em 0;
padding: 0;
}
p, pre, blockquote, ul, ol {
margin: 1em 0;
padding: 0;
text-align: justify;
}
/* Headings */
h1 {
font-size: 180%;
color: #144D92;
font-weight: bold;
}
h2 {
font-size: 155%;
color: #144D92;
font-weight: bold;
}
h3 {
font-size: 125%;
color: #144D92;
font-weight: bold;
}
h4 {
font-size: 100%;
color: #144D92;
text-transform: uppercase;
font-weight: bold;
}
h5 {
font-size: 80%;
color: #144D92;
text-transform: uppercase;
font-weight: bold;
}
h6 {
font-size: 60%;
color: #144D92;
text-transform: uppercase;
font-weight: bold;
}
/* Table Heading */
th {
padding: 5px;
font-weight: bold;
text-align: left;
}
/* Lists */
ul {
list-style: none;
}
ul li {
padding-left: 30px;
line-height: 180%;
/* background: url(../images/bullet-list.gif) no-repeat 18px 8px;*/
}
ol li {
margin-left: 35px;
line-height: 180%;
}
/* Fieldset */
fieldset {
border: none;
}
fieldset a {
font-weight: bold;
}
/* Normal link */
a {
color: #144D92;
text-decoration: none;
}
a:hover, a:active, a:focus {
color: #999999;
/*text-decoration: underline;*/
}
/* Image Link */
a img {
border: none;
}
/** * General Joomla Styles * -------------------- * The following are styles that are often used * site wide by Joomla to provide better control * of content's appearences. */
/* Horisontal Ruler */
hr {
/* often used in components like Akobook, and Simpleboard forum to define the separator lines */
border-top: 1px solid #D0D9DF;
border-right: 0;
border-left: 0;
border-bottom: 0;
height: 1px;
}
hr.separator {
/* found this css style in Peekjoomla's css style. Still haven't worked out if this is a custom style or an in built style. Will update when I find out*/
background: transparent;
height: 1px;
width: 75px;
border: 1px solid #314B77;
}
/* Page Navigation */
.pagenav, .pagenav_prev, .pagenav_next, .pagenavbar {
padding: 0 2px;
}
a.pagenav, .pagenav_prev a, .pagenav_next a, .pagenavbar a {
text-decoration: none;
}
a.pagenav:hover, a.pagenav:active, a.pagenav:focus, .pagenav_prev a:hover, .pagenav_prev a:active, .pagenav_prev a:focus, .pagenav_next a:hover, .pagenav_next a:active, .pagenav_next a:focus, .pagenavbar a:hover, .pagenavbar a:active, .pagenavbar a:focus {
text-decoration: none;
}
.pagenavbar {
padding-left: 14px;
background: url(../images/pages.gif) no-repeat center left;
}
.pagenavcounter {
padding: 8px 14px 0 14px;
background: url(../images/pages.gif) no-repeat 0 11px;
}
/* Small text */
/* general style for texts when small size fonts are used. In the contents, this style is used for "Written by..." texts */
small, .small, .smalldark, .mosimage_caption {
font-size: 90%;
color: #00274A;
}
.smalldark {
text-align: left;
}
/** * Joomla Form Styles * ----------------- * Here are 2 styles that Joomla uses to let users control * how their forms and buttons may look. */
form {
margin: 0;
padding: 0;
}
form label {
cursor: pointer;
}
input, select, textarea, .inputbox {
padding: 1px;
font-family: Arial, Verdana, sans-serif;
font-size: 80%;
}
select, textarea, .inputbox {
background: #FFFFFF;
color: #00274A;
}
.button {
/* this style applies to most form buttons generated by joomla and its components. Change its format here*/
display: block;
margin: 0;
font-weight: bold;
color: #00274A;
padding: 2px 10px 2px 10px;
background: url(../images/but-bg.gif) repeat-x top;
border: 1px solid #C0CED9;
}
* html .button {
/* IE Shit */
\padding: 0;
p \adding: 0;
}
.inputbox {
/* Again, the name implies that this style changes the way those input box looks */
margin-bottom: 1px;
padding: 3px 0 3px 5px;
background: #FFFFFF;
border: 1px solid #C0CED9;
}
.inputbox:hover, .inputbox:focus {
}
/** * Joomla Menu Styling * ------------ * You can control the way menu behave and look * by using the CSS settings below */
/* Default Joomla! Menu */
a.mainlevel {
margin: 1px 0;
padding: 5px 0 5px 5px;
width: 90%;
display: block;
color: #FFF;
font-size: 120%;
text-decoration: none;
background-color: #1858AF;
border-right: 2px solid #D6CDBD;
border-bottom: 2px solid #D6CDBD;
/*
background: url(../images/a-mainlevel.gif) no-repeat center left;
*/
}
a.mainlevel:hover, a.mainlevel:active, a.mainlevel:focus {
color: #E6E6E6;
background-color: #1866C3;
/*text-decoration: underline;
border-bottom: 1px solid #64533A;
/*background: url(../images/a-mainlevel-hover.gif) no-repeat center left;*/
}
a.mainlevel#active_menu {
color: #FFF;
/* border-bottom: 1px solid #64533A;
background: url(../images/a-mainlevel-hover.gif) no-repeat center left;
*/
font-weight: bold;
text-decoration: none;
}
a.mainlevel-nav {
padding: 5px 0 5px 12px;
width: 98%;
display: inline;
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px solid #FFFFFFF;
}
a.mainlevel-nav:hover, a.mainlevel-nav:active, a.mainlevel-nav:focus {
color: #FFFFFF;
/*text-decoration: underline;
*/
/*background: url(../images/a-mainlevel-hover.gif) no-repeat center left;
*/
}
a.sublevel {
padding: 2px 4px 2px 10px;
display: block;
color: #144D92;
text-decoration: none;
/* border-bottom: 1px solid #D6CDBD;
background: url(../images/bullet-list.gif) no-repeat 10px 9px;
*/
}
a.sublevel:hover, a.sublevel:active, a.sublevel:focus {
color: #313131;
/* border-bottom: 1px solid #64533A;
text-decoration: underline;
*/
}
a.sublevel#active_menu {
color: #144D92;
/*background: url(../images/a-mainlevel-hover.gif) no-repeat center left;
*/
font-weight: bold;
text-decoration: none;
}
#active_menu {
color: #6D5542;
font-weight: bold;
}
/** * Joomla General styling for Sections/Categories/Contents * ------------------------------------------------------ * These stylings are either sometimes or often used across * Sections, categories and contents. They, therefore, deserves * to be mentioned and separated from others. */
.createdate {
/* name says it all.. its for styling the date the content/articles are created under contents title */
padding: 3px;
text-transform: uppercase;
font-size: 90%;
color: #000000;
}
.modifydate {
/* need me to say?: ) Well it styles the "Last updated on" text at the end of articles/contents */
color: #000000;
height: 15px;
padding-top: 15px;
}
a.readon {
float: left;
display: block;
text-decoration: none;
/*text-transform: uppercase;
*/
}
a.readon:hover, a.readon:active, a.readon:focus {
}
/* Commented for further researcha.readon:link, a.readon:visited {
/ For formatting the "Read on..." link for blogs and on frontpage. /color: #23598d;
text-decoration: none;
font-family: Georgia, "Times New Roman", Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
}
a.readon:hover {
/ Pfft..! /color: #23598d;
text-decoration: underline;
font-weight: normal;
font-family: Georgia, "Times New Roman", Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
}
*/
/** * Joomla Styling for Contents * -------------------------- * All the styling for contents are listed * below. */
/* Title text */
/* This is used in several places;
the Heading of contents on the frontpage, it is also used for Section's heading (see above for explanation) "News" or whatever heading you used */
.contentheading, .componentheading, .blog_more strong, h1, h2 {
font-family: Arial, Verdana, sans-serif;
font-weight: normal;
}
.contentpane {
/* This is used mainly for the table that holds the SECTIONS such as News. This is when you create a link to a Section and when clicked on it, it will display "News" then some description (with image if you selected one) and then a list of Category of News. Yes! That entire thing is contained in a table with this style */
background-color: #FFFFFF;
}
table.contentpane {
border: none;
width: 100%;
}
.contentpaneopen {
background-color: #FFFFFF;
}
table.contentpaneopen {
border: none;
border-collapse: collapse;
border-spacing: 0;
}
table.contentpaneopen td, table.contentpane td {
padding: 5px;
text-align: left;
line-height: 120%;
}
table.contentpaneopen, table.contentpane {
width: 100%;
}
.contentheading {
font-size: 140%;
padding: 10px 5px 10px 0;
border-bottom: 1px solid #121212;
/*text-transform: capitalize;*/
}
.contentpagetitle {
/* Couldn't find where is this yet. Will update this part when Iget to it. Sorry. If you know, please email me the infos /font-family: Georgia, "Times New Roman", Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #FF9900;
text-align: left;
*/
}
a.contentpagetitle, a.contentpagetitle:hover, a.contentpagetitle:active, a.contentpagetitle:focus {
text-decoration: none !important;
}
.contentdescription {
/* When you create a link to a Section in the main menu and when clicked on it, it will display "News" then some description (with image if you selected one) and then a list of Category of News. This style is used for formating the "DESCRIPTION" part of that page */
padding-bottom: 10px;
}
table.contenttoc {
margin: 0 0 10px 10px;
padding: 0;
width: 35%;
}
table.contenttoc a {
text-decoration: none;
}
table.contenttoc td {
padding: 1px 5px 1px 25px;
background: url(../images/bullet-list.gif) no-repeat 5% 50%;
}
table.contenttoc th {
padding: 0 0 3PX;
border-bottom: 1px solid #D0D9DF;
text-indent: 5px;
}
.content_rating {
/* used for styling the texts used for displaying those "stars" for rating in an article */
font-weight: normal;
font-size: 8pt;
}
.content_vote {
/* used for those voting texts (the one with voting RADIO buttons) */
font-weight: normal;
font-size: 8pt;
}
/** * Joomla Sections Styles * --------------------- * Styling of sections tables */
.sectiontableheader {
/* This is for styling the section table headers on a SECTION's page. An example would be those articles lists when you click on "News" or something? With a table header of "Date", "Item Title", "Author" and "Hits" ? That's the header that you will be controlling through this style */
padding: 30px 5px 8px;
border-bottom: 3px solid #D0D9DF;
font-size: 150%;
}
/* Disabled for further testing.sectiontableentry1, {
/ this is used when there's a whole list of data to provide and you need to create alternate colors for each row of data. This is the first color /background-color: #BED2EB;
}
*/
tr.sectiontableentry1 td {
padding: 8px 5px;
background: url(../images/dot.gif) repeat-x bottom;
}
/* Disabled for further testing.sectiontableentry2 {
/ this is the second color for the row. So, the table generator, will alternate its style through sectionableentry1 and sectiontableentry2 as it cycles through and outputs each row of data. Similar to forum's post listings /background-color: #FFFFFF;
}
*/
tr.sectiontableentry2 td {
padding: 8px 5px;
/*background: url(../images/dot.gif) repeat-x bottom;
*/
}
tr.sectiontableentry1:hover td, tr.sectiontableentry2:hover td {
/*background: url(../images/dot.gif) repeat-x bottom;
*/
}
/** * Joomla Styles for Categories * --------------------------- * The following are the styling for "Category" items * generated from the Sections area */
.category {
/* this is to set the category Titles ( found on a SECTION's page where the Category lists are) styles */
/*color: #3D4E6D;
*/
font-weight: bold;
/*text-decoration: none;
*/
}
a.category:link, a.category:visited {
/* same as above, but to set the link format */
color: #00274A;
font-weight: bold;
}
a.category:hover {
/* same as above, but for links with mouse pointer over it */
color: #00274A;
}
/** * Joomla Blog styling * ------------------ * Not too sure where this is used yet. I tried the blog section * but it doesn't seem to use it. If you have info on this, * email me. I'll update this part. */
table.blog {
width: 100%;
}
.blog_more {
margin: 10px 0;
}
.blog_more strong {
margin: 0 0 5px;
display: block;
color: #00274A;
font-size: 155%;
}
.blog_more ul {
margin: 0;
padding: 0;
}
.blog_more ul li {
margin: 0;
padding: 0 0 0 17px;
/*background: url(../images/bullet-list.gif) no-repeat 6px 8px;
*/
}
a.blogsection:link, a.blogsection:visited {
color: #0274A0;
text-decoration: none;
/*font-family: Georgia, "Times New Roman", Arial, Verdana, Helvetica, sans-serif;
font-size: 10px;
*/
}
a.blogsection:hover {
color: #0274A0;
/*text-decoration: underline;
*/
/*font-size: 10px;
*/
}
/** * Joomla Components Styles * ----------------------- * These stylings are to format the way components title * is displayed */
.componentheading {
/* This is used for formatting the component's title when it is displayed on its own page on the frontend */
font-size: 140%;
padding: 10px 0 10px 0;
/*border-bottom: 1px solid #121212;*/
}
/** * Joomla's Built-in Component's Syling * ----------------------------------- * These stylings are used for joomla's built-in components * such as newsfeeds, weblinks, contact, search and polls. * A commented subtitle will guide you which is for which */
/* Polls */
.poll {
/* polls texts */
/*font-family: Georgia, "Times New Roman", Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #343A58;
line-height: 14px*/
}
.pollstableborder {
/* set the border properties of the polls voting table */
border: 1px solid #465675;
}
table.poll {
padding: 0;
width: 100%;
border-collapse: collapse;
}
table.pollstableborder {
padding: 0;
width: 100%;
border: none;
text-align: left;
}
table.pollstableborder img {
vertical-align: baseline;
}
table.pollstableborder td {
padding: 2px!important;
border-collapse: collapse;
border-spacing: 0;
}
table.pollstableborder tr.sectiontableentry1 td {
border: none;
background: #FFFFFF;
}
table.pollstableborder tr.sectiontableentry2 td {
border: none;
}
/* Weblinks */
a.weblinks:link, a.weblinks:visited {
/* well.. to format the link's titles under the "Weblinks" section on the frontend */
color: #0274A0;
text-decoration: none;
font-weight: normal;
font-family: Arial, Verdana, sans-serif;
}
a.weblinks:hover {
/* same as above, but for link with mouseover */
color: #0274A0;
/* text-decoration: underline;
*/
}
/* Newsfeeds */
.newsfeedheading {
/* The newsfeed title. NOTE: This will not affect the newsfeed's news title! */
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
font-weight: bold;
color: #0274A0;
}
.newsfeeddate {
/* yeah.. the date on the newsfeed */
font-family: Arial, Verdana, sans-serif;
font-size: 10px;
color: #0274A0;
font-weight: normal;
}
.fase4rdf {
/* this is the body text of the newsfeed */
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
color: #0274A0;
font-weight: normal;
}
a.fase4rdf:link {
/* links of the body text of the newsfeed */
font-size: 11px;
font-weight: bold;
color: #0274A0;
}
a.fase4rdf:hover {
/* links of the body text of the newsfeed when mouse points over it*/
font-size: 11px;
font-weight: bold;
color: #0274A0;
}
/* 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 */
background-color: #FFFFFF;
border: 1px solid #8D9ABC;
padding: 10px 0;
width: 100%;
}
table.searchintro td {
padding: 5px!important;
}
/* Contact's table settings */
table.contact {
/* for formatting the entire "Contact" table which includes the name, address icons and form. Note this table DOES NOT enclose the dropdown list for selecting the Department/person to contact */
background-color: #FFFFFF;
}
table.contact td.icons {
/* the name gave it away. This formats the | cells where the little icons sits next to the details (those addresses, phone number etc) */
background-color: #FFFFFF;
}
table.contact td.details {
/* this is for formatting the | cells where all the details sits. The details where addresses, phone number and additional info are */
background-color: #FFFFFF;
/*font-size: 11px;
font-family: Georgia, "Times New Roman", Arial, Verdana, Helvetica, sans-serif;
*/
}
/** * Joomla Modules formatting * ------------------------ * These stylings are to format the way modules are * displayed. It mainly deals with the format of its * table. I think this doesn't need too much explaining */
.moduletable {
padding: 0;
}
div.moduletable {
/* styling the module table */
padding: 0 0px 0px;
margin-bottom: 30px;
}
div.moduletable h3 {
font-size: 95%;
padding: 0 2px 0px;
margin: 0 -2px 0px;
border-bottom: 1px solid #D0D9DF;
color: #144D92;
font-weight: normal;
text-transform: uppercase;
}
div.moduletable-tema h3 {
font-size: 95%;
padding: 0 2px 0px;
margin: 0 -2px 0px;
border-bottom: 1px solid #D0D9DF;
color: #144D92;
font-weight: bold;
text-transform: uppercase;
}
div.moduletable-multi h3 {
font-size: 95%;
padding: 0 2px 0px;
margin: 0 -2px 0px;
border-bottom: 1px solid #D0D9DF;
color: #144D92;
font-weight: normal;
text-transform: uppercase;
}
#col1 div.moduletable {
padding-left: 0;
margin-bottom: 15px;
}
#col1 div.moduletable H3 {
color: #144D92;
}
#col2 div.moduletable {
padding-right: 0;
margin-bottom: 15px;
}
div.moduletable-blank {
background: none;
padding: 0;
margin-bottom: 15px;
}
/*** * Other Styles * */
.article_seperator {
display: block;
height: 20px;
}
#col1 .article_seperator, #col2 .article_seperator {
display: none;
}
/* Unknown */
td.buttonheading {
padding: 0 0 0 8px!important;
text-align: center;
background: url(../images/dot.gif) repeat-x bottom;
}
/* Wellknown;
) */
.clr {
clear: both;
}
/* For images integrated in articles */
.mosimage {
margin: 15px 5px 10px 0;
padding: 0 5px 5px;
}
* html .mosimage {
/*IE 6*/
padding: 5px 0 !important;
margin: 15px 10px 10px 0;
}
*+html .mosimage {
/*IE 7*/
padding: 5px 0 !important;
}
.mosimage img {
padding: 0 !important;
margin: 0 !important;
}
.mosimage_caption {
margin-top: 5px;
padding: 1px 2px;
color: #0274A0;
}
/* Sindication Div */
div.syndicate div {
text-align: center;
}
/* For polls and Section tables */
.pollstableborder tr.sectiontableentry1 td, .pollstableborder tr.sectiontableentry2 td {
background: none;
}
/* Banner */
#banner {
text-align: center;
}
/* Back Button */
div.back_button a, div.back_button a:hover, div.back_button a:active {
float: left;
margin: 0;
display: block;
padding: 0 5px 5px 0;
background: none!important;
text-decoration: none!important;
}
/* Login Module */
#mod_login_password, #mod_login_username {
width: 80%;
}
#mod_login_remember {
border: none;
background: none;
}
/* BONUS TYPOGRAPHY STYLES--------------------------------------------------------- */
pre, .code {
padding: 10px 15px;
margin: 5px 0 15px;
border-left: 5px solid #C0CED9;
background: #FFFFFF;
}
blockquote {
padding: 1em 40px 1em 15px;
}
blockquote span.open {
padding: 0 0 0 20px;
background: url(../images/so-q.gif) no-repeat left top;
}
blockquote span.close {
padding: 0 20px 0 0;
background: url(../images/sc-q.gif) no-repeat bottom right;
}
/* Quote hilight */
.quote-hilite {
padding: 10px 15px;
margin: 0;
background: #FFFFFF;
border: 1px solid #D0D9DF;
}
/* Small quote */
.small-quote {
background: none;
margin: 0;
padding: 0;
}
.small-quote span.open-quote {
background: url(../images/so-q.gif) no-repeat center left;
margin: 0;
padding-left: 20px;
}
.small-quote span.close-quote {
background: url(../images/sc-q.gif) no-repeat center right;
margin: 0;
padding-right: 20px;
}
.small-quote span.author {
display: block;
padding: 2px 5px 2px 20px;
background: url(../images/author.gif) no-repeat 5px 4px #D0D9DF;
border-top: 1px solid #D0D9DF;
margin: 0.5em 0 0;
text-transform: uppercase;
font-size: 90%;
}
/* Dropcap */
.dropcap {
float: left;
padding: 4px 8px 0 0;
display: block;
color: #0274A0;
font: 50px/40px Georgia, Times, serif;
}
/* Tips, Error, Message, Hightlight*/
.error {
padding-left: 25px;
color: #0274A0;
background: url(../images/bullet-error.gif) no-repeat top left;
}
.message {
padding-left: 25px;
color: #0274A0;
background: url(../images/bullet-info.gif) no-repeat top left;
}
.tips {
padding-left: 25px;
color: #0274A0;
background: url(../images/bullet-tips.gif) no-repeat top left;
}
.highlight {
padding: 1px 5px;
background: #FFFFFF;
font-weight: bold;
}
/* Note Style */
p.stickynote {
background: url(../images/sticky-bg.gif) no-repeat 5px center #FFFFFF;
padding: 10px 0px 10px 40px;
border: 1px solid #D0D9DF;
}
p.download {
background: url(../images/download-bg.gif) no-repeat 5px center #FFFFFF;
padding: 10px 0px 10px 40px;
border: 1px solid #D0D9DF;
}
.blocknumber {
clear: both;
padding: 5px 15px 10px;
position: relative;
}
/* Check list */
ul.checklist {
list-style: none;
}
ul.checklist li {
margin-left: 15px;
padding: 0 0 5px 20px;
background: url(../images/checklist-bg.gif) no-repeat 0 3px;
}
/* Check list */
ul.stars {
list-style: none;
}
ul.stars li {
margin-left: 15px;
padding: 0px 0 5px 20px;
background: url(../images/star-bg.gif) no-repeat 0 3px;
}
/* Big Number */
.bignumber {
float: left;
margin-right: 8px;
padding: 6px 7px;
display: block;
color: #FFFFFF;
background: url(../images/ol-bg.gif) no-repeat top left;
font: 20px/normal Georgia, "Times New Roman", Arial, sans-serif;
font-weight: bold;
}
/* Talking box. Thinking box. */
div.bubble1, div.bubble2, div.bubble3, div.bubble4 {
margin: 15px 0;
}
div.bubble1 span.author, div.bubble2 span.author, div.bubble3 span.author, div.bubble4 span.author {
padding-left: 15px;
margin-left: 15px;
font-weight: bold;
background: url(../images/author.gif) no-repeat center left;
}
div.bubble1 div {
margin: 0;
width: 100%;
background: url(../images/bub1-br.gif) no-repeat bottom right;
}
div.bubble1 div div {
background: url(../images/bub1-bl.gif) no-repeat bottom left;
}
div.bubble1 div div div {
background: url(../images/bub1-tr.gif) no-repeat top right;
}
div.bubble1 div div div div {
background: url(../images/bub1-tl.gif) no-repeat top left;
}
div.bubble1 div div div div div {
margin: 0;
padding: 15px 15px 30px 15px;
width: auto;
}
div.bubble2 div {
margin: 0;
width: 100%;
background: url(../images/bub2-br.gif) no-repeat bottom right;
}
div.bubble2 div div {
background: url(../images/bub2-bl.gif) no-repeat bottom left;
}
div.bubble2 div div div {
background: url(../images/bub2-tr.gif) no-repeat top right;
}
div.bubble2 div div div div {
background: url(../images/bub2-tl.gif) no-repeat top left;
}
div.bubble2 div div div div div {
margin: 0;
padding: 15px 15px 35px 15px;
width: auto;
}
div.bubble3 div {
margin: 0;
width: 100%;
background: url(../images/bub3-br.gif) no-repeat bottom right;
}
div.bubble3 div div {
background: url(../images/bub3-bl.gif) no-repeat bottom left;
}
div.bubble3 div div div {
background: url(../images/bub3-tr.gif) no-repeat top right;
}
div.bubble3 div div div div {
background: url(../images/bub3-tl.gif) no-repeat top left;
}
div.bubble3 div div div div div {
margin: 0;
padding: 15px 15px 50px 15px;
width: auto;
}
div.bubble4 div {
margin: 0;
width: 100%;
background: url(../images/bub4-br.gif) no-repeat bottom right;
}
div.bubble4 div div {
background: url(../images/bub4-bl.gif) no-repeat bottom left;
}
div.bubble4 div div div {
background: url(../images/bub4-tr.gif) no-repeat top right;
}
div.bubble4 div div div div {
background: url(../images/bub4-tl.gif) no-repeat top left;
}
div.bubble4 div div div div div {
margin: 0;
padding: 15px 15px 55px 15px;
width: auto;
}
/** * Joomla Tabbed Frontend Admin Interface * ------------------------------------- * The CSS styles here defines how the frontend admin interface * will look like when editing and adding news through frontend. */
table.adminform {
width: 400px!important;
/*Control the Frontend Editor area width*/
}
.adminform .inputbox {
}
.ontab {
/* For styling of the "Tab" buttons when editing contents through the frontend (when you log in as admin in the frontend). This .ontab is the styling for the tab when it is active or after its "clicked" */
background-color: #FFFFFF;
border-left: outset 1px #DCF2FA;
border-right: outset 1px #808080;
border-top: outset 1px #DCF2FA;
border-bottom: solid 1px #d5d5d5;
text-align: center;
font-weight: bold;
color: #0274A0;
}
.offtab {
/* Same as above, used for styling of the "Tab" buttons when editing contents through the frontend. This .ontab is the styling for the tab when it is NOT active or when it is NOT "clicked" */
background-color: #FFFFFF;
border-left: outset 1px #E0E0E0;
border-right: outset 1px #E0E0E0;
border-top: outset 1px #E0E0E0;
border-bottom: solid 1px #d5d5d5;
text-align: center;
cursor: pointer;
font-weight: normal;
}
.tabpadding {
/* this style is used set the size of the tab in in the above */
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
.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 */
visibility: hidden;
display: none;
position: relative;
top: 0;
}
/** Clearfix */
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
* html > body .clearfix {
width: 100%;
display: block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* Firefox Scrollbar Hack - Do not remove */
html {
margin-bottom: 1px;
height: 100%!important;
height: auto;
}
.latestnews {
font-size: 8pt;
line-height: 100%;
}
.latestnews.h3 {
font-size: 8pt;
line-height: 100%;
}
.latestnews-tema {
font-size: 100%;
line-height: 120%;
}
ul.latestnews-tema {
list-style: none;
}
li.latestnews-tema {
list-style: none;
background-image: none;
}
ul.latestnews-tema li {
list-style: none;
background-image: none;
}
.latestnews-tema ul li {
list-style: none;
}
.latestnews-multi {
font-size: 100%;
line-height: 120%;
}
.latestnews-multi.h3 {
font-size: 8pt;
line-height: 100%;
}
ul.latestnews-multi {
list-style: none;
}
li.latestnews-multi {
list-style: none;
background-image: none;
}
ul.latestnews-multi li {
list-style: none;
background-image: none;
}
.latestnews-multi ul li {
list-style: none;
} |