/* ~~ Element/tag selectors ~~ */
 ul, ol, dl {
	padding: 0;
	margin: 0;
}
li{ list-style-type:none}
a img {
	border: none;
}
* {
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	/* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
 	padding-right: 15px;
	padding-left: 15px;
	/* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
 	padding-bottom:0px;
	padding-top:0px;
	color:#FFF;
}
 @charset "UTF-8";
 
@font-face {
	font-family: 'headFont1';
	src: url('fonts/ampersand.eot') ;/* IE */
	src: local('fonts/ampersand'),  url('fonts/ampersand.eot?#iefix') format('embedded-opentype'), url('fonts/ampersand.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'headFont2';
	src: url('fonts/calligraph.eot') ;/* IE */
	src: local('fonts/calligraph'), url('fonts/calligraph.eot?#iefix') format("embedded-opentype"), url('fonts/calligraph.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'font3';
	src: url('fonts/AveriaLibre-Regular.eot') ;/* IE */
	src: local('fonts/AveriaLibre-Regular'),  url('fonts/AveriaLibre-Regular.eot?#iefix') format("embedded-opentype"), url('fonts/AveriaLibre-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
h1 {
	font-size:36px;
	font-family:'headFont2', Verdana, Arial, sans-serif;
	line-height:.8;
	text-shadow:0px 0px 16px #FCC;
}
h2 {
	font-size:28px;
	font-family:'headFont2', Verdana, Arial, sans-serif;
	font-weight:100;
	text-shadow:0px 0px 14px #FCC;
}
h3 {
	font-size:20px;
	font-family:'headFont2', Verdana, Arial, sans-serif;
	font-weight:100;
	text-shadow:0px 0px 12px #FCC;
}
h4 {/* TITLE */
	font-size:20px;
	font-family:'headFont1', Verdana, Arial, sans-serif;
	font-weight:500;
	line-height:1;
	text-shadow:0px 0px 10px #FCC;
}
h5 {/* scrapbook */
	font-size:28px;
	font-family:'headFont1', Verdana, Arial, sans-serif;
	font-weight:500;
	line-height:1.5;
	text-shadow:0px 0px 8px #FCC;
	text-align:center;
}
h6 {/* video/audio headline */
	font-size:24px;
	font-family:'headFont1', Verdana, Arial, sans-serif;
	font-weight:500;
	line-height:1.;
	text-align:center;
	color: #000;
}
.firstCap {
	font-size:24px;
	font-family:'headFont2', Verdana, Arial, sans-serif;
	font-weight:80;
	line-height:.9;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
 a:link {
	color: #FEC;
	text-decoration: underline;/* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #CFC;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
	color:#FC9
}
html, body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	color: #FFF;
	background-color:#000;
	background-image:url(images/interface/arabicPattern.gif);
	background-attachment:fixed;/*font-family:font3, Verdana, Arial, sans-serif;
	font-size:16px;
	line-height:1.3;*/
}
body {
	overflow-x: hidden;
	overflow-y: auto;
}
audio { width:200px;}
.bod {
	position:relative;
	width: 920px;
	margin: 0 auto;
	background-image:url(images/interface/contentBG.png);
	background-position:right;
	background-repeat:repeat-y;/* margin-bottom:200px;
 the auto value on the sides, coupled with the width, centers the layout *//* negative value of footer height 	background-image: url(images/footer.png);
 	background-repeat: no-repeat;
 	background-position:bottom;
 */
}
.foot {
	position:relative;
	margin: 0 auto;
	color: #A32;
	background:#000;
	font-size:12px;
	text-align:center;
	height: 90px;
	left:-10px;
	width: 940px;
	vertical-align:top;
}
td{text-align:center;}
/* NAV & BUTTONS */
 .header {
	position:relative;
	margin: 0 auto;
	top:0;
	left:0px;
	width: 2000px;
	height: 137px;/**/
}
.nav {
	position:absolute;
	top:137px;
	left:-20px;
	width: 240px;
	text-align:right;
	padding: 0px;
	margin: 0;
}
.navButtons {
	position:relative;
	width: 210px;
	text-align:right;
	padding: 10px;
	margin: 0;
	z-index:99;
}
.navBtn, .navBtnDn, .navBtnSuper {
	position:relative;
	left:0px;
	height:30px;
	top: 10px;
	padding-right: 26px;
	color:#000;
	font-size:24px;
	font-family:'headFont2', Verdana, Arial, sans-serif;
	font-weight:100;
	line-height:1.6;
}
.navBtnSuper {
	padding-right: 0px;
}
.navBtnDn {
	padding-right: 4px;
	color:#800;
}
.navBtnSub, .navBtnSubDn {
	position:relative;
	left:0px;
	height:30px;
	width: 20px;
	top: 10px;
	padding-right: 4px;
	color:#000;
	font-size:16px;
	font-family: 'font3', Verdana, Arial, sans-serif;
	font-weight:500;
	line-height:1.4;
}
.navBtnSubDn {
	color:#800;
}
.navButtons a, a:link, a:visited {
	text-decoration:none;
	color:#000;
}
.navButtons a:hover {
	text-decoration:none;
	color:#900;
}
.topScroll {
	position:absolute;
	top:120px;
	left:-30px;
	z-index:1;
}
/* moreInfo */
.moreInfo {
	position:relative;
	top:-400px;
	width: 210px;
	padding: 10px;
	text-align:center;
	border-radius: 10px;
	border-color:#C30;
	background-color:#FFF;
	color:#000;
	font-size:12px;
	text-align:center;
	background-image:url(images/interface/arabicPattern_i.gif);
	background-attachment:fixed;
}
.moreInfo h3 {
	font-size:22px;
	color:#C00;
}
.moreInfo p {
	text-align:right;
	color:#000;
	width: 190px;
	font-family: 'font3';
	font-size:18px;
	line-height:.9;
} 
.moreInfo a:link {
	color:#349;
}
.moreInfo a:visited {
	color:#67C;
}
/* CONTENT */
 .content {
	position:relative;
	top:10px;
	left:220px;
	width:700px;
	min-height:700px;
}
.content a:link {
	color:#FC9;
	text-decoration:underline;
}
.content a:visited {
	color:#FFC;
}
.contentBlock {
	position:relative;
	top:0px;
	left:60px;
	width:570px;
}
.scrapBlock_top, .scrapBlock {
	position:relative;
	top:0px;
	left:60px;
	font-family:'headFont1', Verdana, Arial, sans-serif;
	font-size:22px;
	line-height:1;
}
.scrapBlock_top {
	left:60px;
	width:570px;
}
.scrapBlock {
	left:-60px;
	width:760px;
}
/*.scrapBlock p{width:560px;}*/
ul, li {
	padding-left:30px;
	padding-right:10px;
}
.recipe {
	position:relative;
	left:46px;
	width:470px;
}
/* video is same as photo but has rollover trap */
/* photo */
.photo, .video {
	position:relative;
	padding:10px;
	padding-top:14px;
	padding-bottom:12px;
	left:-10px;
	width:568px;
	border-radius: 12px;
	background-color:#FFF;
	background-image:url(images/interface/arabicPattern_i.gif);
	background-attachment:fixed;
	color:#000;
	font-size:12px;
	text-align:center;
}

.video{
	color:#000;
	font-family:'headFont1', Verdana, Arial, sans-serif;
	font-size:18px;
	text-align:center;
}

.photo  p, .video  p {
	color:#000;
	font-size:12px;
	text-align:left;
	}
.photo  a:link, .video  a:link {
	color: #009;
	font-size:12px;
	text-align:left;
	}
.photo, .video: h5, h4 {
	color:#000;
	}
	
/* rndRect */
.rndRect {
	position:relative;
	top:0px;
	left:0px;
	padding: 10px;
	text-align:center;
	border-radius: 20px;
	background-color:#FFF;
	background-image:url(images/interface/arabicPattern_i.gif);
	background-attachment:fixed;
	color:#000;
	font-size:12px;
	text-align:center
}
.rndRect h2 {
	color:#C00
}
.rndRect p, .rndRect h3 {
	text-align:left;
	color:#000;
}
.rndRect a:link {
	color:#43F;
}
.rndRect a:visited {
	color:#76F;
}
/* CONTENT/RIGHT COLUMN */

 .rightCol {
	position:absolute;
	top: 0px;
	left: 340px;
	width:554px;
	bottom:30px;/*height: 96%;
 	min-height: 96%;
*/
}
.subBlock {
	position:relative;
	top:0px;
	left:6px;
	width:554px;
	overflow-y:auto;
	height: 100%;
	min-height: 100%;
}
/*FACEBOOK*/

 .FBhead, .FB {
	position:absolute;
	color:#FFF;
	bottom:0px;
	left:0px;
	height:20px;
	width:380px;
	padding:0;
	text-align:left;
	border-top-right-radius: 10px;
	background-color: #3B5997;
}
.FB {
	color:#000;
	bottom:-200px;
	height:100px;
	width:360px;
	padding:10px;
	background-color:#FFF;
	overflow-y:auto;
}
.commentsHead, .comments {
	color:#FFF;
	position:absolute;
	left:170px;
	bottom:0px;
	width:580px;
	height:20px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding:0;
	background-color: #3B5997;
}
.comments {
	color:#000;
	bottom:-220px;
	height:200px;
	width:520px;
	padding:10px;
	border-top-left-radius: 10px;
	background-color:#FFF;
	overflow-y:auto;
}