/** Page Styles **/

body {
  margin: 0;
  padding: 50px;
  font-family: arial, helvetica, sans-serif;
  background-color: #fff;
}

h1 {
  font-weight: normal;
  font-size: 20px;
  color :#0086ed;  
}

h2 {
  font-weight: normal;
  font-size: 16px;
  color :#767542;  
  margin: 0;
  padding: 0 0 8px 0;
}

p {
  font-size: 13px; 
  margin: 0;
  padding: 0 0 5px 0;
}


/** Basic Box **/

div.box {
  width: 250px;
  margin: 0 0 20px 20px;
  padding: 10px;
  background-color: #f3f3ed;
  border-style: solid;
  border-color: #d2d2bf;
  border-width: 2px;
  float: left;
}

div.box2 {
  width: 250px;
  margin: 0 0 20px 20px;
  padding: 10px;
  background-color: #c1c096;
  border-style: solid;
  border-color: #96966c;
  border-width: 2px;
  float: left;
}

div.metalbox {
  width: 250px;
  margin: 0 0 20px 20px;
  padding: 10px;
  background-image: url("images/metal.png");
  background-repeat: no-repeat;
  background-color: #8e8e8e;
  background: -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,.4)), to(rgba(0,0,0,.10)));
  border-style: solid;
  border-color: #5c5c5c;  
  border-width: 2px;
  float: left;
}



/** Rounded Corners **/

/* http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius */

.roundcorners {
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
}


/** Shadow **/

/* http://www.w3.org/TR/css3-background/#the-box-shadow */

.shadow {
  -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.20);
  -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.20);
  box-shadow: 2px 2px 4px rgba(0,0,0,0.20);
}

/** Gradient Background - Webkit browsers only **/

.gradient {
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(245,245,241)), to(rgb(217,216,201)));
}

/** Opacity **/

.opacity {
  opacity: 0.5;
}

.opacity:hover {
  opacity: 1;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 1s;
}

/** Rotated **/

.rotated {
  transform: rotate(025deg);
  -webkit-transform:rotate(-25deg);
  -moz-transform:rotate(-25deg);
}

.rotated:hover {
  transform: rotate(0deg);
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -webkit-transition-property: rotate;
  -webkit-transition-duration: 1s;
}

/** Text Shadow **/

.textshadow {
  text-shadow: 2px 2px 3px rgba(0,0,0,0.30);
}


/** Resize **/
.resize:hover {
  transform: translate(10px, 10px) scale(1.5, 1.5);
  -moz-transform: translate(10px, 10px) scale(1.5, 1.5);
  -webkit-transform: translate(10px, 10px) scale(1.5, 1.5);
  -webkit-transition-property: transform;
  -webkit-transition-duration: 1s;
}


/** Text Bevel **/

.textbevel {
  color: #c1c096;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.70), -1px -1px 1px rgba(255,255,255,0.70);
  font-size: 20px;
}

/** Text Emboss **/

.textemboss {
  color: rgba(0,0,0,0.10);
  text-shadow: -1px -1px 1px rgba(0,0,0,0.70), 1px 1px 1px rgba(255,255,255,0.70);
  font-size: 20px;
}


/** Font Face **/

@font-face {
  font-family: "Chunkfive";
  src: url("type/fonts/Chunkfive-webfont.eot");
  src: local("☺"),
    url("type/fonts/Chunkfive-webfont.woff") format("woff"),
    url("type/fonts/Chunkfive-webfont.otf") format("opentype"),
    url("type/fonts/Chunkfive-webfont.svg#fonts/Chunkfive-webfont") format("svg");
  }

.chunkfive { font-family: "Chunkfive", Verdana, arial,sans-serif; }

/** Speech Bubble with triangle pointer **/

.bubble-triangle {
   float: left;
   position: relative;
   padding:15px;
   margin: 0 0 20px 20px;
   color:#000;
   background:#f3961c;
   width: 250px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}

/* creates triangle */
.bubble-triangle:after {
   content:"\00a0";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   bottom:-15px;
   left:20px;
   width:0;
   height:0;
   border-width:15px 15px 0;
   border-style:solid;
   border-color:#f3961c transparent;
}

/** Speech Bubble with curved point **/

.bubble-oval {
  float: left;
	position:relative;
	padding:50px 40px;
	margin:1em auto 50px;
	text-align:center;
	color:#fff; 
	background:#5a8f00;

	/* css3 */
	/*
	NOTES:
	-webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
	-webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
	Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
	*/
	-webkit-border-top-left-radius:220px 120px;
	-webkit-border-top-right-radius:220px 120px;
	-webkit-border-bottom-right-radius:220px 120px;
	-webkit-border-bottom-left-radius:220px 120px;
	-moz-border-radius:220px / 120px;
	border-radius:220px / 120px;
	/* NOTE: webkit gradient implementation is not as per spec */
	background:-webkit-gradient(linear, left top, left bottom, from(#b8db29), to(#5a8f00));
	background:-moz-linear-gradient(top, #b8db29, #5a8f00);
	background:-o-linear-gradient(top, #b8db29, #5a8f00);
}

.bubble-oval p {
  font-size:1.25em;
  margin: 0;
  padding: 0;
}

/* creates part of the curve */
.bubble-oval:before {
	content:"";
	position:absolute;
	z-index:-1;
	bottom:-30px;
	right:50%;
	width:0;
	height:30px;
	border-right:60px solid #5a8f00;
	background:#5a8f00; /* need this for webkit - bug in handling of border-radius */

	/* css3 */
	-moz-border-radius-bottomright:80px 50px;
	-webkit-border-bottom-right-radius:80px 50px;
	border-bottom-right-radius:80px 50px;
	/* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
	-moz-transform:translate(0, -2px);
	-webkit-transform:translate(0, -2px);
	-o-transform:translate(0, -2px);
	transform:translate(0, -2px);
}

/* creates part of the curved pointy bit */
.bubble-oval:after {
	content:"";
	position:absolute;
	z-index:-1;
	bottom:-30px;
	right:50%;
	width:60px;
	height:30px;
	background:#fff;

	/* css3 */
	-moz-border-radius-bottomright:40px 50px; 
	-webkit-border-bottom-right-radius:40px 50px; 
	border-bottom-right-radius:40px 50px; 
	/* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
	-moz-transform:translate(-30px, -2px);
	-webkit-transform:translate(-30px, -2px);
	-o-transform:translate(-30px, -2px);
	transform:translate(-30px, -2px);
}