/*-------------------------------------------
Page Level Layout (L180|L250|R180|R250)
---------------------------------------------
Usage Expale:

<div id="Content" class="R250">
  <div id="Main">
    <div id="Container">Main Content</div>
  </div>
  <div id="SideBar">Side Content</div>
</div>
*/
/* Sidebar 100, Left */
div.L100 #Main { float: right; width: 100%; margin: 0 0 0 -100px; }
div.L100 #Container { margin: 0 0 0 100px; }
div.L100 #SideBar { float: left; width: 100px; text-align:center;padding:0px 0px 0px 0px;}

div.R100 #Main1 { float: left; width: 100%; margin: 0 -150px 0 0; overflow: hidden; }
div.R100 #Container1 { margin: 0 150px 0 0; }
div.R100 #SideBar1 { float: right; width: 144px; overflow: hidden; text-align:center;padding:2px;}

/*Default, Sidebar 180, Left */
#Main { float: right; width: 100%; margin: 0 0 0 -190px; text-align:left;}
#Container { margin: 0 0 0 190px; display: inline-block; }
#SideBar { float: left; width: 180px;text-align:left; }
/* Sidebar 150, Left */
div.L150 #Main { float: right; width: 100%; margin: 0 0 0 -160px; }
div.L150 #Container { margin: 0 0 0 160px; }
div.L150 #SideBar { float: left; width: 150px; text-align:left;}
/* Sidebar 170, Left */
div.L170 #Main { float: right; width: 100%; margin: 0 0 0 -180px; overflow: hidden; }
div.L170 #Container { margin: 0 0 0 180px; }
div.L170 #SideBar { float: left; width: 170px; overflow: hidden; text-align:left;}
/* Sidebar 180, Left */
div.L180 #Main { float: right; width: 100%; margin: 0 0 0 -190px; overflow: hidden; }
div.L180 #Container { margin: 0 0 0 190px; }
div.L180 #SideBar { float: left; width: 180px; overflow: hidden; text-align:left;}
/* Sidebar 179, Left */
div.L179 #Main { float: right; width: 100%; margin: 0 0 0 -179px; overflow: hidden; }
div.L179 #Container { margin: 0 0 0 179px; }
div.L179 #SideBar { float: left; width: 179px; overflow: hidden; text-align:left;}
/* Sidebar 200, Left */
div.L200 #Main { float: right; width: 100%; margin: 0 0 0 -210px; overflow: hidden; }
div.L200 #Container { margin: 0 0 0 210px; }
div.L200 #SideBar { float: left; width: 200px; overflow: hidden; text-align:left;}
/* Sidebar 160, Right */
div.R170 #Main { float: left; width: 100%; margin: 0 -180px 0 0; overflow: hidden; }
div.R170 #Container { margin: 0 180px 0 0; }
div.R170 #SideBar { float: right; width: 170px; overflow: hidden; text-align:left;}
/* Sidebar 180, Right */
div.R180 #Main { float: left; width: 100%; margin: 0 -190px 0 0; overflow: hidden; }
div.R180 #Container { margin: 0 190px 0 0; }
div.R180 #SideBar { float: right; width: 180px; overflow: hidden; text-align:left;}
/* Sidebar 250, Left */
div.L250 #Main { float: right; width: 100%; margin: 0 0 0 -260px; overflow: hidden; }
div.L250 #Container { margin: 0 0 0 260px; }
div.L250 #SideBar { float: left; width: 250px; overflow: hidden; text-align:left;}

/* Sidebar 245, Left */
div.L245 #Main { float: right; width: 100%; margin: 0 0 0 -255px; overflow: hidden; }
div.L245 #Container { margin: 0 0 0 255px; }
div.L245 #SideBar { float: left; width: 245px; overflow: hidden; text-align:left;}

div.R200 #Main { float: left; width: 100%; margin: 0 -210px 0 0; overflow: hidden; }
div.R200 #Container { margin: 0 210px 0 0; }
div.R200 #SideBar { float: right; width: 200px; overflow: hidden; text-align:left;}
/* Sidebar 250, Right */
div.R250 #Main { float: left; width: 100%; margin: 0 -260px 0 0; overflow: hidden; }
div.R250 #Container { margin: 0 260px 0 0; }
div.R250 #SideBar { float: right; width: 250px; overflow: hidden; text-align:left;}
/* Sidebar 400, Right */
div.R400 #Main { float: left; width: 100%; margin: 0 -410px 0 0; overflow: hidden; }
div.R400 #Container { margin: 0 410px 0 0; }
div.R400 #SideBar { float: right; width: 400px; overflow: hidden; text-align:left;}
/*-------------------------------------------
Block Level Layout (Col2|Col3)
---------------------------------------------
Usage Expale:

<div class="Col2">
  <div class="Col2Left">Left Content</div>
  <div class="Col2Right">Right Content</div>
</div>

<div class="Col3">
  <div class="Col3Left">Left Content</div>
  <div class="Col3Mid">Middle Content</div>
  <div class="Col3Right">Right Content</div>
</div>
*/
div.Col2 { width: 100%; clear: both; padding-top:4px}
div.Col2 div.Col2Left { width: 49.5%; float: left; overflow: hidden; }
div.Col2 div.Col2Right { float: right; width: 49.5%; overflow: hidden; }

div.Col2 div.Col2Left30 {width:29.5%;  float: left; display: inline-block; padding: 2px; overflow: hidden; }
div.Col2 div.Col2Right70 {width:69.5%;  float: right; display: inline-block; padding: 2px; overflow: hidden; }

div.Col2 div.Col2Left70 {  width:70%; float: left; display: inline-block; padding: 2px; overflow: hidden; }
div.Col2 div.Col2Right30 { width:30%;  float: right; display: inline-block; padding: 2px; overflow: hidden; }

div.Col3 { width: 100%; clear: both; }
div.Col3 div.Col3Left { width: 33%; float: left; margin-right: 4px; }
div.Col3 div.Col3Mid { width: 33%; float: left; margin-right: 4px; }
div.Col3 div.Col3Right { width: 33%; float: right; }
/*Rules for DIV.Content*/
/*#Content{
	width:100%;
	margin:5px auto;
	text-align:left;
	clear:both;
}*/
body.FullWidth #Content { width: 100%; margin: 5px 0; }