@charset "utf-8";
@viewport {
    zoom: 1.0; width: extend-to-zoom;}
@-ms-viewport {
    width: extend-to-zoom; zoom: 1.0;}
@font-face { font-family:BodoniFLF-Italic; src:url(BodoniFLF-Italic.ttf)}
@font-face { font-family:BodoniFLF-Roman; src:url(BodoniFLF-Roman.ttf)}

html, body {
	margin: 0px;
	padding: 0px;
  	border: 0px;
  	height: 100%;}
body {
	background-color: #bfbfbf;
	color: #111;
	font-family: Myriad Pro;}
h1 {
	font-family: BodoniFLF-Roman;
	color: #333;
	text-align:center;
	font-size:2.5em;
	margin:10px;
	text-shadow: 0px 0px 1px #222;}
h2 {font-family: "Oranienbaum";
	color:	#555;
	text-shadow:0px 0px 1px #444;
	font-size: 2em;
	margin-bottom:5px;
	text-align:left;}
h3 {color: #444;
	text-shadow:0px 0px 1px #444;
	font-size: 1.2em;
	margin-bottom:5px;}
h4 {
	font-size:.9em;
	margin-bottom:5px;}
.altText {
	font-family: Arial, Helvetica, sans-serif;
	color: #bdd8e9;}
.altText2 {
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-style: italic;
	font-size:1.1em;}
.altText3 {
	font-variant: small-caps;
	color: #390;
	font-size: 1.3em;
	letter-spacing: .5px;}
.altText4 {
	font-size:1.3em;
	text-shadow:0 0 3px #390, 0px 0px 1px #3c3;}
.quote {
	font-style:italic;
	font-size:.9em;}
.dropcap {
	font-family: 'Great Vibes';
	position:absolute;
	font-size:6em;
	margin:-60px 0 0 -70px;
	color:rgba(0,153,255,.15);
	text-shadow:2px 2px 5px rgba(100,100,100,.2);}
.dropquote {
	font-family: 'Great Vibes';
	position:absolute;
	font-size:10em;
	margin:-60px 0 0 -35px;
	color:rgba(0,153,255,.15);
	text-shadow:2px 2px 5px rgba(100,100,100,.2);}
.portrait { 
	border:0; 
	border-radius:10px;
	background-color:rgba(255,255,255.9);
	box-shadow:5px 5px 5px #444; 
	margin:0 20px 10px 0px;}
.section {
	width:100%;
	background-color:#CCC;
	padding:20px 0 0 0;}
.subsection {
	max-width:960px;
	margin:20px auto;
	padding:0 13%;
	text-align:justify;}	
.tooltip {
    display:none;
    background-color:#fff;
    font-size:15px;
    padding:5px;
    color:#333;
	width:auto;
	max-width:200px;
	border-radius:5px;
	border:2px solid #2c9ad9;
	text-shadow:none;}
.break {
	display:none;}
.indent {
	margin:0 5%;}
a:link {
	
	color: #23A9E1;
	text-decoration: none;}
a:visited {
	color: #23A9E1;}
a:hover {
	color: #FFF;}
a:active {
	color: #00CC00;}
#background {
    width: 100%; 
    height: 100%; 
    position: fixed;
	background-image: url(bg.gif);
	background-size: contain;
    left: 0px; 
    top: 0px; 
    z-index: -1;}
.stretch {
    height:100%;}
#container {
    min-height: 100%;
    width: 100%;
    position:relative;
	border:0;}
#header {
	width: 100%;
	height:100px;
	background-color: #2a3541;
	z-index: 2;
	box-shadow:0px 4px 3px 0px rgba(0,0,0,.5),0px 1px 1px 0px rgba(0,0,0,.8);}
#gloss {
	min-width:100%;
	height: 60px;
	background-color: rgba(175,210,255,.2);
	position: absolute;
	z-index:0;}
#headerContent {
	max-width: 960px;
	margin:0 auto;
	padding:10px 10px 0px 10px;
	z-index:3;
	position:relative;}
#consult {
	text-shadow:1px 1px 2px #000;
	text-align:right;
	float:right;}
#social {
	float:right; 
	margin:0px 0px 5px 10px;}
#nav {
	position: absolute;
	right:35px;
	bottom:-92px;
	width:calc(100% - 280px);}
#main {
	margin: 0 auto;
	height:100%;
	clear:both;
	position:relative;
	z-index:0;
	background: rgba(100,100,100,0);
	font-size:17px;
	
	text-align:justify;}
#main a:link, #main a:visited {
	color: #008DCA;
	text-shadow: 0px 0px 12px #FFF,0 0 1px #196A8E;
	text-decoration: none;}
#main a:hover {
	color: #FFF;
	text-shadow:0 0 10px #008dca,
				0 0 10px #008dca,
				0 0 3px #fff,
				0 0 3px #fff,
				0 0 1px #fff;}
#main a:active {
	color: #00CC00;}
#push {
	position:relative;
	z-index: 0;}
#footer {
	position:absolute;
	width: 100%;
	height: auto;
	min-height: 95px;
    bottom:0;
	background-color:#2a3541;
	box-shadow:0px 4px 3px 0px rgba(255,255,255,.5) inset ,0px 1px 1px 0px rgba(255,255,255,.8) inset;
	z-index:10;}
#footerContent {
	max-width: 960px;
	margin:0 auto;
	text-align:center;
	font-size:14px;
	letter-spacing:1px;
	z-index:3;
	position:relative;
	padding:10px;}
#footerInfo, #copyright {
	font-size:11.5px;
	color: #b3b3b3;}
.hl_row:hover {
	background-color:rgba(175,210,255,1);}
#siteMap {
	float:left;
	min-width:100%;
	font-size:1em;
	line-height:1.2em;
	text-align: right;}
#copyright {
	clear:both;
	position:relative;
	font-size:12px;
	bottom:0;
	right:0;
	padding:5px 5px 0px 5px;}


/*  -----  NAVIGATION (Superfish Menu)  -----  */

.sf-menu, .sf-menu * {
	margin: 0;
	padding:0;
	list-style: none;
	font-size: 18px;
	text-align: center;
	float: left;}
.sf-menu {
	width:100%;
	display:table;}
.sf-menu ul {
	position: absolute;}
.sf-menu > li {
	float:none;
	display:table-cell;}
.sf-menu li > ul {
	margin-left:-8px;
	background-image:url(wood_bg.jpg);
	box-shadow:	1px 1px 3px 3px rgba(0,0,0,.6),
				0px 4px 3px 0px rgba(0,0,0,.3) inset,
				0px 1px 1px 0px rgba(0,0,0,.5) inset;
	border-bottom-right-radius:6px;
	border-bottom-left-radius:6px;
	top: 28px;}
.sf-menu li > ul > li {
	margin: 2px 8px;
	border:2px solid rgba(0,0,0,.1);
	border-radius:4px;
	clear:both;}
.sf-menu a {
	line-height: 27px;
	width:120px;
	color: rgba(51,51,51,.8);
	z-index: 10;}
.sf-menu li > ul > li:hover {
	margin:2px 6px;}
.sf-menu li > ul > li > a:hover {
	width:124px;
	border:3px outset rgba(102,51,0,.6);
	color:rgba(255,255,255,.7);
	background-color:rgba(153,51,0,.4);
	box-shadow:2px 2px 2px #444, inset 1px 1px 1px rgba(200,150,50,.5);}
.sf-menu a:link, .sf-menu a:visited {
	color: #23A9E1;}
.sf-menu a:hover {
	text-shadow:0px 0px 3px rgba(102,51,0,1);
	color: #fff;
	z-index: 11;
	display:block;}
.sf-menu a:active {
	text-shadow:0px 0px 10px #fff,
				0px 0px 10px #fff,
				0px 0px 10px #fff;
	color: #ddd;}
.sf-menu li > ul > li > a:link, .sf-menu li > ul > li > a:visited {
	color:rgba(0,0,0,.6);
	border:3px inset rgba(102,51,0,.4);
	border-radius:4px;
	background-color:rgba(153,51,0,.2);
	border-spacing:6px;}

@media only screen and (max-width: 500px) {
.sf-menu, .sf-menu * {
	font-size:13px;}
.sf-menu a {
	width:80px;}
.sf-menu li > ul a {
	line-height:18px;}
.sf-menu li > ul > li > a:hover {
	width:84px;}}

/*  -----  PAGE SPECIFIC CSS  -----  */

.galleryLeft {
	width:60%; margin-right:40px; float:left;}
.galleryRight {
	width:60%; margin-left:40px; right:0; float:right;}
.blurbRight {
	margin:50px 5% 0 0;
	background-color:#eee;
	border-top-right-radius:30px;
	border-bottom-right-radius:30px;
	padding:40px 25px;
	box-shadow:inset 2px 2px 5px rgba(100,100,100,1);}
.blurbLeft {
	margin:50px 0 0 5%;
	background-color:#eee;
	border-top-left-radius:30px;
	border-bottom-left-radius:30px;
	padding:40px 25px;
	box-shadow:inset 2px 2px 5px rgba(100,100,100,1);}
hr.row {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
	width:70%;
    text-align: center;}
hr.kt {
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;}
hr.kt:after {
    content: "by K & T Cabinets";
	font-family:BodoniFLF-Italic;
    display: inline-block;
    position: relative;   
    font-size: 1.3em;
	color:#eee;
	text-shadow:2px 2px 2px rgba(100,100,100,1);}
#contactTable {
	width:300px;
	text-align:left; float:right; margin:0px 0px 20px 50px;}
#wrap_kitchens, #wrap_bathrooms, #wrap_offices, #wrap_closets, #wrap_entertainment {
    width:100%;
    text-align:center;
	margin-bottom:-6px;}
#wrap_kitchens img, #wrap_offices img, #wrap_entertainment img {
	border-top-right-radius:30px;}
#wrap_bathrooms img, #wrap_closets img {
	border-top-left-radius:30px;}
	
	
/*  -----  MEDIA QUERIES  -----  */


@media only screen and (max-width: 743px) {
#headerContent > a > img {
	height:70px; margin-top:-8px;}
#nav {
	width:85%;
	right:inherit;
	left:0}
.galleryLeft {
	margin-right:0px;
	width:100%;}
.galleryRight {
	width:100%;
	margin-left:0px;}
.blurbRight, .blurbLeft {
	margin:0;
	background-color:#eee;
	border-radius:0;
	padding:10px 25px 20px 25px;
	clear:both;}
#contactTable {
	width:120%;
	float:none;
	margin:0 0 20px -30px;}
#wrap_kitchens img, #wrap_offices img, #wrap_entertainment img {
	border-top-right-radius:0px;}
#wrap_bathrooms img, #wrap_closets img {
	border-top-left-radius:0px;}
.dropcap {
	font-size:4em;
	margin:-40px 0 0 -30px;}
@media only screen and (max-width: 470px) {
#consult {
	font-size:.85em;}
.hide { 
	display: none;}
#main {
	font-size:.9em;}}
@media only screen and (max-width: 400px) {
#nav {
	margin-left:-5px;}}