/* CSS Document */
* {	margin: 0; padding: 0;}
html { padding: 0; margin:0; height: 100%;}
body{ background-color: #273947; padding: 0; margin: 0; text-align: center; height: 100%;}
.hidden {display: none;}
a { color: #688399; border: 0; outline:0; text-decoration: none;}
li { list-style-type: none; list-style-position: outside; }
hr {
	height: 1px; color: #666; background-color: #666; border: none; outline: none; margin: 20px 0;
}
h1 {
	font: 1.8em/2.2em "Lucida Grande", Lucida, Verdana, sans-serif;
	text-transform: none;
	text-align: left;
	padding: 15px 0;
	font-weight: bold;
}
h2 {
	color: #688399; font: 1.6em/1.8em "Lucida Grande", Lucida, Verdana, sans-serif;
	text-transform: none;
	text-align: left;
	padding: 15px 0;
}
h3 {
	color: #688399; font: 1.4em/1.8em "Lucida Grande", Lucida, Verdana, sans-serif;
	text-transform: none;
	text-align: left;
	padding: 15px 0;
}
p {
	font-size: 1.1em;
	line-height: 1.7em;
}
/*--- top level holders ---*/
#holder-homepage {
	color: #aaaaaa;
	font: .8em/1.5em "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: left;
	background: #273947 url(images/hello-bg.jpg) no-repeat left top;
	width: 960px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: -50px;
	position: relative;
}
#holder-design {
	color: #aaaaaa;
	font: .8em/1.5em "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: left;
	background: #273947 url(images/projects-waypoint.png) no-repeat 40px 130px;
	width: 960px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: -50px;
	position: relative;
	/*best place for a background image that highlights the tabs*/
	}

/*---- first level -----*/
#topbar {height: 200px; padding-left: 50px; width: 910px;float: left;margin-bottom: 10px; position: relative;}
#designtopbar {height: 80px; padding-left: 50px; width: 910px;float: left;margin-bottom: 10px; position: relative;}
#content-home {clear: left; min-height: 400px;}
#footer {clear: both;height: 73px;background:#273947 url(images/ico_mim-small.gif) no-repeat 100px top; margin: 0 auto; width: 790px; position: relative; padding-left: 170px;}
.push {height: 73px;clear: both;}


/*---- second level ----*/
#sectionselection { float: left; width: 238px; height: 150px; margin: 20px 40px; padding: 0;background: transparent url('images/a-worthy-cause-logo-rev.png')no-repeat top left;}
#delicious {width: 20px; height: 20px; overflow: hidden; float: right; margin: 20px 50px; position: relative;}
#menu { width:180px; padding: 0 10px 10px 50px; float: left;margin: 0;}
#textarea {padding-left: 50px; width: 400px; float: left; position: relative;}
#designarea {padding: 0; width: 720px; float: right; position: relative; margin: 0;background: transparent;}
#photoarea {padding: 0; width: 720px; float: right; position: relative; margin: 0;}
#spywrap { width: 380px; float: left;margin-left: 0; position: relative;display: inline; height: 240px;}
.section {
	width: 860px; float: left; padding-left: 100px; margin-top: 40px; background:transparent ; padding-bottom: 20px; border-bottom: 1px solid #666;
}
div#others {
float: left; height: 240px; width: 410px;	
}
div.projects-slider {
	width: 436px; height: 256px; float: right; overflow: hidden;
}
div.left-column {
	float: left;
	width: 400px;
	padding: 20px 30px 20px 0;
	padding-top: 20px;
	border-right: 1px solid #666;
}
div.right-column {
	float: left;
	width: 400px;
	padding: 20px 0 20px 28px;
}
#contactme {
	float: left;
	margin-left: 250px;
}
#contactme form {
	border: 1px solid #688399;
	margin-top: 20px;
}
/*---- elements ----*/
ul .spy {}
.spy li { padding: 12px; border-bottom: 1px solid #666;}

#section-nav li {float: left; padding: 0; margin: 0;}
#section-nav a { position: relative; }
.small {font-size: .8em; font-style: italic;}
.current { color: #fff;}

.indent {margin-left: 12px;position: relative; display: inline;}
#bigbuttons {
	float: right; height: 240px; width: 400px; margin:0 0 70px 60px;
}
#one {
	float: left; margin-top: 25px; margin-right: 25px; margin-left: -50px;width: 220px; background: #273947 url(images/figure-1.gif) no-repeat left top; padding-left: 50px;
}
#two {
	float: left; margin-top: 25px; margin-right: 25px; width: 220px; background: #273947 url(images/figure-2.gif) no-repeat left top; padding-left: 50px;
}
#three {
	float: left; margin-top: 25px; width: 220px; background: #273947 url(images/figure-3.gif) no-repeat left top; padding-left: 50px;
}
/*--- dodgy shit ----*/


/* Main Navigation */

#sectionselection ul#section-nav {
	height: 73px;
	position: absolute;
	padding: 0;
	}


ul#section-nav a {
	background: url(images/section-buttons.jpg) no-repeat top left;
	display: block;
	outline: none;
	position: relative;
	height: 73px;
	text-decoration: none;
	width: auto;
	cursor: pointer;
	}
a:link#main-design  {
	display: block;
	width: 308px;
	height: 308px;
	margin: 0 0 15px 0;
	background: url(images/giant-button.png) no-repeat top left;
}
a:visited#main-design  {
	display: block;
	width: 308px;
	height: 308px;
	margin: 0 0 15px 0;
	background: url(images/giant-button.png) no-repeat 0 -616px;}
a:hover#main-design  {
	display: block;
	width: 308px;
	height: 308px;
	margin: 0 0 15px 0;
	background: url(images/giant-button.png) no-repeat 0 -308px;}

a:link#main-photo  {
	display: block;
	width: 400px;
	height: 80px;
	margin: 0 0 15px 0;
	background: url(images/main-buttons-photo.png) no-repeat top left;
}
a:visited#main-photo  {
	display: block;
	width: 400px;
	height: 80px;
	margin: 0 0 15px 0;
	background: url(images/main-buttons-photo.png) no-repeat 0 -160px;
}
a:hover#main-photo  {
	display: block;
	width: 400px;
	height: 80px;
	margin: 0 0 15px 0;
	background: url(images/main-buttons-photo.png) no-repeat 0 -80px;
}

/* Standard Links (div#sectionselection  ul li a.main) */

li#design a {
	background-position: 0 0;
	width: 72px;
	z-index: 1;
	}
li#design-on a {
	background-position: 0 0;
	width: 72px;
	z-index: 1;
	}

li#photo a {
	background-position: -71px 0;
	width: 116px;
	z-index: 2;
	}
li#photo-on a {
	background-position: -71px 0;
	width: 116px;
	z-index: 2;
	}

/* Hovers*/
li#design a:hover {
	background-position: 0 -73px;
	width: 72px;
	z-index: 1;
	}
li#design-on a:hover {
	background-position: 0 0;
	width: 72px;
	z-index: 1;
	}

li#photo a:hover {
	background-position: -71px -73px;
	width: 117px;
	z-index: 2;
	}
li#photo-on a:hover {
	background-position: -71px 0;
	width: 117px;
	z-index: 2;
	}

li.active a {
    font-weight: bold;
    color: #fff;
}
	
/*---- coda slider ---*/
#slider {
    width: 690px;
    margin: 0;
    position: relative;
}

.scroll {
/*----     height: 600px; -----*/
    width: 690px;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    clear: left;
    background: transparent;
}

.scrollContainer div.panel {
    padding: 20px;
/*----     height: 600px; ----*/
    width: 650px;
	overflow: hidden;
}

#shade {
    background: #273947;
    height: 50px;
}

ul.navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 8px;
    height: 50px;
}

ul.navigation li {
    display: inline;
    margin-right: 2px;
	padding: 10px 0;
	background: none;
	}

ul.navigation a {
    padding: 15px;
    color: #000;
    text-decoration: none;
	color: #666;
	background: transparent;
	border-bottom: #273947 1px solid;
}

ul.navigation a:hover {
    background: transparent;
	color: #cecece;
	border-bottom: #ffffff 1px solid;
}

ul.navigation a.selected {
    background-color: #fff;
	color: #666;
	background: transparent;
	border-bottom: #666 1px solid;
}

ul.navigation a:focus {
    outline: none;
	color: #fff;
	background: transparent; 
	border-bottom: #666 1px solid;
}

.scrollButtons {
    position: absolute;
    top: 0;
    cursor: pointer;
display:none;
}

.scrollButtons.left {
    right: 60px;
display:none;
}

.scrollButtons.right {
    right: 20px;
display:none;
}


/*--- everything needs to be over-ruled eventually ----*/
.hide {display: none;}
ul.spy {
	padding: 0;
}
p  {
margin-top: 15px;
}
div#holder-design div#topbar div#sectionselection {
	padding-left: 0;
	margin-left: 0;
}
/*----- gallery for photos ----*/
.gallery{
    padding:35px;
    float: left;
    margin-top: 60px;
    position: relative;
    height:600px;
}
.galleryCont{
    display:none;
}
.descriptionBox{
    font-size:10px;
    background-color:#273947;
    color:white;
	margin: 15px 0;
}

.nextProject{
    font-family:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size:40px;
}
.desc{
    font-family:Arial, Helvetica, sans-serif;
    color:#000000;
    font-size:14px;
}

.menu td{
    padding:10px 0;
    background-color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    color:#CC0000;
    font-size:14px;
}
.menu td a{
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    color:#CC0000;
}
.menu td a:hover{
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    color:#000000;
}
.imgDesc{
    font-family:Arial, Helvetica, sans-serif;
    color:#fff;
    font-size:10px;
}
.header {
	background-color: #273947;}
div#photoarea div #mpl {
	float: left;
	margin: 10px 10px 10px 0;
	display: inline;
}
/*---- forms -----*/
form { background-color: #2e404e; padding: 20px; border: none; margin:15px 0;}
fieldset { border: none; outline: none; margin: 0; padding: 20px 0;}
legend {display: block; margin-bottom: 20px;}
input { background-color: #273947; border: 4px #273947 solid; display: block; width: 330px; color: #fff; padding: 5px 10px; margin: 10px 0;}
select { background: #2e404e; border: 0 #2e404e solid; display: block; width: 250px; color: #fff; padding: 5px 10px;}
textarea { background-color: #273947; border: 4px #273947 solid; display: block; width: 330px; color:#fff; padding: 5px 10px; margin-bottom: 15px;}
label {margin: 15px 0; display: block;}
button { color: #fff; background-color: #273947; border: 0; outline:0; text-decoration: none; cursor: pointer; padding: 10px 20px; margin-top: 10px;}