@charset "UTF-8";
/*** 
Style Sheet for Bon Tone Boris Novofastovsky
Created by: Louis Yungling
Updated: June 2017 completely on iPad Pro
http://www.yunglingpianostudio.com
***/

@
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

a,
article,
aside,
body,
div,
em,
footer,
form,
h1,
h2,
h3,
header,
html,
img,
input,
li,
main,
nav,
p,
section,
span,
table,
ul {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
footer,
header,
main,
nav,
section {
    display: block;
}


/** GENERAL STYLES **/

img {
	border: none;
	border-radius: 3px;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}


body {
	color: #404040;
	font-family: Times, "Times New Roman", serif;
}


/********************************/

/***  320 px MOBILE STYLES        ****/

/********************************/

@media only screen and (min-width:320px) {

/** HIDE items on MOBILE ONLY **/
.hidemobile {
    display: none;
}

/* WRAPPER */
#wrapper {
	position: relative;
	width: 100%;
	min-height: 100%;
	margin: 10px auto 20px auto;
	background-color: #FFFFFF;
	overflow: hidden;  /** Stops Mobile from sliding Left/Right **/
}

/* HEADER */
#header {
	position: relative;
	width: 100%;
	background-color: #FFFFFF;
	border-bottom: 1px solid #CCCCCC;
	text-align: center;
}

/* NAV */
#nav {
	width: 100%;
	text-align: center;
}	

/* CONTENT */
#content {
	margin: 0px;
	padding: 10px 20px 20px 20px;  /** Bottom padding is Height of Footer **/
	position: relative;
	background-color: #FFFFFF;
	}

/** FOOTER **/ 
#footer {
	position: relative;
	width: 100%;
	height: 150px; /** Height of Footer **/
	border-top: 3px solid #CCCCCC; 
}  


#certification {
	position: absolute;
	top: 90px;
	right: 20px;
	
}

/* --- 3. FONTS ----- */

h1 {
	font-size: 4.0em;
	color: #990000;
	
}

p.title {
	font-size: 1.15em;
	color: #404040;
	padding-bottom: 20px;

}

h2, h3 {
	font-size: 1.2em;
	font-weight: bold;
	margin: 0px 0px 5px 0px;
	color: #404040;
}

/**  QuoteTop is for first quote and Bottom is for all others below it **/
#content p,
#content p.quoteTop,
#content p.quoteAuthorTop,
#content p.quoteBottom,
#content p.quoteAuthorBottom {
	font-size: 1.0em;
	line-height: 1.3em;
	margin: 0px 0px 22px 0px;
	width: 100%;
	color: #404040;
}

#content p.quoteTop,
#content p.quoteBottom  {
	font-size: 0.9em;
	margin: 0px 0px 2px 0px;
}

#content p.quoteAuthorTop,
#content p.quoteAuthorBottom {
	font-size: 0.9em;
	font-style: italic;
	margin-left: 20px;
}


#footer p {
	font-size: 0.9em;
	line-height: 1.45em;
	color: #404040;
	padding: 20px 0px 0px 20px;
}

#certification p {
	font-size: 0.8em;
}

/* --- 4. LINKS & NAVIGATION ----- */

/* MAIN NAV */

a.nav, a.nav:link, a.nav:visited,
a.nav:hover, a.nav:active {
	border: 1px solid #CCCCCC;
	border-radius: 3px;
	display: inline-block;
	color: #404040;
	text-decoration: none;
	font-size: 1.0em;
	width: 100%;
	text-align: center;
	margin: 0px 0px 5px 0px;
	padding: 10px 0px 10px 0px;
}

a.nav:hover {
	background-color: #990000;
	color: #FFFFFF;
	border-radius: 3px;
}

/********** Special style for *************/
/*****LINK to identify current page*****/

body#home a.home,
body#services a.services,
body#testimonials a.testimonials {
	background-color: #990000;
	color: #FFFFFF;
	border-radius: 3px;
	text-decoration: none;
}



/* Default IN-TEXT LINK Styles */
a.text, a.text:link, a.text:visited,
a.text:hover, a.text:active {
	background-color: #990000;
	color: #FFFFFF;
	padding: 1px 2px 0px 2px;
	border-radius: 3px;
	text-decoration: none;
	
}

a.text:hover {
	background-color: #FFFFFF;
	color: #990000;
}


/** TEXT1 class for e-mail link only **/

a.text1, a.text1:link, a.text1:visited,
a.text1:hover, a.text1:active {
	background-color: #990000;
	color: #FFFFFF;
	padding: 1px 2px 0px 2px;
	border-radius: 3px;
	text-decoration: none;
	
}

a.text1:hover {
	background-color: #FFFFFF;
	color: #990000;
}


/**  FOR MOBILE TEL link issues **/
a[href^="tel"]{
    color:inherit;
    text-decoration:none;
}

/* ------- 5. IMAGES -------- */

/* IMAGE FLOATS */


/** Boris Pic on Index only **/
img#BorisPic {
	width: 250px;
	height: auto;
	}

/** Piano Images on Services & Testimonials page **/
#content img#piano {
	width: 250px;
	height: auto;	
}

/** STEINWAY CERTIFICATION LOGO in FOOTER **/
img#certLogo {
	position: absolute;
	width: 50px;
	height: auto;
	top: 43px;
	right: 20px;
}

/* ------- 7. LIST STYLES -------- */

ul, li {
	list-style-type: none;
}

ul {
	margin: 0px 0px 25px 0px;
}

li {
	font-size: 1.0em;
	margin: 0px 0px 3px 15px;
}


    }

/****************************************************************/
/*******************************/

/*** 768px & larger screens  ***/

/*******************************/

@media only screen and (min-width:768px) {
    
/** HIDE Mobile only items on Bigger Screens **/
    .mobileonly {
        display: none;
    }

/* ----- 2. STRUCTURE ----- */


/* WRAPPER */
#wrapper {
	max-width: 1200px;
	margin: 20px auto 20px auto;	
}

/* HEADER */
#header {
	text-align: left;
}


/* NAV */
#nav {
	width: 320px;
	text-align: right;
	position: absolute;
	bottom: 18px;
	right: 100px;
}	


/* CONTENT */
#content {
	margin: 0px;
	padding: 50px 100px 170px 80px;  /** Bottom padding is Height of Footer **/
	}

	
/** FOOTER **/ 
#footer {
	position: absolute;
	bottom: 0px;
	height: 150px; /** Height of Footer **/
}  


#certification {
	position: absolute;
	right: 100px;
	top: 0px;
}


/* --- 3. FONTS ----- */

h1 {
	font-size: 4.0em;
	padding: 0px 0px 0px 80px;
}

p.title {
	font-size: 1.15em;
	padding: 0px 0px 50px 80px;

}



/**  QuoteTop is for first quote and Bottom is for all others below it **/
#content p,
#content p.quoteTop,
#content p.quoteAuthorTop,
#content p.quoteBottom,
#content p.quoteAuthorBottom {
	width: 500px;
}



#footer p {
	padding: 20px 0px 0px 80px;
}

#certification p {
	font-size: 0.9em;
}


/* --- 4. LINKS & NAVIGATION ----- */

/* MAIN NAV */

a.nav, a.nav:link, a.nav:visited,
a.nav:hover, a.nav:active {
	width: 100px;
	padding: 2px 0px 2px 0px;
	margin: 0px;
}



/* ------- 5. IMAGES -------- */

/* IMAGE FLOATS */


/** Boris Pic on Index only **/
img#BorisPic {
	width: 300px;
	height: auto;
	position: absolute;
	top: 40px;
	right: 100px;
	}

/** Piano Images on Services & Testimonials page **/
#content img#piano {
	width: 350px;
	height: auto;
	position: absolute;
	top: 40px;
	right: 100px;	
}

/** STEINWAY CERTIFICATION LOGO in FOOTER **/
img#certLogo {
	position: absolute;
	width: 50px;
	height: auto;
	top: 45px;
	right: 100px;
}

	}