/* CSS Document */
/* Creative Rage Style Sheet Copyright 2007 */
/* Amendments to HTML tags */
body {
text-align:center;
background-color:#2A2F35;
margin:0px;
font-family:"Lucida Grande" Geneva, Arial, Helvetica, sans-serif;
font-size:62.5%;
color:#333333;
}
b {
font-weight:bold;
color:#CC0000;
}
/* Structural tags for general layout */
#top { /* Defines the main upper body of the site - sky area */
width:100%;
height:510px;
margin:0px;
background-image:url(../images/bkgd.jpg);
background-repeat:repeat-x;
background-color:#B3C8DA;
text-align:center;
}
#header { /* Reserves an area for the Creative Rage logo */
width:700px;
height:100px;
margin-left:auto;
margin-right:auto;
/*background-image:url(../images/crlogo.gif);
background-position:top left;
background-repeat:no-repeat;*/
}
#menu {
height:30px;
width:700px;
height:24px;
margin-left:auto;
margin-right:auto;
border-bottom:#CC0000 1px solid;
margin-top:20px;
text-align:left;
padding:0px;
}
ul#menu_root {
margin:0px;
text-align:left;
width:710px;
padding:0px;
}
ul#menu_root li {
display:inline;
height:30px;
overflow:hidden;
list-style:none;
}
ul#menu_root a {
display:block;
float:left;
margin:0px;
}
li#home_link a{
background:url(../images/home.gif) no-repeat;
background-position: 0 0;
width:47px;
height:37px;
padding-right:20px;
display:block;
}
#home_link a:hover {
background-position: 0 -37px;
}
li#portfolio_link a{
background:url(../images/portfolio.gif) no-repeat;
background-position: 0 0;
width:85px;
height:37px;
padding-right:20px;
}
#portfolio_link a:hover {
background-position: 0 -37px;
}
.notext {
text-indent:-5000px;
overflow:hidden;
}
#content { /* Sets the main content area, aligned centrally to the 'top' area with 10 px border */
width:680px;
height:380px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
background-color:#FFFFFF;
padding:10px;
}
#bottom { /* Everything below 'top' the dark ground area holding contact and submenu */
width:100%;
height:100%;
border-top:#CC0000 1px solid;
text-align:center;
}
#footer { /* Block holds conetnt within the 'bottom' area */
width:700px;
text-align:right;
margin-left:auto;
margin-right:auto;
color:#FFFFFF;
font-size:1.1em;
}
#submenu { /* Sub menu items size and spacing */
width:350px;
float:left;
font-size:10px;
color:#FFFFFF;
text-align:left;
}
#submenu p { /*Sub menu tag amendment */
margin:5px 0px 48px 5px;
}
#address { /* Contact details set to oposite side of footer */
width:350px;
float:left;
font-size:10px;
color:#FFFFFF;
}
#address p { /* Address
tag amendment for spacing */
margin:5px;
}
/* Class tag amendments and definitions for links and additional text areas. */
.form { /* Sets the text size within the contact form */
font-size:10px;
}
a:link, a:active, a:visited {/* Standard body links */
color:#428CE7;
font-family:"Lucida Grande" Geneva, Verdana, Arial, sans-serif;
font-size:12px;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a.small:link, a.small:active, a.small:visited {/* Small body links for smaller text areas */
color:#428CE7;
font-family:"Lucida Grande" Geneva, Verdana, Arial, sans-serif;
font-size:10px;
text-decoration:none;
}
a.small:hover{
text-decoration:underline;
}
a.sub:link, a.sub:active, a.sub:visited {/* Sub menu links */
color:#FFFFFF;
font-family:"Lucida Grande" Geneva, Verdana, Arial, sans-serif;
font-size:10px;
text-decoration:none;
}
a.sub:hover{
text-decoration:underline;
}
/* ID structure tags for individual page structure */
/* Design Ethics page layout and background image */
#design { /* General body of page and background image */
width:680px;
height:390px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
background-color:#FFFFFF;
padding:10px 10px 0px 10px;
background-image:url(../images/design_ethics.gif);
background-position:bottom center;
background-repeat:no-repeat;
}
#column1 { /* Two column layout Left side */
width:335px;
height:380px;
margin-right:5px;
text-align:left;
padding:0px;
float:left;
}
#column2 {/* Two column layout Right side */
width:335px;
height:380px;
margin-left:5px;
text-align:left;
padding:0px;
float:left;
}
#column1 h1{ /* Headline for left column, replaces
text with image */
background-image:url(../images/working_you.gif);
background-repeat:no-repeat;
background-position:top left;
text-indent:-9999px
}
#column2 h1{ /* Headline for right column, replaces text with image */
background-image:url(../images/working_customers.gif);
background-repeat:no-repeat;
background-position:top left;
text-indent:-9999px
}
/* ------------------------------------------------- */
/* Skills and Services Page Layout */
#servicestitle { /* title image for servcies page, left side float */
width:264px;
height:320px;
margin:0px 0px 10px 0px;
padding:0px;
background-color:#C2C2C2;
background-image:url(../images/skillsandservices.jpg);
background-position:top;
background-repeat:no-repeat;
float:left;
}
#services { /* Main text for Services page on right side */
width:406px;
height:275px;
margin:0px 0px 10px 10px;
padding-top:45px;
float:left;
text-align:left;
}
#ssheader { /* Header for invidual service pages, holds banner image */
width:680px;
height:120px;
margin-bottom:10px;
padding:0px;
}
#ssleft { /* Left column for service listings */
width:220px;
height:200px;
float:left;
padding:0px;
margin:0px;
text-align:left;
}
#sscenter { /* Center column for service listings */
width:220px;
height:200px;
float:left;
padding:0px;
margin:0px 10px 0px 10px;
text-align:left;
}
#ssright { /* Right column for service listings */
width:220px;
height:200px;
float:left;
padding:0px;
margin:0px;
text-align:left;
}
/* ------------------------------------------------- */
/* Body menu both services and portfolio sets of pages, sits at the bottom of main content area */
#contentmenu { /* Defines the menu area with red line across top, sets padding and spacing */
width:680px;
height:39px;
border-top:#CC0000 1px solid;
text-align:center;
padding-top:10px;
clear:both;
}
#contentmenu menu {/* Sets the