/* CSS Document */

body {margin: 40px 0 20px 0; padding: 0; font-family:Arial, Helvetica, sans-serif; font-size:0.7em; color:#FFF; background:url(../images/body_backgound.gif) top left no-repeat #3B3837;}

.form {margin:0; padding:0;}

/* ------------ Layout ------------- */

#wrapper {width:773px; margin: 0px auto;}
#leftcolumn {width:249px; float:left; color:#FFF; padding:0; margin:0;}
#rightcolumn {width:506px; float:right; color:#FFF; padding:0; margin:0 0 0 18px;}
#bottompanel {width:480px; color:#FFF; padding:29px 0 0 26px; margin:0; background:url(../images/top_panel.gif) no-repeat top left #1B9DC6; height:251px;}
#toppanel {width:506px; padding:0; margin:0; height:305px; background-color:#3B3837;}
#breadcrumbtrail {width:804px; margin:0; padding:0 0 10px 0; color:#666; text-align:right; background-color:#FFF;}

.clear {margin:0; padding:0; clear:both;}

#leftcolumn p {padding:0; margin:0; line-height:18px;}

#leftcolumn a:link, a:visited, a:active {color:#FFF; text-decoration:none;}
#leftcolumn a:hover { color:#FFF; text-decoration:underline;}


/* ------------ Titles ------------- */

h1 {padding:0; margin:0;}
h1#blueoxygen a {display:block; background:url(../images/blueoxygen_logo.gif) no-repeat; height:80px; width:249px; text-indent: -900em; margin:0;}

h2 {padding:0; margin:0; text-indent: -900em; margin:27px 0 0 0; padding:0;}
h2#welcome {background:url(../images/titles/welcome.gif) no-repeat; height:32px; width:249px;}
h2#profile {background:url(../images/titles/profile.gif) no-repeat; height:32px; width:249px;}
h2#contactdetails {background:url(../images/titles/contact.gif) no-repeat; height:32px; width:249px;}
h2#strengths {background:url(../images/titles/strengths.gif) no-repeat; height:32px; width:249px;}
h2#skills {background:url(../images/titles/skills.gif) no-repeat; height:32px; width:249px;}
h2#portfolio {background:url(../images/titles/portfolio.gif) no-repeat; height:32px; width:249px;}

h3 {padding:0; margin:0;}
h3#recentwork {background:url(../images/titles/recent_work.gif) no-repeat; height:18px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}
h3#contactme {background:url(../images/titles/contact_me.gif) no-repeat; height:15px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}
h3#islands {background:url(../images/titles/island_collection.gif) no-repeat; height:16px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}
h3#jfb {background:url(../images/titles/jfb.gif) no-repeat; height:20px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}
h3#moredirt {background:url(../images/titles/moredirt.gif) no-repeat; height:16px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}
h3#rawoxyen {background:url(../images/titles/rawoxygen.gif) no-repeat; height:17px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}
h3#monchy {background:url(../images/titles/monchy.gif) no-repeat; height:20px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}
h3#lazer {background:url(../images/titles/lazerpics.gif) no-repeat; height:19px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}
h3#funmatters {background:url(../images/titles/funmatters.gif) no-repeat; height:19px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}
h3#umuso {background:url(../images/titles/umuso.gif) no-repeat; height:12px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}
h3#bmwz3 {background:url(../images/titles/bmw_z3.gif) no-repeat; height:16px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}
h3#bmw3series {background:url(../images/titles/bmw3series.gif) no-repeat; height:16px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}
h3#thankyou {background:url(../images/titles/thankyou.gif) no-repeat; height:19px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}
h3#error {background:url(../images/titles/error.gif) no-repeat; height:13px; width:462px; text-indent: -900em; margin:0 0 20px 0; padding:0;}


/* ------------ Navigation ------------- */

ul#navigation {margin: 0; padding:0; list-style:none; text-align:right;}
ul#navigation li {margin:0 0 14px 0; padding:0 0 0 16px; float:right;}

/* ------------ Recent Work ------------- */

.topbluepanel {background:url(../images/panels/top_blue.gif) no-repeat top left; width:506px; height:27px; margin:0; padding:0;}
.bottombluepanel { background:url(../images/panels/bottom_blue.gif) no-repeat bottom left #1B9DC6; width:462px; height:auto; margin:0; padding:0 22px 15px 22px;}


.portfoliowrapper {width:462px; margin:10px 0 10px 0; padding:0 0 20px 0; color:#FFF; background:url(../images/break_line.gif) bottom left no-repeat;}
.portfoliopic {float:right; margin:0; padding:0; width:220px;}
.projectdescription { width:242px; margin:0; padding:0; float:left;}

.detailstitle {font-weight:bold; margin:0; padding:0 0 2px 0;}
.detailsinfo {margin:0; padding:0 0 7px 0;}

.projectdescription a:link, a:active {color:#FFF; text-decoration:none;}
.projectdescription a:visited {color:#FFF; text-decoration:none;}
.projectdescription a:hover {color:#FFF; text-decoration:underline;}

ul#portfoliolist {margin:0; list-style:none; padding:0;}
ul#portfoliolist li {margin:0 0 10px 0; padding:6px 0 0 6px; float:left; background:url(../images/portfolio_bg.gif) no-repeat top left; width:133px; height:83px;}

/* ------------ Footer ------------- */

#footer {width:773px; margin:0; padding:10px 0 0 0; text-align:right;}
#footer a:link, #footer a:visited, #footer a:active  { color:#FFF; text-decoration:none;}
#footer a:hover { color:#FFF; text-decoration:underline;}

/* ------------ Skills ------------- */

ul.skillslist {margin:0 0 20px 0; padding:0; list-style:none;}
ul.skillslist li {margin:0; padding:0 0 0 12px; line-height:18px; background:url(../images/bullet_point.gif) no-repeat top left;}

.portfoliocategories {font-weight:bold;}
.skillslist a:link { color:#FFF; text-decoration:none;}
.skillslist a:active { color:#FFF; text-decoration:none;}
.skillslist a:visited { color:#FFF; text-decoration:none;}
.skillslist a:hover { color:#1B9DC6; text-decoration:underline;}

/* ------------ Contact ------------- */

.enquirytable {width:454px; font-weight:bold;}
.enquirytable td {padding:2px 0 2px 0;}
.enquirytable .col1 {width:227px; text-align:left; }
.enquirytable .col2 {width:227px; text-align:left; }
.enquirytable .col3 {width:454px; text-align:right; }
.inputfield200 {width:200px; font-size:11px;}
.inputfield225 {width:225px; font-size:11px;}

/* ------------ Porfolio ------------- */

#projectprofile {width:206px; float:left; margin:0 28px 0 0; padding:0; text-align:justify; line-height:18px;}
#projectprofile p {margin:0 0 10px 0; padding:0;}

#projectdetails {width:219px; float:left;  background:url(../images/sitedetails_top.gif) no-repeat top #FFF; color:#1B9DC6;}
#projectdetails2 {width:206px; background:url(../images/sitedetails_bottom.gif) no-repeat bottom #FFF; height:187px; margin-top:12px; color:#1B9DC6; padding:0 0 0 13px;}

#projectdetails2 p { padding:0; margin:0 0 4px 0;}

#projectdetails2 a:link, a:visited, a:active { color:#1B9DC6; text-decoration:none;}
#projectdetails2 a:hover { color:#1B9DC6; text-decoration:underline;}