@charset "UTF-8";
/* CSS Document */
 { border: 1px solid #FFF; }
/* mail links styled below... IE6 will not conform and so has its own rule in its own css sheet for a single color (class.mail) */
a[href^="mailto:"] { outline: none; text-decoration: underline; color: #FF0; font-style: italic; font-weight: bold; }
a:hover[href^="mailto:"] { outline: none; text-decoration: underline; color: #F30; font-style: normal; font-weight: bold; } 

body {
	font: 100% Georgia, "New Century Schoolbook", Times, serif; /* Zeldman.251 (but try Verdana first). */
	background: #0A0A0A url(../images/stripe03.png) repeat fixed; 
	color: #cf0;
	margin: 65px 0 0 0;
	padding: 0;	
}
div.fixedheader { 
	background-image: url(../images/header/header010px.jpg);
	background-repeat: repeat-x;
	background-color: #777;
	width: 100%;
	height: 40px;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9;
	border-bottom: 1px solid #000;
}
div#ctr { 
	background-image:url(../images/header/header010warm05.jpg);
	background-repeat: no-repeat; 
	width: 500px; /* make this as wide as your graphic */
	height: 40px;
	margin: auto;
	opacity: 1.0; /* CSS 3 opacity property */
    -moz-opacity: 1.0; /* Moz proprietary opacity property for older Moz browsers */
}
div.container { /* this positions the blurred graphic background on the page */
	width: 1024px;
	margin: auto;
	position: relative;
	background-repeat: no-repeat;
}
/* BGs====================================================== BACKGROUND IMAGES */
div#waitarea {
	background-image: url(../images/waiting_4web01lg.jpg);
}
div#services-bg {
	background-image: url(../images/studiob_4web01lg.jpg);
}
div#contact-bg {
	background-image: url(../images/ceiling_4web01lg.jpg);
}
div#portfolio-bg {
	background-image: url(../images/isoglitr_4web01lg.jpg);
}
div#info-bg {
	background-image: url(../images/liverm_4web01lg.jpg);
}
div#pagesix-bg {
	background-image: url(../images/isobooth_4web01lg.jpg);
}
div#solutions-bg {
	background-image: url(../images/studioawarm_4web01lg.jpg);
}
/* ========================================================= end BACKGROUND IMAGES */
/* ========================================================= CONTENT CONTAINERS */
div#transparencyheadgrey { /* one for each page in case you need to change positioning, dimensions or opacity */
	background-image: url(../images/transparencygrey29_01opaque.jpg);
	width: 620px;
	height: 79px;
	border-bottom: 1px solid #FDFFBC; /* OPTIONAL - if removed set height to 80px */
	position: absolute;
	top: 20px;
	left: 20px;
	opacity: 0.4; /* CSS 3 opacity property */
    -moz-opacity: 0.4; /* Moz proprietary opacity property for older Moz browsers */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*  MS proprietary filter property */
}
div#transparencyheadorange {
	background-image: url(../images/transparencyorange02opaque.jpg);
	width: 620px;
	height: 79px;
	border-bottom: 1px solid #000000; /* OPTIONAL - if removed set height to 80px */
	position: absolute;
	top: 20px;
	left: 20px;
	opacity: 0.4; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
    -moz-opacity: 0.4; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*  MS proprietary filter property */
}
div#transparencyheadtan {
	background-image: url(../images/transparencytan01opaque.jpg);
	width: 620px;
	height: 79px;
	border-bottom: 1px solid #ffc; /* OPTIONAL - if removed set height to 80px */
	position: absolute;
	top: 20px;
	left: 20px;
	opacity: 0.4; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
    -moz-opacity: 0.4; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*  MS proprietary filter property */
}
div#transparencyheadblack {
	background-image: url(../images/transparencyblackopaque.jpg);
	width: 620px;
	height: 79px;
	border-bottom: 1px solid #fdb; /* OPTIONAL - if removed set height to 80px */
	position: absolute;
	top: 20px;
	left: 20px;
	opacity: 0.4; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
    -moz-opacity: 0.4; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*  MS proprietary filter property */
}
div#transparencyheadmelon {
	background-image: url(../images/transparencymelonopaque.jpg);
	width: 620px;
	height: 79px;
	border-bottom: 1px solid #000; /* OPTIONAL - if removed set height to 80px */
	position: absolute;
	top: 20px;
	left: 20px;
	opacity: 0.3; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
	-moz-opacity: 0.3; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /*  MS proprietary filter property */
}
div#transparencyheadlemon {
	background-image: url(../images/transparencylemonopaque.jpg);
	width: 620px;
	height: 79px;
	border-bottom: 1px solid #000; /* OPTIONAL - if removed set height to 80px */
	position: absolute;
	top: 20px;
	left: 20px;
	opacity: 0.5; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
	-moz-opacity: 0.5; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); /*  MS proprietary filter property */
}
div#transparencyheadwarm {
	background-image: url(../images/transparencywarmopaque.jpg);
	width: 620px;
	height: 79px;
	border-bottom: 1px solid #a53; /* OPTIONAL - if removed set height to 80px */
	position: absolute;
	top: 20px;
	left: 20px;
	opacity: 0.4; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
	-moz-opacity: 0.4; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*  MS proprietary filter property */
}
div.transparency {
	opacity: 0.4; /* CSS 3 opacity property */
    -moz-opacity: 0.4; /* Moz proprietary opacity property for older Moz browsers */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /*  MS proprietary filter property */
}   
div#orange {
	background-image: url(../images/transparencyorange02opaque.jpg); 
	width: 620px;
	height: 488px;
	position: relative;
	left: 20px;
	top: 100px; /* offset from where the element would appear if not positioned, which in this case would be same as .container class. */
	padding-bottom: 20px;
		 		
	/* div height... if the height of this div is fully expanded (to 628px - this applies to the CONTENT area) using the height property, then added to the top offset of 100px + 20px of padding-bottom, the div itself will end 20px above the bottom of the containing div#waitarea, the same offset as from the left. This is what is desired. */
	
}
div#orangeparagraph { /* this is the container for the positioning of the paragraphs with z-index 2 over the orange transparency */
	width: 620px; /* (the paragraphs cannot be a child of the transparency div and have a higher z-index than its parent) */
	position: relative;
	left: 20px;
	top: -408px; /* with the 20px padding-top from the p selector this appears correctly positioned. */
	padding-bottom: 20px; /* slap a border on this and you'll see this div sits directly on top of the orange transparency div */
	padding-top: 20px;
	height: 448px; /* 468px pushes the text and associated scroll bar all the way down to the bottom of the transparency */
	overflow: auto; /* overflow is supported --- PADDING TOP AND BOTTOM ALTER THE LENGTH OF THE SCROLL BAR */
}
div#grey {
	background-image: url(../images/transparencygrey29_01opaque.jpg); 
	width: 620px;
	height: 488px;
	position: relative;
	left: 20px;
	top: 100px; /* offset from where the element would appear if not positioned, which in this case would be same as .container class. */
	padding-bottom: 20px;
}
div#greyparagraph { /* this is the container for the positioning of the paragraphs with z-index 2 over the grey transparency */
	width: 620px; /* (the paragraphs cannot be a child of the transparency div and have a higher z-index than its parent) */
	position: relative;
	left: 20px;
	top: -408px; /* with the 20px padding-top from the p selector this appears correctly positioned. */
	padding-bottom: 20px; /* slap a border on this and you'll see this div sits directly on top of the orange transparency div */
	padding-top: 20px;
	height: 448px; /* 468px pushes the text and associated scroll bar all the way down to the bottom of the transparency */ 
	overflow: auto; /* overflow is supported --- PADDING TOP AND BOTTOM ALTER THE LENGTH OF THE SCROLL BAR */
}
div#tan {
	background-image: url(../images/transparencytan01opaque.jpg); 
	width: 620px;
	height: 488px;
	position: relative;
	left: 20px;
	top: 100px; /* offset from where the element would appear if not positioned, which in this case would be same as .container class. */
	padding-bottom: 20px;
}
div#tanparagraph { /* this is the container for the positioning of the paragraphs with z-index 2 over the grey transparency */
	width: 620px; /* (the paragraphs cannot be a child of the transparency div and have a higher z-index than its parent) */
	position: relative;
	left: 20px;
	top: -408px; /* with the 20px padding-top from the p selector this appears correctly positioned. */
	padding-bottom: 20px; /* slap a border on this and you'll see this div sits directly on top of the orange transparency div */
	padding-top: 20px;
	height: 448px; /* 468px pushes the text and associated scroll bar all the way down to the bottom of the transparency */ 
	overflow: auto; /* overflow is supported --- PADDING TOP AND BOTTOM ALTER THE LENGTH OF THE SCROLL BAR */
}
div#black {
	background-image: url(../images/transparencyblackopaque.jpg); 
	width: 620px;
	height: 488px;
	position: relative;
	left: 20px;
	top: 100px; /* offset from where the element would appear if not positioned, which in this case would be same as .container class. */
	padding-bottom: 20px;
}
div#blackparagraph { /* this is the container for the positioning of the paragraphs with z-index 2 over the grey transparency */
	width: 620px; /* (the paragraphs cannot be a child of the transparency div and have a higher z-index than its parent) */
	position: relative;
	left: 20px;
	top: -408px; /* with the 20px padding-top from the p selector this appears correctly positioned. */
	padding-bottom: 20px; /* slap a border on this and you'll see this div sits directly on top of the orange transparency div */
	padding-top: 20px;
	height: 448px; /* 468px pushes the text and associated scroll bar all the way down to the bottom of the transparency */ 
	overflow: auto; /* overflow is supported --- PADDING TOP AND BOTTOM ALTER THE LENGTH OF THE SCROLL BAR */
}
div#melon {
	background-image: url(../images/transparencymelonopaque.jpg); 
	width: 620px;
	height: 488px;
	position: relative;
	left: 20px;
	top: 100px; /* offset from where the element would appear if not positioned, which in this case would be same as .container class. */
	padding-bottom: 20px;
	opacity: 0.3; /* this takes precedence over the transparency.class' 0.4 opacity for this specific page */
	-moz-opacity: 0.3; /* this takes precedence over the transparency.class' 0.4 opacity for this specific page */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this takes precedence over the transparency.class' 50 */
}
div#melonparagraph { /* this is the container for the positioning of the paragraphs with z-index 2 over the grey transparency */
	width: 620px; /* (the paragraphs cannot be a child of the transparency div and have a higher z-index than its parent) */
	position: relative;
	left: 20px;
	top: -408px; /* with the 20px padding-top from the p selector this appears correctly positioned. */
	padding-bottom: 20px; /* slap a border on this and you'll see this div sits directly on top of the orange transparency div */
	padding-top: 20px;
	height: 448px; /* 468px pushes the text and associated scroll bar all the way down to the bottom of the transparency */
	overflow: auto; /* overflow is supported --- PADDING TOP AND BOTTOM ALTER THE LENGTH OF THE SCROLL BAR */
}
div#lemon {
	background-image: url(../images/transparencylemonopaque.jpg); 
	width: 620px;
	height: 488px;
	position: relative;
	left: 20px;
	top: 100px; /* offset from where the element would appear if not positioned, which in this case would be same as .container class. */
	padding-bottom: 20px;
	opacity: 0.5; /* this takes precedence over the transparency.class' 0.4 opacity for this specific page */
	-moz-opacity: 0.5; /* this takes precedence over the transparency.class' 0.4 opacity for this specific page */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); /* this takes precedence over the transparency.class' 50 */
}
div#lemonparagraph { /* this is the container for the positioning of the paragraphs with z-index 2 over the grey transparency */
	width: 620px; /* (the paragraphs cannot be a child of the transparency div and have a higher z-index than its parent) */
	position: relative;
	left: 20px;
	top: -408px; /* with the 20px padding-top from the p selector this appears correctly positioned. */
	padding-bottom: 20px; /* slap a border on this and you'll see this div sits directly on top of the orange transparency div */
	padding-top: 20px;
	height: 448px; /* 468px pushes the text and associated scroll bar all the way down to the bottom of the transparency */
	overflow: auto; /* overflow is supported --- PADDING TOP AND BOTTOM ALTER THE LENGTH OF THE SCROLL BAR */
}
div#warm {
	background-image: url(../images/transparencywarmopaque.jpg); 
	width: 620px;
	height: 488px;
	position: relative;
	left: 20px;
	top: 100px; /* offset from where the element would appear if not positioned, which in this case would be same as .container class. */
	padding-bottom: 20px;
	opacity: 0.4; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
	-moz-opacity: 0.4; /* this takes precedence over the transparency.class' 0.4 opacity on this specific page */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* this takes precedence over the transparency.class' 50 */
}
div#warmparagraph { /* this is the container for the positioning of the paragraphs with z-index 2 over the orange transparency */
	width: 620px; /* (the paragraphs cannot be a child of the transparency div and have a higher z-index than its parent) */
	position: relative;
	left: 20px;
	top: -408px; /* with the 20px padding-top from the p selector this appears correctly positioned. */
	padding-bottom: 20px; /* slap a border on this and you'll see this div sits directly on top of the orange transparency div */
	padding-top: 20px;
	height: 448px; /* 468px pushes the text and associated scroll bar all the way down to the bottom of the transparency */
	overflow: auto; /* overflow is supported --- PADDING TOP AND BOTTOM ALTER THE LENGTH OF THE SCROLL BAR */
}
/* ========================================================= end CONTENT CONTAINERS */
h1 {	
	padding: 0 0 0 45px;	
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 1.1em;
	text-align: left;
	letter-spacing: 0.47em;
	z-index: 2;
}
p { 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.86em; /* Zeldman.253 - p should be 0.85x smaller than the user's default font size. */
	line-height: 1.4em;
	text-align: left;
	padding: 20px 45px 0; /* this is just the default, each page usually overrides this */
	margin: 0; 
	text-indent: 3em;
	z-index: 2;
}
p.orangebg {
	color: #0a0a0a;
	padding: 10px 45px;
}
h1.orangebg { 
	color: #0a0a0a;
	text-indent: 2.85em;
	font-size: 0.9em;
}
p.greybg {
	color: #FFD;
	padding: 10px 45px;	
}
h1.greybg {
	color: #FFD;
	margin-left: 42px;
	font-size: 0.9em;
}
.subheader {
	letter-spacing: 0.45em;
	font-weight: bold;
}
p.tanbg {
	color: #FFC;
}
div.tancontactinfo { 
	/* border: 1px solid red; */
	color: #FFC;
	padding: 20px;
	position: absolute;
	bottom: 20px;
	right: 40px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.86em;
	line-height: 1.4em;
	text-align: left;
	z-index: 2;
}
div.tanphone { 
	padding: 10px 0 0;
}
div.tanemail {
	padding: 10px 0 0;
}
p.blackbg {
	color: #FDB;
}
h1.blackbg { 
	color: #FDB; 
	padding-right: 45px;
	margin-left: 42px;
	font-size: 0.9em;
}
p.melonbg {
	color: #0a0a0a;
	padding: 10px 45px; 
	text-indent: 0;
	text-align: left;
	width: 300px;
	margin-left: 168px;
}
h1.melonbg { 
	color: #0a0a0a;
	text-indent: 2.85em;
	font-size: 0.9em;
	padding-left: 70px;
}
h1.lemonbg { 
	color: #000;
	text-indent: 2.85em;
	font-size: 0.9em;
}
p.lemonbg {
	color: #000;
	padding: 10px 45px;
}
h1.warmbg { 
	color: #FCA;
	text-indent: 2.85em;
	font-size: 0.9em;
}
p.warmbg {
	color: #FCA;
	padding: 10px 45px;	
}
img#insignia { /* this is for an image that'll float to the left in a paragraph */
	display: inline;
	float: left;
	margin: 20px 26px 20px 0; 
	border: 1px solid #FFC;
}
/* ========================================== HEADERS */
div#aboutheader { 
	width: 150px;
	height: 100px;
	background-image: url(../images/aboutblack.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 21px; /*21-48*/
	left: 52px;
}
div#phaseheader-about {
	width: 270px;
	height: 50px;
	background-image: url(../images/phasemedia.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 58px; /*58-178*/
	left: 182px;	/* 305px positions this far right with 45px margin like the paragraph, 180px positions it next to the ABOUT header */
}
div#servicesheader { 
	width: 200px;
	height: 100px;
	background-image: url(../images/services.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 21px; /*21-48*/
	left: 52px;
}
div#phaseheader-services {
	width: 270px;
	height: 50px;
	background-image: url(../images/phasemediasrv.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 58px; /*58-218*/
	left: 222px;	
}
div#contactheader { 
	width: 200px;
	height: 100px;
	background-image: url(../images/contactbrown.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 21px; /*21-48*/
	left: 43px;
}
div#phaseheader-contact {
	width: 270px;
	height: 50px;
	background-image: url(../images/phasemediacontact.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 58px; /*58-239*/
	left: 234px;	
}
div#portfolioheader { 
	width: 220px;
	height: 100px;
	background-image: url(../images/portfolio.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 21px; /*21-48*/
	left: 52px;
}
div#phaseheader-portfolio {
	width: 270px;
	height: 50px;
	background-image: url(../images/phasemediaportfolio.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 58px; /*58-260*/
	left: 264px;	
}
div#infoheader { 
	width: 350px;
	height: 100px;
	background-image: url(../images/info.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 21px; /*21-48*/
	left: 51px;
}
div#phaseheader-info {
	width: 270px;
	height: 50px;
	background-image: url(../images/phasemediainfo.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 59px; /*59-325*/
	left: 328px;	
}
div#pagesixheader { 
	width: 350px;
	height: 100px;
	background-image: url(../images/sitesounds.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 21px; /*21-48*/
	left: 51px;
}
div#phaseheader-pagesix {
	width: 270px;
	height: 50px;
	background-image: url(../images/phasemediasitesnds.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 58px; /*58-252*/
	left: 252px;	
}
div#solutionsheader { 
	width: 350px;
	height: 100px;
	background-image: url(../images/solutions.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 21px; /*21-48*/
	left: 51px;
}
div#phaseheader-solutions {
	width: 270px;
	height: 50px;
	background-image: url(../images/phasemediasol.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 58px; /*58-218*/
	left: 266px;	
}
/* ========================================== end HEADERS */
/* ================================================== NAVIGATION LIST */	
div#aboutlinklist { 
	position: absolute;
	top: 124px; /* 84px is even with the transparency */
	right: 100px;
}
div#contactlinklist { 
	position: absolute;
	top: 124px; 
	right: 100px;
}
div#infolinklist { 
	position: absolute;
	top: 124px; 
	right: 100px;
}
div#portfoliolinklist { 
	position: absolute;
	top: 124px; 
	right: 100px;
}
div#serviceslinklist { 
	position: absolute;
	top: 124px; 
	right: 100px;
}
div#pagesixlinklist { 
	position: absolute;
	top: 124px; 
	right: 100px;
}
div#solutionslinklist { 
	position: absolute;
	top: 124px; 
	right: 100px;
}
ul {
	padding: 0;
}
li { 
	list-style-type: none;
}
/* ================================================== end NAVIGATION LIST */
/* ================================================== NAVIGATION BUTTONS */
.navbutton {
	display: block;
	width: 200px;
	height: 38px;
	margin: 2px;
}
/* BACKGROUND IMAGE URL styles are embedded with each page */
#about:hover { 	background-position: 0 -39px; }
#about:visited { outline: none; }
#portfolio:hover { background-position: 0 -39px; }
#portfolio:visited { outline: none; }
#services:hover { background-position: 0 -39px; }
#services:visited { outline: none; }
#info:hover { background-position: 0 -39px; }
#info:visited { outline: none; }
#contact:hover { background-position: 0 -39px; }
#contact:visited { outline: none; }
#pagesix:hover { background-position: 0 -39px; }
#pagesix:visited { outline: none; }
#solutions:hover { background-position: 0 -39px; }
#solutions:visited { outline: none; }

/* ================================================== end NAVIGATION BUTTONS */
/* ========================= STAMP */
#logoorange {
	position: absolute; /* stamp is 120px wide  (left: 452; centers it) */
	top: 728px;
	left: 20px; /* 562px positions this even with the nav buttons RH - 482px positions it LH (when NAV = right: 340px;) */
}
#logoblue {
	position: absolute;
	top: 728px;
	left: 20px; 
}
#logotan {
	position: absolute;
	top: 728px;
	left: 20px; 
}
#logopeach {
	position: absolute;
	top: 728px;
	left: 20px; 
}
#logowinkle {
	position: absolute;
	top: 728px;
	left: 20px; 
}
#logolemon {
	position: absolute;
	top: 728px;
	left: 20px; 
}
#logocreme {
	position: absolute;
	top: 728px;
	left: 20px; 
}
/* ========================= end STAMP */
/* ========================= EVERYTHING AUDIO slogan */
.slogan {
	position: absolute;
	right: 20px; 
	bottom: 244px; /* when a 1px border is added, 244px lines up at the bottom with logostamp */
	padding: 3px 5px 4px 9px;
	font-size: 0.82em;
	letter-spacing: 0.45em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-variant: small-caps;
}
#servpage { 
	border: 1px solid #ffd;
	color: #ffd;
}
#conpage { 
	border: 1px solid #ffc;
	color: #ffc;	
}
#portpage { 
	border: 1px solid #fdb;
	color: #fdb;	
}
#infopage { 
	border: 1px solid #0a0a0a;
	color: #0a0a0a;	
}	
#aboutpage { 
	border: 1px solid #0a0a0a;
	color: #0a0a0a;	
}
#pagesixpage { 
	border: 1px solid #fbffb0;
	color: #fbffb0;	
}
#solutionspage { 
	border: 1px solid #A53;
	color: #A53;	
}
/* ========================= end EVERYTHING AUDIO slogan */