Box section with dark background
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Your description goes here" />
<meta name="keywords" content="your,keywords,goes,here" />
<meta name="author" content="Your Name or Company / Design Template: G. Wolfgang / April 14, 2006 / Email: gw@actamail.com / Favorite website: www.sda.org" />
<style type='text/css'>
/*****************************************************/
/* Design: GoFlexiblePro */
/* Stylesheet for screen rendering */
/*---------------------------------------------------*/
/* Author: G. Wolfgang */
/* Email: gw@actamail.com */
/* Date: April 14, 2006 */
/*---------------------------------------------------*/
/* You can use this stylesheet freely under the */
/* condition of giving proper author credits. */
/*---------------------------------------------------*/
/* Check out my favorite website: www.sda.org */
/*****************************************************/
/*-----------------------------------------------------------------------*/
/* REMARK: FONT-SIZE DEFINITIONS */
/*-----------------------------------------------------------------------*/
/* Relative font-sizes in "em" are used where necessary. To make the */
/* "em"-units normed, the incoming font sizes are set to 1.0 em. The */
/* font-size variations throughout the webpage are then expressed in */
/* percentage values respective to the incoming font-size. To make */
/* calculations easier, the font definition in "body" is such that */
/* 1.0em = 10px. This makes life a real breeze! */
/*-----------------------------------------------------------------------*/
/*************************/
/* SECTION 1 - MAIN BODY */
/*************************/
/*-------------------------------*/
/* Section 1.1 - Page definition */
/*-------------------------------*/
body {
font-size: 62.5%; margin: 0em auto; padding: 0em; background: url(GoFlexiblePro-img/background.gif) top center repeat-y; font-family: "trebuchet ms", verdana, arial, sans-serif;
}
#page-container {
width: 780px; margin: 0px auto; padding: 0px; border-left: solid 1px rgb(150,150,150); border-right: solid 1px rgb(150,150,150); background-color: rgb(237,237,237);
}
/**********************/
/* SECTION 2 - HEADER */
/**********************/
/*--------------------------------------*/
/* Section 2.1 - Global navigation menu */
/*--------------------------------------*/
.nav-global-container {
float: left; position: absolute; z-index: 3; width: 780px; top: 5px; background-color: transparent;
}
.nav-global ul {
float: right; margin: 0px; padding: 0px; list-style: none;
}
.nav-global li {
float: left; white-space: nowrap; text-transform: uppercase;
}
.nav-global li a {
display: block; margin: 0px; padding: 0px 5px 0px 5px; border-left: solid 1px rgb(150,150,150); background-color: rgb(255,255,255); color: rgb(150,150,150); text-decoration: none; font-size: 100%;
}
.nav-global a:hover {
background-color: rgb(255,255,255); color: rgb(0,0,0); text-decoration: underline;
}
.img-flag {
display: block; height: 1.2em; margin: 0px; padding: 0px; border: solid 1px rgb(0,0,0);
}
/*-----------------------------------*/
/* Section 2.2 - Sitename and Banner */
/*-----------------------------------*/
.site-name {
clear: both; float: left; position: absolute; z-index: 1; width: 700px; top: 20px; margin: 0px; padding-left: 14px; background-color: transparent; color: rgb(225,225,225); font-weight: bold; font-size: 24px;
}
.site-slogan {
float: left; position: absolute; z-index: 2; width: 11.7em; top: 1.9em; left: 16px; margin: 0px; padding: 0px 3px 1px 3px; background-color: rgb(150,150,150); color: rgb(225,225,225); font-weight: bold; font-size: 14px;
}
.img-header {
clear: both; float: left; width: 780px; height: 110px; margin: 0px; padding: 0px;
}
/*------------------------------------*/
/* Section 2.3 - Main navigation menu */
/*------------------------------------*/
.nav-main {
clear: both; float: left; width: 780px; margin: 0px; padding: 0px; border-top: solid 1px rgb(125,125,125); border-bottom: solid 1px rgb(125,125,125); background-color: rgb(190,190,190);
}
.nav-main ul {
list-style: none; margin: 0px; padding: 0px; font-weight: bold;
}
.nav-main li {
float: left; display: block; white-space: nowrap; background-color: inherit;
}
.nav-main li a {
color: rgb(255,255,255); margin: 0px; padding: 0px 10px 0px 10px; border-right: solid 1px rgb(255,255,255); text-decoration: none; font-size: 130%;
}
.nav-main a:hover, .nav-main a.selected {
background-color: inherit; color: rgb(110,110,110); text-decoration: none;
}
/*************************************/
/* SECTION 3 - FRONT-PAGE SIDEBANNER */
/*************************************/
.sidebanner-frontpage {
clear: both; float: left; width: 160px; margin: 0px; padding: 0px;
}
.img-sidebanner {
width: 160px; margin: 0px; padding: 0px; border: none;
}
/******************************/
/* SECTION 4 - SUB-NAVIGATION */
/******************************/
/*--------------------*/
/* Section 4.1 - Size */
/*--------------------*/
.nav-sub {
clear: both; min-height: 400px; float: left; width: 160px; margin: 0px; padding: 0px; color: rgb(110,110,110);
}
/* IE6-hack for min-height. Also works for IE7-Beta2 */
* html .nav-sub {
height: 400px;
}
/* End IE-Hack */
/*--------------------*/
/* Section 4.2 - Menu */
/*--------------------*/
.nav-sub ul {
float: left; list-style: none; width: 160px; margin: 0px; padding: 0px; border-bottom: solid 1px rgb(200,200,200);
}
.nav-sub li {
margin: 0px; padding: 0px;
}
.nav-sub li.title {
vertical-align: top; margin: 0px; padding: 10px 7px 10px 14px; text-transform: uppercase; color: rgb(175,175,175); font-weight: bold; font-size: 140%;
}
.nav-sub li.group a {
display: block; min-height: 1.5em; margin: 0px; padding: 3px 7px 2px 10px; border-top: solid 1px rgb(200,200,200); border-left: solid 5px rgb(235,235,235); text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 120%;
}
/* IE6-hack for min-height. Also works for IE7-Beta2 */
* html .nav-sub li.group a {
height: 1.5em;
}
/* End IE-Hack */
.nav-sub li a {
display: block; min-height: 1.5em; margin: 0px; padding: 3px 7px 2px 10px; border-left: solid 5px rgb(235,235,235); color: rgb(110,110,110); text-decoration: none; font-size: 120%;
}
/* IE6-hack for min-height. Also works for IE7-Beta2 */
* html .nav-sub li a {
height: 1.5em;
}
/* End IE-Hack */
.nav-sub li.group a:hover, .nav-sub li.group .selected {
border-left: solid 5px rgb(175,175,175); background-color: rgb(225,225,225); text-decoration: none;
}
.nav-sub a:hover, .nav-sub .selected {
border-left: solid 5px rgb(175,175,175); background-color: rgb(225,225,225); text-decoration: none;
}
.nav-sub-align {
text-align: left;
}
/*******************************************************************/
/* SECTION 5 - Extend left column height to footer */
/*-----------------------------------------------------------------*/
/* TRICK: To nest the right two columns (content and sidebar) and */
/* give them a minimum height and white background. Then let the */
/* left column have transparent background so the light-grey color */
/* from the global page definition comes through. However, nesting */
/* floats inside each other with identical widths may activate the */
/* IE character duplicating bug, where the last characters of the */
/* last float statement are duplicated outside the float. The */
/* correction for this is to reduce the sidebar float so that the */
/* sum of the content and sidebar floats are 6px less than the */
/* container holding them. See Section 7.1, where this is done. */
/* ----------------------------------------------------------------*/
/* RESTRICTION: For situations where the left navigation menu is */
/* expanding over the minimum 600px height, it must remain smaller */
/* than the right columns. Otherwise the global page grey back- */
/* will shine through after the end of the content and sidebar */
/* columns. This situation may arise when you have very long left */
/* navigation menus, and short content and sidebars. If this is */
/* your situation, then simply increase the minimum height of the */
/* left column, as well as the container defined in this section. */
/*******************************************************************/
/* Contain both right columns (content and sidebar) in one */
/* container and extended to a minimum height of 600 px */
/* The "!important" statement is for Firefox so that the */
/* "height" statement still allows the container to grow and */
/* not remain fixed size. Necessary because IE cannot render */
/* the "min-height" property */
.container-content-sidebar {
float: left; width: 620px; min-height: 400px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);
}
/* IE6-hack for min-height. Also works for IE7-Beta2 */
* html .container-content-sidebar {
height: 400px;
}
/* End IE-Hack */
/* Put a buffer between sub-navigation column and */
/* main-navigation so that the global page background */
/* color does not come through in this place */
.buffer {
float: left; width: 160px; height: 20px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);
}
/***********************/
/* SECTION 6 - CONTENT */
/***********************/
/*--------------------*/
/* Section 6.1 - Size */
/*--------------------*/
.content {
float: left; width: 425px; margin: 0px; padding: 30px 20px 0px 20px; background-color: rgb(255,255,255);
}
/*-------------------------*/
/* Section 6.2 - Pagetitle */
/*-------------------------*/
.content-pagetitle {
width: 390px; margin: 0px 0px 10px 0px; padding: 0px;
}
.content-pagetitle p {
padding: 0px; margin: 0px; font-weight: bold; font-size: 140%;
}
/*----------------------------------*/
/* Section 6.3 - Extra container */
/*----------------------------------*/
/* To ensure that no problems arise */
/* with right and left floatings */
/* and make the implementation */
/* robuster. */
/*----------------------------------*/
.contentbox-container-full {
float: left; width: 425px; margin: 0px 0px 1.5em 0px; padding: 0px;
}
.contentbox-container-left {
float: left; width: 205px; margin: 0px 0px 1.5em 0px; padding: 0px;
}
.contentbox-container-right {
float: right; width: 205px; margin: 0px 0px 1.5em 0px; padding: 0px;
}
/*-----------------------------*/
/* Section 6.4 - Content title */
/*-----------------------------*/
.contentbox-title-noshading-noline {
display: block; margin: 0px; padding: 0px; background-color: transparent; text-transform: none; font-weight: bold; font-size: 150%;
}
.contentbox-title-noshading-line {
display: block; margin: 0px 0px 0.2em 0px; padding: 0px; border-bottom: solid 2px rgb(135,135,135); background-color: transparent; text-transform: none; font-weight: bold; font-size: 150%;
}
.contentbox-title-shading {
margin: 0px; padding: 1px 0px 2px 3px; background-color: rgb(225,225,225); font-weight: bold; font-size: 150%;
}
/*--------------------------------*/
/* Section 6.5 - Contentbox size */
/*--------------------------------*/
/* No shading */
.contentbox-noshading {
margin: 0px; padding: 0.7em 0px 0px 0px; background-color: transparent;
}
/* Shading */
.contentbox-shading {
margin: 0px; padding: 7px 10px 5px 10px; background-color: transparent;
}
/*-------------------------------*/
/* Section 6.6 - Contentbox text */
/*-------------------------------*/
/* Heading */
h1 {
clear: left; margin: 1.0em 0px 1.0em 0px; font-weight: bold; font-size: 150%;
}
h2 {
clear: left; margin: 1.5em 0px 1.0em 0px; font-weight: bold; font-size: 140%;
}
h3 {
clear: left; margin: 1.0em 0px 0.6em 0px; font-weight: bold; font-size: 130%;
}
h4 {
clear: left; margin: 0.5em 0px 0.5em 0px; font-weight: bold; font-style: italic; font-size: 130%;
}
/* Paragraph text */
p {
clear: left; margin: 0em 0px 0.5em 0px; padding: 0px; font-size: 130%;
}
/* Quote */
p.quote {
clear: left; margin: 0em 30px 0.6em 30px; line-height: 120%; font-size: 120%;
}
/* Embedded */
.embed {
float: left; width: 120px; margin: 2px 7px 2px 0px; padding: 5px 5px 5px 5px; background-color: rgb(225,225,225); font-style: italic; font-weight: bold; line-height: 1.2em; font-size: 180%;
}
.embed-caption {
float: left; margin: 5px 0px 0px 0px; padding: 0px; font-style: italic; font-weight: normal; line-height: 1.2em; font-size: 50%;
}
/* Unordered list */
.content ul {
margin: 0px 10px 0px 10px; padding: 0px 0px 0px 30px; list-style-type: disc; list-style-position: outside; font-size: 130%;
}
/* Ordered List */
.content ol {
margin: 0px 10px 0px 17px; padding: 0px 0px 0px 30px; list-style-type: decimal; list-style-position: outside; font-size: 130%;
}
/*--------------------------*/
/* Section 6.7 - Datatables */
/*--------------------------*/
.tabledata {
clear: left; margin: 0.5em 0px 0.2em 30px; border: solid 1px rgb(150,150,150); empty-cells: show; border-collapse: collapse; background-color: rgb(225,225,225);
}
.tabledata tr {
margin: 0px; padding: 0px;
}
.tabledata td {
padding: 2px 7px 2px 7px; border: solid 1px rgb(150,150,150); text-align: left; font-size: 120%;
}
.tabledata th {
margin: 0px; padding: 2px 7px 2px 7px; border: solid 1px rgb(150,150,150); empty-cells: show; text-align: left; font-size: 120%;
}
p.tabledata-caption {
margin: 0em 0px 10px 30px; padding: 0px; clear: both; text-align: left; font-size: 120%;
}
/*----------------------*/
/* Section 6.8 - Images */
/*----------------------*/
/* No border */
.img-left-noborder {
float: left; margin: 0.3em 7px 3px 0px;
}
.img-right-noborder {
float: right; margin: 0.3em 0px 3px 7px;
}
/* Border */
.img-left-border {
float: left; margin: 0.3em 7px 3px 0px; border: solid 1px rgb(150,150,150);
}
.img-right-border {
float: right; margin: 0.3em 0px 3px 7px; border: solid 1px rgb(150,150,150);
}
/***********************/
/* SECTION 7 - SIDEBAR */
/***********************/
/*-----------------------------------------------*/
/* Section 7.1 - Size */
/*-----------------------------------------------*/
/* Because of IE float-rendering bug, the width */
/* must be reduced by 6px, otherwise it will */
/* duplicate characters after the last float */
/* Reason: IE may not alwys allow nested floats */
/* have identical widths, but inside float must */
/* be smaller than outside float. This IE-bug is */
/* somewhat unpredictable. See Section 5 header */
/* for more details on this topic. */
/*-----------------------------------------------*/
.sidebar {
float: right; width: 144px; margin: 0px ; padding: 57px 5px 0px 0px; background-color: rgb(255,255,255);
}
/*-----------------------*/
/* Section 7.2 - Textbox */
/*-----------------------*/
.sidebarbox-noborder {
width: 140px; margin: 0em 0px 1.0em 0px; padding: 0px;
}
.sidebarbox-border {
width: 130px; margin: 0px 0px 1.0em 0px; padding: 4px 4px 4px 4px; border: solid 1px rgb(200,200,200);
}
/*-----------------------------*/
/* Section 7.3 - Textbox title */
/*-----------------------------*/
.sidebarbox-title-noshading-noline {
display: block; margin: 0px 0px 0.5em 0px; padding: 1px 0px 1px 0px;font-weight: bold; font-size: 120%;
}
.sidebarbox-title-noshading-line {
display: block; margin: 0px 0px 0.5em 0px; padding: 1px 0px 1px 0px; border-bottom: solid 1px rgb(135,135,135); background-color: transparent; font-weight: bold; font-size: 120%;
}
.sidebarbox-title-shading {
display: block; margin: 0px 0px 0.5em 0px; padding: 2px 5px 2px 5px; background-color: rgb(225,225,225); font-weight: bold; font-size: 120%;
}
/*------------------------------*/
/* Section 7.4 - Paragraph text */
/*------------------------------*/
.sidebarbox-noborder p {
margin: 0px 4px 0.4em 4px; padding: 0px; background-color: transparent; font-size: 110%;
}
.sidebarbox-border p {
margin: 0px 0px 0.4em 0px; padding: 0px; background-color: transparent; font-size: 110%;
}
/**********************/
/* SECTION 8 - FOOTER */
/**********************/
/* Somehow not possible to use percentage values to scale the font-size here. */
/* Therefore the is the font-size definition given in the generic CSS-class */
/* "footer-font", even though those generic font classes should all have a */
/* normed size of 1.0em. But making footer an exception will not hurt us. */
.footer {
clear: both; width: 780px; margin: 0em 0px 0px 0px; padding: 5px 0px 5px 0px; border-top: solid 1px rgb(200,200,200); border-bottom: solid 1px rgb(200,200,200); background-color: rgb(255,255,255); text-align: center;
}
/***************************************************/
/* SECTION 9 - HYPERLINKS FOR NON-NAVIGATION TEXTS */
/***************************************************/
.content a, .sidebar a {
color: rgb(0,0,0); text-decoration: underline;
}
.content a:hover, .sidebar a:hover {
color: rgb(110,110,110); text-decoration: none;
}
.content a:visited, .sidebar a:visited {
color: rgb(110,110,110);
}
.footer a {
color: rgb(150,150,150); text-decoration: underline;
}
.footer a:hover {
color: rgb(0,0,0); text-decoration: none;
}
/********************************/
/* SECTION 10 - GENERIC CLASSES */
/********************************/
/*------------------------------------------*/
/* Section 10.1 - Global default fonts */
/*------------------------------------------*/
/* Only applied to the main div-statements */
/* for the basic page regions. */
/*------------------------------------------*/
.nav-global-font {
font-size: 1.0em;
}
.nav-main-font {
font-size: 1.0em;
}
.nav-sub-font {
font-size: 1.0em;
}
.content-font {
font-size: 1.0em; line-height: 1.7em; color: rgb(110,110,110);
}
.sidebar-font {
font-size: 1.0em; line-height: 1.4em; color: rgb(110,110,110);
}
/* Percentage value does not work in "footer", so we */
/* cannot give the normed size of "1.0em" here and scale */
/* it up inside the "footer". Thus we define the final */
/* font-size here the way it will appear on screen. */
.footer-font {
font-size: 1.1em; color: rgb(150,150,150);
}
/*--------------------------------------*/
/* Section 10.2 - Horizontal alignments */
/*--------------------------------------*/
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/*-------------------------------------*/
/* Section 10.3 - Title decoration box */
/*-------------------------------------*/
.box-on {
float: left; width: 1.0em; margin-right: 0.2em; padding-left: 0.3em;
}
.box-off {
display: none;
}
/*---------------------------*/
/* Section 10.4 Text colors */
/*---------------------------*/
/* Basic Colors */
.txt-white {
color: rgb(255,255,255);
}
.txt-black {
color: rgb(0,0,0);
}
/* Grey */
.txt-grey01 {
color: rgb(242,242,242);
}
.txt-grey02 {
color: rgb(230,230,230);
}
.txt-grey03 {
color: rgb(217,217,217);
}
.txt-grey04 {
color: rgb(204,204,204);
}
.txt-grey05 {
color: rgb(191,191,191);
}
.txt-grey06 {
color: rgb(178,178,178);
}
.txt-grey07 {
color: rgb(153,153,153);
}
.txt-grey08 {
color: rgb(127,127,127);
}
.txt-grey09 {
color: rgb(89,89,89);
}
.txt-grey10 {
color: rgb(51,51,51);
}
/* Yellow */
.txt-yellow01 {
color: rgb(254,252,232);
}
.txt-yellow02 {
color: rgb(253,249,201);
}
.txt-yellow03 {
color: rgb(253,246,185);
}
.txt-yellow04 {
color: rgb(252,243,162);
}
.txt-yellow05 {
color: rgb(251,239,139);
}
.txt-yellow06 {
color: rgb(250,236,116);
}
.txt-yellow07 {
color: rgb(249,233,93);
}
.txt-yellow08 {
color: rgb(249,230,69);
}
.txt-yellow09 {
color: rgb(248,227,46);
}
.txt-yellow10 {
color: rgb(247,224,23);
}
/* Blue */
.txt-blue01 {
color: rgb(238,237,249);
}
.txt-blue02 {
color: rgb(222,220,242);
}
.txt-blue03 {
color: rgb(205,202,236);
}
.txt-blue04 {
color: rgb(189,185,229);
}
.txt-blue05 {
color: rgb(172,167,223);
}
.txt-blue06 {
color: rgb(155,149,217);
}
.txt-blue07 {
color: rgb(139,132,210);
}
.txt-blue08 {
color: rgb(122,114,204);
}
.txt-blue09 {
color: rgb(106,97,197);
}
.txt-blue10 {
color: rgb(89,79,191);
}
/* Green */
.txt-green01 {
color: rgb(237,246,229);
}
.txt-green02 {
color: rgb(220,238,204);
}
.txt-green03 {
color: rgb(202,229,178);
}
.txt-green04 {
color: rgb(185,220,153);
}
.txt-green05 {
color: rgb(167,211,127);
}
.txt-green06 {
color: rgb(149,203,102);
}
.txt-green07 {
color: rgb(132,194,76);
}
.txt-green08 {
color: rgb(114,185,51);
}
.txt-green09 {
color: rgb(97,177,25);
}
.txt-green10 {
color: rgb(79,168,0);
}
/* Red */
.txt-red01 {
color: rgb(252,235,233);
}
.txt-red02 {
color: rgb(248,216,211);
}
.txt-red03 {
color: rgb(245,196,188);
}
.txt-red04 {
color: rgb(242,177,166);
}
.txt-red05 {
color: rgb(238,157,144);
}
.txt-red06 {
color: rgb(235,137,122);
}
.txt-red07 {
color: rgb(232,118,100);
}
.txt-red08 {
color: rgb(229,98,77);
}
.txt-red09 {
color: rgb(225,79,55);
}
.txt-red10 {
color: rgb(222,59,33);
}
/*----------------------------------*/
/* Section 10.5 - Background colors */
/*----------------------------------*/
/* Basic Colors */
.bg-white {
background-color: rgb(255,255,255);
}
.bg-black {
background-color: rgb(0,0,0);
}
/* Grey */
.bg-grey01 {
background-color: rgb(242,242,242);
}
.bg-grey02 {
background-color: rgb(230,230,230);
}
.bg-grey03 {
background-color: rgb(217,217,217);
}
.bg-grey04 {
background-color: rgb(204,204,204);
}
.bg-grey05 {
background-color: rgb(191,191,191);
}
.bg-grey06 {
background-color: rgb(178,178,178);
}
.bg-grey07 {
background-color: rgb(153,153,153);
}
.bg-grey08 {
background-color: rgb(127,127,127);
}
.bg-grey09 {
background-color: rgb(89,89,89);
}
.bg-grey10 {
background-color: rgb(51,51,51);
}
/* Yellow */
.bg-yellow01 {
background-color: rgb(254,252,232);
}
.bg-yellow02 {
background-color: rgb(253,249,201);
}
.bg-yellow03 {
background-color: rgb(253,246,185);
}
.bg-yellow04 {
background-color: rgb(252,243,162);
}
.bg-yellow05 {
background-color: rgb(251,239,139);
}
.bg-yellow06 {
background-color: rgb(250,236,116);
}
.bg-yellow07 {
background-color: rgb(249,233,93);
}
.bg-yellow08 {
background-color: rgb(249,230,69);
}
.bg-yellow09 {
background-color: rgb(248,227,46);
}
.bg-yellow10 {
background-color: rgb(247,224,23);
}
/* Blue */
.bg-blue01 {
background-color: rgb(238,237,249);
}
.bg-blue02 {
background-color: rgb(222,220,242);
}
.bg-blue03 {
background-color: rgb(205,202,236);
}
.bg-blue04 {
background-color: rgb(189,185,229);
}
.bg-blue05 {
background-color: rgb(172,167,223);
}
.bg-blue06 {
background-color: rgb(155,149,217);
}
.bg-blue07 {
background-color: rgb(139,132,210);
}
.bg-blue08 {
background-color: rgb(122,114,204);
}
.bg-blue09 {
background-color: rgb(106,97,197);
}
.bg-blue10 {
background-color: rgb(89,79,191);
}
/* Green */
.bg-green01 {
background-color: rgb(237,246,229);
}
.bg-green02 {
background-color: rgb(220,238,204);
}
.bg-green03 {
background-color: rgb(202,229,178);
}
.bg-green04 {
background-color: rgb(185,220,153);
}
.bg-green05 {
background-color: rgb(167,211,127);
}
.bg-green06 {
background-color: rgb(149,203,102);
}
.bg-green07 {
background-color: rgb(132,194,76);
}
.bg-green08 {
background-color: rgb(114,185,51);
}
.bg-green09 {
background-color: rgb(97,177,25);
}
.bg-green10 {
background-color: rgb(79,168,0);
}
/* Red */
.bg-red01 {
background-color: rgb(252,235,233);
}
.bg-red02 {
background-color: rgb(248,216,211);
}
.bg-red03 {
background-color: rgb(245,196,188);
}
.bg-red04 {
background-color: rgb(242,177,166);
}
.bg-red05 {
background-color: rgb(238,157,144);
}
.bg-red06 {
background-color: rgb(235,137,122);
}
.bg-red07 {
background-color: rgb(232,118,100);
}
.bg-red08 {
background-color: rgb(229,98,77);
}
.bg-red09 {
background-color: rgb(225,79,55);
}
.bg-red10 {
background-color: rgb(222,59,33);
}
/******************************/
/* SECTION 11 - MISCELLANEOUS */
/******************************/
/* Horizontal line */
hr {
clear: both; width: 425px; height: 1px; border: none;
}
/* HTML-code examples */
.showcode {
font-family: monospace; font-weight: bold; font-size: 13px; color: rgb(255,0,0);
}
/* Hide HTML-tags. Good when no pagestyle supported by browser */
.hide {
display: none;
}
br {
clear: both;
}
</style>
<title>GoFlexiblePro - Options - Middle Column</title>
</head>
<body>
<div id="page-container">
<!-- HEADER -->
<!-- Global Navigation -->
<h3 class="hide">Global Navigation</h3>
<div class="nav-global-container">
<div class="nav-global nav-global-font">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#"><img class="img-flag" src="./img/flag_uk.gif" title="Website in English" alt=""/></a></li>
<li><a href="#"><img class="img-flag" src="./img/flag_spain.gif" title="Website en Espanol" alt=""/></a></li>
<li><a href="#"><img class="img-flag" src="./img/flag_france.gif" title ="Website en Francais" alt=""/></a></li>
<li><a href="#"><img class="img-flag" src="./img/flag_germany.gif" title ="Website auf Deutsch" alt=""/></a></li>
</ul>
</div>
</div>
<!-- Sitename and Banner -->
<div class="site-name">
Your Sitename.
<div class="site-slogan">
Your slogan.
</div>
</div>
<div><img class="img-header" src="./img/header.jpg" alt=""/></div>
<!-- Main navigation -->
<h3 class="hide">Main Navigation</h3>
<div class="nav-main nav-main-font">
<ul>
<li><a href="index.html">Front Page</a></li>
<li><a href="content.html">Content Page</a></li>
<li><a href="options.html" class="selected">Options</a></li>
</ul>
</div>
<!-- SUB NAVIGATION -->
<h3 class="hide">Sub-Navigation</h3>
<div class="nav-sub nav-sub-font nav-sub-align">
<div class="buffer"></div>
<ul>
<li class="title">Options</li>
<li class="group"><a href="options_left.html">Left Column</a></li>
<li class="group"><a href="#" class="selected">Middle Column</a></li>
<li><a href="#reference-font">Reference font</a></li>
<li><a href="#box-layout">Box layout</a></li>
<li><a href="#box-background">Box Background</a></li>
<li><a href="#box-text">Box text</a></li>
<li><a href="#title-style">Title style</a></li>
<li><a href="#title-background">Title background</a></li>
<li><a href="#title-text">Title text</a></li>
<li><a href="#title-decoration">Title decoration</a></li>
<li><a href="#paragraph-text">Paragraph text</a></li>
<li><a href="#paragraph-table">Paragraph table</a></li>
<li><a href="#paragraph-picture">Paragraph picture</a></li>
<li class="group"><a href="options_right.html">Right Column</a></li>
<li class="group"><a href="options_fonts.html">Default fonts</a></li>
<li class="group"><a href="options_color.html">Color Schemes</a></li>
<li class="group"><a href="options_print.html">Printer Stylesheet</a></li>
</ul>
</div>
<!-- WRAP CONTENT AND SIDEBAR -->
<div class="container-content-sidebar">
<!-- CONTENT -->
<h3 class="hide">Content</h3>
<div class="content content-font">
<!-- Page title -->
<div class="content-pagetitle"><p>MIDDLE COLUMN</p></div>
<div class="contentbox-container-full">
<a id="reference-font"></a>
<div class="contentbox-title-shading bg-red10 txt-white box-on">0 </div>
<div class="contentbox-title-shading bg-grey06 txt-white">REFERENCE FONT SIZE AND COLOR</div>
<div class="contentbox-shading bg-grey02">
<h4>How it works</h4>
<ul>
<li>Default: Defined in <span class="showcode">.content-font</span></li>
<li>Effects: Sets default font property for the middle column.</li>
<li>Options: Modify text color locally.</li>
<li>Method: Apply generic CSS-lass <span class="showcode">.txt-zz</span> (zz=colorcode) to text-related HTML-tags. See Sections 3, 6 and 8 for details.</li>
</ul>
</div>
</div>
<div class="contentbox-container-full">
<a id="box-layout"></a>
<div class="contentbox-title-shading bg-red10 txt-white box-on">1 </div>
<div class="contentbox-title-shading bg-grey06 txt-white">BOX LAYOUT</div>
<div class="contentbox-shading bg-grey02">
<h4>How it works</h4>
<ul>
<li>Default: None</li>
<li>Options: <br />
- Full width (<span class="showcode">.contentbox-container-full</span>)<br />
- Half width left (<span class="showcode">.contentbox-container-left</span>)<br />
- Half width left (<span class="showcode">.contentbox-container-right</span>)<br /></li>
<li>Method: Select one of the listed CSS-classes.</li>
</ul>
</div>
</div>
<hr />
<div class="contentbox-container-full">
<h4>Examples</h4>
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-shading bg-grey04 txt-grey08">Full width</div>
<div class="contentbox-noshading">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="contentbox-container-left">
<div class="contentbox-title-shading bg-grey10 box-off"> </div>
<div class="contentbox-title-shading bg-grey04 txt-grey08">Half-width left</div>
<div class="contentbox-noshading">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="contentbox-container-right">
<div class="contentbox-title-shading bg-grey10 box-off"> </div>
<div class="contentbox-title-shading bg-grey04 txt-grey08">Half-width right</div>
<div class="contentbox-noshading">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<br />
<div class="contentbox-container-full">
<a id="box-background"></a>
<div class="contentbox-title-shading bg-red10 txt-white box-on">2 </div>
<div class="contentbox-title-shading bg-grey06 txt-white">BOX BACKGROUND</div>
<div class="contentbox-shading bg-grey02">
<h4>How it works</h4>
<ul>
<li>Default: Transparent.<br />
- Defined in (<span class="showcode">.contentbox-shading</span>)</li>
<li>Options: Modify background colors.</li>
<li>Method: Apply generic CSS-class <span class="showcode">.bg-zz</span> (zz=colorcode) and choose among the available <a href="options_color.html#background">background colors</a>.</li>
</ul>
</div>
</div>
<hr />
<div class="contentbox-container-full">
<h4>Examples</h4>
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-shading">Lorem Ipsum</div>
<div class="contentbox-noshading">
<p>Default box background shading (transparent).</p>
</div>
</div>
<br />
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-shading bg-grey04 txt-grey08">Lorem Ipsum</div>
<div class="contentbox-shading bg-grey06">
<p>Darker background shading.</p>
</div>
</div>
<br />
<div class="contentbox-container-full">
<a id="box-text"></a>
<div class="contentbox-title-shading bg-red10 txt-white box-on">3 </div>
<div class="contentbox-title-shading bg-grey06 txt-white">BOX TEXT</div>
<div class="contentbox-shading bg-grey02">
<h4>How it works</h4>
<ul>
<li>Default: As given by reference font (see Section 0).</li>
<li>Options: Modify text colors.</li>
<li>Method: Apply generic CSS-class <span class="showcode">.txt-zz</span> (zz=colorcode) and choose among the available <a href="options_color.html#text">text colors</a>.</li>
</ul>
</div>
</div>
<hr />
<div class="contentbox-container-full">
<h4>Examples</h4>
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-shading bg-grey04 txt-grey08">Lorem Ipsum</div>
<div class="contentbox-noshading">
<p>Default text color.</p>
</div>
</div>
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-shading bg-grey04 txt-grey08">Lorem Ipsum</div>
<div class="contentbox-noshading txt-grey04">
<p>Lighter text color.</p>
</div>
</div>
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-shading bg-grey04 txt-grey08">Lorem Ipsum</div>
<div class="contentbox-noshading txt-black">
<p>Darker text color.</p>
</div>
</div>
<br />
<div class="contentbox-container-full">
<a id="title-style"></a>
<div class="contentbox-title-shading bg-red10 txt-white box-on">4 </div>
<div class="contentbox-title-shading bg-grey06 txt-white">TITLE STYLE</div>
<div class="contentbox-shading bg-grey02">
<h4>How it works</h4>
<ul>
<li>Default: None.</li>
<li>Options: <br />
- Only text <br />(<span class="showcode">.contentbox-title-noshading-noline</span>)<br />
- Text, with underline <br />(<span class="showcode">.contentbox-title-noshading-line</span>)<br />
- Text with shading <br />(<span class="showcode">.contentbox-title-shading</span>)</li>
<li>Method: Select one of the the listed CSS classes.</li>
</ul>
</div>
</div>
<hr />
<div class="contentbox-container-full">
<h4>Examples</h4>
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-noshading-noline txt-grey08">Only text</div>
</div>
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-noshading-line txt-grey08">Text with underline</div>
</div>
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-shading bg-grey04 txt-grey08">Text with shading</div>
</div>
<br />
<div class="contentbox-container-full">
<a id="title-background"></a>
<div class="contentbox-title-shading bg-red10 txt-white box-on">5 </div>
<div class="contentbox-title-shading bg-grey06 txt-white">TITLE BACKGROUND</div>
<div class="contentbox-shading bg-grey02">
<h4>How it works</h4>
<ul>
<li>Default: Light grey.<br />
- Defined in (<span class="showcode">.contentbox-title-shading</span>)</li>
<li>Options: Modify background colors.</li>
<li>Method: Apply generic CSS-class <span class="showcode">.bg-zz</span> (zz=colorcode) and choose among the available <a href="options_color.html#background">background colors</a>.</li>
</ul>
</div>
</div>
<hr />
<div class="contentbox-container-full">
<h4>Examples</h4>
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-shading txt">Default title background</div>
</div>
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-shading bg-grey06">Darker background shading</div>
</div>
<br />
<div class="contentbox-container-full">
<a id="title-text"></a>
<div class="contentbox-title-shading bg-red10 txt-white box-on">6 </div>
<div class="contentbox-title-shading bg-grey06 txt-white">TITLE TEXT</div>
<div class="contentbox-shading bg-grey02">
<h4>How it works</h4>
<ul>
<li>Default: As given by reference font (see Section 0).</li>
<li>Options: Modify text colors.</li>
<li>Method: Apply generic CSS-class <span class="showcode">.txt-zz</span> (zz=colorcode) and choose among the available <a href="options_color.html#text">text colors</a>.</li>
</ul>
</div>
</div>
<hr />
<div class="contentbox-container-full">
<h4>Examples</h4>
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-shading">Default title text</div>
</div>
<br />
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-shading txt-white">Lighter text</div>
</div>
<br />
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey08 box-off"> </div>
<div class="contentbox-title-shading txt-grey08">Darker text</div>
</div>
<br />
<div class="contentbox-container-full">
<a id="title-decoration"></a>
<div class="contentbox-title-shading bg-red10 txt-white box-on">7 </div>
<div class="contentbox-title-shading bg-grey06 txt-white">TITLE DECORATION</div>
<div class="contentbox-shading bg-grey02">
<h4>How it works</h4>
<ul>
<li>Default: On.</li>
<li>Options: <br />
- Turn box on/off.<br />
- Modify shading.<br />
- Modify text color.</li>
<li>Method: Apply generic CSS-classes.<br />
- Turn box on/off: Apply generic CSS-class (<span class="showcode">.box-on</span> or <span class="showcode">.box-off</span>)<br />
- Modify shading: Apply generic CSS-class <span class="showcode">.bg-zz</span> (zz=colorcode) and choose among the available <a href="options_color.html#background">background colors</a>.<br />
- Modify text color: Apply generic CSS-class <span class="showcode">.txt-zz</span> (zz=colorcode) and choose among the available <a href="options_color.html#text">text colors</a>.</li>
</ul>
</div>
</div>
<hr />
<div class="contentbox-container-full">
<h4>Examples</h4>
<div class="contentbox-title-shading box-on"> </div>
<div class="contentbox-title-shading bg-grey04 txt-grey06">Decoration box - default</div>
</div>
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey04 box-off"> </div>
<div class="contentbox-title-shading bg-grey02 txt-grey06">Decoration box - off</div>
</div>
<br />
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey04 box-on"> </div>
<div class="contentbox-title-shading bg-grey02 txt-grey06">Decoration box - on (lighter)</div>
</div>
<br />
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey08 txt-grey10 box-on">3 </div>
<div class="contentbox-title-shading bg-grey02 txt-grey08">Decoration box - on (darker, with text)</div>
</div>
<br />
<div class="contentbox-container-full">
<a id="paragraph-text"></a>
<div class="contentbox-title-shading bg-red10 txt-white box-on">8 </div>
<div class="contentbox-title-shading bg-grey06 txt-white">PARAGRAPH TEXT</div>
<div class="contentbox-shading bg-grey02">
<h4>How it works</h4>
<ul>
<li>Default: As given by reference font (see Section 0).</li>
<li>Further formats: <br />
- Headings <br />
- Paragraph <br />
- Quote <br />
- Embedded emphasis <br />
- Unordered list <br />
- Ordered list</li>
<li>Method: Apply generic CSS-classes.<br />
- Modify shading: Apply generic CSS-class <span class="showcode">.bg-zz</span> (zz=colorcode) and choose among the available <a href="options_color.html#background">background colors</a>.<br />
- Modify text color: Apply generic CSS-class <span class="showcode">.txt-zz</span> (zz=colorcode) and choose among the available <a href="options_color.html#text">text colors</a>.</li>
</ul>
</div>
</div>
<h4>Examples</h4>
<hr />
<div class="contentbox-full-noshading">
<p><b>Headings</b></p>
<h1>Heading h1 (<span class="showcode">h1</span>)</h1>
<h2>Heading h2 (<span class="showcode">h2</span>)</h2>
<h3>Heading h3 (<span class="showcode">h3</span>)</h3>
<hr />
<p><b>Normal paragraph</b> (<span class="showcode">p</span>)</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<hr />
<p><b>Quote</b> (<span class="showcode">.quote</span>)</p>
<p class="quote">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<hr />
<p><b>Embedded emphasis</b> (<span class="showcode">.embed .embed-caption</span>)</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer <span class="embed">"Amet elit door sit at amet sit at door Amet elit."<span class="embed-caption">Embedded Caption</span></span> adipiscing elit Lorem ipsum dolor sit. orem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit elit. orem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet.</p>
<hr />
<p><b>Unordered list</b> (<span class="showcode">ul</span>)</p>
<ul>
<li>Unordered List</li>
<li>Uses a custom bullet to make items pop</li>
</ul>
<hr />
<p><b>Ordered list</b> (<span class="showcode">ol</span>)</p>
<ol>
<li>Ordered List</li>
<li>Uses a tag to style the numbers</li>
</ol>
</div>
<br />
<div class="contentbox-container-full">
<a id="paragraph-table"></a>
<div class="contentbox-title-shading bg-red10 txt-white box-on">9 </div>
<div class="contentbox-title-shading bg-grey06 txt-white">PARAGRAPH TABLE</div>
<div class="contentbox-shading bg-grey02">
<h4>How it works</h4>
<ul>
<li>Default: Shading: Light-Grey, Text: Dark-grey.</li>
<li>Options: Modifications can be cone for the entire table <span class="showcode"><table></span>, entire rows <span class="showcode"><tr></span>, or individual cells <span class="showcode"><td></span>.<br />
- Modfify cell shading.<br />
- Modify cell text color.</li>
<li>Method: Apply generic CSS-classes.<br />
- Modify cell shading: Use CSS-class <span class="showcode">.bg-zz</span> (zz=colorcode) and choose among the available <a href="options_color.html#background">background colors</a>.<br />
- Modify cell text color: Use CSS-class <span class="showcode">.txt-zz</span> (zz=colorcode) and choose among the available <a href="options_color.html#text">text colors</a>.</li>
</ul>
</div>
</div>
<hr />
<h4>Examples</h4>
<div class="contentbox-container-full">
<div class="contentbox-noshading">
<p><b>Two-columns</b> (default)</p>
<table class="tabledata">
<tr><th>Column 1</th><th>Column 2</th></tr>
<tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
<tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
<tr><td>Row 3, Column 1</td><td>Row 3, Column 2</td></tr>
</table>
<p class="tabledata-caption"><b>Table x.x.</b> Caption</p>
<p><b>Three-columns</b> (default)</p>
<table class="tabledata">
<tr><th>Column 1</th><th>Column 2</th><th>Column 2</th></tr>
<tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td><td>Row 1, Column 3</td></tr>
<tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td><td>Row 2, Column 3</td></tr>
<tr><td>Row 3, Column 1</td><td>Row 3, Column 2</td><td>Row 3, Column 3</td></tr>
</table>
<p class="tabledata-caption"><b>Table x.x.</b> Caption</p>
<p><b>Four-columns</b> (default)</p>
<table class="tabledata">
<tr><th>Column 1</th><th>Column 2</th><th>Column 2</th><th>Column 2</th></tr>
<tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td><td>Row 1, Column 3</td><td>Row 1, Column 4</td></tr>
<tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td><td>Row 2, Column 3</td><td>Row 2, Column 4</td></tr>
<tr><td>Row 3, Column 1</td><td>Row 3, Column 2</td><td>Row 3, Column 3</td><td>Row 3, Column 4</td></tr>
</table>
<p class="tabledata-caption"><b>Table x.x.</b> Caption</p>
<p><b>Four-columns</b> (with generic CSS-classes applied)</p>
<table class="tabledata bg-grey06">
<tr class="bg-grey08 txt-black"><th>darker header</th><th>darker header</th><th class="bg-grey02 txt-grey06">exception</th><th>darker header</th></tr>
<tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td><td>Row 1, Column 3</td><td>Row 1, Column 4</td></tr>
<tr><td>Row 2, Column 1</td><td class="bg-grey04 txt-white">different</td><td>Row 2, Column 3</td><td>Row 2, Column 4</td></tr>
<tr><td>Row 3, Column 1</td><td>Row 3, Column 2</td><td>Row 3, Column 3</td><td>Row 3, Column 4</td></tr>
</table>
<p class="tabledata-caption"><b>Table x.x.</b> Caption</p>
</div>
</div>
<div class="contentbox-container-full">
<a id="paragraph-picture"></a>
<div class="contentbox-title-shading bg-red10 txt-white box-on">10 </div>
<div class="contentbox-title-shading bg-grey06 txt-white">PARAGRAPH PICTURE</div>
<div class="contentbox-shading bg-grey02">
<h4>How it works</h4>
<ul>
<li>Default: None.</li>
<li>Options: <br />
- Left align, no border (<span class="showcode">.img-left-noborder</span>)<br />
- Right align, no border (<span class="showcode">.img-right-noborder</span>)<br />
- Left align, border (<span class="showcode">.img-left-border</span>)<br />
- Right align, border (<span class="showcode">.img-right-border</span>)</li>
<li>Method: Select one the listed CSS-classes.</li>
</ul>
</div>
</div>
<hr />
<h4>Examples</h4>
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey02 txt-grey08">Left aligned - No Border</div>
<div class="contentbox-noshading">
<p><img src="./img/image.jpg" class="img-left-noborder" width="60" height="90" alt=""/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey02 txt-grey08">Right aligned - No Border</div>
<div class="contentbox-noshading">
<p><img src="./img/image.jpg" class="img-right-noborder" width="60" height="90" alt=""/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey02 txt-grey08">Left aligned - Border</div>
<div class="contentbox-noshading">
<p><img src="./img/image.jpg" class="img-left-border" width="60" height="90" alt=""/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="contentbox-container-full">
<div class="contentbox-title-shading bg-grey02 txt-grey08">Right aligned - Border</div>
<div class="contentbox-noshading">
<p><img src="./img/image.jpg" class="img-right-border" width="60" height="90" alt=""/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam at libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
</div>
<!-- SIDEBAR -->
<h3 class="hide">Sidebar</h3>
<div class="sidebar">
<!-- Empty sidebar -->
</div>
<!-- END WRAP CONTENT AND SIDEBAR -->
</div>
<!-- FOOTER -->
<h3 class="hide">Footer</h3>
<div class="footer footer-font">
Copyright © 2006 Your Company | All Rights Reserved<br />Design: Made in Austria | Author: <a href="mailto:gw@actamail.com">G. Wolfgang</a>
| <a href="http://www.ehostinfo.com/">Web Hosting </a> | <a href="http://validator.w3.org/check?uri=referer" title="Validate code as W3C XHTML 1.1 Strict Compliant">W3C XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/" title="Validate Style Sheet as W3C CSS 2.0 Compliant">W3C CSS 2.0</a>
</div>
</div>
</body>
</html>
Related examples in the same category