a:link{font: 9px arial, verdana; color: #ffffff; text-decoration:none;}
a:visited{font: 9px arial, verdana; color: #ffffff; text-decoration:none;}
a:active{font: 9px arial, verdana; color: #ffffff; text-decoration:none;}
a:hover{font: 9px arial, verdana; color: #ffffff; text-decoration:none;}


a.nav:link {font: 18px arial, verdana, sans-serif; color: #000000; text-decoration:none;}

a.nav:visited {font: 18px arial, verdana, sans-serif; color: #FFFFFF; text-decoration:none;}

a.nav:active {font: 18px arial, verdana, sans-serif; color: #000000; text-decoration:none;}

a.nav:hover {font: 18px arial, verdana, sans-serif; color: #FFFFFF; text-decoration:none;}


/* the Buddy Face image link */


a.home:link{font: italic bold 76px arial; color:#6233a8; text-decoration:none;} 
a.home:visited{font: italic bold 76px arial; color:#6233a8; text-decoration:none;}

a.home:active{font: italic bold 76px arial; color:#6233a8; text-decoration:none;}

a.home:hover{font: italic bold 76px arial; color:#6254a8; text-decoration:none;}


a img {
  border-width:0;
  }

body {
  margin:25px 0px; padding:0px;
  text-align:center;
  background: #000000; 
	}





a.contest:link{text-shadow: 4px 2px 0px #000000; color: #fef204; text-decoration:none;}

a.contest:visited{text-shadow: 4px 2px 0px #000000; color: #fef204; text-decoration:none;}

a.contest:active{text-shadow: 4px 2px 0px #000000; color: #fef204; text-decoration:none;}

a.contest:hover{text-shadow: 4px 2px 0px #000000; color: #fef204; text-decoration:underline;}

p.bubble {font: bold 21px Comic Sans MS; letter-spacing: 0.05em; color:#000000; display: inline;}

a.bubble:link {font: bold 24px Comic Sans MS; letter-spacing: 0.05em; color:#FFFFFF; display: inline;}
a.bubble:visited  {font: bold 24px Comic Sans MS; letter-spacing: 0.05em; color:#FFFFFF; display: inline;}
a.bubble:active  {font: bold 24px Comic Sans MS; letter-spacing: 0.05em; color:#FFFFFF; display: inline;}
a.bubble:hover  {font: bold 24px Comic Sans MS; letter-spacing: 0.05em; color:#000000; display: inline;}


p.bubble3 {font: bold 16px Comic Sans MS; letter-spacing: 0.05em; color:#000000; display: inline;} 
p.bubble33 {font: bold 19px Comic Sans MS; letter-spacing: 0.03em; color:#000000; display: inline;} 

	
a.redd:link{font: bold  16px Comic Sans MS; color: #FF0011; text-decoration:bold;}
a.redd:visited{font: bold 16px Comic Sans MS; color: #FF0011; text-decoration:bold;}
a.redd:active{font: 16px Comic Sans MS; color: #FF0011; text-decoration:bold;}

a.redd:hover{font: 16px Comic Sans MS; color: #FF4411; text-decoration:bold;}




p.bubble2 {font: bold 31px Comic Sans MS, arial; letter-spacing: 0.02rem; color:#000000; display: inline;} 

a.contestb:link{text-shadow: 2px 1px 0px #000000; font: 25px Comic Sans MS; color: #FFEE33; text-decoration:bold;}
a.contestb:visited{text-shadow: 2px 1px 0px #000000; font: 25px Comic Sans MS; color: #fef204; text-decoration:bold;}
a.contestb:active{text-shadow: 2px 1px 0px #000000; font: 25px Comic Sans MS; color: #FFEE33; text-decoration:bold;}

a.contestb:hover{text-shadow: 2px 1px 0px #000000; font: 25px Comic Sans MS; color: #FFEE33; text-decoration:bold;}



a.contestc:link{text-shadow: 2px 2px 0px #000000; font: 19px Comic Sans MS; color: #fef204; text-decoration:bold;}
a.contestc:visited{text-shadow: 3px 2px 0px #000000; font: 19px Comic Sans MS; color: #fef204; text-decoration:bold;}
a.contestc:active{text-shadow: 3px 2px 0px #000000; font: 19px Comic Sans MS; color: #fef204; text-decoration:bold;}

a.contestc:hover{text-shadow: 3px 2px 0px #000000; font: 19px Comic Sans MS; color: #FFFFFF; text-decoration:bold;}






a.larger:link{font: italic 26px arial; color:#fef204;text-decoration:none;} 
/* Click for larger image text face (home page) */

a.larger:visited{font: italic 26px arial; font-weight: bold; color:#fef204;text-decoration:none;}

a.larger:active{font: italic 26px arial; font-weight: bold; color:#fef204;text-decoration:none;}

a.larger:hover{font: italic 26px arial;  font-weight: bold; color:#ffff88;text-decoration:none;}


a img {
  border-width:0;
  }

body {
  margin:25px 0px; padding:0px;
  text-align:center;
  background: #000000; 
	}




/* skunkytext text face (order page) */

 


/* first line sets up style (esp. for IE) */

 


a.skunkytext:link{font: italic 42px arial narrow; color:#4260B0;text-decoration:none;} 
a.skunkytext:visited {font: 42px arial narrow; color:#4260B0; text-decoration:none;}
a.skunkytext:active {font: italic 42px arial narrow; color:#4260B0; text-decoration:none;}
a.skunkytext:hover {font: italic 42px arial narrow; color:#4260B0; text-decoration:none;}

p.about {font: bold 13px arial; height: 11px; color:#444444;}

h1 {font: italic bold 76px arial; color:#6233a8; display: inline;}
 /* Buddy Rhodes Presents Face */
h2 
{font: 24px arial; color:#6233a8; vertical-align: 90%; display: inline;}
 /* Header TM Face */
h4 
{font: 10px arial; ; color:#6a6b6c; display: inline;} 
/* Disclaimer text face */




/* Table element text-- used for navigation links. (Table used for positioning) 
*/

#gradient {
  width:1000px;
  height:750px;
  margin:0px auto;
  background: #0298fc; 
/* Old browsers */
  background: -moz-linear-gradient(top, #0298fc 0%, #37b7fc 42%, #7ccaff 100%); 
/* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0298fc), color-stop(42%,#37b7fc), 
color-stop(100%,#7ccaff)); 
/* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #0298fc 0%,#37b7fc 42%,#7ccaff 100%); 
/* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #0298fc 0%,#37b7fc 42%,#7ccaff 100%); 
/* Opera11.10+ */
  background: -ms-linear-gradient(top, #0298fc 0%,#37b7fc 42%,#7ccaff 100%); 
/* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0298fc', endColorstr='#7ccaff',GradientType=0 ); 
/* IE6-9 */
  background: linear-gradient(top, #0298fc 0%,#37b7fc 42%,#7ccaff 100%); /* W3C */
  z-index:0;
 overflow: hidden;
}







p.ariall {font: bold 14px arial; color:#FFFFFF; display: inline;}
p.arial2 {font: bold 14px arial; color:#FFEE00; display: inline;}




#buddy {
  position: relative;
  top:-2px;
  left:-25px;
  width:379px;
  height:348px;
  background-image: url("/images/buddy.png");
  
background-repeat: no-repeat;
  z-index:2;
}




/* alternative line #ordering { position: relative; top:430px; left:785px; text-align:left; z-index:3;} */






#header {  position: relative;  top:-330px;  left:360px;  width:651px;  text-align:left;  z-index:4;}
#navigation {  position: relative;  top:-320px;  left:360px;  width:650px;  text-align:center;  z-index:5;}
#disclaimer {  position: relative;  top:185px;  left:5px;  text-align:left;  z-index:6;}
#bubbletext {  position: relative;  top:-440px;  left:40px;  width:270px;  height:257px;  z-index:3;}
#logo {  position: relative;  top:-955px;  left:330px;  width:651px;  height:198px;  text-align:left;  z-index:2;}
#works {  position: relative;  top:-946px;  left:300px;  text-align:left;  z-index:4;}
#info {  position: relative;  top:-930px;  left:300px;  text-align:left;  z-index:5;}
#info2 {  position: relative;  top: -685px;  left:320px; text-align:left;  z-index:3;}
#clickforlarger {  position: relative;  top:-1020px;  left:150px;  z-index:7;}

#bubble {
  position: relative;
  top:-230px; left:5px;
  width:325px;
  height:357px;
  
background-image: url("/images/bubble.png");
 background-repeat: no-repeat;
  z-index:2;
}




#chronicle {
  position: relative;
  top: -925px;
  left:320px;
 text-align:left;
  z-index:9;
}


#sskunky {
  position: relative;
  top:-240px;
  left:-145px;
  width:651px;
  height:198px;
  text-align:left;
  z-index:11;
}
#skunkyy {
  position: relative;
  top:-160px;
  left:25px;
 width:651px;
  height:198px;
  text-align:left;
  z-index:1;
}

#ccard {
  position: relative;
  top:5px;
  left:160px;
  width:651px;
  height:198px;
  text-align:left;
  z-index:2;
}



#skunky {
  position: relative;
  top:-190px;
  left:37px;
  width:651px;
  height:198px;
  text-align:left;
  z-index:3;
}
#button1 {
  position: relative;
  top:-655px;
  left:500px;
  width:651px;
  height:198px;
  text-align:left;
  z-index:5;
}


#button2 {
  position: relative;
  top:-455px;
  left:700px;
  width:651px;
  height:198px;
  text-align:right;
  z-index:6;
}


#button3 {
  position: relative;
  top:-455px;
  left:700px;
  width:651px;
  height:198px;
  text-align:left;
  z-index:7;
}


#button4Xp {
  position: relative;
  top:-455px;
  left:700px;
  width:651px;
  height:198px;
  text-align:right;
  z-index:8;
}



#ordering { position: relative; top:-1030px; left:320px; text-align:left; z-index:3;}


#sendXX {
  position: relative;
   top:-15px;
  left:85px;
  width:225px;
  height:200px;
   text-align:right;
  z-index:8;
}




#send {
  position: relative;
   top:-1120px;
  left:355px;
  width:290px;
  height:400px;
   text-align:right;
  z-index:8;
}


#price {
  position: relative;
  top:-1165px;
  left:-395px;
  width:151px;
  height:125px;
  text-align:right;
  z-index:4;
}
#about {
  position: relative;
  top:-340px;
  left:15px;
 
 z-index:0;
}

#invisiblelink {
  position: relative;
  top:-215px;
  left:212px;
 
 z-index:7;
}
#movinggif {
  position: relative; top: -145px;
  left:20px;
 
 z-index:8;
}

#retailer {
  position: relative;
  top:-1100px;
  left:620px;
  width:651px;
  height:198px;
  text-align:right;
  z-index:5;
}



p.retailer88 {font: bold 21px Comic Sans MS; color:#FFFF22; display: inline; position: relative; top:5px;
  left:153px;
  z-index:6;
}


p.retailer89 {font: bold 21px Comic Sans MS; color:#FFFF22; display: inline; z-index:6;
}



<!--[if lte IE 8]><style media="screen,projection" type="text/css">@import "ie.css";</style>< ![endif]-->



a.shadow {font: bold 21px Comic Sans MS; 
	height:21px;
	filter: Shadow(Color=#000000, Direction=100, Strength=1);
}
a.shadow:before { font: bold 21px Comic Sans MS; 
  margin: 0;
  padding: 0;
  content: '';
}

a.shadow{  font: bold 21px Comic Sans MS;
	white-space:nowrap;
}
a.shadow:before { font: bold 21px Comic Sans MS;
	display: block;
	margin: 0 0 -32px 150px;
	padding: 2;
	color: #000000;
	content: 'The New 100% ALL-NATURAL';
}
a.shadow {
	text-shadow: #000000 2px 2px 2px;
}





<!-- image slider 1 -->


@import url(http://fonts.googleapis.com/css?family=Varela+Round);

html, body { background: #333 url("http://codepen.io/images/classy_fabric.png"); }

.slides {
    padding: 0;
    width: 409px;
    height: 240px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; 
}

.slide {
    top: 0;
    opacity: 0;
    width: 409px;
    height: 240px;
    display: block;
    position: absolute;

    transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);

    transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 100px;
    height: 55%;
    display: none;
    position: absolute;

	  opacity: .45;
    z-index: 5;
    cursor: pointer;

    transition: opacity .2s;
    -moz-transition: opacity .2s;
    -webkit-transition: opacity .2s;

    color: #FFF;
    font-size: 80pt;
    text-align: center;
    line-height: 110px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);

    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(50, 200, 255, 0.6);
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(50, 150, 255, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
	background: rgba(20, 100, 255, 0.8);

}