@charset "utf-8";
/****************************************************************************************************
* Filename: basic.css
* Purpose: All the basic CSS Rules required to design web pages.
****************************************************************************************************/
/* GLOBAL RESET (killer :P)
**********************************************************/
body, h1, h2, h3, h4, h5, h6, p { margin:0; line-height:1 }
input[type="radio"], input[type="checkbox"] { margin:0; vertical-align:-2px }
a:link, a:active, a:visited { text-decoration:none }
a:active, a:focus, textarea:focus, input:focus { outline: none }
textarea { overflow:auto; resize:none }
img { border:none }
table { border-collapse:collapse; border-spacing:0; table-layout:fixed }

/* INDIVIDUAL RESETs
**********************************************************/
.reset{list-style:none; padding:0; margin:0 }
.nomargin { margin:0 }
.nopadding { padding:0 }

/* ALIGN CENTER
**********************************************************/
.equalgap { margin:0 auto }

/* FLOATS
**********************************************************/
.fl { float:left }
.fr { float:right }
.fn { float:none }
.leftfloated > * { float:left }
.rightfloated > * { float:right }
.oppfloats > * { float:right }
.oppfloats > :first-child { float:left }
/* first two items float left */
.threefloats > * { float:right }
.threefloats > :first-child { float:left }
.threefloats > :first-child + * { float:left }
/* first three items float left */
.fourfloats > * { float:right }
.fourfloats > :first-child { float:left }
.fourfloats > :first-child + * { float:left }
.fourfloats > :first-child + * + * { float:left }

/* COLUMN STRUCTURE
**********************************************************/
*[class*="qtr"] > * { width:25% }
*[class*="hlf"] > * { width:50% }
*[class*="trd"] > * { width:33.33% }
*[class*="thrforth"] > * { width:25% }
*[class*="thrforth"] > * + * { width:75% }
*[class*="anon"] > * { width:33% }
*[class*="anon"] > * + * { width:66% }

/* GRID FORMULA [just example]
**********************************************************/
/* COMMON SELECTOR 
*[class*="adjuster"] > * {float:left}
/*grid with a column width of 26px / gutter 8px / 8 columns  
.grid1 div.adjuster {margin-left:-10px}
.grid1 div[class*="adjuster width"] {width:960px}
.grid1 div[class*="adjuster width"] > * {width:110px; background:#FF0000; margin-left:10px; height:100px}*/

/* CLEAR FLOAT
**********************************************************/
.clearfix:after { content:"\0020"; display:block; height:0; clear:both; visibility:hidden; overflow:hidden }
.clr { clear:both; overflow:hidden; height:0 }

/* WIDTH 100% 
**********************************************************/
.fullwid { width:100% }

/* DISPLAYs, POSITIONs & OVERFLOWs 
**********************************************************/
.inline { display:inline }
.ovfl-hidden { overflow:hidden }
.rel { position:relative }
.absolute { position:absolute }
.absoluted > * { position:absolute }
.inlineBlock { display:inline-block }
.hide-elem { display:none }

/* ALL TEXT CSS
**********************************************************/
/* font SIZES */
.vsmlTxt { font-size:10px }
.smlTxt { font-size:11px }
.paraTxt { font-size:12px }
.bigTxt { font-size:14px }
/*font WEIGHTS */
.strong, .strong a { font-weight:bold }
.normTxt, .normTxt a { font-weight:normal }
/* text TRANSFORMS */
.allCaps { text-transform:capitalize }
.upperCase { text-transform:uppercase }
.underlined { text-decoration:underline }
/* text ALIGN & content ALIGN for inline level ELEMENTS */
.centerAll { text-align:center }
.leftAlign { text-align:left }
.rightAlign { text-align:right }
.justified { text-align:justify }

/* MAKE MENUS / TABS / NAVS
**********************************************************/
/* make tabs / navs */
.maketabs .item { float:left; display:inline }
.maketabs .item a, .maketabs .item a span { display:block; float:left }
/* make menus/ vertical menus */
.makemenu .item,.makemenu .item a { display:block; }

/* PADDINGS and MARGINS (north east south west)
**********************************************************/
.padwest1 { padding-left:5px }
.padwest2 { padding-left:10px }
.padwest3 { padding-left:15px }
.padwest4 { padding-left:20px }
.padwest5 { padding-left:25px }
.padwest6 { padding-left:30px }
.padeast1 { padding-right:5px }
.padeast2 { padding-right:10px }
.padeast3 { padding-right:15px }
.padeast4 { padding-right:20px }
.padeast5 { padding-right:25px }
.padeast6 { padding-right:30px }
.westspace1 { margin-left:5px }
.westspace2 { margin-left:10px }
.westspace3 { margin-left:15px }
.westspace4 { margin-left:20px }
.westspace5 { margin-left:25px }
.westspace6 { margin-left:30px }
.eastspace1 { margin-right:5px }
.eastspace2 { margin-right:10px }
.eastspace3 { margin-right:15px }
.eastspace4 { margin-right:20px }
.eastspace5 { margin-right:25px }
.eastspace6 { margin-right:30px }
.padsouth1 { padding-bottom:5px }
.padsouth2 { padding-bottom:10px }
.padsouth3 { padding-bottom:15px }
.padsouth4 { padding-bottom:20px }
.padsouth5 { padding-bottom:25px }
.padsouth6 { padding-bottom:30px }
.padnorth1 { padding-top:5px }
.padnorth2 { padding-top:10px }
.padnorth3 { padding-top:15px }
.padnorth4 { padding-top:20px }
.padnorth5 { padding-top:25px }
.padnorth6 { margin-top:30px; padding-top:30px }
.southspace1 { margin-bottom:5px }
.southspace2 { margin-bottom:10px }
.southspace3 { margin-bottom:15px }
.southspace4 { margin-bottom:20px }
.southspace5 { margin-bottom:25px }
.southspace6 { margin-bottom:30px }
.northspace1 { margin-top:5px }
.northspace2 { margin-top:10px }
.northspace3 { margin-top:15px }
.northspace4 { margin-top:20px }
.northspace5 { margin-top:25px }
.pad-nesw1 { padding:5px }
.pad-nesw2 { padding:10px }
.pad-nesw3 { padding:15px }
.pad-nesw4 { padding:20px }
.pad-nesw5 { padding:25px }
.pad-nesw6 { padding:30px }
.neswspace1 { margin:5px }
.neswspace2 { margin:10px }
.neswspace3 { margin:15px }
.neswspace4 { margin:20px }
.neswspace5 { margin:25px }
.neswspace6 { margin:30px }

/* FIXED WIDTHs
**********************************************************/
.span-1 { width:30px }
.span-10 { width:390px }
.span-11 { width:430px }
.span-12 { width:470px }
.span-13 { width:510px }
.span-14 { width:550px }
.span-15 { width:590px }
.span-16 { width:630px }
.span-17 { width:670px }
.span-18 { width:710px }
.span-19 { width:750px }
.span-2 { width:70px }
.span-20 { width:790px }
.span-21 { width:830px }
.span-22 { width:870px }
.span-23 { width:910px }
.span-24 { width:950px }
.span-25 { width:990px }
.span-3 { width:110px }
.span-4 { width:150px }
.span-5 { width:190px }
.span-6 { width:230px }
.span-7 { width:270px }
.span-8 { width:310px }
.span-9 { width:350px }

/* PERCENTAGE BASED WIDTHs
**********************************************************/
.size1of1, .fullwid { width:100% }
.hlf .item, .size1of2 { width:50% }
.size1of10 { width:10% }
.size1of3 { width:33.33333% }
.size1of5 { width:20% }
.size2of3 { width:66.66666% }
.size2of5 { width:40% }
.size3of10 { width:30% }
.size3of5 { width:60% }
.size4of5 { width:80% }