* {margin:0; padding:0}

/*SITE controls the "border" of the main area.*/
#site{
margin: 0px auto;
width: 860px;
height: 810px;
padding: 0px;
background: #eee;
}

body {font:10px Verdana,Arial; color:#555; background:#999 url(images/sitebackground.jpg) 50% 0 no-repeat}
p {line-height:1.4; margin-bottom:12px}

#masthead {padding:0px 20px 9px 20px ;background: #fff;}

#bar{
	height:33px;
	width:860px;
	background:#50afef;
	text-decoration:none;
}

#navigation{
text-decoration:none;
float:right;
color:#FFF;
}

#button {margin:0px 10px 0px 0px; float:right}
#button2 {margin:10px 10px 0px 0px; float:right}

#top{
margin: 20px 0px 0px 0px;
width: 860px;
padding: 0px;
margin-left: auto ;
margin-right: auto ;
}

#content1{
line-height:2;
}
#content2{
line-height:1.8; margin: 0px 0px 10px 0px; padding: 10px 0px 10px 5px;
}

#colin{
	margin: 9px 9px 0px 0px;
	padding: 9px 0px 0px 0px;
	float:right;
}

/* ----------------------------Module Header and Border Controls----------------------------- */

#header2x2 {width:398px; padding:10px 0px 5px 10px; margin:10px 10px 0px 10px; background:url(images/headerx2.gif) no-repeat; float:left}
#header1x2 {width:398px; padding:10px 0px 5px 10px; margin:10px 10px 0px 10px; background:url(images/headerx2.gif) no-repeat; float:left}
#header1x3 {width:600px; padding:10px 0px 5px 10px; margin:10px 10px 0px 10px; background:url(images/headerx3.gif) no-repeat; float:left}
#header1x1 {width:258px; padding:10px 0px 5px 10px; margin:10px 0px 0px 10px; background:url(images/headerx1.gif) no-repeat; float:left}
#headerInside {width:820px; padding:10px 0px 5px 10px; margin:10px 0px 0px 10px; background:url(images/headerInside.png) no-repeat; float:left}
#headerInsideSmall {width:820px; padding:10px 0px 5px 10px; margin:10px 0px 0px 10px; background:url(images/headerInside.gif) no-repeat; float:left}
#headerInside1 {width:820px; height: 60px; padding:0px 0px 0px 0px; margin:10px 0px 0px 10px; float:left}

#border2x2 {width:378px; height:310px; margin:0px 10px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float: left; padding: 10px 10px 10px 10px; background:#fff}
#border1x2small {width:378px; height:80px; margin:0px 10px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float:left; padding: 10px 0px 0px 20px; line-height:1.8; background:#fff}
#border1x2 {width:378px; height:170px; margin:0px 10px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float:left; padding: 10px 10px 0px 10px; background:#fff}
#border1x1 {width:228px; height:150px; margin:0px 0px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float: left; padding: 15px 10px 0px 20px; background:#fff}
#borderInside {width:798px; height:425px; margin:0px 0px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float: left; padding: 10px 10px 0px 10px; background:#fff url(images/Project1.jpg) no-repeat;}
#borderInside2 {width:798px; height:425px; margin:0px 0px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float: left; padding: 10px 10px 0px 10px; background:#fff url(images/Project2.jpg) no-repeat;}
#borderInside3 {width:798px; height:425px; margin:0px 0px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float: left; padding: 10px 10px 0px 10px; background:#fff url(images/Project3.jpg) no-repeat;}
#borderInside4 {width:798px; height:425px; margin:0px 0px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float: left; padding: 10px 10px 0px 10px; background:#fff url(images/Project4.jpg) no-repeat;}
#borderInside5 {width:798px; height:425px; margin:0px 0px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float: left; padding: 10px 10px 0px 10px; background:#fff url(images/Project5.jpg) no-repeat;}
#borderInside6 {width:798px; height:425px; margin:0px 0px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float: left; padding: 10px 10px 0px 10px; background:#fff url(images/Project6.jpg) no-repeat;}
#borderInsideAbout {width:798px; height:569px; margin:0px 0px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float: left; padding: 10px 10px 0px 10px; background:#fff url(images/about.jpg) no-repeat;}
#borderInsideContact {width:798px; height:569px; margin:0px 0px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float: left; padding: 10px 10px 0px 10px; background:#fff url(images/contact.jpg) no-repeat;}
#borderInsideWeb {width:798px; height:425px; margin:0px 0px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float: left; padding: 10px 10px 0px 10px; background:#fff url(images/ProjectWeb.jpg) no-repeat;}
#borderInsideWeb2 {width:798px; height:425px; margin:0px 0px 0px 10px; border:#aaa solid thin; border-top:none; border-bottom:none; float: left; padding: 10px 10px 0px 10px; background:#fff url(images/ProjectWeb2.jpg) no-repeat;}

#bottom2x2 {width:398px; height:20px;padding:0px 10px 50px 10px; margin:0px 10px 50px 10px; background:url(images/bottomx2.gif) no-repeat; float:left}
#bottom2x2colin {width:398px; height:20px;padding:0px 10px 50px 10px; margin:0px 10px 50px 10px; background:url(images/bottomx2colin.gif) no-repeat; float:left}
#bottom1x2 {width:258px; height:20px;padding:0px 10px 50px 10px; margin:0px 10px 50px 10px; background:url(images/bottomx1.gif) no-repeat; float:left}
#bottomInside {width:800px; height:20px;padding:0px 10px 0px 10px; margin:0px 10px 0px 10px; background:url(images/bottomInside.gif) no-repeat; float:left}
#bottomInside1 {width:800px; height:100px;padding:23px 10px 0px 10px; margin:0px 10px 0px 10px; background:url(images/bottomInside1.png) no-repeat; float:left}

#area1block {width:258px; height:200px; float:left; margin:10px 10px 0px 10px;}
#area2blocksmall {width:398px; height:140px; float:left; margin:10px 10px 0px 10px;}
#area2block {width:398px; height:228px; float:left; margin:10px 10px 0px 10px;}
#area4block {width:398px; height:200px; float:left; margin:10px 10px 0px 10px;}
#areaInsideblock {width:820px; height:400px; float:left; margin:10px 10px 0px 10px;}

#firstrow {width:850px;}
#secondrow {width:850px}
#thirdrow {width:850px}

#lineheight {line-height:1.9em}

/* ----------------------------SLIDER 4x4 CONTROLS----------------------------- */

/* Arrow Buttons on Left and Right */
.sliderbutton1 {float:left; width:32px; padding-top:80px}
.sliderbutton1 img {cursor:pointer}
.sliderbutton1 img {background:#CCC}
.sliderbutton1 img:hover {background:#666}

/* Content in the slider bar */
#slider1 {float:left; position:relative; overflow:auto; width:310px; height:280px;}
#slider1 ul {float:left; position:absolute; list-style:none; top:0; left:0}
#slider1 li {float:left; width:316px; height:290px; padding-right:10px}


/* Number Contols at Bottom */
.pagination1 {float:left; list-style:none; height:25px; margin:0px 10px 0 10px}
.pagination1 li {float:left; cursor:pointer; padding:5px 8px; background:#fff; border:1px solid #ddd; margin:0 4px 0 0; text-align:center; color:#888}
.pagination1 li:hover {background:#eee; border:1px solid #999; color:#000}


li.current1 {border:1px solid #888; background:#999; color:#fff}

li#content1 {width:110px; height:110px; padding:15px 15px 15px 15px}
#content1 h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}

/* ----------------------------SLIDER Bottom CONTROLS----------------------------- */

/* Arrow Buttons on Left and Right Don't Touch */
.sliderbutton {float:left; width:32px; padding-top:35px; padding-left:0px; padding-right:3px}
.sliderbutton img {cursor:pointer}
.sliderbutton img {background:#CCC}
.sliderbutton img:hover {background:#666}

/* Content in the slider bar */
#slider {float:left; position:relative; overflow:auto; width:150px; height:100px}
#slider ul {float:left; position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:150px; height:120px; padding-right:10px; }


/* Number Contols at Bottom Don't Touch */
.pagination {float:left; list-style:none; height:25px; margin:15px 0 0 24px}
.pagination li {float:left; cursor:pointer; padding:5px 8px; background:#fff; border:1px solid #ddd; margin:0 4px 0 0; text-align:center; color:#888}
.pagination li:hover {background:#eee; border:1px solid #999; color:#000}


li.current {border:1px solid #888; background:#999; color:#fff}

li#content {width:110px; height:110px; padding:15px 15px 15px 15px}
#content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}

/* ----------------------------SLIDER Middle CONTROLS----------------------------- */

/* Arrow Buttons on Left and Right */
.sliderbutton2 {float:left; width:32px; padding-top:40px}
.sliderbutton2 img {cursor:pointer}
.sliderbutton2 img {background:#CCC}
.sliderbutton2 img:hover {background:#666}

/* Content in the slider bar */
#slider2 {float:left; position:relative; overflow:auto; width:300px; height:110px; margin-top:10px}
#slider2 ul {float:left; position:absolute; list-style:none; top:0; left:0}
#slider2 li {float:left; width:300px; height:120px; padding-right:10px; line-height:2.5}


/* Number Contols at Bottom */
.pagination2 {float:left; list-style:none; height:25px; margin:15px 10px 0px 12px}
.pagination2 li {float:left; cursor:pointer; padding:5px 8px; background:#fff; border:1px solid #ddd; margin:0 4px 0 0; text-align:center; color:#888}
.pagination2 li:hover {background:#eee; border:1px solid #999; color:#000}


li.current2 {border:1px solid #888; background:#999; color:#fff}

li#content2 {width:110px; height:110px; padding:15px 15px 5px 15px}
#content2 h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}

/* ----------------------------SLIDER Inside CONTROLS----------------------------- */

/* Arrow Buttons on Left and Right */
.sliderbuttonI {float:left; width:32px; padding-top:200px}
.sliderbuttonI img {cursor:pointer}
.sliderbuttonI img {background:#CCC}
.sliderbuttonI img:hover {background:#666}

/* Content in the slider bar */
#sliderI {float:left; position:relative; overflow:auto; width:680px; height:310px; margin-top:10px}
#sliderI ul {float:left; position:absolute; list-style:none; top:0; left:0}
#sliderI li {float:left; width:300px; height:120px; padding-right:10px; line-height:2.5}


/* Number Contols at Bottom */
.paginationI {float:left; list-style:none; height:25px; margin:15px 10px 0px 12px}
.paginationI li {float:left; cursor:pointer; padding:30px 54px; background:#fff; border:1px solid #ddd; margin:0 4px 0 0; text-align:center; color:#888}
.paginationI li:hover {background:#eee; border:1px solid #999; color:#000}


li.currentI {border:1px solid #888; background:#999; color:#fff}

li#contentI {width:110px; height:110px; padding:15px 15px 5px 15px}
#contentI h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}

#bottom{
margin: 0px 0px 0px 0px;
width: 860px;
height:50px;
padding: 18px 0px 0px 0px;
margin-left: auto ;
margin-right: auto ;
background-image:url(images/bottom.png);
background-repeat: no-repeat;
text-align:center;
color:#fff;
}

/* ----------------------------See Images Button and Work Icon Button----------------------------- */

#buttonPortfolioWork{
height: 60px;
width: 410px;
text-indent: 10000px;
overflow: hidden;
background: url("images/portfolioworktab.png") top left no-repeat;
display: block;
}

#buttonPortfolioWork:hover{
background-position: bottom left;
}

#buttonWebWork{
height: 60px;
width: 410px;
text-indent: 10000px;
overflow: hidden;
background: url("images/webworktab.png") top left no-repeat;
display: block;
}

#buttonWebWork:hover{
background-position: bottom left;
}

#buttonPortfolioWork1{
height: 60px;
width: 410px;
text-indent: 10000px;
overflow: hidden;
background: url("images/portfolioworktab1.png") top left no-repeat;
display: block;
}

#buttonPortfolioWork1:hover{
background-position: bottom left;
}

#buttonWebWork1{
height: 60px;
width: 410px;
text-indent: 10000px;
overflow: hidden;
background: url("images/webworktab1.png") top left no-repeat;
display: block;
}

#buttonWebWork1:hover{
background-position: bottom left;
}

#buttonLightBox{
height: 38px;
width: 354px;
text-indent: 10000px;
overflow: hidden;
background: url("images/seeimagesbutton.png") top left no-repeat;
display: block;
}

#buttonLightBox:hover{
background-position: bottom left;
}


#button1{
height: 79px;
width: 120px;
text-indent: 10000px;
overflow: hidden;
background: url("images/workbutton1.png") top left no-repeat;
display: block;
}

#button1:hover{
background-position: bottom left;
}

#button3{
height: 79px;
width: 120px;
text-indent: 10000px;
overflow: hidden;
background: url("images/workbutton2.png") top left no-repeat;
display: block;
}

#button3:hover{
background-position: bottom left;
}

#button4{
height: 79px;
width: 120px;
text-indent: 10000px;
overflow: hidden;
background: url("images/workbutton3.png") top left no-repeat;
display: block;
}

#button4:hover{
background-position: bottom left;
}

#button5{
height: 79px;
width: 120px;
text-indent: 10000px;
overflow: hidden;
background: url("images/workbutton4.png") top left no-repeat;
display: block;
}

#button5:hover{
background-position: bottom left;
}

#button6{
height: 79px;
width: 120px;
text-indent: 10000px;
overflow: hidden;
background: url("images/workbutton5.png") top left no-repeat;
display: block;
}

#button6:hover{
background-position: bottom left;
}

#button7{
height: 79px;
width: 120px;
text-indent: 10000px;
overflow: hidden;
background: url("images/workbutton6.png") top left no-repeat;
display: block;
}

#button7:hover{
background-position: bottom left;
}

#buttonCaseStudy1{
height: 79px;
width: 120px;
text-indent: 10000px;
overflow: hidden;
background: url("images/workbuttonweb.png") top left no-repeat;
display: block;
}

#buttonCaseStudy1:hover{
background-position: bottom left;
}

#buttonCaseStudy2{
height: 79px;
width: 120px;
text-indent: 10000px;
overflow: hidden;
background: url("images/workbuttonweb2.png") top left no-repeat;
display: block;
}

#buttonCaseStudy2:hover{
background-position: bottom left;
}

#buttonContact{
height: 43px;
width: 123px;
text-indent: 10000px;
overflow: hidden;
background: url("images/contactcolin.png") top left no-repeat;
display: block;
}

#buttonContact:hover{
background-position: bottom left;
}

#buttonResume{
height: 43px;
width: 123px;
text-indent: 10000px;
overflow: hidden;
background: url("images/resumebutton.png") top left no-repeat;
display: block;
}

#buttonResume:hover{
background-position: bottom left;
}


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

#footer {width:830px; height:20px; float:left; margin:10px 10px 10px 10px;}
#subfooter {width: 860px; margin: 0px auto; color:#FFF; text-align:center}