/*
	NEW VISIONS website version 2.0
	Last revision:  2010-03-18
	Author:  Peter S. Palau

	Colors:

		#A60000 - Burgundy in logo
		#990000 - Medium burgundy for sidebar background
		#800000 - Dark burgundy for text in tabs
		#E10000 - Bright red for hover text in tabs
		#C0C0C0 - Light gray in logo
		#274BB0 - Blue
		#F5C400 - Gold
		#E8DEB5 - Pale yellow
*/

/******* General *******/

body {
	background: #999 url(../image/design/page_bg.png) top center repeat;
	font-family: Arial, Verdana, Geneva, sans-serif;
	font-size: small;
	line-height: 1.4em;
	color: #000;
}

html, body, div, p, span, ul, li, dl, dt, dd, img, form, input {
	border: 0;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	color: #900;
	margin: 0;
}

h1 {
	font-size: 290%;
	line-height: 1.2em;
	margin-bottom: 0.4em;
}
h2 {
	font-size: 220%;
	line-height: 1.2em;
	margin-bottom: 0.5em;
}
h3 {
	font-size: 130%;
	line-height: 1.2em;
	margin-bottom: 0.7em;
}
h4 {
	font-size: 130%;
	line-height: 1.2em;
	margin-bottom: 0.8em;
}
h5 {
	font-size: 100%;
	line-height: 1.2em;
	margin-bottom: 1em;
}
h6 {
	font-size: 80%;
	line-height: 1.2em;
	margin-bottom: 1.1em;
}

/******* Page *******/

#page {
	width: 90%;
	min-width: 770px;
	max-width: 1300px;
	margin: 2em auto;
}

#page_wrap {
	float: left;  /* Floating ensures page is at top of browser window. */
	width: 100%;
}

/******* Header *******/

#header {
	position: relative;  /* Facilitates absolute positioning of header elements. */
	float: left;
	width: 100%;
	background: #000 url(../image/design/header_bg.png) top right repeat-x;
	color: #C0C0C0;
	border-bottom: #FFFFFF 2px solid;
}

#header #logo {
	position: absolute;
	top: 7px;
	left: 7px;
	width: 90%;
	min-width: 452px;  /* Width of logo image + 7px offset */
	height: 166px;  /* Height of logo image + 7px offset */
	background: url(../image/design/nvlogo.gif) top left no-repeat;
}

#header #logo h1 {
	display: none;  /* Will display "New Visions" (in place of logo) if styles are turned off. */
}

#header #phone {
	position: absolute;
	top: 0;  /* Top & left = position of "open area" at upper right of logo. */
	left: 208px;
	width: 237px;  /* Width & height of "open area" */
	height: 46px;
	line-height: 46px !important;
	font-size: 26px !important;
	text-align: center;
	font-weight: bold;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Verdana, Geneva, sans-serif;
}

#header #slogan {
	position: absolute;
	top: 133px;  /* Top & left = position of "open area" at lower right of logo. */
	left: 143px;
	height: 18px;
	width: 90%;
	line-height: 17px !important;
	font-size: 14px !important;
	text-align: left;
	font-weight: bold;
	font-style: italic;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Verdana, Geneva, sans-serif;
	background: #C0C0C0 url(../image/design/slogan_bg.png) top left no-repeat;
	color: #274BB0;
}

#header #slogan span {
	padding-left: 19px;
	position: relative;
	top: -1px;
}

/******* Main navigation *******/

#home #nav_main {  /* Header photo unique to each page type. Tabs overlap image. */
	background: url(../image/design/hdrpic_house1.png) top right no-repeat;
}

#gallery #nav_main {
	background: url(../image/design/hdrpic_living1.png) top right no-repeat;
}

#testimonial #nav_main {
	background: url(../image/design/hdrpic_living2.png) top right no-repeat;
}

#history #nav_main {
	background: url(../image/design/hdrpic_gazebo.png) top right no-repeat;
}

#team #nav_main {
	background: url(../image/design/hdrpic_gazebo.png) top right no-repeat;
}

#personal #nav_main {
	background: url(../image/design/hdrpic_gazebo.png) top right no-repeat;
}

#area #nav_main {
	background: url(../image/design/hdrpic_house2.png) top right no-repeat;
}

#contact #nav_main {
	background: url(../image/design/hdrpic_kitchen.png) top right no-repeat;
}

#thankyou #nav_main {
	background: url(../image/design/hdrpic_swing.png) top right no-repeat;
}

#ccorner #nav_main {
	background: url(../image/design/hdrpic_stairs.png) top right no-repeat;
}

#error #nav_main {
	background: url(../image/design/hdrpic_404.png) top right no-repeat;
}

#nav_main {
	position: relative;  /* Solely to set z-index */
	z-index: 1;  /* Ensures that background photo covers slogan line. */
	float: left;
	width: 100%;
	font-size: 110%;
	line-height: 1.6em;
}

#nav_main ul {
	float: right;
	list-style: none;
	font-weight: bold;
	margin: 166px 7px 0 7px;  /* Top = height of logo image + 7px offset + extra vertical space. */
	padding-top: 1em;
}

#nav_main ul li {
	float: left;
	margin-left: 3px;
}

#nav_main ul li a {
	display: block;
	margin-top: 2px;
	border-left: 1px solid #FFF;
	padding: 0 0.8em 2px 0.6em;
	background: url(../image/design/tab_m0.gif) top right no-repeat;
	color: #800000;
	text-decoration: none;
}

#nav_main ul li a:hover {
	margin-top: 0;
	padding-bottom: 4px;
	background-image: url(../image/design/tab_m1.gif);
	color: #E10000;
}

#nav_main ul li span {
	display: block;
	margin-top: 2px;
	border-left: 1px solid #FFF;
	padding: 0 0.8em 2px 0.6em;
	background: url(../image/design/tab_m2.gif) top right no-repeat;
	color: #000;
}

/******* Everything below header *******/

#main {
	float: left;
	width: 100%;
	background: #990000 url(../image/design/sidebar_bg.png) bottom left repeat-y;
}

#home #main {
	background-image: none;
}

/******* Secondary navigation (below main nav) *******/

#nav_sub {
	float: left;
	width: 100%;
	font-size: 100%;
	line-height: 1.4em;
}

#nav_sub ul {
	float: left;
	list-style: none;
	font-weight: normal;
	margin: 0 7px;
}

#nav_sub ul li {
	float: left;
	margin-right: 3px;
}

#nav_sub ul li a {
	display: block;
	margin-bottom: 2px;
	border-right: 1px solid #000;
	padding: 0 0.6em 2px 0.8em;
	background: url(../image/design/tab_s0.gif) bottom left no-repeat;
	font-weight: bold;
	color: #800000;
	text-decoration: none;
}

#nav_sub ul li a:hover {
	margin-bottom: 0;
	padding-top: 2px;
	background-image: url(../image/design/tab_s1.gif);
	color: #E10000;
}

#nav_sub ul li span {
	display: block;
	border-right: 1px solid #000;
	padding: 0 0.6em 2px 0.8em;
	background: url(../image/design/tab_s2.gif) bottom left no-repeat;
	font-weight: bold;
	color: #000;
}

/******* Sidebar *******/

#sidebar {
	float: left;
	width: 20%;
	margin-top: 0.4em;
	padding-top: 15px;
	color: #B2B2B2;
}

#home #sidebar {
	width: 1%;  /* Effectively no sidebar on home page. */
}

#sidebar #corner {
	float: left;
	margin: 0 7px;
	border: 2px solid #E8DEB5;
	padding: 0.4em;
}

#sidebar h3 {
	line-height: 1em;
	text-align: center;
	color: #FEFFFF;
	margin-bottom: 1em;
}

#sidebar #corner h3 {
	margin-bottom: 0.7em;
}

#sidebar #corner h3 a {
	text-decoration: none;
	color: #E8DEB5;
}

#sidebar #corner h3 a:hover {
	color: #FFF;
}

#sidebar #corner p a {
	margin-top: 0.4em;
	display: block;
	text-decoration: none;
	color: #808080;
	font-weight: bold;
	font-style: italic;
	font-variant: small-caps;
	font-size: 90%;
	text-align: right;
}

#sidebar #corner p a:hover {
	color: #FFF;
}

/******* Tertiary navigation (within sidebar) *******/

#nav_side {
	float: left;
	width: 100%;
	font-size: 100%;
	line-height: 1.4em;
}

#nav_side ul {
	float: left;
	width: 100%;
	list-style: none;
	font-weight: normal;
	text-align: right;
}

#nav_side ul li {
	display: block;
	padding: 0 7px;
	color: #000;
}

#nav_side ul li a {
	display: block;
	border: 1px solid;
	border-top-color: #FFF;
	border-left-color: #FFF;
	border-bottom-color: #000;
	border-right-color: #000;
	padding: 0.1em 0.4em;
	background: #B1B1B1 url(../image/design/tab_t0.png) top left repeat-x;
	color: #800000;
	text-decoration: none;
}

#nav_side ul li a:hover {
	border-top-color: #000;
	border-left-color: #000;
	border-bottom-color: #FFF;
	border-right-color: #FFF;
	background-color: #CBCBCB;
	background-image: url(../image/design/tab_t1.png);
	color: #E10000;
}

#nav_side ul li span {
	display: block;
	border: 1px solid;
	border-top-color: #FFF;
	border-left-color: #FFF;
	border-bottom-color: #000;
	border-right-color: #000;
	padding: 0.1em 0.4em;
	background: #CBCBCB url(../image/design/tab_t2.png) top left repeat-x;
	color: #000;
}

/******* Main content window *******/

#content {
	float: right;
	width: 80%;
	margin-top: 0.4em;
	padding-bottom: 1em;
	background-color: #FFF;
	color: #000;
}

#home #content {
	width: 99%;  /* Home page has slightly different layout, mostly content. */
}

#content_wrap {
	background: url(../image/design/content_bg.png) top left no-repeat;
	padding: 1em;
}

#content p {
	margin-bottom: 1em;
}

#content h2 {
	text-align: right;
	background: url(../image/design/heading2a_bg.png) top left no-repeat;  /* 2a has transparency */
}

#home #content ul {
	margin-bottom: 1em;
	text-align: center;
	font-size: 140%;
	line-height: 1.2em;
	color: #900;
	list-style: none;
	list-style-position: outside;
}

#home #content ul li {
	display: inline;
	margin: 0 0.5em;
	padding-left: 19px;
	background: url(../image/design/chevrons1y.png) center left no-repeat;
}

#home #content .highlight ul {
	float: right;
	text-align: left;
}

#home #content .highlight ul li {
	display: list-item;
	margin: 0 0 0.2em 1em;
	border-bottom: 1px solid #E10000;
	padding: 0.2em 0 0.2em 19px;
}

#home #content .highlight ul li:first-child {
	border-top: 1px solid #E10000;
}

#home #content .highlight p {
	font-size: 140%;
	margin-bottom: 0.5em;
	padding-left: 19px;
	background: url(../image/design/chevrons1y.png) center left no-repeat;
	color: #274BB0;
}

#home #content #license {
	font-size: 80%;
	color: #999;
	text-align: right;
	margin: 0;
}

#content img.lpic {
	float: left;
	clear: left;
	margin: 0.5em 1em 0.5em -1em;
}

#content img.rpic {
	float: right;
	clear: right;
	margin: 0 -1em 0.5em 1em;
}

#content a {
	text-decoration: underline;
	color: #900;
}

#content a:hover {
	text-decoration: none;
	color: #E10000;
	background-color: #D9D9D9;
}

#testimonial #content blockquote {
	text-align: justify;
	margin: 1em 0;
	padding: 0.5em 0.5em 0.5em 1em;
	border: 2px solid #F5C400;
	background: url("../image/design/blockquote.gif") 0.2em 0.2em no-repeat;
}

#testimonial #content blockquote a img {
	float: right;
	margin: 0 0 1.5em 1.5em;
	border: 2px solid #FFF;
}

#testimonial #content blockquote a:hover img {
	border: 2px solid #E10000;
}

#testimonial #content blockquote p {
	margin: 0;
}

#testimonial #content blockquote p + p {
	text-indent: 2em;
}

#testimonial #content blockquote div {
	font-style: italic;
	text-align: right;
	color: #808080;
}

#team #content h3 {
	margin-bottom: 0;
}

#personal #content div {
	clear: both;
}

#content img.specialpic {
	float: left;
	margin: 0 1em 2em 0;
}

#personal #content p {
	padding-top: 2em;
}

#area #content {
	background: #FFF url(../image/design/areamap.png) bottom center no-repeat;
}

#area #content ul {
	float: left;
	width: 25%;
	list-style: none;
	list-style-position: outside;
	margin-bottom: 1em;
}

#area #content p strong {
	color: #274BB0;
}

#contact form span {
	color: #900;
}

#contact #content input,
#contact #content textarea {
	width: 70%;
	margin: 0 0 0.5em 1em;
	border: 2px inset #5878DA;
	background-color: #EEE;
	color: #274BB0;
}

#contact #content input:focus,
#contact #content textarea:focus {
	background-color: #E8DEB5;
	color: #000;
}

#contact #content input#send_button {
	width: 4em;
	margin: 0 0 1em 0;
	padding: 0.2em;
	border: 2px outset #5878DA;
	background-color: #274BB0;
	color: #FEFFFF;
	font-weight: bold;
	font-size: 110%;
	line-height: 1em;
}

#contact #content input#send_button:hover {
	border-color: #E10000;
	background-color: #900;
}

#contact #content input#send_button:active {
	border-color: #F5C400;
	background-color: #E8DEB5;
}

/******* Photo gallery *******/

#gallery #content h3 {
	clear: both;
	text-align: right;
	background: url(../image/design/heading3_bg.png) top left no-repeat;
}

#gallery #content .grouping {
	clear: both;
}

#gallery #content a {
	color: #800000;
	text-decoration: underline;
	background-color: #FFF;
}

#gallery #content a:hover {
	color: #E10000;
	text-decoration: none;
	background-color: #C0C0C0;
}

#gallery #content a img {
	float: left;
	margin: 0 1.5em 1.5em 0;
	border: 2px solid #FFF;
}

#gallery #content a img.tallpic {
	height: 90px;
}

#gallery #content a:hover img {
	border: 2px solid #E10000;
}

#gallery #content a.overlay {
	float: left;
	margin: 0 1.5em 1.5em 0;
	position: relative;
	text-decoration: none;
	background-color: #FFF;
}

#gallery #content a.overlay span {
	color: #000;
	background-color: #E8DEB5;
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0 0 2px 2px;
	padding: 0 2px;
	z-index: 2;
}

#gallery #content a.overlay img {
	margin: 0;
	z-index: 1;
}

#gallery #content .click_image {
	clear: left;
	text-align: right;
	font-size: 80%;
	line-height: 1em;
	font-style: italic;
	color: #274BB0;
}

/******* Footer *******/

#footer div a {  /* NARI logo. */
	float: right;
	width: 100px;
	height: 63px;
	background: url(../image/design/nari_logo.gif) top left no-repeat;
	margin: 1em 0 1em 1em;
}

#footer div a span {
	display: none;  /* Text replacement if styles (and logo) are off. */
}

#footer {
	float: left;
	width: 100%;
	text-align: center;
	font-size: 80%;
	line-height: 1em;
	color: #000;
}

#footer ul {
	padding: 2em 1em;
	list-style: none;
}

#footer ul li {
	display: inline;
	padding: 0 1em;
	border-left: 1px solid #FFF;
}

#footer ul li.first {
	border-left: 0;
}

#footer ul li a {
	text-decoration: underline;
	color: #900;
}

#footer ul li a:hover {
	text-decoration: none;
	color: #FFF;
}