/*
	CSS Style Definitions for Francesco Cascio Architects
	developed by Stefan Isarie - Webstars ltd.
	http://www.webstarsltd.com/
	sales@webstarsltd.com

	layout
*/
img{behavior: url('js/png.htc');}
html{ background:url("images/bg-page.gif"); }
html, body{ margin:0; padding:0; font: 0.9em Helvetica, Arial, Verdana, sans-serif;text-align:center; }
#page-container{ width:660px; margin:0 auto; text-align:left; }
	#header{ width:660px; float:left;}
		#header a#logo{ display:block; margin:20px 0 10px 0; }
		#header h3 {margin:0; padding:0; float:left; font:1.7em 'Arial Narrow', sans-serif; letter-spacing:1px;width:389px;text-align:center; color:#353a47}
		#header #center{width:389px;text-align:center}
		#header ul{ margin:0 0 0 12px; padding:0; list-style:none; }
		#header ul li{ margin:0 22px 0 0; padding:0; float:left; font:1.7em 'Arial Narrow', sans-serif; letter-spacing:1px; }
		#header ul li a, #header ul li a:link, #header ul li a:visited{ color:#353a47; text-decoration:none; }
		#header ul li a#on, #header ul li a:hover, #header ul li a:active{  }
	#navigator{ width:660px; float:left; padding: 24px 0 20px 0; }
		#navigator ul{ margin:0; padding:0; list-style:none; }
		#navigator ul li{ margin:0 10px 0 0; padding:0; width:124px; text-align:center; float:left; height:22px; }
		#navigator ul li.last{ margin-right:0; }
		#navigator ul li a, #navigator ul li a:link, #navigator ul li a:visited{ color:#646464; text-decoration:none; background:url("images/bg-nav-li.png") no-repeat; display:block; width:124px; height:22px; cursor:pointer !important; }
		#navigator ul li a.on, #navigator ul li a:hover, #navigator ul li a:active{ color:#4b6fb6 !important; }
	#columns{ width:660px; float:left; }
		#full{ width:660px; float:left; }
		.half-column{ width:320px;}
		.column13{ width:208px; }
		.column13.middle{ margin-left:18px; }
		.column-inside{ margin: 12px 20px 12px 20px; }
		.column-inside a{color:#fff; text-align:justify}
		.column-inside p{text-align:justify}
	#footer{ width:660px; float:left; padding:12px 0; }
		#footer p{ font-size:0.8em; }

/* site wide elements */
.inside{ padding:12px; }

h1{ margin: 0 0 22px 0; font-size:1.5em; }
h2 { margin: 0 0 3px 0; font-size:1.1em; }
p{ margin: 0 0 12px 0; }

.bluebg{ background-color:#91a7d2; color:#fff; padding-bottom:10px}
.greybg{ background-color:#cdcbcc; color:#000; padding-bottom:10px}
.greybg2{ background-color:#dddddd; color:#000; padding-bottom:10px}
.h289{ height:289px;}
.h312{ height:312px; }
.h490{ height:490px; }

table.projectlist{margin-bottom:16px;width:650px }
table.projectlist tr.atr td{ background:url("images/stripe-blue.gif");border:0px solid #000; width:130px;}
table.projectlist tr.btr td{ background:url("images/stripe-lightblue.gif");  }
table.projectlist tr.ctr td{ background:url("images/stripe-gray.gif");}
table.projectlist tr.dtr td{ background:url("images/stripe-moustard.gif"); }
table.projectlist tr.etr td{ background:url("images/stripe-kaki.gif");  }
table.projectlist tr.ftr td{ background:url("images/stripe-green.gif");  }
table.projectlist tr td.c, table.projectlist tr td.nbg{ background:none; }
table.projectlist tr td.c{ width:133px}
table.projectlist td{ color:#646464; vertical-align:middle;width:135px }
table.projectlist td.spacer{ height:16px; background:url("images/stripe-lightbe.gif");  }

p.bluestudio{ font-size:1.4em; color:#204086; text-align:right; margin:0; padding:40px 0; line-height:180%}

table.detailpic{margin-bottom:14px;width:650px }

#formula { list-style: none; margin: 5px 0 0 1px; padding: 0; height: 184px; background: url(images/formula.png) no-repeat; }
#formula li { position: relative; float: left; height: 184px; margin-right: 52px; font-size: 16px; font-weight: bold; cursor: default; }
#formula #vision { width: 188px; }
#formula #expertise { width: 182px; }
#formula #solution { width: 183px; margin-right: 0; }
#formula li .holder { display: none; position: absolute; z-index: 10; padding: 20px 20px 20px 30px; background-position: top left; background-repeat: no-repeat; color: #fff; }
#formula #vision .holder { top: -25px; left: -24px; width: 181px; height: 185px; background: url(images/pic1.jpg); }
#formula #expertise .holder { top: -24px; left: -22px; width: 174px; height: 185px; background: url(images/pic2.jpg); }
#formula #solution .holder { top: -24px; left: -21px; width: 173px; height: 185px; background: url(images/pic3.jpg); }
#formula li h1 { margin: 10px 0 5px; padding: 0; font-size: 27px; }


/* others */
.hide{ display: none; }
.show{ display: block; }
.show_{ display: inline; }
.underline{ text-decoration: underline; }
.i{ font-style: italic; }
.r{ text-align: right; }
.l{ text-align: left; }
.c{ text-align: center;}
.b{ font-weight: bold; }
.s{ text-decoration: line-through; }
.u{ text-decoration: underline; }
.b{ font-weight: bolder; }
.i{ font-style:italic; }
img,form{ border: 0; margin: 0; padding: 0; }
.fr{ float: right !important; }
.fl{ float: left !important; }
.rfr{ position:relative; float: right !important; }
.rfl{ position:relative; float: left !important; }
br.clear{ clear: both; }
hr{ width:100%; height:2px; }
td{ vertical-align:top; }

.frImg{ float:right; margin: 0 0 8px 8px; clear: right; }
.flImg{ float:left; margin: 0 8px 8px 0; clear: left; }