html {
     overflow: -moz-scrollbars-vertical;
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-size:62.5%;
font-family:Arial, Helvetica, sans-serif;
	
background-color:#0099cc;
}

#container
{
background-color:#000;
}

#page-top
{
background: url(/imgs/background.png);
width:1000px;
margin:auto;
padding-bottom:70px;
border-bottom:1px solid #000;
}

#logo
{
float:left;
margin:55px 93px 0 101px;
}

.home-message
{
color:#fff;
text-transform: uppercase;
text-align:center;
padding:10px 0;
text-shadow:#272727 0 1px 1px;
font-weight:bold !important;
font-size:1.6em;
}

.menu-item
{
float:left;
text-decoration:none;
margin-right:15px;
}

.menu-item-1
{
display:block;
width:112px;
height:111px;
background: url(/imgs/menu/1.gif) 0 -111px no-repeat;
}

.menu-item-1:hover
{
background: url(/imgs/menu/1.gif) 0 -114px no-repeat;
}

a.current1
{
background: url(/imgs/menu/1.gif) 0 0 no-repeat !important;
border-bottom:1px solid #33ccff;	
}


.menu-item-2
{
display:block;
width:158px;
height:111px;
background: url(/imgs/menu/2.gif) 0 -111px no-repeat;
}

.menu-item-2:hover
{
background: url(/imgs/menu/2.gif) 0 -114px no-repeat;
}

a.current2
{
background: url(/imgs/menu/2.gif) 0 0 no-repeat !important;
border-bottom:1px solid #33ccff;
}


.menu-item-3
{
display:block;
width:111px;
height:111px;
background: url(/imgs/menu/3.gif) 0 -111px no-repeat;
}

.menu-item-3:hover
{
background: url(/imgs/menu/3.gif) 0 -114px no-repeat;
}

a.current3
{
background: url(/imgs/menu/3.gif) 0 0 no-repeat !important;
border-bottom:1px solid #33ccff;	
}

.menu-item-4
{
display:block;
width:123px;
height:111px;
background: url(/imgs/menu/4.gif) 0 -111px no-repeat;
}

.menu-item-4:hover
{
background: url(/imgs/menu/4.gif) 0 -114px no-repeat;
}

a.current4
{
background: url(/imgs/menu/4.gif) 0 0 no-repeat !important;
border-bottom:1px solid #33ccff;
}

#page-bottom
{
border-top:1px solid #33ccff;
background-color:#0099cc;
}

#footer
{
width:1000px;
margin:auto;
}

#footer h2
{
color:#fff;
text-transform: uppercase;
text-align:center;
background-color:#0386b2;
padding:10px 0;
text-shadow:#272727 0 1px 1px
}

#contact a
{
color:#fff;
}

.clear
{
clear:both;
}

#content-area
{
margin:40px 101px 0 101px;
}

#contact p
{
color:#fff;
font-size:1.2em;
line-height:1.5em;
}

#contact strong
{
color:#0099cc;
}

#contact .google-map
{
float:right;
}

#what-we-do p.what-message
{
background-color:#0099cc;
color:#fff;
font-size:1.2em;
padding:7px;
width:330px;
margin-bottom:40px;
}

p.work-with-message
{
background-color:#0099cc;
color:#fff;
font-size:1.2em;
padding:7px;
width:330px;
margin-bottom:20px;
}

.portfolio-caption
{
background-color:#0099cc;
color:#fff;
font-size:1.2em;
padding:7px;
margin-bottom:40px;
margin: 10px; 20px 0 20px;
text-shadow:#272727 0 1px 1px
}

#what-we-do h1
{
margin:0 !important;
text-transform: uppercase;
color:#0099cc;
}

#what-we-do h1
{
	cursor:pointer;
text-shadow:#000 0 1px 1px;
}

#what-we-do span.open
{
color:#fff;
font-size:0.5em !important;
vertical-align:middle;
display:block;
background-color:#0099cc;
padding:5px;
display:none;
}

#what-we-do h2
{
padding:0 !important;
margin:0 !important;
margin-bottom:20px !important;
font-weight:normal;
color:#fff;
font-size:1.1em;
}

.boxgrid{
	width: 140px;
	height: 85px;
	margin:9px;
	float:left;
	background:#0099cc;
	overflow: hidden;
	position: relative;
}
.boxgrid img{
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}

.boxgrid p
{
color:#fff;
padding:0 4px;
margin: 0 !important;
margin-bottom:5px !important;
line-height:1.2em;
font-size:1.1em;
}

p.copyright
{
color:#fff;
text-align:center;
text-shadow:#272727 0 1px 1px
}

.portfolio
{
text-align:center;
}

/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 700px; 
    height:500px; 
float:left;
} 
 
/* 

    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable .page { 
    float:left; 
    width: 700px; 
    height:500px; 

} 
 
/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}

.portfolio a.browse
{
float:left;
color:#fff;
width:18px;
height:18px;
display:block;
cursor:pointer;
margin-top:200px;
}



















/* right */
a.right 				{ margin-left:5px; background: url(/imgs/arrow-right.png); clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:0 18px; }
a.right:active 	{ background-position:0 0; } 


/* left */
a.left				{ padding-right:5px; background: url(/imgs/arrow-left.png) no-repeat; clear:right; margin-right: 0px;}
a.left:hover  		{ background-position:0 -18px; }
a.left:active  	{ background-position:0 0; }


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 














/* 
** Theme:    Definition
** Author:   Phoenix Zero
** Document: Featured Content Style 2
*/

#featured-image {
	width: 700px;
	height: 420px;
	border: solid #333 1px;
	background-color: #111;
	overflow: hidden;
margin:auto;
}
			
.slide { 
	width: 700px;
	height: 420px !important;
	background-color: #111;
	overflow: hidden;
	position: relative;
}

.slide img { 
	position: absolute; 
	top: 0px; 
	left: 0px; 
border:0;
}

.slide#first {
	display: block;
}

.caption-bottom, .caption-top {
	position: absolute;
	background-image: url(/imgs/caption_bg.png);
	height: 50px;
	width: 680px;
	padding: 11px 10px 10px 10px;
color:#fff;
fonz-size:1.1em;
}

.caption-bottom img, .caption-top img {
	position: static;
	margin-top: -3px;
	margin-right: 3px;
	margin-bottom: -3px;
}

.caption-bottom
{
border-top: solid #333 1px;
}

.caption-top
{
border-bottom: solid #333 1px;
}

.caption-bottom, .caption-top {
	top:430px;
	left: 0px;
}

.caption-top {
	height: 16px;
	top: -38px;
}

.caption-description {
	float: left;
	width: 550px;
}

.caption-details {
	float: right;
	padding-left: 15px;
	padding-right: 5px;
	width: auto;
color:#fff;
}

.caption-title {
	float: left;
	font-weight: bold;
	width: auto;
}

.caption-prev {
	width: 39px;
	height: 39px;
	float: left;
	background-image: url(/imgs/arrow_left.png);
	background-repeat: no-repeat;
	margin-right: 20px;
	display: block;
	cursor: pointer;
}

.caption-prev:hover, .caption-prev:focus {
	background-image: url(/imgs/arrow_left_hover.png);
}

.caption-next {
	width: 39px;
	height: 39px;
	float: right;
	background-image: url(/imgs/arrow_right.png);
	background-repeat: no-repeat;
	display: block;
	cursor: pointer;
}

.caption-next:hover, .caption-next:focus {
	background-image: url(/imgs/arrow_right_hover.png);
}