BODY { 
	position: relative;

	background: #000000 url(../images/gradient_bg.jpg) top left repeat-x;

	margin: 0;
	padding: 0;
}


A IMG {
	border: 0;
}

/*  This style deprecates CELLPADDING on all tables  */
TABLE TD {
	padding: 0;
}


IMG.arrow {
	margin-right: 2px;
}









/*   CONTAINER DIV     */

DIV#page_container {
	position: relative;
	
	background-color: #fff;

	margin: 0 auto;  /*  center horizontally  */
	padding: 0;
	
	width: 733px;
	height: auto;
}









/*   MASTHEAD AREA     */

DIV#masthead {
	position: relative;

	background: #000000 url(../images/masthead_bg.jpg) top left repeat-x;

	margin: 0;
	padding: 0;

	width: 733px;
	height: 80px;
}

DIV#masthead IMG#macrobatix {
	position: absolute;
	top: 21px;
	left: 10px;
	
	width: 200px;
	height: 59px;
}

DIV#masthead IMG#apple {
	position: relative;
	top: 5px;
}

DIV#masthead DIV#sub_menu {
	position: absolute;
	top: 0;
	right: 10px;
	
	margin: 0;
	padding: 0;
	
	width: auto;

	font: bold 10px Arial, sans-serif;
	color: #FFF;
	line-height: 14px;
	
	text-align: right;
}

DIV#masthead DIV#sub_menu A {
	color: #FFF;
	text-decoration: none;
}

DIV#masthead DIV#sub_menu A:hover {
	color: #F60;
}










/*   MENU AREA     */

div#menu {
	background-color: #3399cc;
}

div#menu ul {
	margin: 0;
	padding: 0;

	font: bold 12px/2em Arial, sans-serif;
	color: #000;

	text-align: center;
	
	overflow: hidden;
}

div#menu ul li {
	display: inline;
}

div#menu ul li a {
	border: 1px solid #3399cc;
	
	padding: 0.5em 2.5em;
	color: #000000;
	text-decoration: none;
}

div#menu ul li a:hover {
	border: 1px solid #069;
	background-color: #6CF;
	color: #036;
}

div#menu ul li#active a {
	border: 1px solid #069;
	background-color: #ffffff;
}
































/*   LARGE BEAUTY AREA     */

DIV#beauty {
	position: relative;

	background: #000 url(../images/home_beauty.jpg) top left no-repeat;

	margin: 0;
	padding: 10px 0 1px 0;

	width: 733px;
	height: auto;
}

DIV#beauty A, 
DIV#beauty EM {
	margin: 0;
	padding: 0;

	font: 12px/19px Arial, sans-serif;
	color: #999;

	text-decoration: none;
}

DIV#beauty A:hover, 
DIV#beauty EM:hover {
	text-decoration: underline;
}

DIV#beauty DIV#large {
	position: absolute;
	top: 80px;
	left: 275px;   /*  Change this number with new beauty layouts */
	
	padding-bottom: 320px;   /*  Change this number with new beauty layouts, it broadens the clickable area */
	
	cursor: pointer; 
	cursor: hand;
}

DIV#beauty DIV#large H1 {
	margin: 0 0 5px 0;
	padding: 0;

	font: 18px/22px Arial, sans-serif;
	color: #CCC;
}


DIV#beauty DIV#large A {
	color: #fff;
}





/*   ADS     */

DIV#beauty DIV.ad {
	border: 1px solid #CCC;
	
	margin: 0 0 5px 5px;
	padding: 0 0 28px 0;
	
	width: 235px;

	vertical-align: top;
	
	cursor: pointer; 
	cursor: hand;
}

DIV#beauty DIV.large_ad {
	border: 1px solid #CCC;
	
	margin: 15px 0 5px 5px;
	padding: 0 0 5px 0;

	width: 721px;

	vertical-align: top;
	
	cursor: pointer; 
	cursor: hand;
}

DIV#beauty DIV.ad H2 {
	margin: 18px 2px 0 0;
	padding: 0;

	font: bold 16px/16px Arial, sans-serif;
	color: #069;
}

DIV#beauty DIV.ad P {
	margin: 0 4px 5px 0;
	padding: 0;

	font: 14px/16px Arial, sans-serif;
	color: #666;
}

DIV#beauty DIV#ad_left {
	background: #fff url(../images/ad_left_bg.jpg) top left no-repeat;
}

DIV#beauty DIV#ad_left H2, 
DIV#beauty DIV#ad_left P, 
DIV#beauty DIV#ad_left IMG.arrow {
	margin-left: 118px;
}

DIV#beauty DIV#ad_middle {
	background: #fff url(../images/ad_middle_bg.jpg) top left no-repeat;
}

DIV#beauty DIV#ad_middle H2, 
DIV#beauty DIV#ad_middle P, 
DIV#beauty DIV#ad_middle IMG.arrow {
	margin-left: 118px;
}

DIV#beauty DIV#ad_right {
	background: #fff url(../images/ad_right_bg.jpg) top left no-repeat;
}

DIV#beauty DIV#ad_right H2, 
DIV#beauty DIV#ad_right P, 
DIV#beauty DIV#ad_right IMG.arrow {
	margin-left: 134px;
}


DIV#beauty DIV.large_ad H3 {
	margin: 82px 80px 5px 295px;
	padding: 0;

	font: 18px/20px Arial, sans-serif;
	color: #fff;
}

DIV#beauty DIV.large_ad A, 
DIV#beauty DIV.large_ad EM {
	color: #FFF;
}


DIV#beauty DIV#ad_full {
	background: #306 url(../images/ad_full_bg.jpg) top left no-repeat;
}

DIV#beauty DIV#ad_full IMG.arrow {
	margin-left: 295px;
}














/*   CONTENT AREA     */

DIV#content {
	background-color: #fff;

	margin: 0;
	padding: 0;
}

DIV#sidebar {
	float:left;
	width: 180px;
}

DIV#description {
	float:left;	
	width: 540px;
}

DIV#clear {
	clear: both;
}

DIV#single {
	width: 100%;
}




/*   CONTENT AREA - PHOTO COLUMN    */

div#content #sidebar {
	margin: 30px 0 0 10px;
	padding: 0 0 10px 0;
}

div#content #sidebar #contact {
	border: 1px solid #999;
	background: #dbdbdb;
	
	list-style-type: none;

	margin: 12px 0 5px 0;
	padding: 5px 5px 20px 5px;

	font: 11px/15px Arial, sans-serif;
	color: #666;
	
	text-align: left;
}

div#content #sidebar #contact li {
	margin: 0;
	padding: 0;
}

div#content #sidebar #contact li span {
	display: block;
}

div#content #sidebar #contact li.address {
	margin: 0 0 1em 0;
}

div#content #sidebar #contact li.padded {
	margin: 1em 0 1em 0;
}

div#content #sidebar #contact li.email, 
div#content #sidebar #contact li.links {
	margin: 1em 0 0 0;
}

div#content #sidebar #contact li a {
	display: block;
	color: #069;	
	text-decoration: underline;
}

div#content #sidebar a:hover {
	color: #F60;
}	






/*  PRODUCT THUMBS AND ZOOM ICONS */

DIV#content #sidebar dl {
	margin: 0 0 60px 0;
	padding: 0;
}

DIV#content #sidebar dl lh img {
	border: 1px solid rgb(180,180,180);
	width: 178px;
}

DIV#content #sidebar dl dt a {
	font: bold 11px/20px Arial, sans-serif;
	color: #333;
	
	text-decoration: none;
}

DIV#content #sidebar dl dt a:hover {
	color: #333;
}

DIV#content #sidebar dl dd {
	position: relative;
	top: -20px;
		
	font: bold 11px Arial, sans-serif;
	color: #267abf;
	line-height: 20px;

	float: right;
}

DIV#content #sidebar dl dd a {
	color: #333;	
	text-decoration: none;
}

DIV#content #sidebar dl dd a:hover {
	color: #F60;
}

DIV#content #sidebar dl dd img {
	position: relative;
	top: 5px;
}



/* TUTORIALS */


.tut_thumbs {
	border: 1px solid #999;
	float: left;
	margin: 0 10px 7px 21px;
	padding: 0;
}

P. tut_desc {
	margin: 0 0 80px 0;
	padding: 0 0 20px 0;
	width: 380px;
}


.pdfs {
	clear: both;

	margin: 0;
	padding: 5px 20px 50px 20px;

	font: 12px/20px Arial, sans-serif;
}

.pdfs dt {
	float: left;

	margin: 0;
	padding: 0;

	width: 45px;
}

.pdfs dt img {
	float: right;
}


.pdfs dd {
	float: left;

	margin: 0 0 0 8px;
	padding: 4px 0 0 0;

	width: 430px;
}

.pdfs a {
	display: block;
	font-weight: bold;
	color: #069;
}


.big_pdfs {
	clear: both;

	margin: 0;
	padding: 5px 20px 50px 20px;

	font: 12px/20px Arial, sans-serif;
}

.big_pdfs dt {
	float: left;

	margin: 0;
	padding: 0;

	width: 150px;
}

.big_pdfs dt img {
	float: right;
	border: 1px solid #999;
}


.big_pdfs dd {
	float: left;

	margin: 0 0 0 8px;
	padding: 4px 0 0 0;

	width: 260px;
}

.big_pdfs a {
	display: block;
	font-weight: bold;
	color: #069;
}


div.duo_pdfs_left,
div.duo_pdfs_right {
	width: 255px;
	font: bold 12px/16px Arial, sans-serif;
}

div.duo_pdfs_left {
	float: left;
	padding: 0 0 0 20px;
}

div.duo_pdfs_right {
	float: right;
	padding: 0 0 0 0;
}

div.duo_pdfs_left img,
div.duo_pdfs_right img {
	border: 1px solid #999;
	margin: 25px 0 8px 0;
}

div.duo_pdfs_left img.top_tutorial,
div.duo_pdfs_right img.top_tutorial {
	margin-top: 0;
}

div.duo_pdfs_left a,
div.duo_pdfs_right a {
	color: #069;
}





/*  RSS FEED (careful when editing, not all styles look well coded, but results are complicated)  */

DIV#content #sidebar .rss-box {
	border: 1px solid #333333;
	background-color: #dbdbdb;
	
	margin: 12px 0;
	padding: 0;

	font: 11px/14px Arial, sans-serif;
}

DIV#content #sidebar .rss-title {
	display: block;
	background-color: #333333;
	margin: 0;
	padding: 0;
	
	font: bold 11px/13px Arial, sans-serif;	
}

DIV#content #sidebar .rss-title .rss-title {
	margin: 0 0 25px 0;
	padding: 3px 8px 3px 5px;

	font: bold 11px/13px Arial, sans-serif;
}

DIV#content #sidebar .rss-title  a {
	color: #dbdbdb;
	text-decoration: none;
}

DIV#content #sidebar .rss-title a:hover {
	color: #ffffff;
}

DIV#content #sidebar .rss-items {
	list-style-type: none;
	
	margin: -20px 8px 10px 5px;
	padding: 0;

	color: #999;
}	

DIV#content #sidebar .rss-item {
	margin: 0 0 0.75em 0;
	padding: 0;

	font: 11px/12px Arial, sans-serif;
	color: #666;
}

DIV#content #sidebar .rss-item a {
	font: 11px/14px Arial, sans-serif;
	color: #545454;
}	




/*  RSS FEED IN DESCRIPTION COLUMN (careful when editing, not all styles look well coded, but results are complicated)  */

DIV#content #description .rss-box {
	margin: 0 30px 0 20px;
	padding: 0;
}

DIV#content #description .rss-items {
	list-style-type: none;
	
	margin: 0;
	padding: 0;
}	

DIV#content #description .rss-item {
	margin: 0 0 2.5em 0;
	padding: 0;

	font: 12px/16px Arial, sans-serif;
	color: #000;
}

DIV#content #description .rss-item a {
	font-weight: bold;
	color: #069;
}	

DIV#content #description .rss-date {
	position: relative;
	top: -3px;
	
	font: 12px/25px Arial, sans-serif;
	color: #666;
}	











/*   CONTENT AREA - DESCRIPTION COLUMN    */

DIV#content #description, 
DIV#content #single {
	background-color: #fff;

	padding: 20px 0 75px 0;
}

DIV#content #description H1, 
DIV#content #single H1 {
	margin: 10px 0 30px 20px;
	padding: 0;

	font: 28px 'Georgia', 'Palatino Linotype', 'Book Antiqua', 'Palatino', serif;
	color: #000;
	line-height: 28px;
}




DIV#content #description H1 EM, 
DIV#content #single H1 EM {
	font: 20px 'Georgia', 'Palatino Linotype', 'Book Antiqua', 'Palatino', serif;
	color: #000;
	line-height: 24px;
}

DIV#content #description H1 SUP,
DIV#content #description H2 SUP, 
DIV#content #single H1 SUP, 
DIV#content #single H2 SUP {
	margin: 0;
	padding: 0;

	font: 10px Arial, sans-serif;
	color: #000;
	line-height: 24px;
}

DIV#content #description H2, 
DIV#content #single H2 {
	margin: 50px 20px 12px 20px;
	padding: 0;

	font: 20px 'Georgia', 'Palatino Linotype', 'Book Antiqua', 'Palatino', serif;
	color: #000;
	line-height: 24px;
}

DIV#content #description P, 
DIV#content #single P {
	margin: 0 30px 20px 20px;
	padding: 0;

	font: 12px Arial, sans-serif;
	color: #000;
	line-height: 20px;
}



DIV#content #description P SUP, 
DIV#content #single P SUP {
	margin: 0;
	padding: 0;

	font: 10px Arial, sans-serif;
	color: #000;
	line-height: 10px;
}


DIV#content #description P A, 
DIV#content #single P A, 
A.url {
	color: #069;
}

DIV#content #description P A:hover, 
DIV#content #single P A:hover, 
A.url:hover {
	color: #F60;
}


DIV#content #description H3, 
DIV#content #single H3 {
	border-bottom: 1px solid #CCC;

	margin: 30px 20px 10px 20px;
	padding: 0;

	font: bold 12px Arial, sans-serif;
	color: #666;
	line-height: 12px;
}

DIV#content #description H4, 
DIV#content #single H4 {
	margin: 50px 30px 0 20px;
	padding: 0;

	font: bold 14px Arial, sans-serif;
	color: #000;
	line-height: 20px;
}



DIV#content #description UL, 
DIV#content #single UL {
	margin: 5px 30px 30px 35px;
	padding: 0;

	font: 12px Arial, sans-serif;
	line-height: 14px;
	
	list-style: square;
}

DIV#content #description UL LI, 
DIV#content #single UL LI {
	margin: 0 0 9px 0;
	padding: 0;

	color: #CCC;
}

DIV#content #description UL LI SPAN, 
DIV#content #single UL LI SPAN {
	color: #000;
}

DIV#content #description OL, 
DIV#content #single OL {
	margin: 5px 30px 25px 40px;
	padding: 0;

	font: 12px Arial, sans-serif;
	line-height: 14px;
}

DIV#content #description OL LI, 
DIV#content #single OL LI {
	margin: 0 0 9px 0;
	padding: 0;
	
	font-weight: bold;

	color: #666;
}

DIV#content #description OL LI SPAN, 
DIV#content #single OL LI SPAN {
	font-weight: normal;

	color: #000;
}



DIV#content #description LI EM {
	background-color: rgb(220,220,220);
	padding: 0 0.35em;
	font-weight: bold;
	font-style: normal;
	color: #000;
}










DIV#content #description DIV.publication, 
DIV#content #single DIV.publication {
	background-color: #999;
	
	margin: 20px 25px 0 10px;
	padding: 1px 1px 10px 1px;
	
	width: 200px;
	
	float: right;
}

DIV#content #description DIV.publication H1, 
DIV#content #single DIV.publication H1 {
	margin: 0;
	padding: 5px 5px 0 5px;

	font: bold 12px Arial, sans-serif;
	color: #333;
	line-height: 16px;
}

DIV#content #description DIV.publication P, 
DIV#content #single DIV.publication P {
	margin: 0;
	padding: 0 25px 0 5px;

	font: italic 12px Arial, sans-serif;
	color: #000;
	line-height: 14px;
}

















DIV#content #description DIV.link_box {
	margin: 50px 30px 10px 25px;
	padding: 0;
}

DIV#content #description DIV.link_box A {
	font: bold 12px 'Trebuchet MS', Arial, sans-serif;
	color: #069;
	line-height: 16px;

	text-decoration: none;
}

DIV#content #description DIV.link_box A:hover {
	color: #F60;
	text-decoration: underline;
}

DIV#content #description DIV.link_box A:hover IMG {
	text-decoration: none;
}

DIV#content #description DIV.link_box IMG {
	margin-right: 5px;
}







.img_right {
	float: right;
	margin: 0 20px 5px 10px;
}



.right_bar {
	float: right; 
	margin: 20px 3px 0 10px;
	padding: 0;
}

.div_right {
	border: 1px solid #666;
	background: #F60;
	color: #FFF;

	float: right;
	margin: 0 3px 10px 10px;
	padding: 10px;

	width: 160px;
	height: 107px;
}










/*   APPOINTMENTS   */

.instructions {
	float: left;

	background: #dbdbdb;

	margin: 5px 0 0 0;
	padding: 10px 0 140px 0;

	width: 300px;
}


TABLE.appointment {
	float: right;
	
	border: 0;
	border-collapse: collapse;
	
	margin: 20px 0 0 0;
	padding: 0;

	width: 405px;
}

TABLE.appointment td {
	margin: 0;
	padding: 0;

	font: 14px Arial, sans-serif;
	color: #000;
	line-height: 26px;
}


TABLE.appointment label {
	display: block;
	
	margin: 8px 0 0 0;
	
	font: 14px Arial, sans-serif;
	color: #000;
	line-height: 16px;
}

TABLE.appointment INPUT.basic {
	border: 1px solid #999;

	margin: 0 0 10px 0;
	padding: 2px;
	
	width: 175px;

	font: 14px Arial, sans-serif;
	color: #000;
	line-height: 16px;
}


TABLE.appointment INPUT.long {
	border: 1px solid #999;

	margin: 0 0 10px 0;
	padding: 2px;
	
	width: 375px;

	font: 14px Arial, sans-serif;
	color: #000;
	line-height: 16px;
}

TABLE.appointment INPUT.form_button {
	margin-top: 10px;
}

.required {
	margin-left: 1px;
	font-weight: bold;
	font-size: 16px;
	color: #F60;
}


.recap {
	float: right;
	width: 400px;
}

#content #single .recap p,
#content #single .recap h1,
#content #single .recap h2 {
	margin-left: 0;
}


#content #single .technician {
	padding: 0 0 20px 20px;
}








/*   FORMS     */

FORM.layedout INPUT, 
FORM.layedout TEXTAREA {
	border: 1px solid #666;
	background-color: #CCC;

	margin: 2px 0 2px 25px;
	padding: 2px;

	width: 330px;
	
	font: 14px Arial, sans-serif;
	color: #000;
	line-height: 14px;
}	

FORM.layedout INPUT:hover, 
FORM.layedout TEXTAREA:hover {
	background-color: #ffddba;
	cursor: text;
}

FORM.layedout INPUT:focus, 
FORM.layedout TEXTAREA:focus {
	background-color: #EBEBEB;
}



FORM.layedout TEXTAREA {
	height: 50px;
}

FORM.layedout INPUT {
	height: 16px;
}

FORM.layedout INPUT.button {
	border: 2px solid #CCC;
	background-color: #069;

	margin: 0 10px 0 25px;
	padding: 2px 10px 3px 10px;
	
	height: auto;
	width: auto;

	font: bold 14px Arial, sans-serif;
	color: #FFF;
	line-height: 14px;
}

FORM.layedout INPUT.button:hover {
	background-color: #F60;
	
	cursor: pointer; 
	cursor: hand;
}



DIV#content #single FORM.layedout P {
	margin: 30px 0 0 25px;
	padding: 0;

	width: auto;

	font: 14px Arial, sans-serif;
	color: #333;
	line-height: 14px;
}

DIV#content #single FORM.layedout P B {
	position: relative;
	top: 4px;

	font: 20px Arial, sans-serif;
	color: #C60;
	line-height: 14px;
}

DIV#content #single FORM.layedout P.download_instructions {
	margin: 0 0 0 25px;
	
	width: 330px;

	font: italic 12px Arial, sans-serif;
	color: #333;
	line-height: 14px;
}



DIV#content #single FORM.layedout P.tagline {
	margin-top: 35px;
	margin-bottom: 10px;

	width: 320px;

	font: bold 14px Arial, sans-serif;
	color: #069;
	line-height: 16px;
}


























/*   FOOTER AREA     */

#footer {
	margin: 5px auto 50px auto;
	width: 733px;
}

#footer UL {
	margin: 0 auto;
	padding: 3px 0;

	width: 733px;
	font: 12px Arial, sans-serif;
	color: #666;
	
	text-align: center;
}

#footer UL LI {
	display: inline;   /*  making the list items inline rather than the list removes the bullets  */
	border-right: 1px solid #222222;
	
	padding: 0.15em 1em;
}

#footer UL LI#last {
	border: none;
	white-space: nowrap;
}

#footer #active { 
	font: bold 12px Arial, sans-serif;
	color: #CCC;
}

#footer A {
	color: #999;
	line-height: 1.85em;

	text-decoration: none;

	white-space: nowrap;
}

#footer A.subtle {
	color: #666;
}

#footer A:hover {
	text-decoration: underline;
}

#footer A.url {
	color: #39C;
	text-decoration: underline;
}

#footer A.url:hover {
	color: #F60;
}