/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }

/* @font-face {
	font-family: 'Lobster1.1Regular';
	src: url('../fonts/Lobster_1.1_-webfont.eot');
	src: local('☺'), url('../fonts/Lobster_1.1_-webfont.woff') format('woff'), url('../fonts/Lobster_1.1_-webfont.ttf') format('truetype'), url('../fonts/Lobster_1.1_-webfont.svg#webfont30G9S4nm') format('svg');
	font-weight: normal;
	font-style: normal; }
    
@font-face {
	font-family: 'RalewayThin';
	src: url('../fonts/raleway_thin-webfont.eot');
	src: local('☺'), url('../fonts/raleway_thin-webfont.woff') format('woff'), url('../fonts/raleway_thin-webfont.ttf') format('truetype'), url('../fonts/raleway_thin-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal; }
*/

/* Site-wide properties ======================================================== */
body{
    font: normal normal 12px/12px Tahoma, Arial, Helvetica, Verdana, sans-serif;
	background-image: url('../img/back_pattern.jpg');
    }

a {
	text-decoration: none;
}

ul.menu { margin: 0px auto 0 auto; }
    
    /* Fibonacci based heading scale ratio */
    h1{ font-size: 4.4em; font-weight: normal; }
    h2{ font-size: 2.8em; font-weight: bold; }
    h3{ font-size: 1.6em; font-weight: bold; }
    h4{ font-size: 1.2em; font-weight: bold; }

/* Reusable classes ============================================================ */

/* Left & Right alignment */
.left{ float: left; }
.right{ float: right; }

/* The inside class provides consistent padding. To be used often! */
.inside{ padding: 20px; }
.inside-about{ width: 400px; padding: 20px; float: left; }
.inside-projects a{ color:#D23F2C;}
.inside-projects{ width: 250px; padding: 20px; float: left; }

.inside-projects-img{ width: 620px; padding: 20px; float: right; }
.inside-about-img{ width: 430px; padding: 20px; float: right; }

/* The fraction classes are useful for column lists */
.half, .third, .quarter, .fifth, .sixth{ width: 100%; }
.half li, .third li, .quarter li, .fifth li, .sixth li{ float: left; }
.half li{ padding-right: 5%; width: 45% }
.third li{  padding-right: 5%; width: 28.3% }
.quarter li{  padding-right: 5%; width: 20% }
.fifth li{  padding-right: 5%; width: 15% }

/* For when a <br /> just ain't enough */
.separator{
    clear: both;
    float: left;
    height: 60px;
    width: 100%; }

/* Basic Structure ============================================================= */
#wrap{
    margin: 0 auto;
    position: relative;
    width: 960px;
    }
    
    /* wapper */
    
    #wrapper {
    height: 1300px;
    }

    /* Header */
    header{
        float: left;
        width: 100%; }
        
    #top {
    height: 100px;
    }
	
	.logo-top {
		margin-top: 10px;
		margin-bottom: 10px;
	}
    
    #header-carousel {
    height: 500px;
    }
    
    /* Content */
    article{ }

	.welcome {
		float: left;
	    width: 960px;
	    height: 250px;
	   	margin-top: 510px;
	    line-height: 1.5;
	    font-size: 13px;
		background: #f1f1f1;
		}
		
	.gallery {
		float: left;
		width: 960px;
		height: 1500px;
		margin-top: 510px;
		line-height: 1.5;
		font-size: 13px;
		background: #f1f1f1;
	}
		
	.projects {
			float: left;
		    width: 960px;
		    height: 450px;
		   	margin-top: 510px;
		    line-height: 1.5;
		    font-size: 13px;
			background: #f1f1f1;
			}	
	
			
	.projects-bondi {
			float: left;
			width: 960px;
			height: 450px;
			margin-top: 510px;
			line-height: 1.5;
			font-size: 13px;
			background: #f1f1f1;
			}
			
	.projects-bronte {
				float: left;
				width: 960px;
				height: 800px;
				margin-top: 510px;
				margin-bottom: 50px;
				line-height: 1.5;
				font-size: 13px;
				background: #f1f1f1;
				}
	
	.projects-mcmahons {
				float: left;
				width: 960px;
				height: 400px;
				margin-top: 510px;
				margin-bottom: 50px;
				line-height: 1.5;
				font-size: 13px;
				background: #f1f1f1;
				}
		
	.about {
			float: left;
		    width: 960px;
		    height: 450px;
		   	margin-top: 510px;
		    line-height: 1.5;
		    font-size: 13px;
			background: #f1f1f1;
			}
			
	.links {
		float: left;
		width: 960px;
 		height: 450px;
		margin-top: 510px;
		line-height: 1.5;
		font-size: 13px;
		background: #f1f1f1;
		}

	.under{
	    float: left;
		margin-top: 25px;
		margin-right: 30px;
	    width: 300px;
	    height: 327px;
	    line-height: 1.5;
	    font-size: 14px;
		background: #f1f1f1;
	        }
	.under-right{
		float: right;
		margin-top: 25px;
		width: 300px;
		height: 327px;
		line-height: 1.5;
		font-size: 14px;
		background: #f1f1f1;
			        }
    
    /* Company Profile */
    #company-profile {
    	margin-left: 40px;
    	width: 606px;
     	background: #f1f1f1;
    }
    
     /* Services */
    #services {
     	line-height: 1.5;
        font-size: 14px;
    }
    
    /* Sidebar */
    aside{
    	margin-top: 30px;
    	margin-right:15px;
    	width: 310px;
        float: left;
        background: #f1f1f1;
        height: 327px;
        }
        
    /* Videos */
	#videos {
		margin-top: 30px;
    	width: 270px;
   		float: right;
    	background: #f1f1f1;
    	height: 289px;
    	padding: 20px;
	}     
    
        
    /* Footer */
    footer{
		padding-top: 30px;
        float: left;
        width: 100%;
        height: auto;
        }

	footer a {
		color: #000000;
	}

		/* Menu */
		.menu {	
			height: 77px;
			width: 960px;

			background: #4c4e5a;
			background: -webkit-linear-gradient(top, #ffffff 0%,#EEEEEE 100%);
			background: -moz-linear-gradient(top, #ffffff 0%,#EEEEEE 100%);
			background: -o-linear-gradient(top, #ffffff 0%,#EEEEEE 100%);
			background: -ms-linear-gradient(top, #ffffff 0%,#EEEEEE 100%);
			background: linear-gradient(top, #ffffff 0%,#EEEEEE 100%);

		}
		
		.menu li {
			position: relative;
			list-style: none;
			float: left;
			display: block;
			height: 40px;
			padding-left: 25px;
			padding-top: 10px;
		}
		
		/* Links */

		.menu li a {
			display: block;
			padding: 0 11px;
			margin: 6px 0;
			line-height: 28px;
			text-decoration: none;
			height: 40px;

		
			

			font-family: Helvetica, Arial, sans-serif;
			font-weight: normal;
			font-size: 13px;

			color: #aaaaaa;
			

			-webkit-transition: color .2s ease-in-out;
			-moz-transition: color .2s ease-in-out;
			-o-transition: color .2s ease-in-out;
			-ms-transition: color .2s ease-in-out;
			transition: color .2s ease-in-out;
		}
	
		.menu li:first-child a { border-left: none; }
		.menu li:last-child a{ border-right: none; }

		.menu li:hover > a { color: #555555; }
	
		/* Sub Menu */

		.menu ul {
			position: absolute;
			top: 67px;
			left: 0;

			opacity: 0;

			background: #f1f1f1;

			-webkit-border-radius: 0 0 5px 5px;
			-moz-border-radius: 0 0 5px 5px;
			border-radius: 0 0 5px 5px;

			-webkit-transition: opacity .25s ease .1s;
			-moz-transition: opacity .25s ease .1s;
			-o-transition: opacity .25s ease .1s;
			-ms-transition: opacity .25s ease .1s;
			transition: opacity .25s ease .1s;
		}

		.menu li:hover > ul { opacity: 1; }

		.menu ul li {
			height: 0;
			overflow: hidden;
			padding: 0;

			-webkit-transition: height .25s ease .1s;
			-moz-transition: height .25s ease .1s;
			-o-transition: height .25s ease .1s;
			-ms-transition: height .25s ease .1s;
			transition: height .25s ease .1s;
		}

		.menu li:hover > ul li {
			height: 45px;
			overflow: visible;
			padding: 0;
		}

		.menu ul li a {
			width: 160px;
			padding: 10px 0 10px 40px;
			margin: 0;

			border: none;
		}

		.menu ul li:last-child a { border: none; }
    
    /* Navigation 
    ul, ol { 
    font-size: 12px; 
    height: 77px;
    width: 930px; 
    background-image:url('../img/nav_bgground.jpg');
	background-repeat: repeat-x;
    padding-left: 30px;
	padding-top: 30px;
	z-index: 2000;}
    
    nav ul li { 
    display: block;
    float: left;
    margin: 0 10px 0 0; 
    }
    
    li { 
    font: normal normal 1.2em/2em Helvetica, Verdana, sans-serif; 
    list-style: none; }
	*/
    
    .nav-gap { margin-top: 10px; margin-left: 20px; }
	
    
    
    /* Easy Slider */

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:960px;
		height:500px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:300px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:960px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(../img/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../img/btn_next.gif) no-repeat 0 0;	
		}	
		
	/* numeric controls */	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;	
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		border:1px solid #ccc;
		background:#DAF3F8;
		color:#555;
		padding:0 10px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#5DC9E1;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
/* // Easy Slider */
    
/* Project specifics =========================================================== */
/* Pour some CSS below ========================================================= */

/* The H1 declarations - for @font-face presentational purposes only */
h1{ font: 88px 'Lobster1.1Regular', Arial, sans-serif; }
    h1 span{ font: 88px RalewayThin, Arial, sans-serif; letter-spacing: -4px }


/* Galleries */


.gallery-projects li { display: inline; padding:1px 5px !important;}