/* Safari Hacks */
*:focus {
outline: 0;
}

textarea {
  resize: none;
}

body {
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 1em;
  margin: 0 0 0 0;
  background: #000000 url('images/body_bg.gif') repeat-x;
}

img {
  border-style: none;
}

ul, li {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

li {
  list-style: none;
}

a, a:hover, a:visited {
  color: #000000;
  text-decoration: none;
}

a.ulink {
  text-decoration: underline;
}

a.ulink:hover {
  text-decoration: none;
}

a.link:hover {
  text-decoration: underline;
}

.head-2 a {
  color: #ceedfc;
}

.head-2 a:visited {
  color: #ceedfc;
}

#page {
  width: 100%;
  display: table;
  height: 1282px;
  margin-left: auto;
  margin-right: auto;
  background: url('images/page_bg.jpg') no-repeat top;
}

#page-header {
  width: 1008px;
  height: 152px;
  margin: 0 auto 0 auto;
  padding: 34px 0 0 0;
}

.blackwave-logo img, .blackwave-logo a, .blackwave-logo {
  display: block;
  width: 425px;
  height: 147px;
  float: left;  
}

.header-text{
  width: 550px;
  height: 65px;
  float: left;
  margin: 20px 0 0 15px;
  color: #FFFFFF;
}

.header-text h1{
  padding:0px;
  float: left;
  margin: 0px;
  font-size: 1.4em;
  line-height: 1.5em;
  font-weight: normal;
}

.head-2 {
  color: #ceedfc;
}

#page-top {
  width: 998px;
  height: 407px;
  margin: 0 auto 0 auto;
}

.page-top-feat {
  height: 325px;
  width: 100%;
}

.video {
  margin-left: 48px;
  width: 620px;
  float: left;
}

.note {
  width: 310px;
  height: 316px;
  float: left;
  position: relative;
  left: -6px;
  z-index: 10;
}

.note img {
  width: 30px;
  height: 252px;
  float: left;
}

.note .note-text-title {
  font-size: 1.5em;
  line-height: 1.1em;
  text-align: center;
  margin: 20px 0 0 32px;
  width: 250px;
  height: 60px;
}

.note .note-text-foot {
  font-size: 1.5em;
  line-height: 1.1em;
  text-align: center;
  margin: 0 0 0 40px;
  width: 250px;
  height: 65px;
}

.note .note-text {
  font-family: Georgia;
  font-size: 1.05em;
  line-height: 1.7em;
  text-align: center;
  padding: 0 0 0 0;
  width: 280px;
  height: 215px;
}

#page-top .skype {
  width: 156px;
  height: 40px;
  float: left;
  font-size: 18px;
  line-height: 40px;
}

#page-top .skype a, #page-top .phone span, #page-top .email a {
  float: left;
}

#page-top .phone {
  width: 170px;
  height: 40px;
  float: left;
  font-size: 18px;
  line-height: 40px;
}

#page-top .email {
  width: 400px;
  height: 40px;
  float: left;
  font-size: 18px;
  line-height: 40px;
}

.page-top-links {
  margin-left: 52px;
  height: 40px;
}

.page-top-links a {
  display: block;
}

#page-middle {
  width: 998px;
  height: 75px;
  margin: 0 auto 0 auto;
  padding: 0 0 0 120px;
  color: #FFFFFF;
  font-size: 1.3em;
}

#page-bucket {
  width: 998px;
  height: 305px;
  margin: 0 auto 0 auto;
  font-family: Georgia;
  font-size: 1em;
  line-height: 1.3em;
}

#page-bucket a {
  display: block;
}

.design-title h2{
  font-family: "Trebuchet MS", Arial;
  font-size: 1.5em;
  font-weight:normal;
  line-height: 1.2em;
  margin:0 0 0 135px;
  width: 150px;
  height: 85px;
  text-align: left;
}

.dev-title h2{
  font-family: "Trebuchet MS", Arial;
  font-size: 1.5em;
  font-weight:normal;
  line-height: 1.2em;
  margin:0 0 0 110px;
  width: 180px;
  height: 85px;
  text-align: left;
}

.marketing-title h2{
  font-family: "Trebuchet MS", Arial;
  font-size: 1.5em;
  font-weight:normal;
  line-height: 1.2em;
  margin:0 0 0 130px;
  width: 150px;
  height: 85px;
  text-align: left;
}

.design, .dev, .marketing {
  width: 270px;
  height: 150px;
  float: left;
  text-align: center;
  padding-left: 45px;
}

.marketing {
  padding-left: 50px;
}

.design a, .dev a, .marketing a {
  font-size: 1.3em;
  font-family: "Trebuchet MS", Arial;
}

.dev, .marketing {
}

.design-text, .dev-text, .marketing-text {
  height: 90px;
}

.design-text h2, .dev-text h2, .marketing-text h2{
  margin:0px;
  padding:0px;
  font-size: .9em;
  line-height: 1.3em;
  font-weight: normal;
}

#page-bottom {
  width: 950px;
  height: 300px;
  margin: 0 auto 0 auto;
  font-family: Georgia;
  font-size: 0.9em;
  color: #FFFFFF;
}

.footer-top {
  height: 220px;
  width: 100%;
}

.footer-top-text {
  margin:0px;
  padding:0px;
  width: 680px;
  height: 180px;
  float: left;
}

.footer-top-text a {
  color:#ffffff;
}

.footer-connect {
  height: 180px;
  width: 218px;
  float: left;
  padding: 0 0 0 30px;
}

.connect-title {
  font-family: "Trebuchet MS", Arial;
  font-size: 1.6em;
  padding-left: 7px;
}

.footer-connect a, .footer-connect a:hover, .footer-connect a:visited {
  display: block;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 1em;
  float: left;
}

.footer-connect a:hover {
  text-decoration: underline;
}

.skype-small {
  width: 218px;
  height: 42px;
}

.skype-small a.pic-link {
  width: 41px;
  height: 42px;
}

.skype-small a.text-link {
  height: 42px;
  line-height: 42px;
}

.phone-small {
  height: 34px;
  width: 218px;
  padding: 5px 0 0 0;
}

.phone-small img {
  width: 41px;
  height: 34px;
  float: left;
}

.phone-small div {
  padding: 6px 0 0 0;
  float: left;
}

.email-small {
  width: 400px;
  height: 30px;
}

.email-small a.pic-link {
  width: 41px;
  height: 30px;
}

.email-small a.text-link {
  height: 30px;
  line-height: 30px;
}

.footer-top-text h3 {
  margin:0px;
  padding:0px;
  font-weight:normal;
  font-size: 1.05em;
  line-height: 1.35em;
}

.footer-top-text-1 {
  height: 100px;
}

.footer-bot {
  width: 970px;
  height: 50px;
  text-align: center;
  margin:0px;
  padding:0px;
}

.footer-bot p{
  margin:0px;
  padding:0px;
  font-size: .8em;
  line-height: 2em;
}

.footer-bot a{
  color:#ffffff;
}

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 625px;
	height:320px;
}
/*
	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 the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}
/* single scrollable item */
.scrollable img {
	float:left;
	margin:0px;
	background-color:#fff;
	padding:2px;
	cursor:pointer;
	width:620px;
	height:316px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}
/* active item */
.scrollable .active {
	z-index:9999;
	position:relative;
}
/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;
}
/* prev, next, prevPage and nextPage buttons */
.controls {
	float:right;
	width:200px;
}
a.browse {
	background:url(images/scrollable/arrow/left.png) no-repeat;
	float:right;
	margin-top:-20px;
	position:relative;
	width:18px;
	height:18px;
	cursor:pointer;
	font-size:1px;
}
/* left */
a.left {
	margin-left: 0px;
}
a.left:hover {
	background-position:-18px 0;
}
a.left:active {
	background-position:-18px 0;
}
/* disabled navigational button */
a.disabled {
	visibility:hidden !important;
}
/* position and dimensions of the navigator */
.navi {
	float:left;
	margin-top:-18px;
	margin-left:5px;
	width:220px;
	height:20px;
}

/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(images/scrollable/arrow/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}