/*

vCard - CSS File

*/

body {
font-family:Verdana, Arial, Tahoma;
font-size:11px;
margin:0;
margin-top:5%;
padding:0;
color:#777777;
line-height:20px;
background-color:#626262;
background-image:url(../images/bg-body.gif);
background-repeat:repeat-x;
}
* {
margin:0;
padding:0;
}
*:focus {
outline:none; /* removes ugly dotted border but may make template more unsuable, up to you
if you want to keep it! */
}
.clr{clear:both}
form{margin:0; padding:0;}
hr {
border: 0;
color: #777777;
background-color: #777777;
height: 1px;
margin:10px 0px 6px 0px;
padding:0px;
}
/* heading */
h1{margin-bottom:12px; font-weight:normal;}
h2, h3, h4, h5 {margin-bottom:12px; font-weight:normal;}
h1 {font-size:24px; line-height:26px;}
h2 {font-size:18px; line-height:20px;}
h3 {font-size:16px; line-height:18px;}
h4 {font-size:14px; line-height:16px;}
h5 {font-size:14px; line-height:16px; margin:3px 0px; padding:0px;letter-spacing:1px;}

/* links */
a {color:#2d84b6;text-decoration:none;}
a:hover{color:#3a95ca; text-decoration:underline}
a img{border:none}
.imgleft{float:left; margin-right:10px; margin-top:5px; border:solid 1px #ddd}
.imgright{float:right; margin-left:10px; margin-top:5px; border:solid 1px #ddd}
/* lists, blockquotes and paragraphs */
p, ul, ol, blockquote {
font-size:11px;
line-height:18px;
margin-bottom:12px;
}
ul{
margin:12px 0 12px 40px;
}
ol {
margin:12px 0 12px 45px;
}
li ol,
li ul
{
font-size:1.0em;
list-style:square;
margin-bottom:0;
margin-top:0;
}
li ol {list-style:decimal;}
blockquote {
margin:25px 0 25px 0px;
padding:10px 20px 10px 35px;
font-style:italic;
background-image:url(../images/quote.gif);
background-repeat:no-repeat;
}

/* code */
code {
font-family:Verdana, Arial, Tahoma;
letter-spacing:1px;
margin:25px 0 25px 0px;
display:block;
font-size:1em;
border-left:4px solid #777777;
padding:15px 10px;
font-style:italic
}
/*** END OF GLOBAL ***/

/*** CONTAINER ***/
#container{width:100%; margin:0; padding:0 0;}
#content{width:654px; margin:0 auto; height:458px; position:relative; background-image:url(../images/bg-content.png); background-repeat:no-repeat}
/*** END CONTAINER ***/

/*** TOP ***/
#navright{position:absolute; width:52px; right:-15px; top:50px; height:458px;}
#navright ul{margin:0px; list-style-type:none; padding:10px 0px 0px 0px;}
#navright ul li{margin:0px 4px; list-style-type:none; padding:0px 0px 0px 0px;}
#navright ul li a{display:block; text-indent:-9999px; margin-bottom:10px; height:40px }
#navright ul li.nav1 a{background-image:url(../images/nav-home.png); background-repeat:no-repeat; height:40px; background-position:0px 0px; width:43px;}
#navright ul li.nav2 a{background-image:url(../images/nav-about.png); background-repeat:no-repeat; height:40px; background-position:0px 0px; width:43px;}
#navright ul li.nav3 a{background-image:url(../images/nav-work.png); background-repeat:no-repeat; height:40px; background-position:0px 0px; width:47px;}
#navright ul li.nav4 a{background-image:url(../images/nav-social.png); background-repeat:no-repeat; height:40px; background-position:0px 0px; width:50px;}
#navright ul li.nav5 a{background-image:url(../images/nav-contact.png); background-repeat:no-repeat; height:40px; background-position:0px 0px; width:52px;}

#navright ul li.nav1 a.activeSlide{background-image:url(../images/nav-home-active.png); background-repeat:no-repeat; background-position:0px 0px}
#navright ul li.nav2 a.activeSlide{background-image:url(../images/nav-about-active.png); background-repeat:no-repeat; background-position:-1px 0px}
#navright ul li.nav3 a.activeSlide{background-image:url(../images/nav-work-active.png); background-repeat:no-repeat; background-position:-4px 0px}
#navright ul li.nav4 a.activeSlide{background-image:url(../images/nav-social-active.png); background-repeat:no-repeat; background-position:-6px 0px}
#navright ul li.nav5 a.activeSlide{background-image:url(../images/nav-contact-active.png); background-repeat:no-repeat; background-position:-7px 0px}
#navright a:focus { outline: none; }
/*** END TOP ***/

/*** PAGE CONTENT ***/
#maincontent{width:599px; padding:25px 32px 0px 23px; margin:0 auto; position:relative}
.page{width:599px;padding:0px 0px 0px 0px; background-image:url(../images/bg-main.png); background-repeat:no-repeat; height:400px; overflow:hidden; margin:25px 0px 0px 22px;}
.main{padding:20px 25px;}
.top-page{background-image:url(../images/bg-glow-header.gif); background-repeat:no-repeat; background-position:center bottom; min-height:100px; height:77px; margin-bottom:3px; text-align:center}
.top-page h1{font-size:36px; line-height:normal; margin-bottom:0px}
.boldtext{color:#555555;}
.line{ background-image:url(../images/horizontal-line.gif); background-repeat:repeat-x; height:2px; margin:0px 0px 5px 0px}
.imgshadow-left{background-image:url(../images/img-shadow.png); background-repeat:no-repeat; background-position:bottom; float:left; margin:4px 15px 0px 0px; padding-bottom:3px;}
.imgshadow-left img{border:solid 1px #dddddd; padding:2px; background-color:#fff;}

.imgshadow-right{background-image:url(../images/img-shadow.png); background-repeat:no-repeat; background-position:bottom; float:right; margin:4px 15px 0px 0px; padding-bottom:3px;}
.imgshadow-right img{border:solid 1px #dddddd; padding:2px; background-color:#fff;}

/* about */
.left-col{width:350px; float:left;}
.right-col{width:155px; padding-left:20px; margin-left:20px; float:left; background-image:url(../images/vertical-line.gif); background-repeat:repeat-y}
.right-col ul{list-style-type:none; margin:0px; padding:0px;}
.right-col ul li{list-style-type:none; margin:0px; padding:0px 0px 15px 20px; background-position:0px 4px; background-image:url(../images/arrow.gif); background-repeat:no-repeat;}

/* work */
#work{height:210px;}
ul.work{margin:0px 0px 0px 0px;padding:0px; list-style-type:none;}
ul.work li{list-style-type:none; width:150px; float:left; display:inline; margin:10px 18px 15px 20px; background-image:url(../images/bg-glow-img.png); background-repeat:no-repeat; background-position:bottom; padding-bottom:3px}
ul.work li.nomargin{margin-right:0px;}
ul.work li img{border:solid 1px #dddddd; padding:2px; background-color:#fff}
#worknav{position:relative; z-index:5}
#next{cursor:pointer; position:absolute; right:0px; top:-20px;}
#prev{cursor:pointer; position:absolute; right:45px; top:-20px}

/* social */
ul.social{list-style-type:none; margin:5px 0px 0px 0px; padding:0px; float:left}
ul.social li{list-style-type:none; margin:0px 0px 10px 0px; padding:0px; width:250px; float:left}
ul.social li a, ul.social li a:visited{color:#777;}
ul.social li img{float:left; margin-right:10px}
ul.social li h3{margin-bottom:0px;}
#twitter{background-image:url(../images/twitter_bird.png); background-repeat:no-repeat; background-position:right top; padding:5px 0px 0px 0px}

/* contact */
#contact-page .left-col{width:220px; float:left;}
#contact-page .right-col{width:270px; padding-left:30px; margin-left:20px; float:left; background-image:url(../images/vertical-line.gif); background-repeat:repeat-y; min-height:250px; height:250px; }
form{margin:0; padding:0;}
fieldset{border:0px;}
#contact_form{margin:0 auto;}
label{margin:0px 0px; display:block;}
label.sp { width:3px;}
span.error{color:red;text-align:left;}
#message{ margin-left:0px;}
#message h2 {}
#message p{margin:6px 0px; }
input.text-input{width: 280px; margin:0px 0px 0px 0px; padding:3px 2px; border:solid 1px #cdcdc7; vertical-align:middle}
textarea.text-input{ margin:0px 0px 0px 0px; padding: 3px 2px; border:solid 1px #cdcdc7; vertical-align:top; width:280px; font-family:Verdana, Arial, tahoma; font-size:11px;}
#contact_form input:focus, #contact_form textarea:focus {border:solid 1px #cdcdc7; }
span.error{color:red;text-align:left;}
input.button{background-color:#555555; font-size:10px; color:#c8c8c8;padding:5px 5px 8px 5px; width:110px; height: 28px; display:block; margin-top:10px; border:solid 1px #cdcdc7;cursor:pointer; text-transform:uppercase;}
/*** END PAGE CONTENT ***/

/*** FOOTER ***/
#footer{clear:left; padding:0px 0px 0px 0px; width:755px; margin:-45px auto 0px auto; background-image:url(../images/bg-content-glow.png); background-repeat:no-repeat; height:115px;}
#footer-text{padding:50px 0px 0px 90px;}