@charset "utf-8";
/* CSS Document */
body
{
	background-color:#333333;
}
img
{
	border:none;
}
#wrapper
{
	margin: 0 auto;
	width:1024px;
}
#content
{
	width:100%;
	margin-top:-10px;
}
#shading
{
	width:1006px;
	position:absolute;
	float:left;
}
#logo
{
	margin:0px;
	width:346px;
	height:416px;
	position:absolute;
	margin-left:20px;
	margin-top:2px;
}
#intro
{
	margin:0px;
	width:660px;
	height:416px;
	position:absolute;
	top:0px;
	background-image:url(images/intro.png);
	background-repeat:no-repeat;
	float:left;
	clear:left;
	margin-left:366px;
}
#mcontainer
{
	position:absolute;
	top:230px;
	left:0px;
	margin:0px;
	width:660px;
}
.mask01
{
	display: block;
	background: url(images/blog.png) no-repeat;
	width:114px;
	float:left;
	height:46px;
	background-position:top left;
	margin-right:30px;
}
.mask01:hover, .mask02:hover, .mask03:hover
{
	background-position:bottom right;
}
.mask02
{
	display: block;
	overflow: hidden;
	background: url(images/about.png) no-repeat;
	width:113px;
	float:left;
	height:46px;
	background-position:top left;
}
.mask03
{
	display: block;
	overflow: hidden;
	background: url(images/contact.png) no-repeat;
	width:125px;
	float:left;
	height:46px;
	background-position:top left;
	margin-left:30px;
}
.othergraphics
{
	display: block;
	background: url(images/othergraphics.png) no-repeat;
	width:222px;
	float:left;
	height:46px;
	background-position:top left;
	margin-right:30px;
	float:right;
	margin-top:-40px;
}
.othergraphics:hover
{
	background-position:bottom right;
}

#bars
{
	position:absolute;
	top:332px;
	left:340px;
	width:235px;
}
#bars img
{
	padding-right:10px;
}

#portfolio01
{
	position:absolute;
	top:417px;
	width:1008px;
	float:left;
	height:322px;
	border-bottom:1px #666 solid;
	overflow:hidden;
	z-index:0;
}
.mask04, .mask05, .mask06, .mask07, .mask08, .mask09
{
	overflow: hidden;
	width:168px;
	float:left;
	height:161px;
	background-repeat:no-repeat;
	position:relative;
}
.mask04
{
	background-image: url(zoom/indusSprite.jpg);
	background-position:top left;
}
.mask05
{
	background-image: url(zoom/adviceSprite.jpg);
	background-position:-168px 0px;
}
.mask06
{
	background-image: url(zoom/wordcampSprite.jpg);
	background-position:-336px 0px;
}
.mask07
{
	background-image: url(zoom/bitfangSprite.jpg);
	background-position:-504px 0px;
}
.mask08
{
	background-image: url(zoom/meetguruSprite.jpg);
	background-position:-672px 0px;
}
.mask09
{
	background-image: url(zoom/usefulcreativitySprite.jpg);
	background-position:-840px 0px;
}
.mask04:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	float:left;
	position:relative;
	background-position:0px 0px;
	top:0px;
}
.mask05:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-161px;
	float:left;
}
.mask06:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-161px;
	float:left;
}
.mask07:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-161px;
}
.mask08:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-161px;
}
.mask09:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-161px;
}

.mask10, .mask11, .mask12, .mask13, .mask14, .mask15
{
	overflow: hidden;
	width:168px;
	float:left;
	height:161px;
	background-repeat:no-repeat;
	position:relative;
}
.mask10
{
	background-image: url(zoom/alphabetSprite.jpg);
	background-position:bottom left;
}
.mask11
{
	background-image: url(zoom/forwardfoodSprite.jpg);
	background-position:-168px -161px;
}
.mask12
{
	background-image: url(zoom/gnmallSprite.jpg);
	background-position:-336px -161px;
}
.mask13
{
	background-image: url(zoom/iolcpSprite.png);
	background-position:-504px -161px;
}
.mask14
{
	background-image: url(zoom/lovelinesSprite.jpg);
	background-position:-672px -161px;
	width:167px;
}
.mask15
{
	background-image: url(zoom/mosambeSprite.png);
	background-position:-839px -161px;
	width:168px;
}
.mask10:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	float:left;
	position:relative;
	background-position:bottom left;
	top:-161px;
}
.mask11:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-322px;
	float:left;
}
.mask12:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-322px;
	float:left;
}
.mask13:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-322px;
}
.mask14:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-322px;
}
.mask15:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-322px;
}
#portfolio02
{
	position:absolute;
	top:788px;
	width:1008px;
	float:left;
	height:322px;
	border-bottom:1px #666 solid;
	overflow:hidden;
	margin-bottom:40px;
	z-index:1;
}

.mask22, .mask23, .mask24, .mask25, .mask26, .mask27
{
	overflow: hidden;
	width:168px;
	float:left;
	height:161px;
	background-repeat:no-repeat;
	position:relative;
}
.mask22
{
	background-image: url(zoom/cradleSprite.png);
	background-position:top left;
}
.mask23
{
	background-image: url(zoom/sharefoundationSprite.jpg);
	background-position:-168px 0px;
}
.mask24
{
	background-image: url(zoom/gyroSprite.jpg);
	background-position:-336px 0px;
}
.mask25
{
	background-image: url(zoom/realmSprite.png);
	background-position:-504px 0px;
}
.mask26
{
	background-image: url(zoom/holidayexpressSprite.jpg);
	background-position:-672px 0px;
}
.mask27
{
	background-image: url(zoom/vorsatSprite.jpg);
	background-position:-840px 0px;
}
.mask22:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	float:left;
	position:relative;
	background-position:0px 0px;
	top:0px;
}
.mask23:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-161px;
	float:left;
}
.mask24:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-161px;
	float:left;
}
.mask25:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-161px;
}
.mask26:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-161px;
}
.mask27:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-161px;
}


.mask16, .mask17, .mask18, .mask19, .mask20, .mask21
{
	overflow: hidden;
	width:168px;
	float:left;
	height:161px;
	background-repeat:no-repeat;
	position:relative;
}
.mask16
{
	background-image: url(zoom/malaiSprite.jpg);
	background-position:bottom left;
}
.mask17
{
	background-image: url(zoom/maineSprite.jpg);
	background-position:-168px -161px;
}
.mask18
{
	background-image: url(zoom/investSprite.png);
	background-position:-336px -161px;
}
.mask19
{
	background-image: url(zoom/silentkrakenSprite.png);
	background-position:-504px -161px;
}
.mask20
{
	background-image: url(zoom/socialpotatoesSprite.png);
	background-position:-672px -161px;
	width:167px;
}
.mask21
{
	background-image: url(zoom/metacognitaSprite.png);
	background-position:-839px -161px;
	width:168px;
}
.mask16:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	float:left;
	position:relative;
	background-position:bottom left;
	top:-161px;
}
.mask17:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-322px;
	float:left;
}
.mask18:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-322px;
	float:left;
}
.mask19:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-322px;
}
.mask20:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-322px;
}
.mask21:hover
{
	width:1006px;
	height:322px;
	overflow:visible;
	position:relative;
	background-position:0 0;
	top:-322px;
}
#column01 a, #column02 a, #column03 a
{
	text-decoration:none;
	color:#81a9c2;
	border-bottom:1px solid;
}
#column01 a:hover, #column02 a:hover, #column03 a:hover
{
	text-decoration:none;
	color:#44a6e5;
}
#sectionTwo
{
	background-image:url(images/bottomback.jpg);
	background-repeat:no-repeat;
	position:absolute;
	top:1157px;
	width:1006px;
	height:416px;
	display:block;
	line-height:20px;
}
#sectionTwo h2
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#a8a8a8;
	text-shadow:-2px -3px 3px #272727;
	padding:20px;
	margin-bottom:-10px;
}
#column01
{
	float:left;
	width:293px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	margin-top:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#a8a8a8;
	text-shadow:-2px -2px 0px #272727;
	border-right:1px #575757 solid;
	display:block;
	height:290px;
	top:8px;
	position:relative;
}
#column02
{
	float:left;
	width:293px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	margin-top:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#a8a8a8;
	text-shadow:0px -2px 0px #272727;
	border-left:1px #272727 solid;
	border-right:1px #575757 solid;
	display:block;
	height:290px;
	top:8px;
	position:relative;
}
#column03
{
	float:left;
	width:293px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	margin-top:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#a8a8a8;
	text-shadow:2px -2px 0px #272727;
	border-left:1px #272727 solid;
	display:block;
	height:290px;
}
#column02contact
{
	float:left;
	width:296px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	margin-top:20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#a8a8a8;
	text-shadow:0px 2px 0px #272727;
	border-left:1px #272727 solid;
	border-right:1px #575757 solid;
	display:block;
	height:390px;
	top:18px;
	position:relative;
	margin-left:333px;
}
#column02contact h2
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#a8a8a8;
	text-shadow:2px 0px 3px #272727;
	padding-top:0px;
	margin-top:0px;
	padding-bottom:20px;
	margin-bottom:10px;
}
#column02contact h3
{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	color:#a8a8a8;
	text-shadow:2px 0px 3px #272727;
	padding-top:0px;
	margin-top:0px;
	padding-bottom:20px;
	margin-bottom:10px;
}
#column02contact a
{
	text-decoration:none;
	color:#81a9c2;
	border-bottom:0px dashed;
}
#column02contact a:hover
{
	text-decoration:none;
	color:#44a6e5;
}
#column03contact h2 a
{
	color:#1d1d1d;
	text-decoration:none;
	border-bottom:0px solid #81a9c2;
}
#column03contact h2 a:hover
{
	color:#ccc;
	text-decoration:none;
	text-shadow:0px 1px 2px #272727;
	border-bottom:0px solid #fff;
}
#column03contact
{
	float:left;
	width:296px;
	padding-left:20px;
	padding-right:10px;
	padding-bottom:20px;
	margin-top:37px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#a8a8a8;
	text-shadow:2px 2px 0px #272727;
	border-left:1px #272727 solid;
	display:block;
	height:390px;
	top:28px;
}
#divider
{
	background-image:url(images/divider.png);
	background-repeat:no-repeat;
	background-color:#333333;
	width:1006px;
	border:none;
	margin:0px;
	padding:0px;
	top:740px;
	position:absolute;
	float:left;
	height:48px;
	left:-365px;
}
#divider02
{
	background-image:url(images/divider.png);
	background-repeat:no-repeat;
	background-color:#333333;
	width:1006px;
	border:none;
	margin:0px;
	padding:0px;
	top:416px;
	position:absolute;
	float:left;
	height:48px;
	left:0px;
}
#divider03
{
	background-image:url(images/divider.png);
	background-repeat:no-repeat;
	background-color:#333333;
	width:1006px;
	border:none;
	margin:0px;
	padding:0px;
	top:1111px;
	position:relative;
	float:left;
	height:48px;
	left:0px;
}
#footer
{
	color:#CCC;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	position:absolute;
	top:1189px;
	padding-left:24px;
	padding-bottom:24px;
	float:left;
	clear:both;
	border-top:1px solid #0c0c0c;
	padding-top:24px;
	width:982px;
	display:block;
	background-color:#131313;
}
#footer a
{
	text-decoration:none;
	color:#999;
	border-bottom:1px solid;
}
#footer a:hover
{
	text-decoration:none;
	color:#fff;
}

<!-- Contact Box -->
#contactdetails a
{
	text-decoration:none;
	color:#81a9c2;
	border-bottom:1px solid;
}
#contactdetails a:hover
{
	text-decoration:none;
	color:#44a6e5;
}
#contactdetails
{
	width:250px;
	height:416px;
	position:absolute;
	margin-left:0px;
	margin-top:0px;
	top:464px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#a8a8a8;
	text-shadow:2px 2px 0px #272727;
	line-height:1.5em;
	padding-left:0px;
}
#contactdetails h2
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#a8a8a8;
	text-shadow:2px 3px 3px #272727;
	padding-top:0px;
	margin-top:0px;
	padding-bottom:20px;
	margin-bottom:10px;
	margin-left:-3px;
}
#introContact
{
	margin:0px;
	width:1006px;
	height:725px;
	position:absolute;
	top:0px;
	float:left;
	clear:left;
	background-image:url(images/contactback.jpg);
	background-repeat:no-repeat;
}
/* === form div and elements ======================================= */

#form-div { 
  font-family:Arial, Helvetica, sans-serif;
  width : 300px;
  line-height :1.7em;
  float:left;
  margin-left:0px;
  margin-top:12px;
  position:absolute;
  padding-left:0px;
  padding-top:20px;
  height:666px;
  border-top:0px solid #000;
	font-size:12px;
	color:#a8a8a8;
	/*background:transparent url(../../../images/stick.png) repeat-x;*/
}
#form-div p a
{
	text-decoration:none;
	color:#81a9c2;
	border-bottom:1px solid;
}
#form-div p a:hover
{
	text-decoration:none;
	color:#44a6e5;
}

#form-div p.form-footer {
  margin : -35px 2px 20px 13px;
 }

#form-div p.form-footer a { 
  color : #9f9f9f; 
}

#form-div p.form-footer a:hover, #form-div p.form-footer a:focus, #form-div p.form-footer a:active { 
  color : #000; 
  text-decoration : none; 
}

#form-div p.form-footer a:focus, #form-div p.form-footer a:active { 
  background-color : #eee; 
}


/* === form div link styles ======================================== */

#form-div a { 
  color : #9f9f9f; 
}
  
#form-div a:hover, #form-div a:focus, #form-div a:active { 
  color : #000; 
  text-decoration : none; 
}

#form-div a:focus, #form-div a:active { 
  background-color : #eee; 
}


/* === success and error message/results box ======================= */

#form-div p.success, #form-div p.error, #form-div p.center { 
  color : #999999;
  /* color : #000; (lite colors option - uncomment to use) */
  padding :10px; 
  border : 0px solid #525252; 
  background-color : #000000;
  /* background-color : #d6e3ba; (lite colors option - uncomment to use) */
  margin-left : 12px;
  text-align : left;
  width:240px;
  text-transform:none;
}

#form-div p.error { 
  background-color : #000000; 
  /* background-color : #edbaba; (lite colors option - uncomment to use) */
}

#form-div p.error a, #form-div p.success a {
	text-decoration:none;
	color:#81a9c2;
}

#form-div p.center {
  text-align : center;
  background-color : #000000;
  color : #999999;
  margin-top : -3px;
  padding : 0px 4px; 
}

#form-div p.error a:hover, #form-div p.error a:focus, #form-div p.error a:active, 
#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
	text-decoration:none;
	color:#44a6e5;
	border:none;
}

#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
	text-decoration:none;
	color:#44a6e5;
	border:none;
}


/* === structural form elements ==================================== */

form#gbcf-form { }

fieldset.main-set,
fieldset.req-set,
fieldset.opt-set { 
  padding : 5px;
}


/* === textural form elements ====================================== */

#form-div legend { 
  font-weight : normal;
  font-size:14px;
}

#form-div legend span { }

legend.main-legend { 
  color : #b8b8b8;
  font-size : 14px;
  margin-left:2px;
}

legend.req-legend,
legend.opt-legend { 
  color : #777;
}

legend.main-legend span { }
legend.main-legend { }

legend.req-legend span { }
legend.req-legend {
  margin-left : 0px;
}

legend.opt-legend span { }
legend.opt-legend { 
  margin-left : -2px;
}

label.req-label, label.opt-label {
  color : #9f9f9f;
}

label.opt-label.check {
  float : left;
  padding : 0;
  margin : 1px 4px;
  cursor : pointer;
}

label.opt-label.main-label {
  margin : 0 2px;
  font-weight : normal;
  font-size:12px;
}

label.opt-label.main-label span {
  font-weight : normal;
  color : #9f9f9f;
}

label.opt-label.main-label span.req, label span.req  {
  font-weight : normal;
  color : #9f9f9f;
}

label.req-label.explain {
  color : #9f9f9f;
  font-size : .8em;
}

label.req-label.explain:hover {
  color : #9f9f9f;
}

/* === control and interface form elements ========================= */
/*
  note: In this section you will see the hover/focus styles for the 
  inputs. For example: input:hover, input:focus. You will also see 
  these names applied as classes: input.hover, input,focus, for 
  example. This is not done by mistake. Those classes are needed for 
  the JavaScript focus script (files/focus.js) for IE 7 and older.
*/

input.text-long.address, input.text-long.address:hover, input.text-long.address:focus,
input.text-long.address.hover, input.text-long.address.focus {
  border-bottom : 0;
  margin-bottom : 0;
  padding-bottom : 2px;
  border-bottom : 0px dotted #525252;
  color:#b8b8b8;
}

input.text-long.address2, input.text-long.address2:hover, input.text-long.address2:focus,
input.text-long.address2.hover, input.text-long.address2.focus {
  border-top : 0;
  margin-top : 0;
  padding-top : 2px;
  border : 0px dotted #525252;
  color:#b8b8b8;
}

input.checkbox {
  border : 1px solid #525252;
  width : .9em;
  height : .9em;
  padding : 0;
  margin-left : 3px;
  cursor : pointer;
}

input.checkbox:hover, input.checkbox.hover,
input.checkbox:focus, input.checkbox.focus {
  border : 1px solid #525252;
}

input.text-short, 
input.text-med, 
input.text-long,
select.select,
textarea.textarea {
  font-family:Arial, Helvetica, sans-serif;
  border-top : 1px solid #000000;
  border-bottom: 1px solid #525252;
  border-left:none;
  border-right:none;
  background-color : #1a1a1a;
  cursor : text;
  padding : 1px 2px;
  font-size:12px;
  color:#b8b8b8;
}

select.select {
  padding : 1px 0;
  border-left:none;
  border-right:none;
  border-top : 1px solid #000000;
  border-bottom: 1px solid #525252;
}

input.text-short {
  width : 100px;
}

input.text-med {
  width : 250px;
}

input.text-long {
  width : 250px;
}

textarea.textarea {
  width : 250px;
  height : 100px;
}

select.select {
  cursor : pointer;
  width:254px;
  border-left:none;
  border-right:none;
  border-top : 1px solid #000000;
  border-bottom: 1px solid #525252;
  padding-left:4px;
  padding-right:4px;
}
select.select option {
  cursor : pointer;
  width:254px;
  border:none;
  padding-left:4px;
  padding-right:4px;
  line-height:1.7em;
  padding-top:4px;
  padding-bottom:4px;
}

input.text-short:focus, input.text-short.focus, 
input.text-med:focus, input.text-med.focus,
input.text-long:focus, input.text-long.focus,
select.select:focus, input.select.focus,
textarea.textarea:focus, textarea.textarea.focus {
  background-color : #494949;
  color:#b8b8b8;
  border-left:none;
  border-right:none;
  border-top : 1px solid #000000;
  border-bottom: 1px solid #525252;
}

input.button { 
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  font-weight : normal;
  margin-top : 8px;
  margin-left:5px;
  padding : 1px 10px;
  cursor : pointer;
  float : left;
  clear : both;
  color : #000000;
}

input.button:hover, input.button.hover,
input.button:focus, input.button.focus {
  color : #333;
}

/* EOF - Created by Mike Cherim @ http://green-beast.com =========== */