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

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

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

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

/* =reset (dont change this)
----------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, h7, 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.png) 0 0 no-repeat #ccc; font: 12px/16px Helvetica, Arial, sans-serif; color: #D3D3D3; }

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

/* default paragraph and h2 styles which is used in all slides except for home */
p { padding: 0 10px 10px 10px; }
h2 {
	padding: 107px 75px 0px 0px;
	font: bold 16px/22px Helvetica, Arial, sans-serif;
	color: #000;
	/*background-image: url(file:///D|/GMT-Studio/SQ%20Bikes/web/vCard-gallery/images/nosotros.gif);
	background-position: 0px 50px;*/
}

/* give anyone of this class to the image in the about section to float it left or right */
.left { float: left; margin: 0px 16px 0px 77px; }
.right {
	z-index: 10;
	left:534px;
	top: 125px;
	position: absolute;
}

/* =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.html) center 530px/* adjust this property */ no-repeat transparent; }

#contentWrapper { position: relative; overflow: hidden; width: 800px; height: 500px; margin: 20px auto 0; padding: 1px; background-color: #D1D3D4; border: 1px solid #c1c1c1; border-bottom: 0 none; }

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

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

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

/* If you want to add more menus, change the width of #navMain here to accomodate for more space and then adjuust the left position value to center it */

#navMain { position: absolute; bottom: 1; left: 226px;/* adjust this accordingly */ overflow: hidden; z-index: 100; clear: both; width: 249px; /* this is the width of the nav */ height: 20px; padding: 118px 0 4px 100px; text-align: center; /*border-left: 1px solid #fff; border-right: 1px solid #fff; */background: url(../images/layout/fondo_menu.png) no-repeat 0 0;}
#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: 8px 0px 25px; height: 188px; }
#home h1 {
	position: relative;
	margin: 0;
	text-align: left;
	background-image: url(../images/linea_bg.html);
	background-repeat: no-repeat;
	width: 6000px;
}
#home h3 {
	color: #fff;
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-style: italic;
	line-height: 24px;
	font-weight: bold;
	font-variant: normal;
	letter-spacing: -1px;
	background: url(../images/blanco.gif) no-repeat 0 89px;
	height: 500px;
}
a.vcard { display: block; width: 34px; height: 34px; position: absolute; top: 0; right: 10px;   }
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; }

/* =gallery section
----------------------------------------------------------------------------------------- */
ul.gallery { overflow: hidden; padding: 0 0  0 65px; }
ul.gallery li { float: left; display: inline; width: 70px; height: 65px; margin: 0 9px 20px; }
ul.gallery li a { float: left; display: block; width: 70px; height: 65px; filter:alpha(opacity=75); -moz-opacity:0.75; opacity:0.75; }
ul.gallery li a:hover, ul.gallery li a:focus { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }

/* gallery Navigation */
.navGallery { width: 516px; height: 20px; position: absolute; bottom: 8px; left: 28px; }
.navGallery li { display: inline; }
.navGallery li a { padding: 0 4px; color: #666; }
.navGallery li a:hover, .navGallery li a:focus, .navGallery li.current a { text-decoration: none; color: #000; }
navGallery li.current a { text-decoration: underline; }

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


/* =contact section
----------------------------------------------------------------------------------------- */
#addressDetails { float: left; width: 500px; margin: 0 8px 0 0; padding: 0 0 0 10px;}
#addressDetails h3 { padding: 6px 0 0 71px; font: bold 14px/22px; color: #D1D2D1; }
#contactForm { float: left;}

#note { color: #fff; font: bold 11px/14px Arial, Helvetica, sans-serif; position:absolute; left:179px; top: 343px; }
.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 0 0 0px; margin: 0; }
fieldset { clear: both; }

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

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

input.submit { margin-left: 73px; 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 */