html, body, h1, h2, h3, h4, h5, h6, p, form, ul, li, img {
	margin: 0;	padding: 0;
	font-family: helvetica, arial; font-size: 9pt;
	border: 0;
	list-style: none;
	outline: 0;
}

html {
	background: url('images/bg.png') center top #f4f4f4;
	height: 100%; width: 100%;
	overflow: hidden;
}

body {
	position: relative;
	width: 100%; height: 100%;
	overflow: hidden;
}

.width {
	position: relative;
	max-width: 1024px; height: 100%;
	margin: 0 auto;
}

::selection {
        background: transparent;
        }
::-moz-selection {
        background: transparent;
}

.iechromeframe {
	position: absolute;
	top: 50%; left: 50%; 
	margin: -80px 0 0 -200px;
}

.nopeiphone {
	position: absolute;
	top: 50%; left: 50%; 
	margin: -20px 0 0 -143px;
	width: 285px; height: 39px;
}

/* Logo */

#logo {
	position: absolute;
	top: -206px; left: 20px;
	width: 219px; height: 206px;
	overflow: hidden;
}

#logo h1 {
	display: none;
}

#logo img {
	opacity: 0;
	position: absolute;
	bottom: 18px; left: 10px;
	z-index: 2004;
}

#logo .ropefront {
	position: absolute;
	top: 0; left: 53px;
	z-index: 2003;
	width: 62px; height: 85px;
	background: url('images/logo/ropefront.png') top left no-repeat;
}

#logo .logoani {
	position: absolute;
	bottom: 19px; left: 10px;
	z-index: 2002;
	width: 197px; height: 133px;
	background: url('images/logo/logoani.png') -396px 0 no-repeat;
}

#logo .ropeback {
	position: absolute;
	top: 0; right: 53px;
	z-index: 2001;
	width: 60px; height: 85px;
	background: url('images/logo/ropeback.png') top left no-repeat;
}

#logo .shadow {
	position: absolute;
	top: -4px; left: 0;
	z-index: 2000;
	width: 219px; height: 206px;
	background: url('images/logo/shadow.png') top left no-repeat;
}

#logo .blocker1,
#logo .blocker2 {
	position: absolute;
	bottom: 40px;
	z-index: 2005;
	width: 300px; height: 300px;
	-webkit-transform: rotate(-52deg); 
	-moz-transform: rotate(-52deg);	
	*top: -300%; *left: -300%;
}

#logo .blocker1 {
	left: -207px;
}

#logo .blocker2 {
	right: -205px;
	-webkit-transform: rotate(-308deg); 
	-moz-transform: rotate(-308deg);	
}

/* Menu */
#menu {
	position: absolute;
	bottom: -100px; left: 50%;
	margin: 0 0 0 -262px;
	width: 526px;
	z-index: 8000;
}

.firefox #menu {
	margin:  0 0 0 -250px;
	width: 520px;
}

#menu .left {
	float: left;
	width: 55px; height: 52px;
	background: url('images/menu/left.png') top left repeat;
}

#menu .right {
	float: right;
	width: 55px; height: 52px;
	background: url('images/menu/right.png') top left repeat;
}

#menu .left img,
#menu .right img {
	cursor: pointer;
}

#menu .mmenu {
	position: relative;
	float: left;
	width: 416px;
	height: 52px;
	background: url('images/menu/bg.png') top left repeat;
}

.firefox #menu .mmenu {
	width: 410px;
}

#menu .mmenu ul {
	position: absolute;
	z-index: 8002;
	margin: 10px 0 0 0;
	height: 33px;
}

#menu .mmenu ul li {
	float: left;
	font-size: 11pt;
	line-height: 33px;
	font-family: 'Actor', sans-serif;
	padding: 0 5px;
}

#menu .mmenu ul li a {
	display: block;
	color: #000;
	text-decoration: none;
	text-shadow: 0px 1px 0px #fff;
	padding: 0 15px;
}

#menu .mmenu ul li a:hover {
	color: #666;
}

#menu .mmenu ul li.sel a {
	text-shadow: 0px -1px 0px #051c39;
}

#menu .mmenu ul li.sel a:hover {
	color: #fff;
}

#menu .mmenu .msel {
	top: 10px; left: 3px;
	position: absolute;
	z-index: 8001;
	min-width: 85px;
}

.firefox #menu .mmenu .msel .mleft {
	margin: 0 -3px 0 0;
}

#menu .mmenu .msel .mmiddle {
	margin: 0 -3px;
	height: 33px; width: 28px;
}

.ipad #menu .mmenu .msel .mmiddle,
.firefox #menu .mmenu .msel .mmiddle {
	margin: 0 -4px 0 -3px;
}

/* Loading */

#loading {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: url('images/loading/loading.gif') center center no-repeat;
	z-index: 99999;
}

/* Pages */
#pages {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	overflow: hidden;
	z-index: 1;
}

#pageswidth {
	position: absolute;
	top: 0; left: 0;
	width: 1000%; height: 100%;
	position: relative;
	z-index: 1;
}

#home,
#about,
#service,
#portfolio,
#blog,
#contact {
	float: left;
	position: relative;
	width: 10%; height: 100%;
}



/* Home */
#home .bg {
	background: url('images/home/bg.png') center center no-repeat;
	height: 100%; width: 100%;
	opacity: 0;
	position: absolute;
	top: 0; left: 0;
}

#home .imac {
	position: absolute;
	width: 560px; height: 435px;
	top: 50%; left: 50%;
	z-index: 1002;
	margin: -1000px 0 0 -280px;
	background: url('images/home/imac.png') top left no-repeat;
}

#home .imac .desktop {
	position: relative;
	top: 19px; left: 52px;
	width: 458px; height: 260px;
	background: url('images/home/imacdesktop.png') top left no-repeat;
}

#home .imac .desktop .dock {
	position: absolute;
	bottom: 0; left: 50%;
	margin: 0 0 0 -40px;
	width: 80px; height: 8px;
	overflow: hidden;
}

#home .imac .desktop .dock img {
	margin: 8px 0 0 0;
}

#home .imac .desktop .coda {
	position: absolute;
	top: 0; left: 0;
	width: 458px; height: 260px;
	opacity: 0;
	background: url('images/home/imaccoda.png') no-repeat;
}

#home .imacstand {
	position: absolute;
	width: 560px; height: 435px;
	top: 50%; left: 50%;
	z-index: 1001;
	margin: -880px 0 0 -82px;
	background: url('images/home/imacstand.png') top left no-repeat;	
}

#home .imacstand {
	position: absolute;
	width: 163px; height: 59px;
	top: 50%; left: 50%;
	z-index: 1001;
	margin: -880px 0 0 -82px;
	background: url('images/home/imacstand.png') top left no-repeat;	
}

#home .imacstandshadow {
	position: absolute;
	width: 440px; height: 34px;
	top: 50%; left: 50%;
	z-index: 1000;
	margin: 158px 0 0 -220px;
	background: url('images/home/imacstandshadow.png') top left no-repeat;
	opacity: 0;
}

#home .smokeleft {
	position: absolute;
	top: 50%; left: 50%;
	margin: -130px 0 0 -350px;
	width: 467px; height: 320px;
	background: url('images/home/smokeleft1.png');
	z-index: 1000;
	opacity: 0;
}

#home .smokeright {
	position: absolute;
	top: 50%; right: 50%;
	margin: -130px -350px 0 0;
	width: 467px; height: 320px;
	background: url('images/home/smokeright1.png');
	z-index: 1000;
	opacity: 0;
}

/* About */
#about #me {
	position: absolute;
	top: 50%; left: 50%;
	margin: -225px 0 0 -308px;
	width: 220px; height: 450px;
	background: url('images/about/pixelme.png') top right no-repeat;
	z-index: 1000;
}

#about .stats {
	position: absolute;
	top: 50%; left: 50%;
	margin: -189px 0 0 -100px;
	background: url('images/about/stats.png')no-repeat;
	padding: 4px 6px;
	width: 356px; height: 301px;
}

#about .stats li {
	padding: 0;
	text-align: right;
	font-family: 'Actor', sans-serif;
	font-size: 9pt;
	float: left;
	width: 70px; height: 39px;
	line-height: 43px;
}

#about .stats li.statsline {
	width: 250px;
	text-align: left;
	padding: 4px 0 0 10px;
}

#about .stats li.statsline img {
	margin: 1px 0 0 0;
	height: 33px;
}

#about .stats li.statsline .middle {
	width: 1px;
	height: 33px;
}

#about .more {
	position: absolute;
	top: 50%; left: 50%;
	margin: 80px 0 0 -92px;
	opacity: 0.5;
}

/* Portfolio */
#portfolio .next,
#portfolio .previous {
	position: absolute;
	left: 50%;
	margin: 0 0 0 -21px;
	cursor: pointer;
	z-index: 9999;
}

#portfolio .next {
	bottom: 135px;
}

#portfolio .previous {
	bottom: 76px;
	opacity: 0.5;
}

#portfolio .item {
	position: absolute;
	width: 768px; height: 600px;
	margin: -300px 0 0 -384px;
	top: 150%; left: 50%;
	text-align: center;
}

#portfolio .item .ipad {
	background: url('images/portfolio/ipad.png') top left;
	width: 611px; height: 459px;
	padding: 71px 78px 70px 79px;
}

#portfolio .item .iphone {
	background: url('images/portfolio/iphone.png') top left;
	width: 158px; height: 237px;
	float: left;
	position: absolute;
	top: 50%; left: 50%;
	margin: -300px 0 0 -98px;
	padding: 182px 17px 181px 20px;
}

#portfolio .item .spandoek,
#portfolio .item .flyers {
	width: 646px; height: 408px;
	position: absolute;
	top: 50%; left: 50%;
	margin: -204px 0 0 -323px;
}

/* Blog */
#blog .logob {
	position: absolute;
	top: 24px; left: 20px;
	width: 217px; height: 151px;
	background: url('images/logo/dsgn.us.b.png') top left no-repeat;
	z-index: 2002;
}

#blog #browser {
	position: relative;
	margin: 20px 20px 0 20px;
}

#blog #browser .top {
	position: relative;
	background: url('images/blog/browsertopbg.png');
	height: 54px;
}

#blog #browser .top .left {
	position: absolute;
	top: 0; left: 0;
	background: url('images/blog/browsertopleft.png');
	width: 243px; height: 54px;

}

#blog #browser .top .right {
	position: absolute;
	top: 0; right: 0;
	background: url('images/blog/browsertopright.png');
	width: 63px; height: 54px;

}

#blog #browser #web {
	background: #777;
	padding: 0 1px;
}

#blog #browser #web iframe {
	margin: 0; padding: 0;
	background: url('images/blog/bg.png');
	border: 0;
}

#blog #browser #web .soon {
	background: url('images/blog/bg.png') top center; 
	text-align: center; 
	padding: 137px 0 2000px 0;
}


/* Contact */

#contact img.test {
	position: absolute;
	top: 50%; left: 50%;
	margin: -250px 0 0 -384px;
}

#contact .types {
	position: absolute;
	top: 50%; left: 50%;
	width: 669px; height: 323px;
	margin: -200px 0 0 -335px;
}

#contact .types div {
	float: left;
	text-align: center;
	font-family: 'Actor', sans-serif;
	font-size: 8pt;
	text-shadow: 0px 1px 0px #fff;
	color: #494949;
}

#contact .types div img,
#contact .types div p {
	cursor: pointer;
}

#contact .types .wireless {
	width: 112px;
	margin: 146px 55px 0 38px;
}

#contact .types .wireless:hover .hover {
	background: url('images/contact/iphonehover.png');
}

#contact .types .wireless .click {
	position: absolute;
	top: 80px; left: 17px;
	opacity: 0; cursor: default;
}

#contact .types .digital {
	width: 259px;
	margin: 1px 17px 0 0;
}

#contact .types .digital:hover .hover {
	background: url('images/contact/ipadhover.png');
}

#contact .types .analog {
	width: 188px;
	margin: 146px 0 0 0;
}

#contact .types .analog:hover .hover {
	background: url('images/contact/letterhover.png');
}


#contact .types .analog .click {
	position: absolute;
	top: 137px; right: 20px;
	opacity: 0; cursor: default;
}

/* Form / Envelope */

#form {
	width: 100%; height: 100%;
}

#form .envelopefront {
	position: absolute;
	bottom: -500px; left: 50%;
	width: 665px; height: 390px;
	margin: 0 0 0 -332px;
	background: url('images/form/envelopefront.png') top left no-repeat;
	z-index: 9003;
}

#form .envelopeback {
	position: absolute;
	bottom: -500px; left: 50%;
	width: 665px; height: 390px;
	margin: 0 0 0 -332px;
	background: url('images/form/envelopeback.png') top left no-repeat;
	z-index: 9001;
}

#form .letter {
	position: absolute;
	bottom: -500px; left: 50%;
	width: 605px; height: 401px;
	background: url('images/form/letter.png') top left no-repeat;
	margin: 0 0 0 -302px;
	z-index: 9002;
}

#form .letter .close {
	position: absolute;
	top: -12px; right: -12px;
	width: 25px; height: 25px;
	background: url('images/form/close.png') no-repeat;
	cursor: pointer;
}

#form .letter .side1 {
	position: absolute;
	top:  18px; left: 18px;
	width: 281px; height: 381px;
	overflow: hidden;
	background: #fff;
	z-index: 9006;
}

#form .letter .side1 textarea {
	border: 1px solid #dadada;
	border-radius: 5px;
	background: #fff;
	width: 263px;
	height: 260px;
	outline: 0;
	color: #666;
	resize: none;
}

#form .letter .side1 textarea:focus {
	border: 1px solid #1884c1;
	color: #000;
	width: 463px;
}

#form .letter .side2 {
	position: absolute;
	top: 18px; right: 18px;
	width: 270px; height: 211px;
	padding: 170px 0 0 0;
}

#form .letter .side2 input {
	padding: 5px 10px;
	margin: 0 0 10px 0;
	color: #666;
	border: 1px solid #dadada;
	border-radius: 5px;
	background: #fff;
	width: 248px;
	outline: 0;
}

#form .letter .side2 #send {
	position: absolute;
	top: 4px; right: 4px;
	width: 88px; height: 111px;
	padding: 17px;
	background: url('images/form/sendbg.png') top left no-repeat;
}



#form .letter .side2 #send img {
	opacity: 0;
	cursor: pointer;
}

#form .letter .side2 input:focus {
	border: 1px solid #1884c1;
	color: #000;
}

#form .letter .line {
	position: absolute;
	top: 18px; left: 302px;
	/*width: 28px;*/ width: 2px; height: 354px;
	background: url('images/form/line.png') top left no-repeat;
	z-index: 9006;
}

#form .letter .side1 .message.error,
#form .letter .side2 .name.error,
#form .letter .side2 .email.error {
	border: 1px solid #c11860;
}

#form .delivered {
	position: absolute;
	bottom: -32px; left: 50%;
	margin: 0 0 0 -61px;
	background: url('images/form/delivered.png') no-repeat;
	width: 122px; height: 32px;
	z-index: 7010;
}

/* Footer */

#footer {
	position: fixed;
	bottom: -88px; left: 0;
	width: 100%; height: 88px;
	background: url('images/footer/bg.png');
	z-index: 7000;
	opacity: 0.6;
}

#footer h6 span {
	font-weight: normal;
}

#footer p {
	font-size: 8pt;
}

#footer a {
	color: #000;
	text-decoration: none;
}

#footer .left {
	position: absolute;
	top: 26px; left: 14px;
}

#footer .left .keydown {
	text-align: center;
	width: 75px;
}

.ipad #footer .left .keydown,
.firefox #footer .left .keydown {
	width: 80px;
}

#footer .left .keydown img {
	padding: 0 0 2px 0;
	cursor: pointer;
}

#footer .right {
	position: absolute;
	top: 24px; right: 174px;
	text-align: right;
	text-shadow: 0px 1px 0px #fff;
}

#footer .right2 {
	position: absolute;
	top: 30px; right: 104px;
	opacity: 0.6;
}

#footer .right3 {
	position: absolute;
	top: 38px; right: 14px;
	text-align: left;
	text-shadow: 0px 1px 0px #fff;
}

/* Tooltip */
.tooltip {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
}

#tooltip {
	position: absolute;
	z-index: 9999;
	background: url('images/tooltip.png') top center;
	height: 33px; line-height: 26px;
	padding: 0 6px;
	color: #adadad;
	text-shadow: 0px 1px 0px #000;
	font-family: 'Actor', sans-serif;
	display: none;
}

#tooltip.hover {
	position: absolute;
	top: 50%; left: 50%;
	margin: -90px 0 0 -22px;
}

#tooltip.vsf {
	bottom: 50px; right: 60px;
}