/*=================================================================================

Project:		SALON VASO
Version:		1.0
Last Changed:	07/09/2009
Author:			Daniel Rus

=================================================================================*/


/*=================================================================================

[Table of Contents]

1. GENERAL [style for body, headers, default behaviour of paragraphs, images, links etc]
2. LAYOUT [elements used to define the layout of the site]
	2.1 HEADER
	2.2 CONTENT
	2.3 SIDEBARS
	2.4 FOOTER
3. NAVIGATORS [navigation for the site]
	3.1 MAIN NAVIGATOR
	3.2 TEAM NAVIGATOR
4. CONTENT ELEMENTS
	4.1 HOMEPAGE
	4.2 FORMS
	4.3 CAREERS
5. OTHER PAGES
	5.1 ABOUT
	5.2 HAIR AND NAILS
	5.3 FACIALS AND WAXING
	5.4 HAIR EXTENSIONS
	5.5 THE SALON
	5.6 VASO CLOSET
	5.7 PRESS
	5.8 BLOG
	5.9 CONTACT
	5.10 THE TEAM
	5.11 SPECIALS
6. ERRORS
7. GALLERY


=================================================================================*/






/* 1. GENERAL -------------------------------------------------------------------*/
img, div, a, input { behavior: url(../iepngfix.htc) }

body { margin: 0; background-color: #0c0c0c; font: normal 0.7em/1.8em Arial; color: #e2e2e2; }
h1 { margin: 0 0 0.3em 0; padding: 0 0 0.3em 0; font: bold 1.8em Arial; border-bottom: 2px solid #000000; }
h2 { margin: 0 0 0.3em 0; font: bold 1.6em Arial; }
h3 { margin:0px; padding:0px; font: bold 1.4em Arial; }
h1 span, h2 span { color: #30bbf1; }
em { color: #30bbf1; font-style: normal; font-weight: bold; }
p { margin: 1em 0; text-align: justify; }
a { text-decoration: none; color: #21bcdd; }
a:hover { text-decoration: underline; color: #66d9f1; }
img { border: 0; }
.clearAll { clear: both; height: 0; font-size: 0; line-height: 0; overflow: hidden; }



/* 2. LAYOUT --------------------------------------------------------------------*/

#container { width: 980px; margin: 0 auto; background: url(../../general/bgContent.jpg) no-repeat 0 144px; }

/* 2.1 HEADER -------------------------------*/

#header { height: 144px; background: url(../../general/bgHeader.jpg) no-repeat; }
#header p { float: right; margin: 0; visibility: hidden; }
.phoneSkype { padding-top:56px; margin-right:2px; }
#logo { float: left; width: 143px; height: 143px; margin-left: 20px; text-indent: -9999px; }
.btHeader { float:right; padding-top:24px; padding-right:7px; }

/* 2.2 CONTENT ------------------------------*/

#content { min-height: 455px; height: auto !important; height: 455px; float: right; width: 760px; padding: 15px 10px 15px 0; }

/* 2.3 SIDEBARS -----------------------------*/

#sidebar { }

/* 2.4 FOOTER -------------------------------*/

#footer { clear: both; padding: 1.1em 0; height: 1.5em; background:url(../../general/bgFooter.gif) no-repeat; height:40px; }
#footer p { float: left; margin: 0; }
#footer ul { margin: 0; padding: 0; list-style: none; float: right; }
#footer ul li { float: left; padding: 0 5px; }



/* 3. NAVIGATORS ----------------------------------------------------------------*/

/* 3.1 TOP NAVIGATOR ------------------------*/

#navMain { float: left; width: 178px; padding-top: 15px; }
#navMain ul { margin: 0; padding: 0; list-style: none; }
#navMain ul li { display: block; margin: 0; height: 30px; }
#navMain ul li a, #navMain ul li span { display: block; height: 30px; text-indent: -9999px; overflow:hidden; }

.navMain-home { background: url(../../general/spriteMenu.gif) no-repeat 0 0; }
.navMain-about { background: url(../../general/spriteMenu.gif) no-repeat 0 -30px; }
.navMain-hair { background: url(../../general/spriteMenu.gif) no-repeat 0 -60px; }
.navMain-facial { background: url(../../general/spriteMenu.gif) no-repeat 0 -90px; }
.navMain-extensions { background: url(../../general/spriteMenu.gif) no-repeat 0 -120px; }
.navMain-runway { background: url(../../general/spriteMenu.gif) no-repeat 0 -150px; }
.navMain-salon { background: url(../../general/spriteMenu.gif) no-repeat 0 -180px; }
.navMain-closet { background: url(../../general/spriteMenu.gif) no-repeat 0 -210px; }
.navMain-press { background: url(../../general/spriteMenu.gif) no-repeat 0 -240px; }
.navMain-blog { background: url(../../general/spriteMenu.gif) no-repeat 0 -270px; }
.navMain-videos { background: url(../../general/spriteMenu.gif) no-repeat 0 -300px; }
.navMain-contact { background: url(../../general/spriteMenu.gif) no-repeat 0 -330px; }
.navMain-newsletter { background: url(../../general/spriteMenu.gif) no-repeat 0 -360px; }
.navMain-team { background: url(../../general/spriteMenu.gif) no-repeat 0 -390px; }
.navMain-weddings { background: url(../../general/spriteMenu.gif) no-repeat 0 -420px; }
.navMain-specials { background: url(../../general/spriteMenu.gif) no-repeat 0 -450px; }
.navMain-reviews { background: url(../../general/spriteMenu.gif) no-repeat 0 -480px; }

.navMain-home:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px 0; }
.navMain-about:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -30px; }
.navMain-hair:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -60px; }
.navMain-facial:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -90px; }
.navMain-extensions:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -120px; }
.navMain-runway:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -150px; }
.navMain-salon:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -180px; }
.navMain-closet:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -210px; }
.navMain-press:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -240px; }
.navMain-blog:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -270px; }
.navMain-videos:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -300px; }
.navMain-contact:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -330px; }
.navMain-newsletter:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -360px; }
.navMain-team:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -390px; }
.navMain-weddings:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -420px; }
.navMain-specials:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -450px; }
.navMain-reviews:hover { background: url(../../general/spriteMenu.gif) no-repeat -178px -480px; }

#navMain ul li a:focus { }


/* 3.1 TEAM NAVIGATOR -----------------------*/

.navTeam ul { margin: 0; padding: 0; list-style: none; }
.navTeam li { float: left; width: 180px; padding: 20px 0; text-align: center; }
.navTeam a { font-size: 1.4em; font-weight: bold; }
.navTeam img { border: 1px solid #21bcdd; }



/* 4. CONTENT ELEMENTS ----------------------------------------------------------*/

/* 4.1 HOMEPAGE -----------------------------------------------------------------*/

.home-introduction { float: left; width: 235px; background:url(../../general/bgTransperant.png) repeat; padding: 10px; }
.home-introduction ul { list-style-type:none; margin:0px; padding:0px; }
.home-introduction ul li { padding:2px 10px; background:url(../../general/arrowList.gif) center left no-repeat; }
.listWithout { margin-left:10px; padding:1px 10px; background:none; color:#30bbf1; }
.home-why { float: right; width: 474px; background:url(../../general/bgTransperant.png) repeat; padding: 10px; }
.home-why-gallery { width:150px; height:212px; float:left; padding:0px 4px; }
.home-appointment { margin-top: 10px; float: left; width: 255px; }
.home-appointment p { font-size: 1.2em; text-align: left; }
.home-appointment strong { font-size: 1.2em; }
.home-social { margin-top: 10px; float: right; width: 474px; background:url(../../general/bgTransperantDark.png) repeat; padding: 10px; }
.home-social-network { float: left; width: 174px; }
.home-social-blog { float: right; width: 276px; }
.home-social-buttons { text-align: center; }
.home-social-buttons img { margin: 0 3px; }


/* 4.2 FORMS --------------------------------------------------------------------*/

form { margin: 0; padding: 0; }
.topLogin { float: left; width: 110px; height: 16px; margin: 5px; padding: 0 5px; border: 1px solid #101b20; background-color: #2a4957; font: normal 1em/1em Arial; color: #ffffff; }
.formField { float: left; width: 150px; height: 20px; margin: 5px; padding: 2px 5px; border: 1px solid #0d0d0d; background-color: #666666; font: normal 1em/1em Arial; color: #f4f4f4; }
.formSelect { float: left; width: 162px; margin: 5px; padding: 2px 0; border: 1px solid #0d0d0d; background-color: #666666; font: normal 1em/1em Arial; color: #f4f4f4; }
.formTextarea { float: left; width: 300px; height: 150px; margin: 5px; padding: 2px 5px; background-color: #666666; border: 1px solid #0d0d0d; font: normal 1em/1em Arial; color: #f4f4f4; }
label { color:#30bbf1; font-weight:bold; float:left; padding:5px; margin: 5px; width:75px; }
.formButtons { margin:5px; margin-left:100px; }
form br { clear: left; }
.searchField { float: left; width: 150px; height: 20px; margin: 5px; margin-left:0px; padding: 2px 5px; border: 1px solid #0d0d0d; background-color: #151515; font: normal 1em/1em Arial; color: #f4f4f4; }
.searchLabel { color:#30bbf1; font-weight:bold; float:left; width:25px; }
.searchButton { margin-top:5px; }


/* 4.3 CAREERS --------------------------------------------------------------------*/

.careers-jobs { float: left; width: 410px; padding: 10px; background: url(../../general/bgTransperant.png); }
.careers-jobs h2 { margin-top: 25px; font-size: 1.4em; color: #30bbf1; }
.careers-contact { float: right; width: 300px; padding: 10px; background: url(../../general/bgTransperant.png); }
.careers-contact h3 { margin: 20px 0 0 0; color: #30bbf1; }
.careers-contact p { margin-top: 0; }



/* 5 OTHER PAGES */

/* 5.1 ABOUT --------------------------------------------------------------------*/

.about-vaso { width: 440px; background:url(../../general/bgTransperant.png) repeat; padding: 10px; }
.about-social { margin-top: 10px; width: 440px; background:url(../../general/bgTransperantDark.png) repeat; padding: 10px; }
.vaso-image { float:right; }

/* 5.2 HAIR AND NAILS --------------------------------------------------------------*/

.qoutePrices { font-size:1.4em; font-style:italic; text-align:center; }
.qoutePrices strong { color:#30bbf1; font-weight:bold; }
.btMakeApp { width:250px; margin:0 auto; }

/* 5.3 FACIALS AND WAXING -----------------------------------------------------------*/

.facials-section { float: right; width: 435px; background:url(../../general/bgTransperant.png) repeat; padding: 10px; }
.facials-section p { font-size:16px; line-height:33px; font-weight:bold;	}
.facials-image { float:left; border:7px solid #000; }
.facials-services-section { background:url(../../general/bgTransperantDark.png) repeat; width:740px; padding:10px; margin:10px 0px; }
.facials-services-section ul { list-style-type:none; margin:0px; padding:0px; }
.facials-services-section ul li { padding:5px 10px; background:url(../../general/arrowServices.gif) top left no-repeat; }
.treatment-section { float: right; width: 500px; background:url(../../general/bgTransperant.png) repeat; padding:5px 10px; }
.treatment-section p { font-size:12px; line-height:23px; }
.servicesWaxing { float:left; width:175px; }

/* 5.4 HAIR EXTENSIONS --------------------------------------------------------------*/

.certified-section { float: right; width: 420px; background:url(../../general/bgTransperant.png) repeat; padding: 10px; }
.certified-image { float:left; border:7px solid #000; }

/* 5.5 THE SALON ---------------------------------------------------------------------*/

.salon-section { background:url(../../general/bgTransperantDark.png) repeat; width:740px; padding:10px; margin:10px 0px; }
.salon-section:after { content: "."; display: block; height: 0; font-size:0; clear: both; visibility: hidden; }
.salon-section { display: inline-block; } /* Hides from IE Mac \*/ * html .salon-section { height: 1%;} .salon-section { display: block; } /* End Hack */
.blue { color:#30bbf1; }
.salon-section-visual { width:733px; margin:0 auto; }
.salon-qoute { font-size:14px; line-height:24px; width:450px; margin:0 auto; text-align:center; padding:10px 0px 25px; }
.salon-qoute span { font-style:italic; color:#30bbf1; }

/* 5.6 VASO CLOSET -------------------------------------------------------------------*/

.vaso-closet-section { float: left; width: 405px; background:url(../../general/bgTransperantDark.png) repeat; padding: 10px; margin-left:10px; }
.vaso-closet-section p { 	font-size:16px; line-height:26px; text-align:left; width:260px; padding:142px 0px; }

/* 5.7 PRESS ---------------------------------------------------------------------------*/	

.press-content { background:url(../../general/bgTransperant.png) repeat; width:740px; padding:10px; margin:10px 0px; }
.press-section { background:url(../../general/bgTransperantDark.png) repeat; width:345px; padding:10px; margin:10px 5px; float:left; }
.press-image { float:left; padding-right:10px; }
.press-info { float:left; }

/* 5.8 BLOG ---------------------------------------------------------------------------*/	

.blog-section { background:url(../../general/bgTransperant.png) repeat; width:740px; padding:10px; margin:10px 0px; }
.blog-image { float:left; border:7px solid #000; }	
.blog-text { width:450px; margin-left:10px; float:right; }
.blogAuthor { font-weight:bold; font-size:1.2em; }
.blogAuthorDate { font-style:italic; }
.btReadMore a { display:block; background-color:#265b6f; padding:2px 5px; border:none;	width:70px; color:#fff; }
.btReadMore a:hover { display:block; background-color:#151515; padding:2px 5px; color:#30bbf1; border:none; text-decoration:none; }
.blog-article { width:315px; float:right; }	
.searchResults ul { list-style-type:none; margin:0px; padding:0px; }
.searchResults ul li { padding:5px 10px; background:url(../../general/arrowServices.gif) top left no-repeat; }

/* 5.9 CONTACT ---------------------------------------------------------------------------*/	

.contact-section { background:url(../../general/bgTransperant.png) repeat; width:740px; padding:10px; margin:10px 0px; }

/* 5.10 THE TEAM ---------------------------------------------------------------------------*/

.btBack { float:right; }
.btBack a { background-color:#265b6f; padding:2px 5px; border:none; width:70px; color:#fff; }
.btBack a:hover { background-color:#151515; padding:2px 5px; color:#30bbf1; border:none; text-decoration:none; }


/* 5.11 SPECIALS ---------------------------------------------------------------------------*/

.specials-section p { font-size:12px; line-height:23px; }



/* 6 ERRORS-----------------------------------------------------------------------------*/

span.error { color: red; }
input.error { border: 2px solid red; }
select.error { border: 2px solid red; }
div.error { color: red; }
div.action-container { position: relative; top: -45px; cursor: pointer; }


/* 7 GALLERY -----------------------------------------------------------------------------*/

.galleryview { background: black; }