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

	DEFINITIONS:	Beautify
	AUTHOR:			Studio 1 Designs
	VERSION:		2010
	
	CONTENTS:

	1				Border radius
	2				Text shadow
	3				Box shadow
	4				RGBa
	5				Webkit transition
	6				nth-child
	7				margins, padding, text align
	8				transparency filters
	9				CSS transitions

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


/* 1	Border radius */
input, textarea, select, form, object, img, a img { -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px }
.noBorder {border:none}
.corner3 {-moz-border-radius: 3px; -webkit-border-radius: 3px;}
.corner5 {-moz-border-radius: 5px; -webkit-border-radius: 5px;}
.corner10 {-moz-border-radius: 10px; -webkit-border-radius: 10px;}
.cornerRight {-moz-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px;}
.cornerLeft {-moz-border-radius: 5px 0px 0px 5px; -webkit-border-radius: 5px 0px 0px 5px;}
.cornerBottom {-moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px;}
.cornerTop {-moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px;}

.cornerTopRight{-moz-border-radius: 0px 5px 0px 0px; -webkit-border-radius: 0px 5px 0px 0px;}
.cornerTopLeft{-moz-border-radius: 5px 0px 0px 0px; -webkit-border-radius: 5px 0px 0px 0px;}
.cornerBotRight{-moz-border-radius: 0px 0px 5px 0px; -webkit-border-radius: 0px 0px 5px 0px}
.cornerBotLeft{-moz-border-radius: 0px 0px 0px 5px; -webkit-border-radius: 0px 0px 0px 5px}

/* 2	Text shadow */
/*body { text-shadow:1px -1px 1px rgba(255,255,255,0.6) } */


/* 3	Box shadow */
form input:hover, form textarea:hover { -webkit-box-shadow:rgba(0,0,0,0.2) 0 0 10px;  -moz-box-shadow:rgba(0,0,0,0.2) 0 0 10px; }
input:focus, textarea:focus, a:hover img { -webkit-box-shadow:rgba(0,0,0,0.2) 0 0 5px; -moz-box-shadow:rgba(0,0,0,0.2) 0 0 5px; }


/* 4	RGBa */
/*styling colour & opacity of text { color:rgba(0,0,0,1) }
styling background colour & opacity { background:rgba(255,255,255,0.4) }
styling colour & opacity of borders { border-color:rgba(0,0,0,0.6) }*/

/* 5	Webkit transition */
/*input, textarea, a img, img { -webkit-transition-property: background-color, color; -webkit-transition-duration: .2s; -webkit-transition-timing-function: ease-in }
input:hover, textarea:hover, input:focus, textarea:focus, a:hover img, ul li a:hover, ul li a:hover span { -webkit-transition-timing-function: ease-out }*/


/* 6	nth-child */
/*styles the first 'child' in a list (in this case - 20px top margin would be added) :first-child { margin:20px 0 0 0 }
styles the last 'child' in a list (in this case - theer would be no background) :last-child { background:none }
styles the 2nd (in this case) 'child' in a list :nth-child(2) { margin:60px 0 0 0 }*/


/* 7	teaxt align properties, margins & padding */

.txtAlnRgt {text-align:right}
.txtAlnCntr {text-align:center}
.txtAlnLft {text-align:left}

.noMrgTop {margin-top:0px}
.noMrgnRgt {margin-right:0px}
.noMrgBtm {margin-bottom:0px}
.noMrgLft {margin-left:0px}

.noPdgTop {padding-right:0px}
.noPdgRgt {padding-right:0px}
.noPdgBot {padding-right:0px}
.noPdgLeft {padding-left:0px}
.noBorder {border:none}

.breaker{ border-top: 2px dotted #ccc; height:5px; margin-top:}
.divider {height:1px; margin:10px 0px; border-bottom:dashed 1px #ccc; width:98%; clear:both;}

/* 8	transparency */

.transparent80 {filter:alpha(opacity=60); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8;}
.transparent60 {filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6;}
.transparent40 {filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4; opacity: 0.4;}
.transparent20 {filter:alpha(opacity=20); -moz-opacity:0.2; -khtml-opacity: 0.2; opacity: 0.2;}
.transparentNone {filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity: 1.0; opacity: 1.0;}


/* 9	transitions */

/*-moz-transform: firefox
-os-transform: opera
-webkit-transform: safari*/

/* ------------------------------ MOVING AN OBJECT (X/Y axes) */

.transX_20 {-moz-transform:translateX(20px)} /* moves an object 20px along its X axis */
.transY_20 {-moz-transform:translateY(20px)} /* moves an object 20px along its Y axis */
.trans20px {-moz-transform:translate(20px,-20px)} /* moves an object 20px along its X & Y axes */

/* ------------------------------ SCALING AN OBJECT (value) */

.scaleHlf {-moz-transform:scale(0.5)} /* scales an object to half its original size */
.scaleDbl {-moz-transform:scale(2)} /* scales an object to 2 times its original size */
.scaleXdbl {-moz-transform:scaleX(2)} /* scales an object to 2 times (X) */
.scaleYhlf {-moz-transform:scaleY(0.5)} /* scales an object to 0.5 times (Y) */

/* {-moz-transform:scale(2,0.5)} scales an object to 2 times (X) and 0.5 (Y) */

/* ------------------------------ ROTATING AN OBJECT (angle) */

.rotate45 {-moz-transform:rotate(45deg)} /* rotates an object by 45 degrees */
.rotate60 {-moz-transform:rotate(60deg)}
.rotate90 {-moz-transform:rotate(90deg)}
.rotate180 {-moz-transform:rotate(180deg)}
.rotate270 {-moz-transform:rotate(270deg)}
.rotate-45 {-moz-transform:rotate(-45deg)} /* rotates an object by -45 degrees */
.rotate-60 {-moz-transform:rotate(-60deg)}
.rotate-90 {-moz-transform:rotate(-90deg)}
.rotate-180 {-moz-transform:rotate(-180deg)}
.rotate-270 {-moz-transform:rotate(-270deg)}

/* ------------------------------ SKEWING AN OBJECT (angle) */

.skew5 {-moz-transform:skew(5deg)} /* skews an object by 5 degrees (X & Y axes) */
{-moz-transform:skew(2deg,4deg)} /* skews an object by 2 degrees (X) & 4 degrees (Y) axis) */
.skewX_5 {-moz-transform:skew(5deg)} /* skews an object by 5 degrees (X axis) */
.skewY_5 {-moz-transform:skew(5deg)} /* skews an object by 5 degrees (Y axis) */