/* ----------------- General Page Layout Elements ----------------- */

html, body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", arial, sans-serif;
font-size: 90%;
text-align: center;
background: #3e3e3e url(images/background.jpg) repeat-x;
color: #000;
}

#container {
width: 700px;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #fff;
color: #000;
}

#content {
background: #fff url(images/fauxcontent.jpg) repeat-y top right;
color: #000;
}

#left { 
float: left;
width: 71%;
}

#right {
float: right;
width: 28%;
font-size: 90%;
line-height: 1.2em;
color: #324261;
}

#footer {
text-align: center;
clear: both;
border-top: solid 1px #bdcce9;
background: #d1dbef;
}


/* This gets rid of the strange gap witnessed in Internet Explorer */
#mainimage {display: block}


/* ----------------- Main Page Navigation ----------------- */

ul#navigation {
list-style-type: none;
list-style-image: none;
padding: 0;
margin: 0;
width: 100%;
height: 25px;
clear: both;
text-align: center;
background: url(images/nav.jpg) repeat-x
}

ul#navigation li {
float: left;
margin: 0;
position: relative;
}

ul#navigation li a:link, ul#navigation li a:visited {
float: left;
text-decoration: none;
color: #000;
border-right: solid 1px #ccc;
height: 25px;
line-height: 25px;
width: 138px;
margin: 0;
}

#navigation li a:link#noborder, #navigation li a:visited#noborder {
border-right: none;
}

#navigation li a:hover {
background: url(images/nav1.jpg) repeat-x;
}

#footer a:link, #footer a:visited {
color: #6176a0;
}



/* ----------------- Suckerfish Drop Down Menu ----------------- */


#container #navigation ul {
padding: 0;
margin: 0;
list-style: none;
}

#container #navigation li ul {
position: absolute;
width: 138px;
left: -999em;
}

#container #navigation li:hover ul, #container #navigation li.sfhover ul {
left: 0;
top: 25px;
}

#container #navigation li:hover ul li {
background:url(images/transparent.png) top left;
width:138px;
}


#container #navigation li:hover ul li a:hover {
background: #a1a0a0;
}

#container #navigation li:hover ul li.last a:link, #container #navigation li:hover ul li.last a:visited {
border-bottom: solid 1px #ccc;
}




#container #navigation li.sfhover ul li a:link, #container #navigation li.sfhover ul li a:visited {
display: block;
height: 100%;
width: 100%;
margin: 0;
background: #a6a5a5;
}

#container #navigation li.sfhover ul li a:hover {
background: #a1a0a0;
}



/* ----------------- Font Styling ----------------- */

p {
margin: 1em 10px 1em 10px;
}

h1 {
margin: 0;
padding: 0;
height: 74px;
line-height: 74px;
text-indent: -1000em;
background: url(images/title.gif) no-repeat bottom left
}

h2 {
margin: 0.7em 10px 0 10px;
color: #23262c;
font-size: 130%;
background: #fff;
font-weight: normal;
}

#left h3 {
margin: 1.7em 10px -0.5em 10px;
font-size: 130%;
background: #fff;
font-weight: normal;
color: #2d2d2d;
}

#right p {
margin: 0 10px 1.1em 10px;
background: #e7edf9;
color: #324261;
}

#right h3 {
font-size: 130%;
background: url(images/multisite.jpg) no-repeat top left;
height: 20px;
width: 84px;
text-indent: -1000em;
margin: 1.2em 10px 0.7em 10px;
}

#content h4 {
margin: -1.7em 1em 0 0;
padding: 0 0 0 0;
font-size: 100%;
}

body > #container #content h4 {
margin: 0em 1em 0 0;
}

body #container #content #right h4 {
margin: 1.5em 10px 0 10px;
font-size: 120%;
background: #e7edf9 url(images/tick.gif) no-repeat center left;
text-indent: 25px;
height: 2em;
line-height: 2em;
color: #143066;
}

#footer p {
color: #666;
background: #d1dbef;
margin: 1em 0 0 0;
padding: 0 0 1em 0;
font-size: 85%;
}

#content .bottomicon p  { 
margin: 0 0 10px 0;
}

#left blockquote p {
margin: 0 0 0 1.8em;
padding: 0.5em 1.8em 0.5em 0;
background: url(images/bottomquote.jpg) no-repeat bottom right;
text-align: left;
}

#left blockquote {
font-size: 130%;
color: #999;
background: #fff;
font-style: italic;
line-height: 1em;
margin: 2em 3em;
background: url(images/topquote.jpg) no-repeat top left;
}

acronym {
border-bottom: dotted 1px;
cursor: help;
}

a:link acronym, a:Visited acronym {
border-bottom: none;
cursor: pointer;
}

li {margin: 1em;}



/* ----------------- Link Styling ----------------- */

#content .bottomicon a:link img, #content .bottomicon a:visited img, #content .bottomicon a:link, #content .bottomicon a:visited {
border: none;
text-decoration: none;
font-size: 85%;
margin: 0;
color: #7d889b;
text-align: center;
} 

#content .bottomicon a:link img, #content .bottomicon a:visited img {
display: block;
text-align: center;
margin: 0 auto;
}

a:link {
color: #364c83;
}

a:visited {
color: #5b436f;
}

a:hover {
text-decoration: none;
color: #4c5b82
}

/* ----------------- Images ----------------- */

img {margin: 0;}

h2#module img {
margin: 0 0.25em 0 0;
}

img.center {
margin: 0 0 0 20px;
}

/* ----------------- Solutions - Multisite Interface Page ----------------- */

ul#multisiteinterface {
list-style-type: none;
list-style-image: none;
padding: 0;
margin: 1em 6px 1em 6px;
text-align: center;
}

ul#multisiteinterface li {
float: left;
width: 95px;
margin: 0;
}

ul#multisiteinterface li a:link, ul#multisiteinterface a:visited {
display: block;
color: #000;
text-decoration: none;
margin: 0 0 20px 0;
}

ul#multisiteinterface li a:link img, ul#multisiteinterface a:visited img {
display: block;
margin-left: auto;
margin-right: auto;
border: none;
}

#left h3.multisiteinterfacetitle {
background: #aec9f4 url(images/multisite/headerbar.jpg) repeat-x top left;
color: #000;
height: 20px;
line-height: 20px;
font-size: 90%;
font-weight: normal;
text-indent: 1em;
margin: 1em 6px 1.5em 6px;
}



/* ----------------- Contact - Post-its Interface Page ----------------- */

ul#contactus {
list-style-type: none;
list-style-image: none;
padding: 0;
margin: 1em 0 1em 6px;
width: 485px;

background: #fff;
}

ul#contactus li {
width: 485px;
height: 176px;
margin: 0;
}

ul#contactus li a:link, ul#contactus li a:visited {
text-decoration: none;
display: block; 
width: 485px;
height: 176px;
margin: 0;
padding: 0;
color: white;
}

ul#contactus li a:hover {color: black;}


ul#contactus li#email a:link, ul#contactus li#email a:visited {
background: #fff url(images/postitemail.jpg) no-repeat top left;
}

ul#contactus li#office a:link, ul#contactus li#office a:visited {
background: #fff url(images/postitoffice.jpg) no-repeat top left;
}

ul#contactus li#telephone a:link, ul#contactus li#telephone a:visited {
background: #fff url(images/postittelephone.jpg) no-repeat top left;
}


ul#contactus li#email a:link span, ul#contactus li#email a:visited span,
ul#contactus li#telephone a:link span, ul#contactus li#telephone a:visited span {
display: block;
margin: 0 0 0 260px;
padding-top: 60px;
}

ul#contactus li#office a:link span, ul#contactus li#office a:visited span {
display: block;
margin: 0 260px 0 0;
padding-top: 30px;
text-align: right;
}



/* ----------------- Contact - Post-its Home Page ----------------- */

ul#contactpostits {
list-style-type: none;
list-style-image: none;
padding: 0;
margin: 0 0 0 40px;
}

ul#contactpostits li {
float: left;
margin: 0;
}

ul#contactpostits li a:link, ul#contactpostits li a:visited {
float: left;
display: block;
width: 140px;
height: 134px;
text-indent: -1000em;
text-decoration: none;
}

ul#contactpostits li#postit1 a:link, ul#contactpostits li#postit1 a:visited {
background: #fff url(images/contactpostit1.jpg) no-repeat top left;
}

ul#contactpostits li#postit2 a:link, ul#contactpostits li#postit2 a:visited {
background: #fff url(images/contactpostit2.jpg) no-repeat top left;
}

ul#contactpostits li#postit3 a:link, ul#contactpostits li#postit3 a:visited {
background: #fff url(images/contactpostit3.jpg) no-repeat top left;
}

ul#contactpostits li a:hover {
border-top: solid 1px #fff;
}

#container #content #left blockquote p.quoted {
margin: 1em 0; 
padding: 0;
background: none;
font-size: 70%;
font-style: normal;
text-align: right;
color: #747477;
}



/* ----------------- Miscellaneous ----------------- */

.bottomicon {
width: 7em; 
float: right;
text-align: center;
margin: 0 1em 0 0;
}

.clear {clear: both}

p.center {
text-align: center;
margin-top: 0;
font-size: 85%;
}




ul {
list-style-image: url(images/listicon.jpg);
}

#content ul#portfolio {
list-style: none;
list-style-image: none;
padding: 0;
margin: 0;
}

ul#portfolio li {
clear: both;
margin: 1em 0;
padding: 0;
}

ul#portfolio li span {
display: block;
margin: 0;
font-size: 90%;
}

ul#portfolio li span a:link, ul#portfolio li span a:visited {text-decoration: none;}

ul#portfolio li a#portfoliosandygreen:link, ul#portfolio li a#portfoliosandygreen:visited, 
ul#portfolio li a#portfoliocreativeandart:link, 
ul#portfolio li a#portfoliocreativeandart:visited,
ul#portfolio li a#portfolioerj:link, ul#portfolio li a#portfolioerj:visited,
ul#portfolio li a#portfoliosportstextiles:link, 
ul#portfolio li a#portfoliosportstextiles:visited,
ul#portfolio li a#portfoliovistaview:link, ul#portfolio li a#portfoliovistaview:visited {
display: block;
float: left;
width: 162px;
height: 110px;
border: solid 1px #bdcce9;
margin: 0 1em 4em 6px;
text-indent: -1000em;
}

ul#portfolio li a#portfoliosandygreen:link, ul#portfolio li a#portfoliosandygreen:visited {
background: url(images/sandygreenthumb.jpg) no-repeat 2px 2px;
}

ul#portfolio li a#portfoliosandygreen:hover {
background: url(images/sandygreenthumb1.jpg) no-repeat 2px 2px;
}

ul#portfolio li a#portfoliocreativeandart:link, 
ul#portfolio li a#portfoliocreativeandart:visited {
background: url(images/captiveandartthumb.jpg) no-repeat 2px 2px;
}

ul#portfolio li a#portfoliocreativeandart:hover {
background: url(images/captiveandartthumb1.jpg) no-repeat 2px 2px;
}


ul#portfolio li a#portfolioerj:link, ul#portfolio li a#portfolioerj:visited {
background: url(images/erjthumb.jpg) no-repeat 2px 2px;
}

ul#portfolio li a#portfolioerj:hover {
background: url(images/erjthumb1.jpg) no-repeat 2px 2px;
}


ul#portfolio li a#portfoliosportstextiles:link, 
ul#portfolio li a#portfoliosportstextiles:visited {
background: url(images/sportstextilesthumb.jpg) no-repeat 2px 2px;
}

ul#portfolio li a#portfoliosportstextiles:hover {
background: url(images/sportstextilesthumb1.jpg) no-repeat 2px 2px;
}

ul#portfolio li a#portfoliovistaview:link, ul#portfolio li a#portfoliovistaview:visited {
background: url(images/vistaviewthumb.jpg) no-repeat 2px 2px;
}

ul#portfolio li a#portfoliovistaview:hover {
background: url(images/vistaviewthumb1.jpg) no-repeat 2px 2px;
}


/* ----------------- Banner Adverts ----------------- */


#banneradvertising {
margin: 1em 6px;
position: relative;
height: 420px;
}

#banneradvertising img {
position: absolute;
}

#banneradvertising img#ad1 {
top: 0;
left: 0;
}

#banneradvertising img#ad2 {
top: 0;
left: 190px;
}

#banneradvertising img#ad3 {
top: 90px;
left: 190px;
}

#banneradvertising img#ad4 {
top: 300px;
left: 190px;
}

#banneradvertising img#ad5 {
top: 90px;
left: 300px;
}