@charset "UTF-8";


/*-------------------*/
/* = Initial Set Up= */
/*-------------------*/

body {
	margin:20px;
	width:1189;
	background-color: #ffffff;
	}

img {
	border:0;
	}


/*--------------------------*/
/* = Typography Standards = */
/*--------------------------*/

.textbutton {
	outline:none;
	background-color:#FFFFFF;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#333333;
	padding: 0px;
	font-variant: normal;
	margin-top: 2px;
	margin-right: 6px;
	margin-bottom: 1px;
	margin-left: 3px;
	border: 0px solid #FFFFFF;
	line-height: 1.4em;
	width: 90px;
	}
	
a.textbutton:hover {
	color:#333333;
	text-decoration:none;
	background-color:#CCCCCC;
	margin-left: 0px;
	border-top-width:2px;
	border-right-width: 6px;
	border-bottom-width:1px;
	border-left-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;	
	} 

a.textbutton:active {
	color:#333333;
	text-decoration:none;
	background-color:#999999;
	margin-left: 0px;
	border-top-width:2px;
	border-right-width: 6px;
	border-bottom-width:1px;
	border-left-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
	}

#head {
	font-family:Helvetica, Arial, sans-serif;
	font-size:19px;
	line-height:normal;
	color:#000000;
	background-color:#FFFFFF;
	font-weight: normal;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0;
	padding: 0;
	}

#sub {
	font-family:Helvetica, Arial, sans-serif;
	font-size:16px;
	line-height:1.4em;
	color:#000000;
	padding:0;
	background-color:#FFFFFF;
	margin-top: 8px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	}
	
#para {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	line-height:1.35em;
	color:#333333;
	padding:0;
	background-color:#FFFFFF;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
	}
#body {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	line-height:1.35em;
	color:#333333;
	padding:0;
	background-color:#FFFFFF;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0;
	}


#snailtext {
	font-family:Helvetica, Arial, sans-serif;
	font-size:11px;
	line-height:1.6em;
	color:#333333;
	margin:0;
	padding:0;
	background-color:#FFFFFF;
	}

.hyper {
	outline:none;
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#3399FF;
	line-height: 1.4em;
	font-weight: normal;
	padding: 0px;
	text-decoration: none;
	}
	
a.hyper:hover {
	color:#297CD2;
	font-weight: normal;
	font-size: 12px;
	text-decoration: none;
	} 

a.hyper:active {
	color:#1B538D;
	font-weight: normal;
	font-size: 12px;
	}


/*-----------------------*/
/* = Main architecture = */
/*-----------------------*/

#wrap-a{
	width:1166px;
	height:605px;
	}

#column-menu {
	height:540px;
	width: 165px;
	background-color: #ffffff;
	float: left;
	margin: 0px;
	}

#column-image {
	height:500px;
	width:320px;
	float: left;
	margin: 0px;
	padding-top: 0px;
	}

#column-text {
	height:350px;
	width:276px;
	margin-right:0px;
	margin-top:0px;
	float: left;
	color: #666666;
	padding: 24px 16px 16px;
	}

#column-about {
	height:500px;
	width:176px;
	float: left;
	padding-right: 0px;
	}

#column-video {
	height:500px;
	width:500px;
	float: left;
	padding-right: 0px;
	}

/*----------------------*/
/*Left Nav architecturet*/
/*----------------------*/

#box-logo  {
	width:165px;
	height:57px;
	background-color: #ffffff;
	float: left;
	margin: 0px;
	}

#box-button  {
	width:165px;
	height:18px;
	background-color: #ffffff;
	float: left;
	margin-bottom: 5px;
	}
#box-about {
	width:165px;
	height:75px;
	background-color: #ffffff;
	float: left;
	margin-bottom: 5px;
	display: block;
	margin-top: 0px;
	}

#box-port  {
	width:165px;
	height:400px;
	background-color: #ffffff;
	float: left;
	margin-bottom: 0px;
	}


/*-----------------------*/
/* = Base architecture = */
/*-----------------------*/

#base-wrap  {
	height:23px;
	width: 1146px;
	background-color: #ffffff;
	float: left;
	margin: 0px;
	}
	
#base-contact  {
	height:23px;
	width: 68px;
	background-color: #ffffff;
	float: left;
	margin: 0px;
	}

#base-snailtype  {
	height:20px;
	width: 1,078px;
	background-color: #ffffff;
	float: left;
	margin: 0px;
	padding-top: 3px;
	padding-left: 2px;
	}	

#column-basebar {
	height:40px;
	width: 1146px;
	background-color:#999999;
	margin: 0px;
	float: left;
	}

/*----------------------------*/
/* = Port Page Architecture = */
/*----------------------------*/

#port-main {
	height:490px;
	width:490px;
	float: left;
	margin: 0px;
	padding-top: 0px;
	}	

#port-bar {
	height:527px;
	width:20px;
	float: left;
	padding-top: 0px;
	}	
	
#guts-logo {
	height:90px;
	width:260px;
	vertical-align: bottom;
	margin-right:200px;
	float: left;
	margin-top: 35px;
	margin-bottom: 15px;
	}

#guts-text {
	height:115px;
	width:280px;
	margin-right:190px;
	float: left;
	margin-bottom: 10px;
	}

#guts-thumbhead {
	height:28px;
	width:240px;
	margin-right:225px;
	float: left;
	margin-bottom:2px;
	}	


#guts-thumb {
	height:60px;
	width:60px;
	margin-right:5px;
	background-color:#CCCCCC;
	float: left;
	margin-bottom: 5px;
	}

#guts-split {
	height:5px;
	width:420px;
	margin-right:5px;
	background-color:#ffffff;
	float: left;
	}

#guts-thumblast {
	height:60px;
	width:60px;
	float: left;
	background-color:#CCCCCC;
	margin-right: 310px;
	margin-bottom: 5px;
	}

#guts-thumblastb {
	height:60px;
	width:60px;
	float: left;
	background-color:#CCCCCC;
	margin-right: 290px;
	margin-bottom: 5px;
	}

#guts-base {
	height:90px;
	width:200px;
	vertical-align: bottom;
	margin-right:250px;
	float: left;
	margin-top:0px;
	margin-bottom: 20px;
	}
#box-link3 {
	height:15px;
	width:190px;
	margin-right:255px;
	float: left;
	margin-bottom:0px;
	margin-top: 5px;
	text-align: left;
	text-indent: 125px;
	}	

#guts-thumbf {
	height:45px;
	width:60px;
	margin-right:5px;
	background-color:#CCCCCC;
	float: left;
	margin-bottom: 5px;
	}

#guts-thumbflast {
	height:45px;
	width:60px;
	margin-right:5px;
	background-color:#ffffff;
	float: left;
	margin-right: 310px;
	margin-bottom: 5px;;
	}

#guts-textf {
	height:85px;
	width:280px;
	margin-right:190px;
	float: left;
	margin-bottom: 10px;
	}


/*-----------------------*/
/* = Sprite Management = */
/*-----------------------*/

.logo {
	display:block;
	width:165px;
	height:57px;
	text-indent:0pt;
	outline:none;
	background-image: url(images/logo.sprite.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	border-bottom-width:0px;
	border-top-width: 0px;
	}

.logo:hover {
	background-position: 0px -57px;
	}
	
.logo:active {
	background-position: 0px -114px;
	}

.port {
	display:block;
	width:165px;
	height:18px;
	text-indent:0pt;
	outline:none;
	background-image: url(images/portfolio.sprite.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	border-bottom-width:5px;
	}

.port:hover {
	background-position: 0px -23px;	
	}

.port:active {
	background-position: 0px -46px;
	}

.about {
	display:block;
	width:165px;
	height:18px;w
	text-indent:0pt;
	outline:none;
	background-image: url(images/about.sprite.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	border-bottom-width: 5px;
	border-top-width: 0px;
	}

.about:hover {
	background-position: 0px -23px;	
	}

.about:active {
	background-position: 0px -46px;
	}

.contact {
	display:block;
	width:68px;
	height:23px;
	text-indent:0pt;
	outline:none;
	background-image: url(images/contact.sprite.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	border-bottom-width: 0px;
	border-top-width: 0px;
	}

.contact:hover {
	background-position: 0px -23px;
	}
	
.contact:active {
	background-position: 0px -46px;
	}

/*-------------------*/
/* = Main Port Nav = */
/*-------------------*/

.buttonClass {
	display:block; 
	float: left;
	margin-bottom: 3px;
	margin-top: 0px;
	margin-right: 3px;
	outline:none; 
	border-bottom-width: 0px; border-top-width: 0px;
	}

.buttonClass #mb01 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.01.bet.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb01:hover {
    background-position: -125px 0px;
	}


.buttonClass #mb02 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.02.bnd.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb02:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb03 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.03.blak.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb03:hover {
    background-position: -125px 0px;
	}


.buttonClass #mb04 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.04.bor.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb04:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb05 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.05.cdnt.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb05:hover {
    background-position: -125px 0px;
	}


.buttonClass #mb06 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.06.ck.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb06:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb07 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.ndmc.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb07:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb08 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.08.dpro.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb08:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb09 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.07.ddrm.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb09:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb10 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.10.flurry.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb10:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb11 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.11.hnl.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb11:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb12 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.12.hh.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb12:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb13 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.pac.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb13:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb14 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.dbj.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb14:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb15 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.rag.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb15:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb16 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.333.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb16:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb17 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.17.sen.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb17:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb18 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.mtm.new.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb18:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb19 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.tpds.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb19:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb20 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.tas.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb20:hover {
    background-position: -125px 0px;
	}

.buttonClass #mb21 {
	width:120px; 
	height:85px;
	background-image:url(portfoliopages/mbsprites/mb.21.um.jpg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	}
	
.buttonClass #mb21:hover {
    background-position: -125px 0px;
	}

#box {
	height:85px;
	width:120px;
	background-color:#FFFFFF;
	margin-left:0px;
	float: left;
	margin-bottom: 3px;
	margin-top: 0px;
	margin-right: 3px;
	}
