/*
Project: Cocero Cordero Architects
Version: 1.0
Author: Y.O.Morales

TABLE OF CONTENTS FOR THIS CSS FILE:
1. BROWSER RESET (BASED ON ERIC MEYER AND YUI)
2. GENERAL (Tag redefinition and styles that apply sitewide)
3. CONTAINER AND HEADER (Container is the box that holds all other layout elements)
4. NAVBARS (All the navigation bars)
5. CONTENT (The area where the main content is)
6. ELEMENTS (Repetitive elements and widgets)
7. FOOTER
8. SPECIAL EFFECTS (Classes that are used for 'special effects', 
    like aligning, hiding, 'eye candies', etc.)
9. CAKEPHP CORE (Elements generated by CakePHP's core classes)
*/

/*********** 1. BROWSER RESET (BASED ON ERIC MEYER AND YUI) ***********/
/* Resets a lot of stuff; the tags are ordered alphabetically */
a, abbr, acronym, address, applet, b, big, blockquote, body, button, caption, center, cite, code,
dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, input,
kbd, label, legend, li, object, ol, optgroup, p, pre, q, s, samp, small, span, strike, strong, sub, sup,
table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var
{
	vertical-align:baseline;
	font-size:100%;
	font-weight:normal;
	font-variant:normal;
	margin:0;
	padding:0;
	border:0;
	background:transparent;
	outline:0;
}
/* headers reset */
h1, h2, h3, h4, h5, h6 {
	font-weight:bold;
	margin:1em 0;
}
h1 {
	font-size:138.5%; /* 18px */
}
h2 {
	font-size:123.1%; /* 16px */
}
h3 {
	font-size:108%; /* 14px */
}
/* list reset */
ol, ul, dl, dd {
	margin-left:1em;
}
ol li {
	list-style:decimal inside;
}
ul li {
	list-style:disc inside;
}
/* form reset */
input, button, textarea, select, optgroup, option {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
}
input, button, textarea, select {
	*font-size:100%; /* to enable resizing for IE */
}
optgroup {
	font-weight:normal;
}
legend {
	color:#000; /* because legend doesn't inherit in IE */
	padding:0 0.5em;
}
button, input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"] {
	padding:1px; /* Opera requires 1px of passing to render with contemporary native chrome */
}
input, textarea {
	border:1px solid #CCC;
}
/* table reset */
table {
	font:100%;
	font-size:inherit;
	border-collapse:collapse;
	border-spacing:0;
}
th, td {
	border:1px solid #CCC;
	padding:0.5em;
}
th {
	font-weight:bold;
	text-align:center;
}
/* resets blocktquotes and quotes */
blockquote, q {
	quotes:none;
	margin:0 1em 1em 1em;
}
blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none;
}
/* adds a bottom border to certain elements */
p, ol, ul, table, fieldset, caption, pre {
	margin-bottom:1em;
}
/* other miscellaneous resets */
body {
	line-height:1;
}
strong, dt {
	font-weight:bold;
}
em {
	font-style:italic;
}
ins {
	text-decoration:none;
	background:#FFC;
}
del {
	text-decoration:line-through;
}
sup {
	font-size:80%;
	vertical-align:super;
}
sub {
	font-size:80%;
	vertical-align:sub;
}
abbr, acronym {
	border-bottom:1px dashed #999;
	cursor:help;
}
pre, code, kbd, samp, tt {
	font-family:monospace;
	line-height:100%;
}

/*************** 2. GENERAL ***************/
body {
    color:#CCC;
    font:11px/1.231 Arial, Helvetica, Tahoma, sans-serif;
	margin:20px;
	background:#333;
}
/* forms */
fieldset {
	margin-bottom:10px;
	padding:10px;
	border:1px solid #444;
}
	fieldset fieldset {
		margin-bottom:0px;
		padding:0px;
		border:none;
	}
	fieldset legend {
		color:#CCC;
		font-weight:bold;
		padding:0 4px;
	}
	label {
		display:block;
	}
	input, textarea, select {
		margin-bottom:10px;
		border:1px solid #444;
		background:#CCC;
	}
		input, textarea {
	    	padding:2px;
		}
        fieldset fieldset input {
            float:left;
            margin-right:10px;
        }
/* tables */
table {
    width:100%;
    text-align:center;
	background:#666;
}
    th {
        padding:4px;
		border:1px solid #444;
        background-color:#C9A618;
    }
        th, th a:link, th a:visited {
            color:#FFF;
            text-decoration:none;
        }
    td {
        padding:4px;
		border:1px solid #444;
    }
h1, h2, h3, h4, h5, h6 {
    margin:10px 0;
}
h1 {
    font-size:18px;
}
h2 {
    font-size:16px;
}
h3 {
    font-size:14px;
    font-weight:bold;
}
h4, h5, h6 {
    font-size:11px;
    font-weight:bold;
}
p {
    margin:10px 0;
}
blockquote {
	margin:10px 0 10px 20px;
}
small {
    display:block;
    margin:10px 0;
}
ul, ol {
    list-style-position:outside;
    margin:0px 0px 10px 10px;
}
a:link {
    color:#C9A618;
}
a:visited {
    color:#C9A618;
}
a img {
    border:none;
}
acronym, abbr {
    border-bottom:1px dashed #CCC;
    cursor:help;
}

img, div, a {
	behavior:url('/app/webroot/iepngfix.htc');
}

/*********** 3. CONTAINER AND HEADER ***********/
#container_page {
    width:875px;
	margin:0 auto;
}
#header {
	height:125px;
}
	#header #photo_header {
		_margin-bottom:-3px;
	}
#container_content_page {
	padding:10px;
	background:#424A4D;
}

/*********** 4. NAVBARS ***********/
/* the three navbars below can be optimized by merging their css rules */
#wide_bkg_navbar_home {
	position:absolute;
	top:276px;
	left:0px;
	z-index:1;
	width:100%;
	_width:144.4%;
	height:105px;
	background:#D5D5D5 url('../img/layouts/bkg_navbar_home.png') repeat-x left center;
}
#navbar_home {
	position:relative;
	top:256px;
	z-index:2;
	height:25px;
	text-align:center;
	margin:0;
	padding:40px 15px;
	background:#D5D5D5 url('../img/layouts/bkg_navbar_home.png') repeat-x left center;
}
	#navbar_home li {
		display:inline;
		list-style:none;
		list-style-position:outside;
	}
		#navbar_home li a {
			display:inline-block;
		    height:20px;
			color:#333;
			font-family:Verdana, Tahoma, sans-serif;
		    font-weight:bold;
			font-variant:small-caps;
			text-decoration:none;
			padding:6px 10px 0px 10px; /*The top padding plus the height amounts to the 26px of the parent ul. I find this technique easier. */
			border-right:1px dotted #333;
		}
			#navbar_home li a:hover {
				text-decoration:underline;
			}
#wide_bkg_navbar_site {
	position:absolute;
	top:145px;
	left:0px;
	z-index:1;
	width:100%;
	_width:144.4%;
	height:29px;
	background:transparent url('../img/layouts/bkg_navbar_site.jpg') repeat-x left top;
}
#navbar_site {
	position:relative;
	z-index:2;
	height:29px;
	margin:0;
	background:transparent url('../img/layouts/bkg_navbar_site.jpg') repeat-x left top;
}
	#navbar_site li {
		display:inline;
		list-style:none;
		list-style-position:outside;
		margin-right:-3px;
	}
		#navbar_site li a {
			display:inline-block;
			height:20px;
			color:#555;
			font-family:Verdana, Tahoma, sans-serif;
			font-weight:bold;
			font-variant:small-caps;
			text-decoration:none;
			padding:4px 10px 0px 10px;
			_padding-top:3px;
			border-right:1px dotted #333;
		}
			#navbar_site li a:hover {
				color:#FFF;
				background-image:url('../img/layouts/bkg_navbar_site_hover.jpg');
	        }
#navbar_side {
	margin:0 4px 0 0;
}
	#navbar_side li {
		color:#FFF;
		text-transform:uppercase;
		text-align:right;
		list-style:none;
		list-style-position:outside;
		margin-bottom:8px;
	}
		#navbar_side li a {
			display:block;
			width:200px;
			color:#FFF;
			text-decoration:none;
			padding-right:10px;
			background:#7C7C7C;
		}
		#navbar_side li a:hover {
			color:#7C7C7C;
			background:#CCC;
		}
		/* highlighted pages for about us */
		#navbar_side.background li#tab1 a, #navbar_side.mission_statement li#tab2 a, #navbar_side.design_approach li#tab3 a, 
		#navbar_side.environmental_responsibility li#tab4 a, #navbar_side.clients li#tab5 a, #navbar_side.technology li#tab6 a, 
		#navbar_side.philosophy li#tab7 a, #navbar_side.perspective li#tab8 a, #navbar_side.information_of_principal li#tab9 a {
			color:#7C7C7C;
			background:#CCC;
		}
		/* highlighted pages for green design */
		#navbar_side.green_design li#tab1 a, #navbar_side.physical_environmental li#tab2 a, #navbar_side.management_operations li#tab3 a, 
		#navbar_side.strategic_advising li#tab4 a {
			color:#7C7C7C;
			background:#CCC;
		}
		/* highlighted pages for services */
		#navbar_side.services li#tab1 a, #navbar_side.architecture_engineering li#tab2 a, #navbar_side.green_projects li#tab3 a, 
		#navbar_side.construction_management_developments li#tab4 a, #navbar_side.project_management li#tab5 a {
			color:#7C7C7C;
			background:#CCC;
		}
#navbar_admin {
	height:20px;
	margin:10px 0;
	background:#AAA;
}
	#navbar_admin li {
		display:inline;
		list-style:none;
		list-style-position:outside;
		margin-right:-3px;
	}
		#navbar_admin li a {
			display:inline-block;
			height:18px;
			color:#555;
			font-family:Verdana, Tahoma, sans-serif;
			font-weight:bold;
			font-variant:small-caps;
			text-decoration:none;
			padding:2px 10px 0px 10px;
			border-right:1px dotted #333;
		}
			#navbar_admin li a:hover {
				color:#FFF;
				background:#373743;
	        }
.actionsBox {
	color:#FFF;
    margin:10px 0;
    padding:10px;
    background:#C9A618;
}
	.actionsBox a {
		color:#FFF;
		margin:0 10px;
	}
a.backBtn {
	display:block;
	width:846px;
	color:#FFF;
	text-transform:uppercase;
	text-decoration:none;
	padding:4px;
	margin:-10px -10px 10px -10px;
	border-bottom:1px solid #4A5256;
	background:#7C7C7C;
}
	a.backBtn:hover {
		color:#7C7C7C;
		background:#CCC;
	}

/*********** 5. CONTENT ***********/
#content_home {
	height:650px;
}
#content_page {
	min-height:350px;
	height:auto;
	_height:350px;
	padding:10px;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
    background:#666;
}
#leftColumn {
	float:left;
	width:220px;
}
#rightColumn {
	float:left;
	min-height:350px;
	_height:350px;
	text-align:justify;
}
	#rightColumn.twoColumns {
		width:550px;
		padding-left:50px;
		border-left:1px solid #999;
	}
#pageImage {
	float:right;
	width:300px;
	padding:10px;
}
.projectContainer {
	float:left;
	width:260px;
	height:180px;
	overflow:hidden;
	margin:0 14px 14px 0;
	background:#555;
}
	.projectContainer img {
		width:100%;
	}
#photoArea {
	float:left;
	width:400px;
	text-align:center;
	margin-right:10px;
}
#projectsInfo {
	float:right;
}
.projectDetailsContainer {
	width:208px;
	margin-bottom:20px;
}

/*********** 6. ELEMENTS ***********/
#logo {
	float:left;
	margin-top:-40px;
	_margin-bottom:-40px;
}
#slideshow {
	overflow:hidden;
	width:875px;
	height:650px;
	margin-top:-105px;
}
	#slideshow img {
		width:875px;
		height:650px;
	}
#gallery {
    margin:10px 0;
	background:#555;
}
	.imgContainer {
		float:left;
		height:60px;
		overflow:hidden;
		margin:0 4px 4px 0;
		padding:4px;
		border:1px solid #000;
		background:#FFF;
	}
		.imgContainer img {
			_width: expression(this.width > 100 ? 100 : true);
		}
#gallery input {
	float:left;
	margin-right:4px;
	border:none;
}
#gallery .pagination {
	border:none;
	background:none;
}
#horizontal_carousel {
	width:420px;
	height:120px;
	margin-bottom:20px;
	background:#999;
}
	#horizontal_carousel .container {
		position:relative; 
		float:left;
		overflow:hidden;
		width:380px;
	}
		#horizontal_carousel ul {
			position:relative;
			top:0;
			left:0;
			width:100000px;
			height:100px;
			margin:0;
			padding:0;
		}                      
			#horizontal_carousel ul li {
				float:left;
				height:100px;
				text-align:center; 
				list-style:none;
			}
#horizontal_carousel .previous_button, #horizontal_carousel .next_button {
	float:left;
	z-index:100;
	width:20px;
	height:100px;
	cursor:pointer;
	background:transparent url('../img/layouts/icon_leftarrow.gif') no-repeat center center;
}
#horizontal_carousel .next_button {
	background-image:url('../img/layouts/icon_rightarrow.gif');
}
	#horizontal_carousel .previous_button_over {
		background:transparent url('../img/layouts/icon_leftarrow_hover.gif') no-repeat center center;
	}
	#horizontal_carousel .next_button_over {
		background:transparent url('../img/layouts/icon_rightarrow_hover.gif') no-repeat center center;
	}
		#horizontal_carousel .previous_button_disabled {
			background:transparent url('../img/layouts/icon_leftarrow_dis.gif') no-repeat center center;
			cursor:default;
		}
		#horizontal_carousel .next_button_disabled {
			background:transparent url('../img/layouts/icon_rightarrow_dis.gif') no-repeat center center;
			cursor:default;
		}
#googleMap {
	margin:10px;
}

/*********** 7. FOOTER ***********/
#footer {
	height:115px;
	margin-top:10px;
	padding:10px;
	background:#4C555A url('../img/layouts/bkg_footer.jpg') repeat-x left top;
}
	#footer a {
		color:#CCC;
		text-decoration:none;
		margin:0 6px;
	}

/*********** 8. SPECIAL EFFECTS ***********/
.headerLrg {
	font-size:22px;
	font-weight:lighter;
}
.headerDarkBkg {
	color:#CCC;
	font-weight:lighter;
	text-transform:uppercase;
	margin:4px 0;
	padding:2px;
	background:#373644;
}
	.headerDarkBkg a {
		color:#CCC;
	}
.message, div.error div.error-message {
    color:#FFF;
    font-weight:bold;
    margin:10px 0;
    padding:4px;
    background:#C9A618;
}
.altrow {
    background-color:#424A4D;
}
.floatLeft {
	float:left;
}
.floatRight {
	float:right;
}
.clearBoth {
	clear:both;
}

/*********** 9. CAKEPHP CORE ***********/
.cake-sql-log {
    margin:40px auto;
}
.pagination {
	float:right;
	margin:20px 0;
}
	.pagination div {
	    display:inline;
	}
	.pagination a {
        text-decoration:none;
    }
	.pagination .disabled {
		display:none;
	}