/*
 * OOCSS Helper
 * By Rudy Affandi
 * License: MIT / http://bit.ly/mit-license
 * Creation Date: Feb 1, 2012
 * Revision Date: Mar 27, 2012
 * Version: 0.2
 */

/* Element shape/visibility */
   .js_hide, .hide {display: none}
   .js_show, .show, .block {display: block}
   .box {display: block; overflow: hidden}
   .inline {display: inline}

/* Text formatting */
   .small {font-size: 10px; line-height: 13px}
   .normal {font-weight: normal}
   .bold {font-weight: bold}
   .italic, .italics {font-style: italic}
   .underline, .u_line {text-decoration: underline}
   .upper_case, .u_case {text-transform: uppercase}
   .lower_case, .l_case {text-transform: lowercase}
   .capital_case, .c_case {text-transform: capitalize}

/* Alignment */
   .fl {float: left; position: relative}
   .fr {float: right; position: relative}
   .fc {margin: auto}
   .clear {clear: both}
   .clear_l {clear: left}
   .clear_r {clear: right}

/* Text alignment */
   .tc {text-align: center}
   .tr {text-align: right}
   .tl {text-align: left}
   .tj {text-align: justify}

/* Common margin set */
   .m_0 {margin: 0}
   .m_5 {margin: 5px}
   .ml_5 {margin-left: 5px}
   .mr_5 {margin-right: 5px}
   .mt_5 {margin-top: 5px}
   .mb_5 {margin-bottom: 5px}
   .m_10 {margin: 10px}
   .ml_10 {margin-left: 10px}
   .mr_10 {margin-right: 10px}
   .mt_10 {margin-top: 10px}
   .mb_10 {margin-bottom: 10px}
   .m_15 {margin: 15px}
   .ml_15 {margin-left: 15px}
   .mr_15 {margin-right: 15px}
   .mt_15 {margin-top: 15px}
   .mb_15 {margin-bottom: 15px}
   .m_20 {margin: 20px}
   .ml_20 {margin-left: 20px}
   .mr_20 {margin-right: 20px}
   .mt_20 {margin-top: 20px}
   .mb_20 {margin-bottom: 20px}
   .m_30 {margin: 30px}
   .ml_30 {margin-left: 30px}
   .mr_30 {margin-right: 30px}
   .mt_30 {margin-top: 30px}
   .mb_30 {margin-bottom: 30px}
   .m_40 {margin: 40px}
   .ml_40 {margin-left: 40px}
   .mr_40 {margin-right: 40px}
   .mt_40 {margin-top: 40px}
   .mb_40 {margin-bottom: 40px}
   .m_50 {margin: 50px}
   .ml_50 {margin-left: 50px}
   .mr_50 {margin-right: 50px}
   .mt_50 {margin-top: 50px}
   .mb_50 {margin-bottom: 50px}
   .m_60 {margin: 60px}
   .ml_60 {margin-left: 60px}
   .mr_60 {margin-right: 60px}
   .mt_60 {margin-top: 60px}
   .mb_60 {margin-bottom: 60px}
   .m_70 {margin: 70px}
   .ml_70 {margin-left: 70px}
   .mr_70 {margin-right: 70px}
   .mt_70 {margin-top: 70px}
   .mb_70 {margin-bottom: 70px}
   .m_80 {margin: 80px}
   .ml_80 {margin-left: 80px}
   .mr_80 {margin-right: 80px}
   .mt_80 {margin-top: 80px}
   .mb_80 {margin-bottom: 80px}

/* Common padding set */
   .p_0 {padding: 0}
   .p_5 {padding: 5px}
   .pl_5 {padding-left: 5px}
   .pr_5 {padding-right: 5px}
   .pt_5 {padding-top: 5px}
   .pb_5 {padding-bottom: 5px}
   .p_10 {padding: 10px}
   .pl_10 {padding-left: 10px}
   .pr_10 {padding-right: 10px}
   .pt_10 {padding-top: 10px}
   .pb_10 {padding-bottom: 10px}
   .p_15 {padding: 15px}
   .pl_15 {padding-left: 15px}
   .pr_15 {padding-right: 15px}
   .pt_15 {padding-top: 15px}
   .pb_15 {padding-bottom: 15px}
   .p_20 {padding: 20px}
   .pl_20 {padding-left: 20px}
   .pr_20 {padding-right: 20px}
   .pt_20 {padding-top: 20px}
   .pb_20 {padding-bottom: 20px}
   .p_30 {padding: 30px}
   .pl_30 {padding-left: 30px}
   .pr_30 {padding-right: 30px}
   .pt_30 {padding-top: 30px}
   .pb_30 {padding-bottom: 30px}
   .p_40 {padding: 40px}
   .pl_40 {padding-left: 40px}
   .pr_40 {padding-right: 40px}
   .pt_40 {padding-top: 40px}
   .pb_40 {padding-bottom: 40px}
   .p_50 {padding: 50px}
   .pl_50 {padding-left: 50px}
   .pr_50 {padding-right: 50px}
   .pt_50 {padding-top: 50px}
   .pb_50 {padding-bottom: 50px}
   .p_60 {padding: 60px}
   .pl_60 {padding-left: 60px}
   .pr_60 {padding-right: 60px}
   .pt_60 {padding-top: 60px}
   .pb_60 {padding-bottom: 60px}
   .p_70 {padding: 70px}
   .pl_70 {padding-left: 70px}
   .pr_70 {padding-right: 70px}
   .pt_70 {padding-top: 70px}
   .pb_70 {padding-bottom: 70px}
   .p_80 {padding: 80px}
   .pl_80 {padding-left: 80px}
   .pr_80 {padding-right: 80px}
   .pt_80 {padding-top: 80px}
   .pb_80 {padding-bottom: 80px}
   .p_90 {padding: 90px}
   .pl_90 {padding-left: 90px}
   .pr_90 {padding-right: 90px}
   .pt_90 {padding-top: 90px}
   .pb_90 {padding-bottom: 90px}
   .p_100 {padding: 100px}
   .pl_100 {padding-left: 100px}
   .pr_100 {padding-right: 100px}
   .pt_100 {padding-top: 100px}
   .pb_100 {padding-bottom: 100px}

/* Common width set (percentage) */
   .w_5p {width: 5%}
   .w_10p {width: 10%}
   .w_12p {width: 12%}
   .w_15p {width: 15%}
   .w_20p {width: 20%}
   .w_25p, .w_quarter {width: 25%}
   .w_30p {width: 30%}
   .w_33p {width: 33%}
   .w_35p {width: 35%}
   .w_40p {width: 40%}
   .w_45p {width: 45%}
   .w_50p, .w_half {width: 50%}
   .w_55p {width: 55%}
   .w_60p {width: 60%}
   .w_65p {width: 65%}
   .w_70p {width: 70%}
   .w_75p {width: 75%}
   .w_80p {width: 80%}
   .w_85p {width: 85%}
   .w_90p {width: 90%}
   .w_95p {width: 95%}
   .w_100p, .w_full {width: 100%}

/* Common width set (fixed, pixels) */
   .w_50px {width: 50px}
   .w_75px {width: 75px}
   .w_100px {width: 100px}
   .w_125px {width: 125px}
   .w_150px {width: 150px}
   .w_175px {width: 175px}
   .w_200px {width: 200px}
   .w_250px {width: 250px}
   .w_275px {width: 275px}
   .w_300px {width: 300px}
   .w_325px {width: 325px}
   .w_350px {width: 350px}
   .w_375px {width: 375px}
   .w_400px {width: 400px}
   .w_425px {width: 425px}
   .w_450px {width: 450px}
   .w_475px {width: 475px}

/* Table alignment set */
   .v_top {vertical-align: top}
   .v_bottom {vertical-align: bottom}
   .v_middle {vertical-align: middle}
   .h_left {text-align: left}
   .h_right {text-align: right}

/* Borders */
   .border {border-width: 1px; border-style: solid}
   .border.clr_000 {border-color: #666}
   .border.clr_333 {border-color: #333}
   .border.clr_666 {border-color: #666}
   .border.clr_999 {border-color: #999}
   .border.clr_ccc {border-color: #ccc}
   .border.clr_fff {border-color: #fff}

/* Background shading */
   .bg {}
   .bg.grey {background: #eee}

/* Common ul-based navigation */
   /* Common settings */
   .v_nav, .h_nav {list-style: none; margin: 0; padding: 0; overflow: hidden}

   /* Horizontal navigation */
   .h_nav li {float: left; margin: 0; padding: 0}
   .h_nav li a {display: block; padding: 0 10px}

   /* Vertical navigation */
   .v_nav li {display: block; margin: 0; padding: 0}
   .v_nav li a {display: block; margin: 0; padding: 0}

/* Images and gallery */

	/* Photo Gallery */
	.gallery {}
	.gallery {display: block; margin: 10px}
	.gallery img {margin: auto; display: block}
	.gallery figcaption {text-align: center; font-size: 11px}