/* Base styles for document wide defaults */

* {
	margin: 0;
	padding: 0;
}

body {
  font-family: "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 78%;
  background: left top no-repeat url(../ui/bkg_swirly_blueGreen.gif);
  padding: 1em 0;
  color:#333333;
}
em, i {
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
}
strong, b {
    font-family: "Lucida Sans", "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, address {
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
}

/*----------------------------------------------------------------------
  TEXT STYLING
  ----------------------------------------------------------------------*/
h1,
h2 {
  font-weight:normal;
  text-transform:lowercase;
  clear:both;
}  
h1 {
  font-size:2.2em;
  color:#008BCB;
  border-bottom:1px solid #E0E0E0;
  padding:0.7em 0 0.25em 0;
  margin:0 0.6em 0.8em 0.6em;
  display:block;
}
h2 {
  color:#008BCB;
  font-size:1.8em;
  margin-bottom:0.1em;
  letter-spacing:-0.03em;
}
h2 strong {
  color:#008BCB;
  white-space:nowrap;
  font-weight:normal;
}
h3 {
  text-transform:lowercase;
  color:#333333;
  font-size:1.35em;
  font-weight:normal;
  margin-bottom:0.1em;
}
h3.tagline {
  text-transform:none;
  line-height:1.1em;
  line-height:1.3;
  margin-bottom:0.75em;
  border:0;
  clear:both;
}
h4 {
  color:#555555;
  font-size:1.1em;
  line-height:2;
  margin-bottom:0.5em;
  letter-spacing:-0.03em;
  font-weight:bold;
}
p {
  margin:0 0 1.6em 0;
  font:1em/1.8;
  color:#333333;
  font-size:1em;
  line-height:1.4;
}

/* LINKS */
a {
text-decoration:underline;
}
a:link {color:#008BCB;}
a:hover {text-decoration: underline;}
a:visited {color:#008BCB;}
a h2 {color:inherit !important;}

a.download {
	background:url(../ui/icon_newspaper.gif) no-repeat left center;
	padding-left:24px;
	margin-left:12px;
} 

p.subbed {
	margin-top:-0.5em;
}

ul {
    margin-left:1.5em;
    margin-bottom:1.5em;
    line-height:1.7;
}


/*----------------------------------------------------------------------
  MAIN BLOCKS
  ----------------------------------------------------------------------*/
#pageContainer {
  background-color: #FFFFFF;
  border:0.3em solid #CCCCCC;
  width:67.5em;
  margin:0 auto;
  padding-top: 0.4em;
}
/* SPLASH */
#splash {
  background:5em 0 no-repeat;
  border-bottom:1px solid #E0E0E0;
  margin:0 1.5em 0 1.5em;
  padding:0 8em 0 22em;
  width:34.5em;
  height:12em;
  float:left;
}
#splash h2 {
  color:#008CCC !important;
  font-size:2.2em;
}
#splash h2 strong {
  color:#333333 !important;
  display:block;
}
#splash h2
#splash p {
  color:#5F5F5F;
  font-size:1.2em;
}

/*----------------------------------------------------------------------
  CARAMEL LOGO
  Image replacement usings overflow hack
  ----------------------------------------------------------------------*/
#caramelLogo {
  border:0;
  background:no-repeat url(../ui/caramel_logo.gif);
  width:205px;
  height:44px; /* Hack for IE 5 */
  height/**/:0;
  padding-top:44px;
  margin:1em 0 1em 1.5em;
  font-size:1em;
  overflow:hidden;
  float:left;
}

/*----------------------------------------------------------------------
  SITE SEARCH
  Tricky stuff thats FANCY!
  ----------------------------------------------------------------------*/
#siteSearch {
	float:right;
	margin:1.6em 1.5em 0 0;
	width:280px;
}
#siteSearch input,
#siteSearch button {
	border:0;
	background:left top transparent no-repeat;
}
#siteSearch input {
	background-image:url(../ui/search_input_bkg.gif);
	width:168px;
	padding:9px 8px 9px 10px;
	float:left;
}
#siteSearch button {
	padding:0;
	background-image:url(../ui/search_button_bkg.gif);
	width:80px;
	padding-top:30px;
	height:0;
	overflow:hidden;
	float:right;
}

/*----------------------------------------------------------------------
  NAVIGATION
  Unordered list for navigations
  ----------------------------------------------------------------------*/
#mainNav,
#subNav,
#mainNav .subNav {
	width:100%;
	margin:0;
	padding:0;
	float:left;
}
#mainNav li,
#subNav li,
#mainNav .subNav li {
	float:left;
	list-style-type:none;
	margin-bottom:0 !important;
}
#mainNav a,
#subNav a,
#mainNav .subNav a {
	text-decoration:none!important;
	padding:0;
	/*font-weight:bold;*/
	color:#333333;
	float:left;
}
/* MAIN NAV */
#mainNav {
  background:#008BCB url(../ui/bkg_nav.gif) repeat-x top;
  padding:0.5em 0 0 0;
}
#mainNav a {
  color:#ffffff !important;
  padding:0.4em 0.75em 0.7em 0.75em;
}
#homeNav {
  margin-left:1.5em;
}
#contactNav {
	float:right !important;
	margin-right:1.5em;
}
/* SUB NAV */
#subNav {
  border-bottom:1px solid #cccccc !important;
}
#subNav li {
  margin-left:1.5em;
}
#subNav a {
  padding:0.6em 0;
}
#phoneNav {
	float:right !important;
	margin-right:1.5em;
	padding-right:0.75em;
}
#subNav li.pipe {
	padding:0.6em 0;
	color:#888;
}
/*----------------------------------------------------------------------
  NAVIGATION COLOURS
  Background and border-bottom colors unique to each page
  ----------------------------------------------------------------------*/
#home #homeNav a,
#products #salesNav a,
#sales #salesNav a,
#services #servicesNav,
#websites #websitesNav,
#contact #contactNav,
#rhythm #rhythmNav {
  background:#ffffff !important;
}
/* HOME & SERVICES */
#home #homeNav a,
#services #servicesNav a,
#contact #contactNav a,
#products #salesNav a,
#sales #salesNav a {
  color: #008BCB !important;
}
/* SERVICES
#products #mainNav,
#sales #mainNav {
  background-color:#E60094 !important;
}
#products #salesNav a,
#sales #salesNav a {
  color: #E60094 !important;
} */
/* WEB DEVELOPMENT */
#websites #mainNav {background-color: #8FD400 !important;}
#websites #websitesNav a {color: #8FD400 !important;}
/* RHYTHM */
#rhythm #rhythmNav a {color:#FA6C15 !important;}
#rhythm #mainNav {background-color:#FA6C15 !important;}

/* HEADING COLOURS */
.web h2,
.web a {
	color:#8fd300!important;
}
.tech h2,
.tech a {
	color:#00aaff!important;
}

/*----------------------------------------------------------------------
  LAYOUT BLOCKS (base widths)
  6 column grid
  67.5em total width
  9.5em column width 
  1.5em margin between each
  ----------------------------------------------------------------------*/
.solidColumn1,
.solidColumn2,
.solidColumn3,
.solidColumn4,
.solidColumn5,
.solidColumn6,
.column1,
.column2,
.column3,
.column4,
.column5,
.column6 {
  margin-left:1.5em;
  float:left;
}
.column1 {width:9.5em;}
.column2 {width:20.5em;}
.column3 {width:31.5em;}
.column4 {width:42.5em;}
.column5 {width:53.5em;}
.column6 {width:64.5em;}
/* SOLID VARIATIONS (includes interior padding) */
.solidColumn1,
.solidColumn2,
.solidColumn3,
.solidColumn4,
.solidColumn5,
.solidColumn6 {
  background:#DAE7ED;
  padding:1em 1em 0 1em;
}
.solidColumn1 {width:7.5em;}
.solidColumn2 {width:18.5em;}
.solidColumn3 {width:29.5em;}
.solidColumn4 {width:40.5em;}
.solidColumn5 {width:51.5em;}
.solidColumn6 {width:62.5em;}

/*----------------------------------------------------------------------
  FOOTER
  ----------------------------------------------------------------------*/
#footer {
  color:#444444;
  width:100%;
  font-size:0.9em;
  border-top:2px solid #CCCCCC;
  padding:0.5em 0 0 0;
  clear:both;
}
#footer dl {
  margin:0.5em 0 0em 1.5em;
  width:58em;
  float:left;
}
#footer dt {
  font-weight:bold;
  color:#333333;
  width:5em;
  float:left;
}
#footer dd {
  width:24em;
  float:left
}
#footer p {
  padding:1.5em 0 0.5em 1.5em;
}

#footer img {
  float:right;
  margin:0.4em 1.5em 0 0;
}

/*----------------------------------------------------------------------
  CALL TO ACTION
  ----------------------------------------------------------------------*/
#callToAction {
    background-color:#F3F3F2;
    border:1px solid #cccccc;
	width:62.5em;
	margin:1em 1.5em 1.5em 1.5em;
	padding:1em;
	clear:both;
	float:left;
}
#callToAction p {
	color:#555555;
	margin:0;
	float:right;
}
#callToAction p strong {
	font-size:2em;
	letter-spacing:-0.08em;
	line-height:0.8em;
	color:#555555;
}
#callToAction h3 {
	border:0;
	float:left;
	text-transform:none;
	font-size:1.35em;
	letter-spacing:-0.05em;
	color:#555555;
	margin-bottom:0;
}

/*----------------------------------------------------------------------
  CONTENT GUIDE
  ----------------------------------------------------------------------*/
.contentGuide {
  width:64.5em;
  margin:0 0 1.5em 1.5em;
  float:left;
}
.contentGuide a {
  text-decoration:none !important;
}
.contentGuide .summary {
  position:relative;
  margin-bottom:1em;
  padding-left:11em;
  width:42.5em;
}
.contentGuide .summary img {
  border:0;
  position:absolute;
  left:0;
}

/*----------------------------------------------------------------------
  ARTICLES
  4 column. One colum off the side (center aligned in other words)
  ----------------------------------------------------------------------*/
.article,
.articles .supplement {
  margin-left:11em;
  width:42.5em;
  float:left;
}
.article img {
  width:42.5em;
}
.article .caption {
  text-align:right;
  color:#ffffff;
  font-weight:bold;
  margin:-1.5em 0.5em 0.3em 0;
}

.summary {
	float:left;
	clear:both;
	margin-bottom:1em;
	width:100%;
}

.summary h3 {
	color:#008BCB;
}

/*----------------------------------------------------------------------
  FEATURE CONTENT BOXES
  ----------------------------------------------------------------------*/
.featureContentBox {
	float:left;
	width:19.3em;
	padding:0.5em 0.5em 0.5em 0.5em;
	margin-left:1.5em;
	border:1px solid #f6f6f6;
	background-color:#f6f6f6;
}
#services .featureContentBox {
    border-color:#A6D5F6;
}
.featureContentBox h2 {
  margin:0 0 0.2em 0;
  text-align:center;
}
.featureContentBox p {
    margin-bottom:0;
}
/* SIDE BAR */
.sideBar {
  background-color:#F3F3F2;
  border:1px solid #cccccc;
  width:18.35em;
  padding:0.5em 1em 0 1em;
  margin-bottom:1.5em;
}
.sideBar h2 {
  color:#5F5F5F !important;
}
/* OVERVIEW/INTRO */
.overview {
  background-color:#F3F3F2;
  border:1px solid #cccccc;
  border-top-width:0;
  padding:1.5em 0 0.5em 0;
  margin-left:1.5em;
  width:64.3em;
  float:left;
}
.overview h2 {
  font-size:1.4em;
  margin:0 0 0.2em 0;
}
.overview .column2 {
  margin-left:0.75em;
  margin-right:0.75em;
  width:19.4em;
}

/*----------------------------------------------------------------------
  HOME
  ----------------------------------------------------------------------*/
#home #aboutUs {
  background:1.5em 1em no-repeat url(../ui/frontpage/hello.gif);
  border-bottom:1px solid #cccccc;
  padding-left:11em;
  margin-bottom:1.5em;
}
/*
#home #babyGilbert {
  border-bottom:1px solid #cccccc;
  margin-bottom:1.5em;
  padding-bottom:1em;
}
*/
#home #servicesEtc {
  margin-bottom:1.5em;
}
#home #servicesEtc .contentBox {
  padding-left:11em;
  position:relative;
}
#home #servicesEtc .contentBox img {
  position:absolute;
  left:1.5em;
  top:0;
}
#home.articles .article,
#home.articles .supplement {
  margin-left:12.5em !important;
}
#home.articles .article h2 {
  margin-top:1em;
}
/* SPLASH */
#home #splash {
  text-align:center;
  margin:0 0 1.5em 0;
  padding:0;
  height:250px;
  width:100%;
  overflow:hidden;
}
#home #splash a {
	text-decoration:none;
}
#home #splash a img {
	border:none;
}
/* TILES */
.tile {
  background-color:#F3F3F2;
  border:1px solid #cccccc;
  margin:0 0 1.5em 0;
  padding:1em;
}
.tile a {
    text-decoration:none;
}
.tile h2 {
  color:#5F5F5F !important;
  margin-bottom:0.1em;
}
.tile h3 {
    font-size:1em;
    font-family:"Lucida Sans Unicode","Lucida Grande","Trebuchet MS",Arial,Helvetica,sans-serif;
    color:#333333 !important;
    text-transform:none; !important
}
#rhythm.tile {
  background-color: #F38803;
  padding:0 0 1em 0;
}
#rhythm.tile h2,
#rhythm.tile h3 {
	border:0;
}
#rhythm.tile h2 {
  background:left top no-repeat url(../ui/frontpage/rhythm_logo.gif);
  letter-spacing:-1000em; /* Hack to hide text content */
  color:#FFC19D !important;
  width:100%;
  height:85px;
}
#rhythm.tile h3,
#rhythm.tile h3 a {
	color:#FFFFFF !important;
	text-decoration:none;
}
#rhythm.tile h3 {
  margin:0 1em 0 1em;
}
#blog.tile {
  background:#CFDDE2 url(../ui/frontpage/articles_icon.gif) no-repeat right top;
  padding:1em 85px 1em 1em;
}
#specials.tile {
  background:#CFDDE2 url(../ui/frontpage/special.jpg) no-repeat left bottom;
  padding:0.5em 1em 1em 75px;
}
#specials.tile h3,
#specials.tile h2 {
  text-align:right
}
#specials.tile h2 {
	margin-bottom:0;
}
#specials p {
	text-align:right;
	margin-top:0em;
	margin-bottom:1em;
	font-size:0.9em;
}
/* JOBS */
.jobs h3 {
	margin-bottom:0.2em;
}
.jobs .column6 ul {
	margin-bottom:1.6em;
}

.jobs h2,
.jobs a h2{
	color:#008BCB !important;
}
.jobs .sideBar h2 {
	color:#99987D !important;
}

/*----------------------------------------------------------------------
  COMPUTER SALES
  ----------------------------------------------------------------------*/
#sales #splash {
  background-image:url(../ui/bkg_loveComputer.gif);
  background-position:12em 0;
  margin-top:2em;
  height:9em;
}/*  
#products h1,
#sales h1 {
  color:#E60094;
}*/
#products .category {
  width:66em;
  float:left;
}
#products .category h2 {
  margin-left:0.75em;
}
/* CATEGORY LIST */
#products .categoryList {
  width:666em;
}
#products .categoryList li {
  list-style-type:none;
  margin-left:1.5em;
  width:20.5em;
  float:left;
}
/* LISTING */
#products .productList {
  
}
#products .productList li {
  border:1px solid #cccccc;
  background:#f4f4f4;
  list-style-type:none;
  width:20.5em;
  margin:0 0 1.5em 1.5em;
  float:left;
}
#products .productList li img {
  border:1px solid #cccccc;
  margin:0.5em;
  float:left;
}
#products .productList li a {
  color:#000000 !important;
}
#products .productList li strong {
  font-size:1.5em;
  width:8em;
  margin:0.8em 0 0 0;
  float:right;
}
#products .productList li strong span {
  color:#008BCB;
  margin:0.2em 0 0 0;
  font-size:1.2em;
  font-weight:normal;
  display:block;
}
/* PRODUCT PROFILE */
#products .product {
  margin-left:1.5em;
  padding-left:33em;
  width:31.5em;
  float:left;
  position:relative;
}
#products .product img {
  border:0;
}
#products .product .imageBox {
  text-align:center;
  width:31.5em;
  position:absolute;
  left:0;
  top:0;
  overflow:hidden;
}
#products .product h2 {
  font-size:2.5em;
  margin-bottom:0;
}
#products .product p {
  font-size:1.2em;
  color:#666666;
}
#products .product li {
  list-style-type:none;
}
#products .product .price {
  color:#008BCB;
  font-size:2em;
}

/* Price List */
#products table.priceList {
    margin-top:0.2em;
    margin-bottom:1.5em;
    width:100%;
}
#products table.priceList td.name  {
    width:90%;
}
#products table.priceList td.price{
    color:#000000;
    width:10%;
    font-size:1em;
    text-align:right;
}
#products table.priceList td.description  {
    font-style:italic;
    color:#666666;
    font-size:0.9em;
}

/* COMPUTER SPECIALS */
.specialPDF img {
  border:2px solid #CCC;
  margin-bottom:0.3em;
}

/*----------------------------------------------------------------------
  COMPUTER SERVICES
  ----------------------------------------------------------------------*/
#services #splash {background-image:url(../ui/services/bkg_allServices.gif);}
#business #splash {background-image:url(../ui/services/bkg_allServices.gif);}
#services.home #splash {background-image:url(../ui/services/home_users.gif);}
#services h1 {
  color:#008BCB;
}
#services .summary h3 {
  color:#555;
  margin-bottom:0.2em;
}
#services .more {
	clear:both;
}

/*----------------------------------------------------------------------
  WEB SERVICES
  ----------------------------------------------------------------------*/
#websites #splash {
  background-image:url(../ui/web/splash.gif);
  background-position:9em 0;
}
#websites #splash h2 {
  margin-top:0.9em;
}
#websites #callToAction {
	background:#8FD400;
	color:#FFFFFF;
}
#websites #callToAction  strong {
	color:#EAFFC1;
}
#websites h1 {
  color:#8FD400;
}
/* HOSTING */
#websites.hosting .column6 {
  border-top:1px solid #cccccc;
  padding:1em 0;
}
#websites.hosting .column6 h2,
#websites.hosting .column6 h3 {
  font-size:1.8em;
  margin-bottom:0;
  width:17em;
  float:left;
}
#websites.hosting .column6 h3 {
  color:#008BCB;
  text-align:right;
  float:right;
  font-weight:bold;
}
#websites.hosting .column6 p {
  width:30em;
  float:left;
  clear:left;
}
#websites.hosting .column6 ul {
  margin-left:3em;
  width:30em;
  float:right;
}

/* PORTFOLIO */
#websites.portfolio .column6 img {
	margin:0.5em 0 1em 0;
}

#websites .article {
	margin-left:1.5em;
}

/*----------------------------------------------------------------------
  CONTACT US
  ----------------------------------------------------------------------*/
#contact .column6 {
  margin-left:11em;
  width:42.5em;
}
#contact .column6 h2,
#contact .column6 h4 {
  margin-bottom:0;
}
#contact .column6 a {
  font-size:1.2em;
}

/*----------------------------------------------------------------------
  SUBSCRIBE
  ----------------------------------------------------------------------*/
#subscribe .instruction {
	color:#008BCB;
	font-size:1.1em;
	font-weight:bold;
}  

/*----------------------------------------------------------------------
  EVENT REGISTRATION
  ----------------------------------------------------------------------*/
#eventRegistration div {
	width:100%;
	float:left;
}
#eventRegistration hr {
	background-color:#CDD0D0;
	border-top:1px solid #CDD0D0;
	color:#CDD0D0;
	height:1px;
	float:left;
	width:80%;
	margin:1.5em 10%;
}  
.events #callToRegister a {
	border:1px solid #006B96;
    background:#008BCB url(../ui/bkg_nav.gif) repeat-x top;
	color:#FFF;
	display:block;
	font-size:1.05em;
	text-align:center;
	text-decoration:none;
	/* IE Specific padding etc */
	padding:0.3em 0.3em;
	margin-right:4em;
	margin-bottom:0.2em;
}

h2.imageReplace {
	text-indent:-1000em;
	letter-spacing:-1000em;
}

/*----------------------------------------------------------------------
  SUBSCRIBE PAGES
  ----------------------------------------------------------------------*/
body.subscribe .column6 {
	padding-bottom:2em;
}

/*----------------------------------------------------------------------
  CLIENT ACCESS
  ----------------------------------------------------------------------*/
#loggedIn h5 {
	font-weight:normal;
	margin-top:10px;
}
#loggedIn h3 {
	text-transform:none;
}
#client #news h2 {
	color:#5F5F5F;
}
#client #loginForm button {
	float:none;
}
#client #tiles {
	float:left;
	margin-bottom:1.5em;
}
#client .infoTile {
	background-color:#F3F3F2;
	border:1px solid #CCCCCC;
	padding:1em;
	margin-bottom:1em;
	height:14em;
	overflow:hidden;
	position:relative;
}
#client .infoTile h3 {
	margin-bottom:0.3em;
}
#client .infoTile p {
	margin-bottom:0;
}
#client .infoTile h4 {
	position:absolute;
	left:1em;
	bottom:1em;
	width:16.5em;
	margin-bottom:0;
}
#client .infoTile h4 span {
	font-size:0.9em;
	font-weight:normal;
	position:relative;
	bottom:-0.4em;
}
#client .infoTile h4 a {
	display:block;
	padding:0.1em 0.5em;
	font-size:0.9em;
	margin-top:0.5em;
	background:#01AAFE;
	color:#FFF;
	text-decoration:none;
}
#client .infoTile h4 a:hover {
	background:#008BCB;
}
#client #news {
	background:#FAFAE5;
	border:1px solid #D6D6BC;
	margin-bottom:1.5em;
	padding:1em;
	width:62.3em;
}

#loggedInUser {
	float:right;
	border-left:0.3em solid #CCCCCC;
	border-right:0.3em solid #CCCCCC;
	border-bottom:0.3em solid #CCCCCC;
	margin-top:-0.4em;
	margin-right:1.5em;
	padding:0.5em 1.5em;
}
#loggedInUser h3 {
	font-size:1.2em;
}
#loggedInUser h5 {
	font-weight:normal;
	font-size:0.9em;
	color:#777;
}
#loggedInUser p {
	margin-bottom:0;
	text-align:right;
}