/* CSS Effects */

/*==================================================
 * Rounded corners (div, image)
 * ===============================================*/

.rounded3 {  
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;	
	position:relative
}

.rounded6 {  
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	position:relative
}

.rounded9 {  
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
	position:relative
}

/*==================================================
 * Box shadow Effect +
 * ===============================================*/

.boxeffect
{
  position: relative;
}
.boxeffect:before, .boxeffect:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.boxeffect:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

/*==================================================
 * Box shadow
 * ===============================================*/


.inner-shadow1 {
	-moz-box-shadow:inset 0 0 5px #ccc;
	-webkit-box-shadow:inset 0 0 5px #ccc;
	box-shadow:inset 0 0 5px #ccc;
	position:relative;
}

.inner-shadow2 {
	-moz-box-shadow:inset 0 0 7px #aaa;
	-webkit-box-shadow:inset 0 0 7px #aaa;
	box-shadow:inset 0 0 7px #aaa;
	position:relative;
}

.shadow3 {
	-webkit-box-shadow: #aaa 0 0 4px;
	-moz-box-shadow: #aaa 0 0 4px;
	box-shadow: #aaa 0 0 4px;
	position:relative;
}

.shadow6 {  
    -webkit-box-shadow: #999 0 0 6px;
    -moz-box-shadow: #999 0 0 6px;
    box-shadow: #999 0 0 6px;
	position:relative
}

.shadow12 {  
    -webkit-box-shadow: #666 0 0 12px;
    -moz-box-shadow: #666 0 0 12px;
    box-shadow: #666 0 0 12px;
	position:relative	
}


/*==================================================
 * Text shadow - effects
 * ===============================================*/


.text-shadow {  
    text-shadow: #999 1px 1px 2px;	
	position:relative
}

.text-shadow2 {
	text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

.text-shadow3 {
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);	
}

.text-shadow4 {
	text-shadow:0px 1px 0px #fff;
}

.3dtext {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

/*==================================================
 * Transparency effects
 * ===============================================*/

.transparent1 {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; 
  	filter:alpha(opacity=50);
  	-moz-opacity:0.50; 
  	-khtml-opacity: 0.50; 
  	opacity: 0.50;   
}

.transparent2 {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
  	filter:alpha(opacity=75);
  	-moz-opacity:0.75; 
  	-khtml-opacity: 0.75; 
  	opacity: 0.75;   
}

/*==================================================
 * Fade on hover effects
 * ===============================================*/


a.fader {
	-webkit-transition: all 300ms ease;
    transition: all 300ms ease;	
}

.fade1 {
   opacity: 1;
   transition: opacity .10s ease-in-out;
   -moz-transition: opacity .10s ease-in-out;
   -webkit-transition: opacity .10s ease-in-out;
   	}
.fade1:hover {
      opacity: 0.8;
      	}
	  
.fade2 {
   opacity: 0.7;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   	}
.fade2:hover {
      opacity: 1;
     }
	 

/*==================================================
 * Other effects
 * ===============================================*/

.thumb {
	background-image: url(../images/zoom3.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #000;
}

a.hoverzoom {
    text-decoration: none;
    display: block;    
    margin: 0 3px 3px 0;
    opacity: 1;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
}
a.hoverzoom:hover {
    opacity: .7;
    -webkit-transform: scale(1.05,1.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1.05,1.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;    
}

.rotate90 {
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);	 
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}

.loading {background:url('../images/loading5.gif') no-repeat center;}

.bckgrey {
    border: 1px solid #ccc;
    color: #787878;
    text-shadow:0px 1px 0px #fff;
    background: #fefefe;
    background: -moz-linear-gradient(top,  #fefefe 0%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top,  #fefefe 0%,#eaeaea 100%);
    background: -o-linear-gradient(top,  #fefefe 0%,#eaeaea 100%);
    background: -ms-linear-gradient(top,  #fefefe 0%,#eaeaea 100%);
    background: linear-gradient(top,  #fefefe 0%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#eaeaea',GradientType=0 );
}


/*==================================================
 * CSS Awesome buttons
 * ===============================================*/


.awesome, .awesome:visited {
	background: #222 url('../images/alert-overlay.png') repeat-x; 
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);	
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

	.awesome:hover								{ background-color: #111; color: #fff; }
	.awesome:active								{ top: 1px; }
	.small.awesome, .small.awesome:visited 		{ font-size: 11px; padding: ; }
	.awesome, .awesome:visited,
	.medium.awesome, .medium.awesome:visited 	{ font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
	.large.awesome, .large.awesome:visited 		{ font-size: 14px; padding: 8px 14px 9px; }
	.green.awesome, .green.awesome:visited		{ background-color: #91bd09; }
	.green.awesome:hover						{ background-color: #749a02; }
	.blue.awesome, .blue.awesome:visited		{ background-color: #2daebf; }
	.blue.awesome:hover							{ background-color: #007d9a; }
	.red.awesome, .red.awesome:visited			{ background-color: #e33100; }
	.red.awesome:hover							{ background-color: #872300; }
	.magenta.awesome, .magenta.awesome:visited	{ background-color: #a9014b; }
	.magenta.awesome:hover						{ background-color: #630030; }
	.orange.awesome, .orange.awesome:visited	{ background-color: #ff5c00; }
	.orange.awesome:hover						{ background-color: #d45500; }
	.yellow.awesome, .yellow.awesome:visited	{ background-color: #ffb515; }
	.yellow.awesome:hover						{ background-color: #fc9200; }
	.grey.awesome, .grey.awesome:visited		{ background-color: #bbb; }
	.grey.awesome:hover							{ background-color: #aaa; }