/* 
   (C) by Creative Spirits Australia, Jens-Uwe Korff
   =================================================
   Last update:30/July/2009
      
   Colour schemes used:
   =====================================================================
  dark earth red:#cc3300body background:#f2f2f2text background:#f7f7f7
   =====================================================================
   
*/

/* Body and wrapper divs
   --------------------------------------------------------------------- */
html, body {background-color:#f2f2f2;color:#000000;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;
margin:0;padding:0;height:100%;/*Prevent page 'jump'*/border-bottom:1px solid #f2f2f2}
	* html,* html body {text-align:center/* for IE 5.x:center content */}
ul {padding:0;margin:0 0 1em 0}
li {padding:0 0 .5em 0;margin-left:1.5em}
p {padding:0;margin:0 0 1.5em 0;line-height:1.3em}
.home #columnCenter p,.home #columnCenter ul {font-size:.9em}

pre {background-color:#eee;padding:.5em;font-size:11px}
* html pre {position:relative}

/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
*+html .clearfix {display:inline-block/* Fix IE7 */}
* html .clearfix {height:1%;display:block}

/* Links
   --------------------------------------------------------------------- */
/* NOTE:Sequence is important! */
a:link {color:#cc3300}
a:active {color:#a79aae}
a:visited {color:#8B8985}
a:hover {color:#FF9933}
.externalLink {background:url('images/etxernalLink.gif') no-repeat;background-position:top right;padding-right:12px}

/* Accessibility
   --------------------------------------------------------------------- */
#skiplinks {position:absolute;left:-9000px;width:90px;font-size:1px;line-height:1px}

/* Layout
   --------------------------------------------------------------------- */
/* First wrapper for the left-hand side shadow. Also centers entire contents and defines content width. */
.wrap1 {margin:0 auto;width:960px;background:#f7f7f7 url("images/shadowLeft.gif") repeat-y top left;padding:0 0 0 30px}
/* Second wrapper for right-hand side shadow. */
.wrap2 {background:url("images/shadowRight.gif") repeat-y top right;/* IE7:removed background colour */padding:10px 30px 0 0;margin-top:-10px;/* Correction for double padding-top */position:relative;margin-bottom:-10px;/* Mainly for IE who doesn't stretch this div to end of page */}
#columnCenter {height:1%;position:relative}
	.portfolio #columnCenter {margin:0 20px}
	* html #columnCenter {text-align:left}

/* Breadcrumb
   --------------------------------------------------------------------- */
#breadcrumb {height:20px;font-size:0.8em;color:#a0a0a0;position:relative}
#breadcrumb .breadcrumbTrail {float:left;text-align:left;color:#6f6774;padding-top:3px}
#breadcrumb .search {position:absolute;right:0;top:0;text-align:right;_width:29em;/* IE needs width here */}
#breadcrumb .search input#textbox {border:1px solid #a0a0a0;font-size:1em;height:1.6em}
#breadcrumb .search input#button {font-size:1em;width:3em}
#breadcrumb .search form {/* Fix up Opera */display:block;float:left}
fieldset {border:0;padding:0;margin:0}

/* Masthead
   --------------------------------------------------------------------- */
#masthead {width:100%;height:93px;position:relative;background:#fff url(images/mh_webdev.gif) no-repeat top right;border-bottom:1px solid #ccc;border-top:1px solid #ccc}
#masthead a {display:block;position:absolute;top:20px;left:20px;width:204px;height:47px;text-indent:-9000px;background:#fff url(images/logo.png) no-repeat top left;z-index:10;text-decoration:none;/* Fix NS8 */}
	* html #masthead a {/* IE:degrade gracefully to gif image */background:#fff url(images/logo.gif) no-repeat top left}
#masthead span {display:block;width:400px;height:93px;z-index:0;background:transparent url(images/transition.png) repeat-y top right}
	* html #masthead span {/* IE:degrade gracefully with no png image */width:310px;background-color:#fff;background-image:none}

/* Navigation
   --------------------------------------------------------------------- */
#navigation {width:100%;height:1.75em;position:relative;margin-bottom:20px;border-bottom:1px solid #ccc;background-color:#eee}
#navigation ul {margin:0}
#navigation li {float:left;width:120px;list-style:none;padding:0}
#navigation li a {color:#aaa;display:block;text-decoration:none;padding:0.28em 0;text-align:center}
#navigation li a:hover {background-color:#ddd;color:#cc3300!important}
#navigation li a:visited {color:#aaa}
#navigation li#active {color:#cc3300;padding:0.28em 0;text-align:center}
#navigation li#active a {color:#cc3300;margin-top:-0.28em;_padding-bottom:0;/* Fix IE */}

/* Headings
   --------------------------------------------------------------------- */
h1 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:2.05em;margin:0 0 6px 0;padding:0;color:#cc3300}
h2 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:1.5em;margin:1.6em 0 6px 0;padding:0;border-bottom:1px solid #e0e0e0;color:#cc3300}
h3 {font:bold 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;margin:0em 0 1em 0;padding:0}

/* Images
   --------------------------------------------------------------------- */
img {border:0;margin:0;padding:0;position:relative}
.imageRight {float:right;margin:0 0 .5em 1em;_margin-top:.5em;/* Fix IE */}
.imageLeft {float:left;margin:0 1em .5em 0;_margin-top:.5em;/* Fix IE */}

/* Tables 
   --------------------------------------------------------------------- */
table {margin:1em 0;border-bottom:2px solid #ccc}
th {color:#cc3300;border-bottom:1px solid #ccc;padding-bottom:.3em;width:200px}
td {text-align:center;padding:.3em 0}

/* Content elements 
   --------------------------------------------------------------------- */
#solution-container {width:100%}
.solution-box {position:relative;width:248px;min-height:236px;margin:0 20px;padding:9px;float:left;background:#ededed url('images/gradientBackground20x300.jpg') repeat-x 0 -50px;height:auto;
	/*rounded corners:*/border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border:2px solid #f7f7f7}
	* html .solution-box {display:inline;text-align:left;height:236px;/* min-height for IE */}
.solution-box h1 {text-align:center}
.solution-box ul {padding:0 0 0 1.3em}
.solution-box li {margin-bottom:1.2em}
.solution-box p {margin-bottom:1em}
.solution-box a {position:absolute;bottom:1em;right:1em}

.left {clear:both;float:left;width:450px;margin-left:20px}
	.left li {margin-bottom:1em}
	* html .left {display:inline;text-align:left}
.right {float:right;width:410px;margin-right:20px}
	* html .right {display:inline;text-align:left}
	
.action {float:right;width:440px;text-align:center;margin:17px 18px 0 0}
	.home .action {margin-top:53px}
	.action a {display:block;width:160px;height:50px;margin:25px auto;background-color:#c30;color:#f2f2f2;font:bold 1.45em/46px "Trebuchet MS", Arial, Helvetica, sans-serif;text-decoration:none;
		/*rounded corners:*/border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border:2px solid #f7f7f7}
	.action a:hover {text-decoration:underline}
	
.work-done {float:right;width:215px;font-size:.92em}
.description {float:left;width:400px}
.portfolio h3 {clear:both;padding-top:2em}
	.portfolio img {border:1px solid #777}
#contact-details {margin-left:120px}

blockquote {border-right:5px solid #FFD98C;padding:0 .5em 0 0;overflow:hidden;margin:1em 20px}
	blockquote p {font:bold 1.5em/1.5 Arial, Helvetica, sans-serif;color:#ffab00;margin:.5em 0}
	blockquote span {display:block;text-align:right;color:#444;font:normal .65em/1.84 Verdana, Arial, Helvetica, sans-serif}
	.quote1 {float:right;width:400px;margin-top:10em}

/* Footer
   --------------------------------------------------------------------- */
#footer {clear:both;margin:0 auto;padding:5px 0 20px 0;_padding:2px 0 30px 0;/* Fix IE6 */font-size:0.8em;color:#808080;border-top:1px solid #e0e0e0}
*+html #footer {padding:2px 0 30px 0;/* Fix IE7 */}
#footer .copyright {float:left;text-align:left}
#footer #quote {float:right;text-align:right}