/***************************************************
LAYOUT ELEMENTS
***************************************************/

html, body {
	text-align: center; 
	font-family: arial, helvetica, sans-serif;
	color: #535353;
	
}

#frame {
    width: 900px;
    margin: 0px auto 10px auto;
    padding: 0px;    
	font-size: 12px;
	background-color: #ffffff;	
	position: relative;
	border: 1px solid #d8d8d8;
	background-color: #fbfbfb;
	font-size: 14px;
}

#content {
    padding: 10px;
}

.comic {
	width: 800px;
	height: 660px;
    padding: 0px;
	margin: 0px;
}

.retailer {
	width: 800px;
	height: 625px;
    padding: 0px;
	margin: 0px;
	text-align: left;
	background: url(images/retailer_logos_bg.gif) no-repeat;
}

.leftframe {
	width: 210px; 
	float: left; 
	font-size: 14px;
	font-weight: bold;
	padding: 0px;
}
.rightframe {
	width: 550px; 
	float: right; 
}

.fantasy_prone {
	width: 800px;
	height: 280px;
    padding: 20px 0 0 0;
	margin: 0px;
	text-align: left;
}
.lframe {
	width: 470px; 
	float: left; 
	padding: 0px;	
}
.rframe {
	width: 300px; 
	float: right;
	font-size: 12px;
	background: url(images/bg_retailer_visit.gif) no-repeat;
}

.copyrights {
    width: 900px;
    margin: 0px auto 10px auto;
    padding: 0 15px 0 0px;
	font-size: 10px;
	color: #aeaeae;
	text-align: right;
}

.clear { clear:both; }


.comic_frame {
	width: 800px;
	height: 360px;
    padding: 20px 0 0px 0;
	margin: 0px;
	text-align: left;
}
.comic1 {
	width: 250px; 
	float: left; 
}
.comic2 {
	width: 300px; 
	float: left;
	text-align: center;
}
.comic3 {
	width: 250px; 
	float: left; 
	text-align: right;
}


/***************************************************
TEXT ELEMENTS
***************************************************/
a:link {color: #535353; text-decoration: none;}
a:visited {color: #535353; text-decoration: none;}
a:hover {color: #55a5cd; text-decoration: underline;}
a:active {color: #535353; text-decoration: none;}	

a.orange:link {color: #ff9733; text-decoration: none;}
a.orange:visited {color: #ff9733; text-decoration: none;}
a.orange:hover {color: #55a5cd; text-decoration: underline;}
a.orange:active {color: #ff9733; text-decoration: none;}

a.background
{
    display: block;
    width: 258px; /*width of image */
    height: 32px; /* height of image */
    background-image: url(images/nav_bg.gif);
	text-decoration: none;
}

a.background:hover
{
    display: block;
    width: 258px; /*width of image */
    height: 32px; /* height of image */
    background-image: url(images/nav_bg_roll.gif);
	text-decoration: none;
}

a.background2
{
    display: block;
    width: 258px; /*width of image */
    height: 24px; /* height of image */
    background-image: url(images/nav_bg_end.gif);
	text-decoration: none;
}

a.background2:hover
{
    display: block;
    width: 258px; /*width of image */
    height: 24px; /* height of image */
    background-image: url(images/nav_bg_end.gif);
	text-decoration: none;
}

.arrow_left {
   z-index:10;
   position: absolute;
   top: 328px;
   left: 15px;
   padding: 0px;
}

.arrow_right {
   z-index:10;
   position: absolute;
   top: 328px;
   left: 860px;
   padding: 0px;
}

.arrow_left2 {
   z-index:10;
   position: absolute;
   top: 500px;
   left: 15px;
   padding: 0px;
}

.arrow_right2 {
   z-index:10;
   position: absolute;
   top: 500px;
   left: 860px;
   padding: 0px;
}


ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }
ul li {
  margin: 2px 0 6px 0;
  padding: 0;
  font-weight: bold;
  line-height: 23px; /* height of icon */
  background-repeat: no-repeat;
  background-position: 0 50%;
  }
ul li a {
  padding-left: 15px; /* width of icon + whitespace */
  }

 
 /* START comic_buy.html page */
a.bg
{
    display: block;
    width: 258px; /*width of image */
    height: 30px; /* height of image */
    background-image: url(images/nav_bg2.gif);
	text-decoration: none;
}

a.bg:hover
{
    display: block;
    width: 258px; /*width of image */
    height: 30px; /* height of image */
    background-image: url(images/nav_bg2_roll.gif);
	text-decoration: none;
}


.ul2 {
  margin: 0;
  padding: 0;
  list-style: none;
  }
.ul2 li {
  margin: 0px 0 6px 0;
  padding: 0;
  font-weight: bold;
  background-repeat: no-repeat;
  background-position: 0 50%;
  }
.ul2 li a {
  padding-left: 24px; /* width of icon + whitespace */
  }
 /* END comic_buy.html page */
  
.more {
   z-index:10;
   position: absolute;
   top: 410px;
   left: 785px;
   padding: 0px;
}










.fl { float:left; }
.fr { float:right; }
.tar { text-align:right; }
.tal { text-align:left; }
.tac { text-align:center; }



#leftframe {width: 1080px; float: left; background: url(images/bg.gif) repeat;}
#leftframe2 {width: 1080px; float: left; background: url(images/bg2.gif) repeat;} /*-- use for long vertical pages --*/

#nav  { 
	width: 1080px; 
	height: 45px; 
	text-align: left;
	margin:0 auto;
    padding: 0px;
}

#rightframe {
	width: 50px; 
	height: 100%; 
	float: right;
	border: 1px solid #fff;
} 

#rightframea {
	width: 25px; 
	height: 100%; 
	float: left;
	padding: 0 0 0 6px;
} 

#rightframeb {
	width: 19px; 
	height: 100%; 
	float: right;
} 
/*-- for right frame to align bottom--*/
#fixed {
	float:right;
	background:#fff;
	display:block;
}
#floating {
	background:#fff;
	position:relative;
}
#floating div {
	position:absolute;
	bottom:0;
	left:0;
}
/*-- for right frame to align bottom--*/

.span1-tagline {width: 80px; float: left;}

/* ROWS */
.contentleft {width: 375px; float: left;} /* for homepage only */
.contentright {width: 703px; float: left;} /* for homepage only */

.span1-tagline {width: 80px; float: left;}
.span1-text {width: 245px;  float: left; padding: 25px 0 20px 10px;}
.span1-image {width: 743px; float: left;}

.span1b-text {width: 285px;  float: left; padding: 25px 0 20px 10px;}  /* home page  */
.span1b-image {width: 703px; float: left;}  /* home page  */

.span1c-text {width: 215px;  float: left; padding: 25px 0 20px 10px;} /* creative cuts  */
.span1c-image {width: 773px; float: left;} /* creative cuts  */

.span2-textleft {width: 464px;  float: left; padding: 25px 30px 40px 10px;}
.span2-textright {width: 464px; float: left; padding: 25px 30px 40px 0;}

.span2b-textleft {width: 445px;  float: left; padding: 25px 30px 40px 10px;} /* meet peeka bu */
.span2b-textright {width: 483px; float: left; padding: 4px 30px 40px 0;}  /* meet peeka bu */

.span3 {width: 1048px; padding: 0px 30px 20px 0px;} /* benefits: friends of peeka bu */
.span4 {width: 1078px; padding:  0px;} /* where to use */

.span5 {width: 998px; padding: 0px; float: left;} /* creative cuts */
.span5b {width: 968px; padding: 25px 20px 0px 10px;} /* creative cuts */
.span5C {width: 460px; padding: 0px 20px 0px 10px; margin-left: 230px; text-align: center;} /* creative cuts */


.buy-left {width: 310px; float: left; padding: 25px 0px; text-align: center;}
.buy-center{width: 290px; float: left; padding: 25px 30px; text-align: center;}
.buy-right {width: 308px; float: left; padding: 25px 0px 30px 0px; text-align: center;}





/***************************************************
TEXT ELEMENTS
***************************************************/




a.pink:link {color: #ff4bcf; text-decoration: none;}
a.pink:visited {color: #ff4bcf; text-decoration: none;}
a.pink:hover {color: #12bba1; text-decoration: none;}
a.pink:active {color: #ff4bcf; text-decoration: none;}

a.white:link {color: #fff; text-decoration: none;}
a.white:visited {color: #fff; text-decoration: none;}
a.white:hover {color: #12bba1; text-decoration: none;}
a.white:active {color: #fff; text-decoration: none;}

a.black:link {color: #000; text-decoration: none;}
a.black:visited {color: #000; text-decoration: none;}
a.black:hover {color: #12bba1; text-decoration: none;}
a.blackte:active {color: #000; text-decoration: none;}

H1 {
    font-size: 18px;
	color: #000;
	margin: 0px;
	padding: 0px;
}

H2 {
	font-size: 12px;
	color: #000;
	margin: 0px;
	padding: 0px;
}

.paragraph{
	font-size: 12px;
	color: #3d3d3d;
	line-height: 1.8em;
}
.paragraph2{
	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
	color: #515151;
	text-align: left;
}

H3 {
	font-family: arial, helvetica, sans-serif;
    font-size: 14px;
	color: #000;
	margin: 0px;
	padding: 0px;
}

H4 {
    font-size: 14px;
	color: #009999;
	margin: 0px;
	padding: 0 0 10px 0;
}

.mirrorview{
	font-size: 12px;
	color: #fff;
	font-weight: bold;
	padding: 4px 9px;
}

.textblue {color: #12bba1;}
.textgreen {color: #39ce5a;}
.textdarkgreen {color: #069d3c;}

.bullets {
   padding: 0 0 0 15px;
   margin: 0px;
   line-height: 18px;
  }

.bullets2 {
   padding: 0 0 0 25px;
   margin: 0px;
   line-height: 16px;
  }
  

 /* this is for the contact */ 
.contactus {
   z-index:10;
   position: absolute;
   width: 440px;
   height: 110px;
   top: 606px;
   left: 619px;
   background-color: #000;
   color: #fff;
   text-align: left;
   font-size: 12px;
   padding: 10px;
   overflow-y: hidden
  }
 /* this is for the contact */ 
 
  /* this is for the wholesale */ 
.wholesale {
   z-index:10;
   position: absolute;
   width: 430px;
   height: 110px;
   top: 606px;
   left: 619px;
   background-color: #000;
   color: #fff;
   text-align: left;
   font-size: 12px;
   padding: 10px 10px 10px 20px;
   overflow-y: hidden
  }
 /* this is for the wholesale */ 
 
  /* this is for the wholesale */ 
.contact {
   width: 702px;
   height: 356px;
   background: url(images/homepage/mirror-bottom.jpg) no-repeat;
   color: #fff;
   font-size: 12px;
   padding: 0px;
  }
 /* this is for the wholesale */ 
 
.daretodesign {
   z-index:10;
   position: absolute;
   top: 45px;
   left: 553px;  
  }
 
/* this is for gift box */ 
.giftbox {
   z-index:10;
   position: absolute;
   top: 52px;
   left: 944px;
   padding: 10px;
   overflow-y: hidden
  }
 /* this is for the gift box */ 
 
/* this is for sarah */ 
.sarah_nehamen {
   z-index:10;
   position: absolute;
   top: 202px;
   left: 940px;
   padding: 10px;
   overflow-y: hidden
  }
 /* this is for sarah */ 
 
/* this is for creative cuts section */ 
.one {
   z-index:10;
   position: absolute;
   top: 322px;
   left: 430px;
   padding: 0px;
  }
  
.two {
   z-index:10;
   position: absolute;
   top: 322px;
   left: 595px;
   padding: 0px;
  }

.three {
   z-index:10;
   position: absolute;
   top: 322px;
   left: 780px;
   padding: 0px;
  }
 
.four {
   z-index:10;
   position: absolute;
   top: 322px;
   left: 965px;
   padding: 0px;
  }
  
.five {
   z-index:10;
   position: absolute;
   top: 420px;
   left: 340px;
   padding: 0px;
  }

.six {
   z-index:10;
   position: absolute;
   top: 420px;
   left: 515px;
   padding: 0px;
  }

.seven {
   z-index:10;
   position: absolute;
   top: 420px;
   left: 695px;
   padding: 0px;
  }

.eight {
   z-index:10;
   position: absolute;
   top: 420px;
   left: 875px;
   padding: 0px;
  }
/* this is for creative cuts section */ 

/* this is for PURCHASE section */ 
#buygift {
   z-index:10;
   position: absolute;
   top: 573px;
   left: 208px;
   padding: 0px;
   font-weight: bold;
  }
  
#buyeco {
   z-index:10;
   position: absolute;
   top: 608px;
   left: 208px;
   padding: 0px;
   font-weight: bold;
   color: #069d3c;
   text-align: left;
  }

 #buygift2 {
   z-index:10;
   position: absolute;
   top: 573px;
   left: 866px;
   padding: 0px;
   font-weight: bold;
  }
  
#buyeco2 {
   z-index:10;
   position: absolute;
   top: 608px;
   left: 865px;
   padding: 0px;
   font-weight: bold;
   color: #069d3c;
   text-align: left;
  }
/* this is for PURCHASE section */