/* Mosevo.com default style */
/* All associated code, html, css, graphics copyright Mosevo, LLC */
/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. E-mail submissions@hostdiamond.com for futher information or to request permission. */


/********************************************************************************/
/********************************** CSS HACKS ***********************************/
/********************************************************************************/

* img {
	border:0px;
}

a:active, a:focus {
	outline: none;
}

:focus {
  -moz-outline-style:none;
}


/********************************************************************************/
/************************************ RESET *************************************/
/********************************************************************************/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: #ffffff;
	background: #000000;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/********************************************************************************/
/********************************** MAIN PAGE ***********************************/
/********************************************************************************/

html {background:#000000 url(/media/images/html-bg.jpg) center top no-repeat; background-attachment:fixed; font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif; font-size:12px; font-weight:normal; color: #fff;}
body {background: transparent; position: relative;}

div#html-cover {
	background: transparent;
	position: absolute;
	height: 100%;
	width: 100%;
}

div#content {
}
div#header-wrapper {
	background: transparent url(/media/images/header-bg.png) no-repeat; background-position: center 22px; height:85px; margin: 0px auto 5px auto; position: fixed; top:0px; width:100%; z-index: 9999;
}

div#header {
	border:0px solid red; height:80px; width:1000px; margin-left: auto; margin-right: auto;
}

div#header-content {

}

div.breadcrumb {
	border:0px solid red; visibility:hidden; height:20px; width:1000px; margin: 90px auto 0px auto;
}

div#hero {
	border:0px solid red; height:386px; width:1000px; margin: 0px auto 20px auto; background: transparent url(/media/images/hero-bg.png) no-repeat; background-position: left top;
}

div#hero-content {

}

div#heroTwo {
	border:0px solid red; height:141px; width:1000px; margin: 0px auto 10px auto; background: transparent url(/media/images/hero-two-bg.png) no-repeat; background-position: left top;
}

div#heroTwoContent {

}

div#load-js-content {
	height:141px; width:1000px; position: absolute; top:1000px; left: 50%; margin-left: -500px;
}

div.footer {
	border:0px solid red; height:40px; width:1000px; margin: 0px auto 10px auto;
}

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

/********************************************************************************/
/******************************** NAVIGATION ************************************/
/********************************************************************************/
	
#logo {
	padding:26px 0px 0px 22px;
}
	
ul#navigation {
	list-style-type: none;
	float:right;
	margin:0;
	padding:0;
	background:transparent;
}

ul#navigation li {
	float: left;
	background: transparent;
	padding: 0px 7px;
	margin-top:10px;
}

ul#navigation li.navLine {
	background: transparent url(/media/images/nav-line.png) center top no-repeat;
	display:block;
	height:66px;
	margin-top:10px;
	width:1px;
}	

/* nav background items */
ul#navigation li#nav-who {
	background: transparent url(/media/images/nav-who.png) center top no-repeat;
}
	
ul#navigation li#nav-what {
	background: transparent url(/media/images/nav-what.png) center top no-repeat;

}

ul#navigation li#nav-our {
	background: transparent url(/media/images/nav-our.png) center top no-repeat;

}

ul#navigation li#nav-contact {
	background: transparent url(/media/images/nav-contact.png) center top no-repeat;

}

/* nav a items */
ul#navigation li#nav-who a {
	display: block;
	height: 66px;
	width: 164px;
}
	
ul#navigation li#nav-what a {
	display: block;
	height: 66px;
	width: 164px;
}

ul#navigation li#nav-our a {
	display: block;
	height: 66px;
	width: 164px;
}

ul#navigation li#nav-contact a {
	display: block;
	height: 66px;
	width: 164px;
}
	
	
/********************************************************************************/
/******************************** BREADCRUMB ************************************/
/********************************************************************************/

.breadcrumbNumber {
	float: right;
	font-size:11px;
	padding-right: 20px;
	padding-top: 2px;
}

.breadcrumbTitle {
	float: left;
	font-size:11px;
	padding-left: 20px;
	padding-top: 2px;
}

/********************************************************************************/
/*********************************** HERO ***************************************/
/********************************************************************************/
	
div#hero-portfolio-spacer {
	clear: both;
	height: 190px;
	width: 100%;
}

div.hero-portfolio-image {
	border: 0px solid red;
	cursor: pointer;
	float: left;
	height: 138px;
	margin-right:40px;
	padding: 0px;
	position: relative;
	width: 188px;
}

div.hero-portfolio-image:hover {
	margin-top:2px;
}

div#hero-portfolio-image-one {
	background: transparent url(/media/images/portfolio-1.png) no-repeat;
	margin-left:65px;
}

div#hero-portfolio-image-two {
	background: transparent url(/media/images/portfolio-2.png) no-repeat;
}

div#hero-portfolio-image-three {
	background: transparent url(/media/images/portfolio-3.png) no-repeat;
}

div#hero-portfolio-image-four {
	background: transparent url(/media/images/portfolio-4.png) no-repeat;
}

div#hero-portfolio-image-one:hover {
	background: transparent url(/media/images/portfolio-1-hover.png) no-repeat;
}

div#hero-portfolio-image-two:hover {
	background: transparent url(/media/images/portfolio-2-hover.png) no-repeat;
}

div#hero-portfolio-image-three:hover {
	background: transparent url(/media/images/portfolio-3-hover.png) no-repeat;
}

div#hero-portfolio-image-four:hover {
	background: transparent url(/media/images/portfolio-4-hover.png) no-repeat;
}

div.hero-portfolio-arrow {
	background: transparent url(/media/images/portfolio-arrow-bg.png) no-repeat;
	bottom: 0px;
	height: 19px;
	position: absolute;
	right: 0px;
	width: 19px;
	z-index:1;
}

div.hero-portfolio-image:hover div.hero-portfolio-arrow {
	background: transparent url(/media/images/portfolio-arrow-bg-hover.png) no-repeat;
}


/********************************************************************************/
/******************************* HERO OVERLAY ***********************************/
/********************************************************************************/

/* the overlayed element */
.simple_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#333;
	
	width:675px;	
	min-height:200px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image:url(/media/images/black-overlay-close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}

/* the large image. we use a gray border around it */
#img {
	border:1px solid #666;
}

/* "next image" and "prev image" links */
.next, .prev {
	
	/* absolute positioning relative to the overlay */
	position:absolute;
	top:40%;	
	border:1px solid #666;	
	cursor:pointer;
	display:block;
	padding:10px 20px;
	color:#fff;
	font-size:11px;
	
	/* upcoming CSS3 features */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;	
}

.prev {
	left:0;
	border-left:0;
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-top-left-radius:0;
}

.next {
	right:0;
	border-right:0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;
	-webkit-border-bottom-right-radius:0;
	-webkit-border-top-right-radius:0;	
}

.next:hover, .prev:hover {
	text-decoration:underline;
	background-color:#000;
}

/* when there is no next or previous link available this class is added */
.disabled {
	visibility:hidden;		
}

/* the "information box" */
.info {
	position:absolute;
	bottom:0;
	left:0;	
	padding:10px 15px;
	color:#fff;
	font-size:14px;
	border-top:1px solid #666;
}

.info strong {
	display:block;	
}

.info span {
	font-size: 12px;
}

.info div#overlay-launch {
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	float: right;
}

/* progress indicator (animated gif). should be initially hidden */
.progress {
	position:absolute;
	top:45%;
	left:50%;
	display:none;
}

/* everybody should know about RGBA colors. */
.next, .prev, .info {
	background:#333 !important;
	background:rgba(0, 0, 0, 0.6) url(/media/images/h80.png) repeat-x;		
}


/********************************************************************************/
/******************************** HERO BOX 2 ************************************/
/********************************************************************************/
	
div.heroText {
	border: 0px solid red; float: left; padding: 15px 20px 0 25px; width: 280px;
}

div.heroText h1 {
	font-size: 18px;
	padding-top: 4px;
}

div.heroText h2 {
	color: #bfbfbf;
	font-size: 12px;
}

div.heroText h1#welcome {
	color: #3895b9;
}

div.heroText h1#together {
	color: #00883e;
}

div.heroText h1#more {
	color: #c3b520;
}

div.heroTextTitle {
	background: transparent url(/media/images/arrow.png) no-repeat right center;
	border-bottom: 1px solid #333333;
	cursor: pointer;
	padding: 5px 0px 10px 0px;
	width: 100%;
}

div.heroTextDesc {
	padding-top: 5px;
	line-height: 15px;
	width: 100%;
}

/********************************************************************************/
/********************************** FOOTER **************************************/
/********************************************************************************/
	
.address {
	float: right;
	font-size:11px;
	padding-right: 20px;
	padding-top: 2px;
}

.copy {
	float: left;
	font-size:11px;
	padding-left: 20px;
	padding-top: 2px;
}