@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

#global {display:none}

#nav-jump {
float:left;
margin-top:0.5em;
}

#nav-jump p {
font-size:11px;
color:#999999;
margin:0.8em 0;
}

#nav-jump a {
color:#999999;
text-decoration:none;
}

#nav-jump a:hover {
color:#8bc832;
text-decoration:none;
}

#text ul, #col-2 ul {
padding:0 0 0 10px;
}

#text li, #col-2 li {
	font-family:Verdana, Geneva, sans-serif;
list-style-image:url(bullet.gif);
list-style-position:inside;
margin:0 0 0 5px;
padding:0 12px 8px 19px;
text-indent:-15px;
font-size:0.75em;
line-height:16px;
}

/* custom player skin */
   .flowplayer { width: 80%; background-color: #222; background-size: cover; max-width: 500px; }
   .flowplayer .fp-controls { background-color: rgba(242, 242, 242, 1) !important}
   .flowplayer .fp-timeline { background-color: rgba(242, 242, 242, 1)}
   .flowplayer .fp-progress { background-color: rgba(0, 169, 220, 1)}
   .flowplayer .fp-buffer { background-color: rgba(210, 210, 210, 1) !important}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 86.45%;
	padding-left: 2.275%;
	padding-right: 2.275%;
}

#header-f {
	clear: both;
	float: left;
	margin: 0;
	width: 100%;
	display: block;
	border-top:11px solid #00A9DC;
}

#header-f img {
	max-width:75%;
}

#heading {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#heading h1 {
	font-family: 'Oswald', Arial, sans-serif;
	font-size:2em;
	font-weight:400;
	color:#B3B9BA;
}

#col-2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	color:#666;

}

#col-2 h2 {
	margin:0;
}

#col-3 {
	clear: both;
	float: left;
	margin:1em 0 0 0;
	width: 100%;
	display: block;
}

#col-4 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	padding:1em 0;
}
#col-1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-bottom:1em;
}

#nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 0.9em;
}

#nav li {
	padding:0 0.2% 0 0;
}

#sm-icons {
	clear: none;
	float: left;
	margin-left: 5.2631%;
	width: 21.0526%;
	display: block;
}

#footer-left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 21.0526%;
	display: block;
	margin-top:1em;
	color:#999;
}

#footer-left a {
	color:#999;
	text-decoration: none;
}

#footer-left a:link, #footer-left a:visited {
	color: #999999;
	text-decoration: none;
}

#footer-left a:hover, #footer-left a:focus {
	color: #666666;
	text-decoration: underline;
}

#sm-phone {
	clear: none;
	float: left;
	margin-left: 5.2631%;
	width: 73.6842%;
	display: block;
	margin-top: 1em;
}

#work-slider {
	display: none;
}

#copyright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#panel-container {
	display:none;
}

#navigation {
	display:none;
}

#nav-jump {
	float:left;
	width:300px;
}

#col-2 #nav-jump {
	clear:both;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 540px) {
.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}

#global {
	display:block; }
	
#header-f {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-size: 1em;
}

#header-f img {
	max-width:100%;
}

#heading {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#heading h1 {
	font-family: 'Oswald', sans-serif;
	font-size:3em;
	font-weight:400;
	color:#B3B9BA;
}

#col-2 {
	clear: none;
	float: left;
	margin-left: 2.5641%;
	width: 48.7179%;
	display: block;
}

#col-3 {
	clear: both;
	float: left;
	margin: 1em 0 0 0;
	width: 240px;
	display: block;
}

#col-4 {
	clear: none;
	float: left;
	margin-left: 2.5641%;
	width: 48.7179%;
	display: block;
	padding:1em 0;
}
#col-1 {
	clear: both;
	float: left;
	margin: 0;
	width: 48.7179%;
	display: block;
}
#nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-size: 1em;
}

#nav li {
	padding:0 0.9em 0 0;
}

#sm-icons {
	clear: none;
	float: left;
	margin-left: 2.5641%;
	width: 35.8974%;
	display: block;
}

#footer-left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 23.0769%;
	display: block;
	margin-top:1em;
}

#sm-phone {
	clear: none;
	float: left;
	margin-left: 2.5641%;
	width: 74.3589%;
	display: block;
	margin-top:1em;
}

#work-slider {
	display: none;
}

#copyright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#nav-jump {
	margin-left:2.5641%;
}


}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1025px) {
.gridContainer {
	width: 88.5%;
	max-width: 1232px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
}

#header-f {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#heading {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#nav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 74.5762%;
	display: block;
}

#sm-icons {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 23.7288%;
	display: block;
}

#footer-left {
	clear: both;
	float: left;
	margin-left: 0;
	width: 32.2033%;
	display: block;
}

#sm-phone {
	clear: none;
	float: left;
	margin-left: 1.6949%;
	width: 66.1016%;
	display: block;
	margin-top:1em;
}

#col-1, #col-2 {
	display: none;
}

#work-slider {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#copyright {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#panel-container {
	display:block;
}

#navigation {
	display:block;
}

#gallery {
	display:none;
}

#nav-jump {
	margin-left:0;
}

/*---------------SLIDING PANELS------------------*/
#thumbnails-dexion {
	height: 42px;
	width: 400px;
	background: url(../work/images/thumbnails-dexion.jpg) no-repeat;
	float: left;
	margin-top: 4px;
}

#thumbnails-scotts {
height:42px;
background:url(../work/images/thumbnails-scotts.jpg) no-repeat;
float:left;
margin-top:4px;
}

#thumbnails-tomr {
height:42px;
background:url(../work/images/thumbnails-tomr.jpg) no-repeat;
float:left;
margin-top:4px;
}

#thumbnails-dade {
height:42px;
background:url(../work/images/thumbnails-dade.jpg) no-repeat;
float:left;
margin-top:4px;
}

#thumbnails-ids {
height:42px;
background:url(../work/images/thumbnails-ids.jpg) no-repeat;
float:left;
margin-top:4px;
}

#thumbnails-longhomes {
height:42px;
background:url(../work/images/thumbnails-longhomes.jpg) no-repeat;
float:left;
margin-top:4px;
}

#thumbnails-deloitte {
height:42px;
background:url(../work/images/thumbnails-deloitte.jpg) no-repeat;
float:left;
margin-top:4px;
}

#thumbnails-mathys {
height:42px;
background:url(../work/images/thumbnails-mathys.jpg) no-repeat;
float:left;
margin-top:4px;
}

#thumbnails-alara {
height:42px;
background:url(../work/images/thumbnails-alara.jpg) no-repeat;
float:left;
margin-top:4px;
}

#thumbnails-fujifilm {
height:42px;
background:url(../work/images/thumbnails-fujifilm.jpg) no-repeat;
float:left;
margin-top:4px;
}

#thumbnails-shakti {
height:42px;
background:url(../work/images/thumbnails-shakti.jpg) no-repeat;
float:left;
margin-top:4px;
}

#thumbnails-sta {
height:42px;
background:url(../work/images/thumbnails-sta.jpg) no-repeat;
float:left;
margin-top:4px;
}

#thumbnails-codman {
height:42px;
background:url(../work/images/thumbnails-codman.jpg) no-repeat;
float:left;
margin-top:4px;
}

#thumbnails-sierraron {
height:42px;
background:url(../work/images/thumbnails-sierraron.jpg) no-repeat;
float:left;
margin-top:4px;
}

#navigation {
float:left;
display:block;
width:960px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.75em;
margin-top:15px;
	}
	
#navigation a {
color:#666;
text-decoration:none;
}
	
#navigation a:hover {
color:#8bc832;
text-decoration:none;
}
	
#arrows {
color:#cccccc;
width:50px;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:30px;
line-height:42px;
}

#arrows a {
color:#cccccc;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:30px;
text-decoration:none;
}

#arrows a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:30px;
text-decoration:none;
color:#8bc832;
}

.up-arrow {
width:204px;
height:18px;
float:left;
margin:10px 0 0 15px;
}

/* SLIDING PANELS ORIGINAL */
#slider-outer {
float: left;
	text-align:left;
	width: 960px;
	background-color:#FFF;
	margin: 0;
	padding: 0 0 0 0;
	overflow:hidden;
	}

#panel-container {
width:960px;
height:388px;
float:left;
}

.stepcarousel{
position: relative; /*leave this value alone*/
border: none;
overflow: scroll; /*leave this value alone*/
width: 726px; /*Width of Carousel Viewer itself*/
height: 394px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
width:960px;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
width:960px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height:360px;
}


#heading-bar {
height:28px;
width:960px;
position:relative;
z-index:99;
}

#heading-bar p {
font-weight:bold;
font-size:0.875em;
line-height:1.0625em;
color:#ffffff;
padding:5px 10px 0 10px;
margin:0;
}

#heading-bar .right { 
font-weight:normal;
color:#ffffff;
padding:0 10px;
text-align:right;
float:right;
}

#slider-outer-paginate img {
height:42px;
width:72px;
padding:0;
margin:0;
}

.video-arrow a:link {
width:400px;
float:right;
z-index:200;
height:360px;
margin-top:-360px;
}

.video-arrow a:hover {
width:400px;
float:right;
z-index:200;
height:360px;
background-image:url(../work/images/video-arrow-right.png);
background-position:right;
background-repeat:no-repeat;
margin-top:-360px;
cursor:pointer;
}

#text {
width:280px;
height:388px;
float:left;
overflow:hidden;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top:-28px;
background:url(../work/images/text-background.gif) left top no-repeat;
}

#text h1 {
/*background-color:rgba(0, 0, 0, 0.6);*/
height:28px;
width:280px;
margin-bottom:10px;
}

#text p {
font-size:0.75em;
line-height:16px;
color:#444;
padding:0 12px 0 8px;
margin-bottom:10px;
}

.captions-holder {
width:960px;
float:left;
height:28px;
margin-top:365px;
}

.captions-holder p {
font-size:0.75em;
line-height:1.0625em;
font-weight:normal;
color:#949494;
}

.captions-holder a {
font-size:0.75em;
line-height:1.0625em;
font-weight:normal;
text-decoration:none;
color:#949494;
}

.captions-holder a:hover {
color:#8bc832;
text-decoration:none;
}

.captions-left {
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:0 16px 0 8px;
margin-left:50px;
}

.captions-right {
float:right;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:0 16px 0 8px;
text-align:right;
}

#back-top {
	display:none;
}
}