/*------------------------------------------------------------
NORMAL styles
-------------------------------------------------------------*/

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

a:focus, a:active, a { outline: none;}

/*------------------------------------------------------------
STRUCTURE styles
-------------------------------------------------------------*/

body {

background: #171717 url("../images/_site/body_bg.jpg") top left repeat-x;
color: #303030;
font-family: "Lucida Sans", Arial, Verdana, sans-serif;
}

#header {
background:url("../images/_site/header.png");	
width: 899px;
height: 100px;
position: relative;
margin:auto;
}

#wrapper {
width:900px;
height:100%;
margin:0px auto 0px;
position:relative;
overflow:hidden;
}

#mask {
width:200%;
height:100%;
background-color:#171717;
}

.item {
width:100%;
height:100%;
float:left;
background-color:#171717;
}

.clear {
clear:both;
}

#wrap1 {
width:900px;
margin: 0 auto;
margin-top: 105px;
}

#wrap2 {
width:900px;
margin: 0 auto;
margin-top: 105px;
}

#prevArrow
{
z-index:10;
display:block;
text-indent:-9999em;
width:39px;
height:36px;
background:url("../images/arrow_left.png")	no-repeat 0 0;
position:fixed;
top:490px;
left:0px;
overflow:hidden;
}

#prevArrow:hover
{
background:url("../images/arrow_left.png")	no-repeat -39px 0;
}
#prevArrow.selected
{
cursor: default;
background:url("../images/arrow_left.png")	no-repeat -79px 0;
}

#nextArrow
{
z-index:10;	
display:block;
text-indent:-9999em;
width:39px;
height:36px;
background:url("../images/arrow_right.png")	no-repeat -79px 0;
position:fixed;
top:490px;
right:0px;
overflow:hidden;
}

#nextArrow:hover
{
background:url("../images/arrow_right.png")	no-repeat -40px 0;
}
#nextArrow.selected
{
cursor: default;
background:url("../images/arrow_right.png")	no-repeat 0 0;
}

.description {
float: right;
width: 282px;
background-color: #171717;
margin: 10px;
height: 310px;
position: relative;
}
#project1, #project2, #project3, #project4, #project5, #project6, #project7,#project8, #project9, #project10, #project11, #project12, #project13, #project14, #project15, #project16,#project17, #project18, #project19, #project20, #project21, #project22, #project23,#project24, #project25, #project26, #project27, #project28, #project29, #project30{
width: 900px;
background-color: #303030;
float: left;
margin-top: 28px;
position: relative;
}

#project0, #project31{
width: 900px;
background-color: #77aacc;
float: left;
margin-top: 28px;
position: relative;
}

.project_solo {
width: 900px;
background-color: #303030;
float: left;
margin-top: 28px;
position: relative;
}

/*------------------------------------------------------------
NAVIGATION styles
-------------------------------------------------------------*/

.navigation {
position: absolute;
z-index: 10;
left: 10px;
width: 588px;
float: none;
margin-top: 10px;
}

.navigation .previous {
float: left;
text-align: left;	
}

.navigation .next {
float: right;
text-align: right;		
}

.navigation a {
width: 292px;
height: 310px;
}

.navigation a:hover.previous {
background: transparent url("../images/_site/slider_nav_left.png") left center no-repeat;
color: #fff;
padding: 0;
margin: 0;
}

.navigation a:hover.next {
background: transparent url("../images/_site/slider_nav_right.png") right center no-repeat;
color: #fff;
padding: 0;
margin: 0;
}

.navigation a span, .navigation a:hover span { 
display: none;
}

/*------------------------------------------------------------
SLIDER styles
-------------------------------------------------------------*/

div.scroller { 
width: 588px; 
height: 310px;
overflow: hidden;
float: right;
padding: 0;
margin: 10px 0 0 10px;
padding-bottom: 10px;
}

div.scroller div.section {
width: 588px;
height: 310px;
overflow: hidden;
float: left;
padding: 0;
margin: 0;
}

div.scroller div.content {
width: 10000px;
}

.active {
background-color: #000;
color: #fff;
}

/*------------------------------------------------------------
TEXT styles
-------------------------------------------------------------*/

h2 {
font-size: 15pt;
margin: 20px 0 10px 10px;
}
h3 {
font-size: 15pt;
margin: 5px 0 10px 10px;
}
h5 {
font-size: 15pt;
margin: 0 0 30px 0;
}
h6 {
font-size: 15pt;
margin: 0 0 10px 0;
}
.description p {
font-family:"Lucida Sans", Arial, Verdana, sans-serif;
font-weight: bold;
padding: 7.5px 15px 0 10px;	
line-height: 120%;
font-size:13px;
color:#303030;
}	

h4{
font-family:"Lucida Sans", Arial, Verdana, sans-serif;
padding: 0 10px 0 10px;
font-size:12px;
color:#666666;
text-align:left;
}	


#header ul {
position: absolute;
list-style: inside;
left: 705px;
top: 24px;
margin: 0;
padding: 0;
}

#header li {
margin: 3px 0 0 0;
padding: 0;
height: 23px;
}

#head_link_email a, #head_link_resume a {
display: block;
color: #77aacc;
font-weight: bold;
font-size: 11px;
height: 23px;
line-height: 23px;
width: 210px;
text-decoration: none;
text-indent: 37px;
}


#head_link_email a { background: url("../images/_site/head_link_email.gif") 0 0 no-repeat;}
#head_link_resume a { background: url("../images/_site/head_link_resume.gif") 0 0 no-repeat;}

#head_link_email a:hover, #head_link_resume a:hover { 
background-position: 0 -23px;
color: #fff;
}

.description a, .description a:visited { color: #666666; text-decoration: none;}
.description a:hover { color: #77aacc; }

/*------------------------------------------------------------
ACTION styles
-------------------------------------------------------------*/

.action {
top: 273px;
left: 0;
position: absolute;
margin-left: 10px;
}

.launch {
background: transparent url("../images/_site/launch.gif") 0 0 no-repeat;
float: left;
height: 22px;
position: relative;		
width: 67px;
}
a:hover.launch { background: transparent url("../images/_site/launch.gif") 0px -22px no-repeat;}

.launch span {display: none;}
/*------------------------------------------------------------
FOOTER styles
-------------------------------------------------------------*/

#footer {
clear:both;
padding-top:25px;
text-align: center;
margin-bottom: 20px;
}

#footer_nav {
width: 900px;
height: 90px;
background: url("../images/_site/footer.png");
margin: 20 0 20px 0; 
padding: 0;
position: relative;
}

#footer_nav li { 
margin: 0; 
padding: 0; 
list-style: none;
position: absolute;
top: 0;
text-align: center;
}

#footer_nav li, #footer_nav a {
height: 90px; 
display: block;
text-align: center;
}

#footer_nav #follow1 	{left: 0; width: 143px; overflow: hidden;}
#footer_nav #follow2	{left: 143px; width: 152px; overflow: hidden;}
#footer_nav #follow3	{left: 294px; width: 152px; overflow: hidden;}
#footer_nav #follow4	{left: 445px; width: 153px; overflow: hidden;}
#footer_nav #follow5	{left: 597px; width: 152px; overflow: hidden;}
#footer_nav #follow6	{left: 748px; width: 153px; overflow: hidden;}

#footer_nav #follow1 a:hover	{ background: transparent url("../images/_site/footer.png") 0px -90px no-repeat;}
#footer_nav #follow2 a:hover	{ background: transparent url("../images/_site/footer.png") -143px -90px no-repeat;}
#footer_nav #follow3 a:hover	{ background: transparent url("../images/_site/footer.png") -294px -90px no-repeat;}
#footer_nav #follow4 a:hover	{ background: transparent url("../images/_site/footer.png") -445px -90px no-repeat;}
#footer_nav #follow5 a:hover	{ background: transparent url("../images/_site/footer.png") -597px -90px no-repeat;}
#footer_nav #follow6 a:hover	{ background: transparent url("../images/_site/footer.png") -748px -90px no-repeat;}

#footer_nav a {
color: #fff;
padding-top: 70px;
text-decoration: none;
font-weight: bold;
font-size: 12px;
text-align: center;
}


.site_version a {
background: transparent url("../images/_site/version_link_arrow.gif") 50% right no-repeat;
color: #4a5558;
font-size: 10px;
font-weight: bold;
margin: 10px 30px 0 0;
padding: 0 8px 0 0;
text-decoration: none;
}

.site_version a:hover { 
background: transparent url("../images/_site/version_link_arrow_hover.gif") 50% right no-repeat;
color: #2dacfd;
border-bottom: 1px dotted #2dacfd;
}

/*----------------------------------------------
IMAGE REPLACEMENT styles
-----------------------------------------------*/

h2.swap { 
background-repeat: no-repeat; 
height: 24px; 
width: 262px;
}

h2.swap span { display: none;}

h2#skills { background: transparent url("../images/title/skills.gif") top left no-repeat;}
h2#experience { background: transparent url("../images/title/experience.gif") top left no-repeat;}
h2#about { background: transparent url("../images/title/about.gif") top left no-repeat;}

h2#title_31 { background: transparent url("../images/title/title_31.gif") top left no-repeat;}
h2#title_30 { background: transparent url("../images/title/title_30.gif") top left no-repeat;}
h2#title_29 { background: transparent url("../images/title/title_29.gif") top left no-repeat;}
h2#title_28 { background: transparent url("../images/title/title_28.gif") top left no-repeat;}
h2#title_27 { background: transparent url("../images/title/title_27.gif") top left no-repeat;}
h2#title_26 { background: transparent url("../images/title/title_26.gif") top left no-repeat;}
h2#title_25 { background: transparent url("../images/title/title_25.gif") top left no-repeat;}
h2#title_24 { background: transparent url("../images/title/title_24.gif") top left no-repeat;}
h2#title_23 { background: transparent url("../images/title/title_23.gif") top left no-repeat;}
h2#title_22 { background: transparent url("../images/title/title_22.gif") top left no-repeat;}
h2#title_21 { background: transparent url("../images/title/title_21.gif") top left no-repeat;}
h2#title_20 { background: transparent url("../images/title/title_20.gif") top left no-repeat;}
h2#title_19 { background: transparent url("../images/title/title_19.gif") top left no-repeat;}
h2#title_18 { background: transparent url("../images/title/title_18.gif") top left no-repeat;}
h2#title_17 { background: transparent url("../images/title/title_17.gif") top left no-repeat;}
h2#title_16 { background: transparent url("../images/title/title_16.gif") top left no-repeat;}
h2#title_15 { background: transparent url("../images/title/title_15.gif") top left no-repeat;}
h2#title_14 { background: transparent url("../images/title/title_14.gif") top left no-repeat;}
h2#title_13 { background: transparent url("../images/title/title_13.gif") top left no-repeat;}
h2#title_12 { background: transparent url("../images/title/title_12.gif") top left no-repeat;}
h2#title_11 { background: transparent url("../images/title/title_11.gif") top left no-repeat;}
h2#title_10 { background: transparent url("../images/title/title_10.gif") top left no-repeat;}
h2#title_09 { background: transparent url("../images/title/title_09.gif") top left no-repeat;}
h2#title_08 { background: transparent url("../images/title/title_08.gif") top left no-repeat;}
h2#title_07 { background: transparent url("../images/title/title_07.gif") top left no-repeat;}
h2#title_06 { background: transparent url("../images/title/title_06.gif") top left no-repeat;}
h2#title_05 { background: transparent url("../images/title/title_05.gif") top left no-repeat;}
h2#title_04 { background: transparent url("../images/title/title_04.gif") top left no-repeat;}
h2#title_03 { background: transparent url("../images/title/title_03.gif") top left no-repeat;}
h2#title_02 { background: transparent url("../images/title/title_02.gif") top left no-repeat;}
h2#title_01 { background: transparent url("../images/title/title_01.gif") top left no-repeat;}
h2#title_00 { background: transparent url("../images/title/title_00.gif") top left no-repeat;}


h3.swap { 
background-repeat: no-repeat; 
height: 24px; 
width: 262px;
}

h3.swap span { display: none;}

h3#title_1 { background: transparent url("../images/soft/soft_1.png") top left no-repeat;}
h3#title_2 { background: transparent url("../images/soft/soft_2.png") top left no-repeat;}
h3#title_3 { background: transparent url("../images/soft/soft_3.png") top left no-repeat;}
h3#title_4 { background: transparent url("../images/soft/soft_4.png") top left no-repeat;}
h3#title_5 { background: transparent url("../images/soft/soft_5.png") top left no-repeat;}
h3#title_6 { background: transparent url("../images/soft/soft_6.png") top left no-repeat;}

h5.swap { 
background-repeat: no-repeat; 
height: 24px; 
width: 300px;
}

h5.swap span { display: none;}
h5#title_1 { background: transparent url("../images/title/title_16.gif") top left no-repeat;}


h6.swap { 
background-repeat: no-repeat; 
height: 24px; 
width: 300px;
}

h6.swap span { display: none;}
h6#title_1 { background: transparent url("../images/title/title_17.gif") top left no-repeat;}
h6#title_2 { background: transparent url("../images/title/title_18.gif") top left no-repeat;}
/*------------------------------------------------------------
floating nav classes
-------------------------------------------------------------*/	
#floatingnav_down{ 
position:fixed; 
width:100%; 
bottom:0px; 
z-index:99;
background-color:#171717;
border-top:3px solid #77aacc;
height:1em;

}
#floatingnav_top{ 
position:fixed; 
width:100%; 
top:0px; 
z-index:99;
background-color:#171717;
border-bottom:3px solid #77aacc;
height:100px;

}
#floatingnav_down .menu{
width: 900px;
border-bottom:0px;
position: relative;
margin: auto;
}

#floatingnav_down .rights{
color:#bcbcbc;
float: right;
text-align:right;
width:160px;
font-size: 11px;
font-family: "Arial", Verdana, sans-serif;
}

#floatingnav_down .numbers{
width: 600px;
margin: auto;
float:left;
font-size: 11px;
}

#floatingnav_down .numbers a{
color:#777;
font-weight:normal;
text-decoration:none;
padding:0.273em;
cursor: pointer;
}

#floatingnav_down .numbers a:hover{
color:#fff;
background-color:#77aacc;
font-weight:normal;
text-decoration:none;
padding:0.273em;
}


#floatingnav_down .numbers .selected{
color:#fff;
background-color:#77aacc;
cursor: default;
}

#floatingnav_down .numbers span{
color:#ededed;
font-weight:normal;
text-decoration:none;
padding:0.273em;
cursor:default;
}

/*------------------------------------------------------------
CLEARFIX Hack
-------------------------------------------------------------*/		

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

a:focus, a:active, a { outline: none;}

/*------------------------------------------------------------
rollover
-------------------------------------------------------------*/	

/* BEGIN ROLLOVER FIRST CSS */
img { border:0px; }

.img_list {
display:inline;
float:left;
height:24px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}	

.image_1 a{
display:block; 
width:100px; 
height:66px; 
position:relative;
}	

.image_1 a .rollover {
display:block; 
position:absolute; 
top:0; 
left:0; 
width:100px; 
height:66px; 
background:url("../images/soft/twee_2.png");
cursor:pointer;
}

.image_2 a{
display:block; 
width:262px; 
height:24px; 
position:relative;
}	

.image_2 a .rollover {
display:block; 
position:absolute; 
top:0; 
left:0; 
width:262px; 
height:24px; 
background:url("../images/title/download_2.gif");
cursor:pointer;
}