@charset "UTF-8";
/* CSS Document */

html {height:100%;}
body {height:100%; margin:0; padding:0; text-align:center; color:black; }
div#window {margin:0 auto; background-color:#CCCCCC; width:948px; height:100%; padding-top:60px; overflow:hidden;}
#background-fade {position:fixed; top:0; left:0; width:100%; height:100%;}
#background-fade img {width:100%;}
.border {height:30px; }
div#content-wrapper {height:300px; background-image:url(images/backgrounds/bridge3.jpg);}
.brick {height:300px; width:158px;margin:0; padding:0; background-color:#FFFFFF; opacity:.90; display:none; }
.service-brick {padding:20px; height:260px;} 
.contact-brick {height:300px; width:190px;}
.work-brick {width:474px; overflow:hidden;}
iframe {overflow:hidden;}

/*BEGIN SIDES */
div#left-side {position:relative; top:-300px; height:300px; z-index:2; float:left;}
div#left-side div {height:20px;}
div#right-side {position:relative; top:-300px; height:300px; z-index:2; float:right; text-align:right;}
div#right-side div {height:20px;}
#right-side .side {margin:0 0 0 auto;}
.side {display:block; }
.work-brick .work-side {width:20px; float:left; height:100%; background:none;}
.work-brick .work-title-side {width:130px; float:left; height:25px; margin-top:20px;}

/* Menus */
#header {display: block; height: 25px; margin-bottom: -20px; width: auto;}
#header p {float: right; margin: 5px 10px 0 0; color:#666666; font-style:italic; font-family:Verdana, Arial, Helvetica, sans-serif;}
#footer {width:100%; height:60px; position:relative;}
#sort li {width:100px; float:left; height:25px; list-style:none; margin-right:10px;}
#sort a {width:100px; height:25px; background-image:url(images/navigation/top-menu1_sprite.png); display:block; background-position:0 25px; position:relative; color:black;}
#sort a:active { background-image:url(images/navigation/top-menu1_sprite.png); background-position:0 0px; top:2px;}
#sort a:hover {color:#333333;}
#sort .selected-button {background-position:0 50px; color:#FFCC00;}
#sort .selected-button:active {background-position:0 50px;}
#sort .selected-button:hover {color:#FFCC00;}
#social {position:absolute; top:-13px; left:15px; text-align:left; line-height:1.3em;}
#info {position:absolute; top:-20px; left:10px;}
#info p { color: #3B3B3B;
    font-family: helvetica;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.3em; font-style:italic;}

/* TEXT */
h1 {margin:0; font-size:95px; color:black;} /*TRADBOT */
h2 {margin:10px; font-size:36px; color:black;} /*titles */
h3 {padding:5px 20px 5px 5px;color:white; font-size:24px; margin:10px 0 15px 0;} /*services*/
h4 {background-color: white;
    font-size: 1.7em;
    font-weight: bold;
    left: 100px;
    padding-right: 40px;
    position: absolute;
    top: 25px; visibility:hidden;} /*work sample titles */
	.selected-title {visibility:visible;}
.subtitle { color: #141414;
    font-family: serif;
    font-size: 1.6em;
    margin: 0;}
a {cursor:pointer; outline-style:none; text-decoration:none; color:red; background:none;}
a:active {text-decoration:none; background:none; }
div p {color:black; margin:10px; text-align:left; display:block;}
p.description {color:black; margin:10px; text-align:left;}
.work-text {background-color: white;
    left: 40px;
    line-height: 1.4em;
    position: absolute;
    width: 400px; visibility:hidden;}
	.selected-content {visibility:visible;}
.service-brick p {font-size:1.2em; font-style:italic;}
ul.service-list {text-align:left;}
ul.service-list li {float:none; background:none; list-style-type:circle; color:black; width:auto; font-weight:bold; font-size:1.2em; line-height:1.6em;}



/* Work Category Specific */
	.viewer {overflow:hidden; display:block; position:relative;}
	.wrapper {width:2000px; position:absolute;}
	
	#work-viewer {width:474px; height:300px; background-color:#999999; opacity:1.0;}
	#sampleWrapper {height:300px; left:0px; top:0px; overflow:hidden;}
	.loader {margin:140px 70px 0 220px;}
	.webStill {margin: 0;}
	iframe {width:474px; height:300px; overflow:hidden;}
	.samples {height:300px; width:474px; margin-right:20px; background-color:white; position:absolute; display:block;/*left is width of elements */left:494px; text-align:left;}
	.sample0 {left:-494px}
	.sample1 {left:0px;}
	.work-title-image {height: 40px;
    left: 50px;
    position: absolute;
    top: 10px;
    width: 40px; visibility:hidden;}
	.selected-title-image {visibility:visible;}
	.website-link {background-image: url(images/backgrounds/website-link.png);
    color: gold;
    display: block;
    font-size: 1.5em;
    height: 300px;
    padding-top: 127px;
    position: absolute;
    text-align: center;
    width: 474px; display:none; }
	.website-link:hover {color:gold;}
	
	div#thumbViewer {width:300px; height:50px; opacity:1.0; left:40px;}
	a.button {border: 1px solid black;
    color: navy;
    display: block;
    float: left;
    height: 25px;
    margin: 9px 3px;
    width: 45px; position:relative; }
	a.button:hover {color:#0033FF;}
	a.button:active {background-color:#77B8FB; top:2px;}
	a#leftButton {}
	a#rightButton {}
	.thumb {height:50px; width:50px; display:block; float:left; position:relative;}
	.thumb img {height:36px; width:36px; margin:7px;}
	div#nav-highlight {background-color: #77b8fb; height: 50px; margin: 0px; position: absolute; width: 50px; z-index: 0;}
	.content-nav {position:absolute; top:200px;}
	
/*BACKGROUND COLOR */
.background {background-color:#1A1A1A; }
#fun { position:absolute; left:855px; top:-20px;}
	#fun input {display:inline; margin:-2px;}
	#fun a:hover {color:gold;}