/*-------------------------------------------------------------------------------------------------------------------------------------
@import url("common.css");

CALL TO ACTION BUTTONS WITHOUT ARROWS. WE HAVE USED THE CLASS NAME "Cta" (Cta for Call to Action) FOR THIS BUTTON. HERE WE HAVE USED TWO
 "span"s TO CREATE THE TEXT. ONE WITH THE CLASS NAME: "text-big" AND ANOTHER WITH THE CLASS NAME: "text-small". THE HTML CODE OF THESE
 BUTTONS IS QUITE SIMPLE. FOR GREEN BUTTON THE HTML IS AS BELOW:

   <a class="button green r5 Cta no-border">
      <span class="text-big">Plans, Pricing and Signup</span>
      <br />
      <span class="text-small">the latest and greatest template pack</span>
  </a>

USING FOLLOWING CSS WE HAVE CREATED:

  1) call-to-action-1.html

-------------------------------------------------------------------------------------------------------------------------------------*/

.Cta
{
  height: 70px;
  width:250px;
  padding: 0px 35px;
  text-align: center;
}

.Cta span.text-big
{
  display: inline-block;
  margin-bottom: -10px;
  font: bold 1.3em/52px helvetica, Arial, sans-serif;
}

.Cta span.text-small
{
  display: inline-block;
  font: normal 0.8em Verdana, Arial, sans-serif;
  text-shadow: none;
}

/*--MODIFYING TEXT COLOR AND SHADOW--*/
span.text-big { text-shadow: 0px 2px 2px #330; }

/*-------------------------------------------------------------------------------------------------------------------------------------
HERE ENDS THE STYLES FOR call-to-action-1.html. ANY CHANGE IN CSS BELOW THIS COMMENT WON'T CHANGE THE LOOK OF THIS FILE.
-------------------------------------------------------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------------------------------------------------------

CALL TO ACTION BUTTONS WITH THICK ARROWS. WE HAVE USED THE CLASS NAME "CtaThk" (Cta for Call to Action, and Thk for Thick) FOR THESE BUTTONS.
HERE WE HAVE USED TWO "span"s TO CREATE THE ARROW. ONE WITH THE CLASS NAME: "arrow-head" AND ANOTHER WITH THE CLASS NAME: "arrow-tail".
THE HTML CODE OF THESE BUTTONS IS QUITE SIMPLE. FOR GREEN BUTTON THE HTML IS AS BELOW:

        <a class="button green r30 CtaThk no-border">
            <span class="button-text">
               <span class="text-big">Try Web 2.0 Buttons</span>
               <br />
               <span class="text-small">the latest and greatest pack</span>
            </span>
            <span class="round"><span class="arrow-tail"><span class="arrow-head"></span></span></span>
        </a>

AS YOU CAN SEE THE CLASS NAMES ARE SELF-EXPLANATORY. IT IS QUITE EASY TO ALTER THE COLOR OF THE ARROWS. JUST CHANGE THE COLOR VALUES
FOR THE SPANS IN THE CSS. WE HAVE CREATED CUSTOMIZED ARROW COLOR FOR WHITE BUTTON. YOU CAN EASILY FOLLOW THEM AND CUSTOMIZE ARROW
COLORS FOR OTHER BUTTONS AS PER YOUR CHOICE.

USING FOLLOWING CSS WE HAVE CREATED:

  1) call-to-action-2.html

-------------------------------------------------------------------------------------------------------------------------------------*/




/*--CUSTOMIZING ARROW COLOR FOR WHITE BUTTONS--*/
.labutton .white span.arrow-tail { background: #3c78b5; }
.labutton .white span.arrow-head { border-top-color: #3c78b5; }

/*--ADDING COLOR AND SHADDOW TO THE CIRCULAR BACKGROUND FOR EACH BUTTON--*/
.labutton .green span.round
{
  background: #006c00;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #6ab900; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #6ab900;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #6ab900;
}

.labutton .blue span.round
{
  background: #001291;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #5fa9e7; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #5fa9e7;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #5fa9e7;
}

.labutton .yellow span.round
{
  background: #9d7a00;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #ffda06; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #ffda06;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #ffda06;
}

.labutton .teal span.round
{
  background: #008282;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #00cdcd; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #00cdcd;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #00cdcd;
}

.labutton .darkred span.round
{
  background: #7c0707;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #f44242; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #f44242;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #f44242;
}

.labutton .almond span.round
{
  background: #7b5317;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #dca047; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #dca047;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #dca047;
}

.labutton .purple span.round
{
  background: #81018b;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #e70dff; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #e70dff;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #e70dff;
}

.labutton .litegreen span.round
{
  background: #339100;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #aad500; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #aad500;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #aad500;
}

.labutton .orange span.round
{
  background: #ba440c;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #ffb951; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #ffb951;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #ffb951;
}

.labutton .chocolate span.round
{
  background: #723305;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #e16105; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #e16105;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #e16105;
}

.labutton .darkchocolate span.round
{
  background: #473530;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #b58e86; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #b58e86;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #b58e86;
}

.labutton .liteblue span.round
{
  background: #016ba5;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #38befe; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #38befe;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #38befe;
}

.labutton .red span.round
{
  background: #aa2b00;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #ff8a6c; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #ff8a6c;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #ff8a6c;
}

.labutton .yellowgreen span.round
{
  background: #8f9700;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #d0ef92; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #d0ef92;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #d0ef92;
}

.labutton .slategray span.round
{
  background: #2f4f4f;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #8ea2b0; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #8ea2b0;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #8ea2b0;
}

.labutton .darkgreen span.round
{
  background: #005300;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #52be01; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #52be01;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #52be01;
}

.labutton .darkblue span.round
{
  background: #003453;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #009dfb; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #009dfb;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #009dfb;
}

.labutton .white span.round
{
  background: #b5b5b5;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 2px #f5f5f5; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 2px #f5f5f5;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 2px #f5f5f5;
}

.labutton .gray span.round
{
  background: #919199;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 2px #e9e9e9; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 2px #e9e9e9;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 2px #e9e9e9;
}

.labutton .black span.round
{
  background: #000;

  /*--ADDING SHADOW--*/
  -webkit-box-shadow: 0px 1px 3px #b6b6b6; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: 0px 1px 3px #b6b6b6;  /*--FOR MOZILLA--*/
  box-shadow: 0px 1px 3px #b6b6b6;
}


/*-------------------------------------------------------------------------------------------------------------------------------------
HERE ENDS THE STYLES FOR call-to-action-2.html
-------------------------------------------------------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------------------------------------------------------------------
HERE STARTS THE STYLING FOR CALL TO ACTION BUTTONS WITH THICK ARROW AT EAST DIRECTION. YOU HAVE SEEN BEFORE HOW WE HAVE CREATED ARROWS IN
"call-to-action-2.html". HERE, WE ARE GOING TO ROTATE THE ARROW TO THE EAST DIRECTION. WE HAVE USED A CLASS: "east" AND APPLIED CSS3 ROTATION
PROPERTIES TO IT. IN DOING SO WE HAVE ADJUSTED THE POSITION OF SHADOW FOR EACH CIRCULAR BACKGROUND. AS THIS ROTATION WOULD NOT CHANGE THE
POSITION OF SHADOW IN IE8 WE'LL KEEP THEM UNCHANGED IN IE.CSS
-------------------------------------------------------------------------------------------------------------------------------------*/

.labutton .east
{
  -webkit-transform: rotate(-90deg); /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-transform: rotate(-90deg); /*--FOR MOZILLA--*/
  -o-transform: rotate(-90deg); /*--FOR OPERA--*/
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);/*--FOR IE--*/
}

.labutton .green span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #6ab900; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #6ab900;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #6ab900;
}

.labutton .blue span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #5fa9e7; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #5fa9e7;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #5fa9e7;
}

.labutton .yellow span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #ffda06; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #ffda06;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #ffda06;
}

.labutton .teal span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #00cdcd; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #00cdcd;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #00cdcd;
}

.labutton .darkred span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #f44242; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #f44242;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #f44242;
}

.labutton .almond span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #dca047; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #dca047;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #dca047;
}

.labutton .purple span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #e70dff; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #e70dff;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #e70dff;
}

.labutton .litegreen span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #aad500; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #aad500;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #aad500;
}

.labutton .orange span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #ffb951; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #ffb951;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #ffb951;
}

.labutton .chocolate span.east
{
  /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #e16105; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #e16105;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #e16105;
}

.labutton .darkchocolate span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #b58e86; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #b58e86;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #b58e86;
}

.labutton .liteblue span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #38befe; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #38befe;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #38befe;
}

.red span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #ff8a6c; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #ff8a6c;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #ff8a6c;
}

.labutton .yellowgreen span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #d0ef92; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #d0ef92;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #d0ef92;
}

.labutton .slategray span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #8ea2b0; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #8ea2b0;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #8ea2b0;
}

.darkgreen span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #52be01; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #52be01;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #52be01;
}

.labutton .darkblue span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #009dfb; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #009dfb;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #009dfb;
}

.white span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 2px #f5f5f5; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 2px #f5f5f5;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 2px #f5f5f5;
}

.labutton .gray span.east
{
 /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 2px #e9e9e9; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 2px #e9e9e9;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 2px #e9e9e9;
}

.labutton .black span.east
{
   /*--MODIFYING  SHADOW--*/
  -webkit-box-shadow: -1px 0px 3px #b6b6b6; /*--FOR SAFARI, CHROME, ETC.--*/
  -moz-box-shadow: -1px 0px 3px #b6b6b6;  /*--FOR MOZILLA--*/
  box-shadow: -1px 0px 3px #b6b6b6;
}
/*-------------------------------------------------------------------------------------------------------------------------------------
HERE ENDS THE STYLES FOR call-to-action-3.html
-------------------------------------------------------------------------------------------------------------------------------------*/
/*****************************************THE END****************************************************/