/* ----------------------------------------------------------------------------------------- 
____________________________________________________________________

Author - Mustafa Quilon / http://mustafaquilon.com
Visual design copyright 2009. All Rights Reserved.

"Screen" Style Sheet for "The Veridical V-card"
Themeforest url - 
Demo URL - http://mustafaquilon.com/files/tf/the-virtual-business-card/
Support - howdy@mustafaquilon.com
____________________________________________________________________

----------------------------------------------------------------------------------------- */

/* =reset (dont change this)
----------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin : 0; padding : 0; border : 0; outline : 0; font-size : 100%; vertical-align : baseline; background : transparent;
}
ol, ul { list-style: none; list-style-image: none; list-style-position: outside; list-style-type: none; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none;}
blockquote, q { quotes: "" ""; }
a img { border: none; }
abbr, acronym { border-bottom-width : 0; }
strong { font-weight : bold; }
em { font-style : italic; }

/* =common
----------------------------------------------------------------------------------------- */
body { background: url(../images/layout/bg.gif) 0 0 repeat-x #ccc; font: 12px/16px Helvetica, Arial, sans-serif; color: #666; text-shadow: 1px 1px 0 #fff; }

/* default link color */
a { color: #000; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; color: #666; }

/* default paragraph and h2 styles which is used in all slides except for home */
p { padding: 0 0 10px; }
h2 { padding: 6px 0 10px 0; font: bold 16px/22px "Segoe UI", "Myriad Pro", Myriad, Helvetica, Arial, sans-serif; color: #333; }

/* give anyone of this class to the image in the about section to float it left or right */
.left { float: left; margin: 5px 16px 5px 0; }
.right { float: right; margin: 5px 0 5px 16px; }

/* =layout / divisions
----------------------------------------------------------------------------------------- */

/* This <div> holds the reflection background image. Change the image and if necessary adjust its position from the top in the background property. */
#outerWrapper { overflow: hidden; position: relative; width: 1000px; margin: 0 auto; padding-bottom: 135px; background: url(../images/layout/reflection.jpg) center 431px/* adjust this property */ no-repeat transparent; }

#contentWrapper { position: relative; overflow: hidden; width: 558px; height: 278px; margin: 140px auto 0; padding: 6px; background-color: #fff; border: 1px solid #c1c1c1; border-bottom: 0 none; }

/* This <div> holds the content background image. */
#content { position: relative; overflow: hidden; width: 558px; height: 278px; background: url(../images/layout/content-bg.gif) repeat-x 0 0 #eee; }

#scrollWrapper { position: relative; width: 9999px; }
.section { position: relative; float: left; margin-right: 50px; width: 538px; height: 253px; padding: 0 10px 25px; }

/* =navMain
----------------------------------------------------------------------------------------- */

/* If you want to add more menus, change the width of #navMain here to accomodate for more space */
#navMain { position: absolute; bottom: 0; left: 203px; overflow: hidden; z-index: 100; clear: both; width: 140px; height: 20px; padding: 10px 0 4px 10px; text-align: center; border-left: 1px solid #fff; border-right: 1px solid #fff; background: url(../images/layout/navMain-bg.gif) repeat-x 0 0 #fff; }
#navMain li { display: block; float: left; }
#navMain li a { display: block; float: left; }
#navMain li img { padding: 0 7px; }
#navMain li a { filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50;  }
#navMain li a.selected, #navMain li a:hover, #navMain li a:focus { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }

/* =home section
----------------------------------------------------------------------------------------- */
#home { padding: 65px 10px 25px; height: 188px; }
#home h1 { position: relative; margin: 0; padding: 30px 0 0; font: normal 36px/52px "Segoe UI", "Myriad Pro", Myriad, Helvetica, Arial, sans-serif; color: #333; text-align: center; }
#home h3 { font: normal 14px/18px Helvetica, Arial, sans-serif; color: #666; text-align: center; }
a.vcard { display: block; width: 34px; height: 34px; position: absolute; top: 0; right: 110px;   }
a.vcard img { width: 34px; height: 34px; font-size: 12px; line-height: 16px; filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; }
a.vcard:hover img, a.vcard:focus img { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }

/* =networks section
----------------------------------------------------------------------------------------- */
#networks ul { overflow: hidden; padding: 2px 0 2px; }
#networks li { overflow: hidden;  display: block; float: left; width: 252px; height: 46px; margin: 0 14px 0 0; }
#networks li a { overflow: hidden; display: block; float: left; width: 252px; height: 36px; padding: 0 0 10px; color: #666; }
#networks img { float: left; margin: 0 16px 0 0; }
#networks strong { display: block; font: bold 14px/20px "Segoe UI", "Myriad Pro", Myriad, Helvetica, Arial, sans-serif; color: #333; }
#networks li a:hover, #networks li a:focus { padding-left: 2px; width: 250px; text-decoration: none; color: #333; }

/* =contact section
----------------------------------------------------------------------------------------- */
#addressDetails { float: left; width: 240px; margin: 0 20px 0 0; padding: 0 0 0 1px; border-right: 1px dotted #ccc; }
#addressDetails h3 { padding: 6px 0 0 0; font: bold 14px/22px; color: #333; }
#contactForm { float: left; width: 260px; }

#note { color: #333; font: bold 11px/14px Arial, Helvetica, sans-serif; }
.notification_error { padding: 5px; border: 1px solid #ccc; margin-bottom: 10px; }

/* =footer/copyright
----------------------------------------------------------------------------------------- */
p#copyright { height: 20px; left: 10px; position: absolute; top:-30px; width: 990px; padding: 10px 0 18px 0; background: url(../images/layout/copyright-symbol.gif) no-repeat bottom right; color: #888; text-shadow: 1px 1px 0 #eee; text-align: right; }

/* =form
----------------------------------------------------------------------------------------- */
form { padding: 0; margin: 0; }
fieldset { clear: both; }

form .field, form .buttons { padding-bottom: 10px; }
form .field { padding-left: 120px; }

form .field label { display: inline; float: left; width: 100px; margin-left: -120px; }
label, button, input.submit { cursor: pointer; }

input.submit { margin-left: 120px; background-color: #ccc; border-top: 1px solid #eee; border-left: 1px solid #eee; border-bottom: 1px solid #aaa; border-right: 1px solid #aaa; color: #555; }
input.reset { margin-left: 10px; }
input.submit:hover { background-color: #555; color: #fff; }

input.text, textarea { width: 130px; border-top: 1px solid #eee; border-left: 1px solid #eee; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; font-size: 12px; color: #555; }
input.text:focus, input.password:focus, textarea:focus, select:focus { background-color: #eee; }


/* =accessibilityEnhancements
----------------------------------------------------------------------------------------- */
hr { display: none; visibility: hidden; }
/*visualHide*/
.visuallyHidden { position: absolute; top: -500px; left: 0px; width: 1px; height: 1px; overflow: hidden; }

/* =webkit / mozilla
----------------------------------------------------------------------------------------- */
::selection { color: #fff; background-color: #333; text-shadow: none; } /* webkit */
::-moz-selection { color: #fff; background-color: #333; text-shadow: none; } /* mozilla */