/*////////// Body Elements //////////*/
body
{
background:url(../images/BG.jpg) repeat;
margin:0;
padding:0;
}

img
{
border:none;
padding:0;
margin:0;
}

h1
{
padding:0;
margin:0;
}

a
{
padding:0;
margin:0;
cursor:pointer;
}

a:visited
{
border:none;
outline:none;
}

a:link
{
border:none;
outline:none;
}

ul
{
padding:0;
margin:0;
}

li
{
padding:0;
margin:0;
list-style:none;
}

span
{
padding:0;
padding:0;
}

#ribbon
{
width:176px;
height:81px;
position:absolute;
top:0px;
left:10px;
margin:0;
padding:0;
z-index:1;
text-indent:-9000px;
cursor:pointer;
}

#ribbon a
{
background:url(../images/ribbon.png) no-repeat;
background-position:0px -81px;
width:176px;
height:81px;
padding:0;
margin:0;
display:block;
}

#ribbon a:hover 
{
background-position:0px 0px;
}


#slide-container
{
position:absolute;
top:50%;
height:32.5em;
margin-top: -16.25em; /*set to a negative number 1/2 of height*/
background:url(../images/slideBG.jpg) repeat;
padding:0;
overflow:hidden;
clear:left;		
width:100%;
}

#top-shadow
{
position:absolute;
top:0;
-moz-box-shadow: 0px 2px 8px #000; 
-webkit-box-shadow: 0px 2px 8px #000;
height:1px;
width:100%;
z-index:2;
padding:0;
margin-left:-8px;
}

#bottom-shadow
{
position:absolute;
top:100%;
-moz-box-shadow: 0px -2px 8px #000; 
-webkit-box-shadow: 0px -2px 8px #000;
height:1px;
width:100%;
padding:0;
margin-left:-8px;
}

#sliderBorders
{
position:relative;
margin:auto;
width:920px;
height:30px;
padding:0;
}

#leftBorder
{
background:url(../images/leftBorder.png) no-repeat;
position:absolute;
width:10px;
height:509px;
top:5px;
left:-18px;
}

#rightBorder
{
background:url(../images/rightBorder.png) no-repeat;
position:absolute;
width:10px;
height:509px;
top:5px;
left:928px;
}

#logo
{
background:url(../images/logo.png) no-repeat;
width:234px;
height:312px;
position:absolute;
margin:0;
padding:0;
top:95px;
left:343px;
}

/*////////// Navigation //////////*/

#navRight
{
position:absolute;
left:507px;
top:188px;
padding:0;
margin:0;
width:51px;
height:49px;
}

#navTop
{
position:absolute;
left:434px;
top:115px;
padding:0;
margin:0;
width:51px;
height:49px;
}

#navLeft
{
position:absolute;
left:361px;
top:188px;
padding:0;
margin:0;
width:51px;
height:49px;
}

#rightArrow
{
position:absolute;
margin:0;
padding:0;
left:557px;
top:179px;
overflow:hidden;
}

#rightArrow span
{
position:absolute;
text-indent:-9000px;
}

.right
{
position:relative;
left:-60px;
}

#topArrow
{
position:absolute;
margin:0;
padding:0;
left:421px;
top:54px;
overflow:hidden;
}

#topArrow span
{
position:absolute;
text-indent:-9000px;
}

.top
{
position:relative;
top:60px;
}

#leftArrow
{
position:absolute;
margin:0;
padding:0;
left:302px;
top:162px;
overflow:hidden;
}

#leftArrow span
{
position:absolute;
text-indent:-9000px;
}

.left
{
position:relative;
left:58px;
}


/*////////// Sliding Content //////////*/


.pane
{
overflow:hidden;		
clear:left;
position:relative;
width:940px;
height:520px;
margin:auto;
top:-30px;
z-index:0;
}


#content
{
width:2880px;
height:1530px;
margin:auto;
position:relative;
font-family:Arial, Helvetica, sans-serif;
}

.divBG
{
background:#1a1a1a;
display:block;
width:100%;
height:100%;
}

#nav
{
width:920px;
height:500px;
top:540px;
position:absolute;
left:960px;
padding:0;
margin-left:10px;
margin-right:10px;
}

#footerNav
{
position:relative;
margin:auto;
width:660px;
text-align:center;
padding:0;
top:468px;
font-size:11px;
color:#777;
}

#footerNav li
{
display:inline;	
padding:0;
}

#footerNav a
{
text-decoration:underline;
}

#copyright
{
position:relative;
margin:auto;
width:660px;
text-align:center;
padding:0;
top:473px;
font-size:11px;
color:#666;
}

#contact
{
position:absolute;
left:0;
height:500px;
width:920px;
padding:0;
top:540px;
margin-left:10px;
margin-right:10px;
}

#work
{
position:absolute;
left:1920px;
height:500px;
width:920px;
top:540px;
padding:0;
margin-left:10px;
margin-right:10px;
}

#about
{
position:absolute;
left:960px;
height:500px;
width:920px;
top:10px;
padding:0;
margin-left:10px;
margin-right:10px;
}

#returnLeft
{
background:url(../images/returnLeft.png) no-repeat;
width:91px;
height:61px;
position:absolute;
left:829px;
top:220px;
cursor:pointer;
z-index:1;
}

#returnRight
{
background:url(../images/returnRight.png) no-repeat;
width:91px;
height:61px;
position:absolute;
left:0px;
top:220px;
cursor:pointer;
z-index:1;
}

#returnTop
{
background:url(../images/returnTop.png) no-repeat;
width:145px;
height:41px;
position:absolute;
left:387px;
top:458px;
cursor:pointer;
z-index:1;
}

/*////////// Work Content //////////*/

#work
{
font-size:13px;	
}

.image-grid 
{
margin:0;
padding:0;
width:770px;
position:absolute;
left:95px;
top:96px;
height:355px;
z-index:0;
}

.image-grid:after 
{
content: "";
display: block;
height: 0;
overflow: hidden;
clear: both;
}

.image-grid li 
{
width: 152px;
float: left;
font-family: "Helvetica Neue", sans-serif;
height: 143px;
background:url(../images/siteBorder2.png) no-repeat;
margin-right:18px;
margin-left:18px;
margin-bottom:40px;
padding:0;
z-index:1;
}

.image-grid li strong 
{
display: block;
margin:auto;
padding:0;
text-align:center;
position:relative;
top:7px;
color: #fff;
padding:0;
margin:0;
}

.image-grid li a
{
opacity:.5;
padding:0;
margin:0;
}

.image-grid li a:hover
{
opacity:1;
padding:0;
margin:0;
}
#work fieldset
{
position:relative;
margin-top:5px;
margin-left:20px;
padding:0;
width:420px;
border:none;
font-weight:bold;
}

#filter
{
position:absolute;
left:91px;
top:68px;
margin:0;
padding:0;
z-index:1;
color:#999;
}

#work input
{
margin-top:10px;
padding:0;
}


#work li
{ 
list-style: none;
}

#work input, label
{
cursor: pointer;
}

#work img
{
border:none;
margin-left:5px;
margin-top:6px;
margin-bottom:0;
padding:0;
z-index:0;
}

#work strong
{
font-weight: normal;
color:#999;
font-size:12px;
text-shadow:0 0 3px #999;
padding:0;
margin:0;
margin-left:-16px;
}

/*////////// Work Hover Status //////////*/

.totemHover
{
position:absolute;
left:249px;
top:102px;
width:38px;
height:116px;
padding:0;
margin:0;
overflow:hidden;
}

#totemCaption
{
background:url(../images/flashDesign.png) no-repeat;
width:38px;
height:116px;
position:absolute;
display:block;
padding:0;
margin:0;
left:-38px;
}

.asHover
{
position:absolute;
left:437px;
top:102px;
width:38px;
height:116px;
padding:0;
margin:0;
overflow:hidden;
}

#asCaption
{
background:url(../images/webDesign.png) no-repeat;
width:38px;
height:116px;
position:absolute;
display:block;
padding:0;
margin:0;
left:-38px;
}

.beyondHover
{
position:absolute;
left:625px;
top:102px;
width:38px;
height:116px;
padding:0;
margin:0;
overflow:hidden;
}

#beyondCaption
{
background:url(../images/flashDesign.png) no-repeat;
width:38px;
height:116px;
position:absolute;
display:block;
padding:0;
margin:0;
left:-38px;
}

.drainrightHover
{
position:absolute;
left:813px;
top:102px;
width:38px;
height:116px;
padding:0;
margin:0;
overflow:hidden;
}

#drainrightCaption
{
background:url(../images/webDesign.png) no-repeat;
width:38px;
height:116px;
position:absolute;
display:block;
padding:0;
margin:0;
left:-38px;
}

.moxieHover
{
position:absolute;
left:249px;
top:285px;
width:38px;
height:116px;
padding:0;
margin:0;
overflow:hidden;
}

#moxieCaption
{
background:url(../images/webDesign.png) no-repeat;
width:38px;
height:116px;
position:absolute;
display:block;
padding:0;
margin:0;
left:-38px;
}

.russelHover
{
position:absolute;
left:437px;
top:285px;
width:38px;
height:116px;
padding:0;
margin:0;
overflow:hidden;
}

#russelCaption
{
background:url(../images/graphicDesign.png) no-repeat;
width:38px;
height:116px;
position:absolute;
display:block;
padding:0;
margin:0;
left:-38px;
}

.simplicitHover
{
position:absolute;
left:625px;
top:285px;
width:38px;
height:116px;
padding:0;
margin:0;
overflow:hidden;
}

#simplicitCaption
{
background:url(../images/flashDesign.png) no-repeat;
width:38px;
height:116px;
position:absolute;
display:block;
padding:0;
margin:0;
left:-38px;
}

.hangmanHover
{
position:absolute;
left:813px;
top:285px;
width:38px;
height:116px;
padding:0;
margin:0;
overflow:hidden;
}

#hangmanCaption
{
background:url(../images/webDesign.png) no-repeat;
width:38px;
height:116px;
position:absolute;
display:block;
padding:0;
margin:0;
left:-38px;
}

/*////////// Contact Content ////////// */

#mindBoxform
{
position:absolute;
left:260px;
top:85px;
font-size:16px;
color:#666;
}

#mindBoxform label
{ 
text-align:left;
display:block;
cursor:default;
margin-bottom:4px;
}	

input
{		
width:272px;
height:25px;
border:2px solid #2e2e2e;
background:#282828 url(../images/inputBG.jpg) repeat-x;
padding:5px 3px;
margin-bottom:14px;
font-size:16px;
color:#666;
}	

textarea
{ 
margin-bottom:17px; 
padding-left:4px;
padding-top:7px;
border:1px solid #999;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#666;
width:407px;
height:136px;
border:2px solid #2e2e2e;
background:#262626 url(../images/textareaBG.jpg) repeat-x;
height:136px;
}

#submit
{
position:absolute;
left:317px;
top:333px;
width:95px;
cursor:pointer;
border:none;
background:url(../images/submit.jpg) no-repeat;
width:98px;
height:33px;
}
   
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active {
border: 2px solid #295226;
}
    
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active {
border: 2px solid #522626;
}


/*////////// About Content ////////// */

#ryansPhoto
{
background:url(../images/ryanverdel.jpg) no-repeat;
width:339px;
height:422px;
position:absolute;
left:0;
top:78px;
}

#about p
{
width:400px;
padding:0;
margin:0;
font-size:12px;
font-weight:bold;
line-height:23px;
color:#6b6b6b;
letter-spacing:1px;
}

#about h1
{
position:absolute;
left:280px;
top:78px;
padding:0;
margin:0;
font-size:18px;
color:#888888;
letter-spacing:2px;
}

#about h2
{
position:absolute;
left:280px;
top:250px;
padding:0;
margin:0;
font-size:18px;
color:#888888;
letter-spacing:2px;
}

#about h3
{
position:absolute;
left:15px;
top:15px;
padding:0;
margin:0;
color:#afafaf;
font-size:18px;
font-weight:bold;
letter-spacing:2px;
}

#aboutMe
{
position:absolute;
left:280px;
top:111px;
}

#aboutDesign
{
position:absolute;
left:280px;
top:283px;
}

#skillLevels
{
background:url(../images/skillMeter.jpg) no-repeat;
position:absolute;
left:0px;
top:50px;
width:186px;
height:26px;
}

#ok
{
position:absolute;
left:16px;
top:7px;
padding:0;
margin:0;
}

#good
{
position:absolute;
left:72px;
top:7px;
padding:0;
margin:0;
}

#great
{
position:absolute;
left:133px;
top:7px;
padding:0;
margin:0;
}



#skillContainer
{
background:#2a2a2a;
position:absolute;
left:722px;
top:12px;
width:186px;
height:476px;
font-size:12px;
color:#999;
}

#HTML
{
position:absolute;
left:15px;
top:100px;
width:152px;
height:20px;
border:2px solid #898989;
}

#HTML h4
{
position:absolute;
left:-2px;
top:-20px;
padding:0;
margin:0;
}

#HTML span
{
background:#1d6aae;
display:block;
height:100%;
width:100%;
}


#JavaScript
{
position:absolute;
left:15px;
top:150px;
width:152px;
height:20px;
border:2px solid #898989;
}

#JavaScript h4
{
position:absolute;
left:-2px;
top:-20px;
padding:0;
margin:0;
}

#JavaScript span
{
background:#1d6aae;
display:block;
height:100%;
width:60%;
}

#PHP
{
position:absolute;
left:15px;
top:200px;
width:152px;
height:20px;
border:2px solid #898989;
}

#PHP h4
{
position:absolute;
left:-2px;
top:-20px;
padding:0;
margin:0;
}

#PHP span
{
background:#1d6aae;
display:block;
height:100%;
width:30%;
}

#AS
{
position:absolute;
left:15px;
top:250px;
width:152px;
height:20px;
border:2px solid #898989;
}

#AS h4
{
position:absolute;
left:-2px;
top:-20px;
padding:0;
margin:0;
}

#AS span
{
background:#1d6aae;
display:block;
height:100%;
width:70%;
}

#Photoshop
{
position:absolute;
left:15px;
top:300px;
width:152px;
height:20px;
border:2px solid #898989;
}

#Photoshop h4
{
position:absolute;
left:-2px;
top:-20px;
padding:0;
margin:0;
}

#Photoshop span
{
background:#2074be;
display:block;
height:100%;
width:100%;
}

#resumeResource
{
position:absolute;
left:15px;
top:340px;
display:block;
}

#resumeResource li
{
list-style:none;
padding:0;
margin-bottom:7px;
margin-top:7px;
}

#resumeResource a
{
text-decoration:none;
color:#999;
font-size:12px;
font-weight:bold;
}

#resumeResource a:hover
{
text-decoration:none;
color:#2074be;
font-size:12px;
font-weight:bold;
text-decoration:underline;
}

#resumeResource span
{
position:relative;
font-size:8px;
margin-left:3px;
top:-2px;
}

#resumeResource img
{
position:relative;
margin-left:3px;
}

#socialMedia
{
position:absolute;
left:15px;
top:424px;
width:160px;
height:70px;
list-style:none;
margin:0;
padding:0;
z-index:2;
}

#socialMedia li 
{
float:left;
width:40px;
margin:0;
padding:0;
}

#socialMedia li a 
{
display:block;
height:100%;
text-decoration:none;
width:40px;
height:40px;
padding:0;
margin:0;
}

#facebookLink
{
position:relative;
left:0;
}

#facebookLink a
{
background: url(../images/facebook.png) no-repeat;
background-position:0px -40px;
width:40px;
height:40px;
padding:0;
margin:0;
}

#facebookLink a:hover 
{
background-position:0px 0px;
}

#linkedInLink
{
position:relative;
left:17.5px;
}

#linkedInLink a
{
background: url(../images/linkedIn.png) no-repeat;
background-position:0px -40px;
width:40px;
height:40px;
padding:0;
margin:0;
}

#linkedInLink a:hover 
{
background-position:0px 0px;
}

#twitterLink
{
position:relative;
left:34.5px;
}

#twitterLink a
{
background: url(../images/twitter.png) no-repeat;
background-position:0px -40px;
width:40px;
height:40px;
padding:0;
margin:0;
}

#twitterLink a:hover 
{
background-position:0px 0px;
}