/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td 
{ margin : 0; padding : 0; }

/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size : 100%; }

/* Removes list-style from lists */
ol,ul { list-style : none; }

/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{ font-style : normal; font-weight : normal; }

/* Removes list-style from lists */
table { border-collapse : collapse; border-spacing : 0; }

/* Removes border from fieldset and img */
fieldset,img { border : 0; }

/* Left-aligns text in caption and th */
caption,th { text-align : left; }

/* Removes quotation marks from q */
q:before, q:after { content :''; }



/* layout.css */

html 	{
	text-align : center;
}

body {
	text-align : left;
	font-family: georgia,sans-serif;
	font-size: 17px;
}

.wrapper {
	position:absolute;
	width : 800px;
	height:600px;
	top:0;
	left:50%;
	margin-left:-400px;
}
#wrapper_index {
	background: url(../images/index.gif) no-repeat;
}
#wrapper_social_networking{
	background: url(../images/social_networking.gif) no-repeat;
}
#wrapper_mobile_devices{
	background: url(../images/mobile_devices.gif) no-repeat;
}
#wrapper_website {
	background: url(../images/website.gif) no-repeat;
}
#wrapper_shopping_cart {
	background: url(../images/shopping_cart.gif) no-repeat;
}
#wrapper_branding {
	background: url(../images/branding.gif) no-repeat;
}
#wrapper_about_us {
	background: url(../images/about_us.gif) no-repeat;
}
#wrapper_contact_us {
	background: url(../images/contact_us.gif) no-repeat;
}
#wrapper_index_real {
	position:absolute;
	width : 800px;
	height:600px;
	top:0;
	left:50%;
	margin-left:-400px;
	background: url(../images/index_real.jpg) no-repeat;
	display:none;
}
#logo{
	background:url(../images/logo1.jpg) no-repeat #FFF;
	width:349px;
	height:58px;
}

#sites{
	background: url(../images/sites.png) no-repeat;
	position: absolute;
	width: 339px;
	height: 388px;
	left: 440px;
	top: 15px;
}

/****** Nav information ******/ 
#subnav_oneline{
	position: absolute;
	top: 470px;
	left: 10px;
}
#subnav_oneline ul{
	list-style:none;
}
#subnav_oneline ul li{
	height:60px;
	width:76px;
	float:left;
}
#subnav_oneline ul li:hover{
	background-position:0 -60px;
}
#subnav_oneline ul li a{
	display: block;  height: 60px;
	
}
.btn{
	height: 60px;
	width: 60px;
}
#sn{
	background:url(../images/sn.png) no-repeat;
}
#wd{
	background:url(../images/wd.png) no-repeat;
}
#sc{
	background:url(../images/sc.png) no-repeat;	
}
#br{
	background:url(../images/br.png) no-repeat;	
}
#md{
	background:url(../images/md.png) no-repeat;	
}
#cu{
	background:url(../images/cu.png) no-repeat;	
}
#au{
	background:url(../images/au.png) no-repeat;	
}

#social-networking{
	background:url(../images/social-networking-sm.png) no-repeat;
}

#website-development{
	background:url(../images/web-dev-sm.png) no-repeat;
}
#shopping-cart{
	background:url(../images/shopping-cart-sm.png) no-repeat;	
}
#branding{
	background:url(../images/branding-sm.png) no-repeat;	
}
#mobile-devices{
	background:url(../images/mobile-devices-sm.png) no-repeat;	
}
#request-quote{
	background:url(../images/request-quote-sm.png) no-repeat;	
}
#about-us{
	background: url(../images/about-us-sm.png) no-repeat;
}
#contact-us{
	background: url(../images/contact-us-sm.png) no-repeat;
}
/* This is the logo link clickable area */
#logo_zone {
position: absolute;
top: 250px;
left: 69px;
height: 90px;
width: 50px;
background-color: transparent;
}

/****** Non content information *******/
#logo_main{
	background: url(../images/logo_main.png);
	position: absolute;
	top: 30px;
	left: 500px;
	width: 271px;
	height: 54px;
	display: block;
}
#subnav_spin{
	position: absolute;
	top: 450px;
	left: 10px;
	width: 200px;
}
#subnav_spin ul li{
	display: inline-block;
}
#subnav_spin ul li a{
	height: 60px
	width: 60px;
	display: inline-block;
}
#subnav_spin ul li:last-child {
	position: absolute;
	right: -60px;
	top: 30px;
}
.theone{
	outline: 4px solid #f4eb2c;
	-moz-outline-radius: 5px;
	outline-radius: 5px;
}
.title{
	position: absolute;
	top: 30px;
	left: 10px;
}
#social_networking_title{
	width: 261px;
	height: 104px;
	background: url(../images/social_networking_title.png) no-repeat;
}
#website_title{
	width: 277px;
	height: 104px;
	background: url(../images/website_title.png) no-repeat;
}
#shopping_cart_title{
	width: 318px;
	height: 106px;
	background: url(../images/shopping_cart_title.png) no-repeat;
}
#mobile_devices_title{
	width: 258px;
	height: 103px;
	background: url(../images/mobile_devices_title.png) no-repeat;
}
#branding_title{
	width: 322px;
	height: 105px;
	background: url(../images/branding_title.png) no-repeat;
}
#about_us_title{
	width: 263px;
	height: 117px;
	background: url(../images/about_ourselves_title.png) no-repeat;
}
#contact_us_title{
	width: 263px;
	height: 103px;
	background: url(../images/contact_us_title.png) no-repeat;
}
	
/****** Content information ******/
#content{
	position: absolute;
	top:160px;
	min-height: 244px;
	
	margin-left:35px;
	width:650px;
  	padding-top: 3px;
  	padding-bottom: 3px;

	border-right: 6px solid yellow;  
	border-left: 6px solid yellow; 
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	    
	-moz-background-clip: padding;
	background-clip: padding-box;  
	
	box-shadow: 8px 0 0  -2px #000, -8px 0 0  -2px #000;   
	-moz-box-shadow: 8px 0 0  -2px #000, -8px 0 0  -2px #000;   
	-webkit-box-shadow: 8px 0 0  -2px #000, -8px 0 0  -2px #000;  
	
	margin-left: 250px;
	width: 500px;
}
.home{
	margin-left: 35px;
	width: 650px;
}
#content_wrapper{
	padding:8px;
	background-color:#cdcdcd;
	/* all other browsers */
	opacity:0.95;
	/* IE */
	filter:alpha(opacity=95);
	min-height: 228px;
}
div#content_wrapper > p > a{
	color: #000;
	font-weight: bold;
}
	
#content p{
	margin-bottom:10px;
}
.bold{
	font-weight:bold;
}
#brackets{
	position:absolute;
	top:94px;
	left:50%;
	margin-left:-174px;
	width:548px;
	display:none;
}
#col1{
	width:234px;
	float:left;
}
#col2{
	width:234px;
	float:right;
}
#bracket_l{
	background:url(../images/bracket_l_big.png) no-repeat;
	width:29px;
	height:476px;
	position:absolute;
	top:0;
	left:193px;
}
#bracket_r{
	background:url(../images/bracket_r_big.png) no-repeat;
	width:29px;
	height:476px;
	position:absolute;
	top:0;
	right:207px;
}
.firstletter{
	font-size: 140%;
}
.normal{
	font-weight: normal;
}
.center{
	text-align: center;
}
span#link_title{
	float:right;
	margin-top:1.2em;
}
/*****  subnav *****/
ul#subhome {
	height:58px;
	width:480px;
	list-style: none;
	margin:0 auto;
}
ul#subhome li { display: inline; }
	
ul#subhome li a {
	display: block; float: left; height: 58px;width: 67px;
	background-image: url(../images/home_buttons.png); text-indent: -9999px;
}
	ul#subhome li a.wd_btn {
		background-position: 0 0;	
	}	
	ul#subhome li a.sn_btn {
		background-position: -68px 0;	
	}
	ul#subhome li a.sc_btn {
		background-position: -136px 0;	
	}
	ul#subhome li a.br_btn {
		background-position: -206px 0;	
	}	
	ul#subhome li a.md_btn {
		background-position: -275px 0;	
	}	
	ul#subhome li a.ao_btn {
		background-position: -345px 0;}	
	ul#subhome li a.cu_btn {
		background-position: -413px 0;	
	}	
	ul#subhome li a.wd_btn:hover, ul#subhome li a.wd_btn:focus {
		background-position: 0 -58px;	
	}
	ul#subhome li a.sn_btn:hover, ul#subhome li a.sn_btn:focus {
		background-position: -68px -58px;	
	}
	ul#subhome li a.sc_btn:hover, ul#subhome li a.sc_btn:focus {
		background-position: -136px -58px;	
	}
	ul#subhome li a.br_btn:hover, ul#subhome li a.br_btn:focus {
		background-position: -206px -58px;	
	}
	ul#subhome li a.md_btn:hover, ul#subhome li a.md_btn:focus {
		background-position: -275px -58px;	
	}
	ul#subhome li a.ao_btn:hover, ul#subhome li a.ao_btn:focus {
		background-position: -345px -58px;	
	}
	ul#subhome li a.cu_btn:hover, ul#subhome li a.cu_btn:focus {
		background-position: -413px -58px;	
	}
a { outline: none; }

/*****  about-ourselves *****/
#wrapper_about_us{
	position:absolute;
	width : 800px;
	height:600px;
	top:0;
	left:50%;
	margin-left:-400px;
	background: url(../images/about_us.gif) no-repeat;
}
#wrapper_about_us_real{
	position:absolute;
	width : 800px;
	height:600px;
	top:0;
	left:50%;
	margin-left:-400px;
	background: url(../images/about_us_real.jpg) no-repeat;
	display:none;
}
#brackets_au{
	position:absolute;
	top:225px;
	left:50%;
	margin-left:-144px;
	width:508px;
	display:none;
}
#bracket_l_au{
	background:url(../images/bracket_l_sm.png) no-repeat;
	width:20px;
	height:310px;
	position:absolute;
	top:0;
	left:193px;
}
#bracket_r_au{
	background:url(../images/bracket_r_sm.png) no-repeat;
	width:20px;
	height:310px;
	position:absolute;
	top:0;
	right:207px;
}
#content_about_us{
	position: absolute;
	left:50%;
	top:232px;
	margin-left: -134px;
	width: 444px;
	height: 250px;
	padding:30px 22px 20px 22px;
	background-color:#cdcdcd;

	/* Mozilla */
	-moz-border-radius: 10px;
	/* Safari, Chrome, etc */
	border-radius: 10px;
	/* all other browsers */
	opacity:0.95;
	/* IE */
	filter:alpha(opacity=95)
}
#brandon{
	width: 206px;
	height: 250px;
	overflow: hidden;
	float: left;
}
#martin{
	width: 206px;
	height: 250px;
	overflow: hidden;
	float: right;
}
#dragon{
	width: 200px;
	height: 206px;
	background: url(../images/dragon.png) no-repeat;
}
#boar{
	width: 200px;
	height: 206px;
	background: url(../images/boar2.png) no-repeat;
}
.golden{
	border: 3px solid #f4eb2c;
	border-radius: 5px;
}
.subnav_branding{
	background-color:#000;
	width: 100%;
	text-align: center;
}
.subnav_branding ul li{
	display: inline-block;
	width: 110px;
}
.subnav_branding ul li a:link{
	color:#fff;
	text-decoration: none;
}
.subnav_branding ul li a:hover{
	color:#f4eb2c;
}
.subnav_branding ul li a:visited { 
	color: #fff;
	text-decoration: none;
}
.photo{
	float: left;
	padding-right: 8px;
}
.larger{
	font-size: 20px;
}