/*

	# Company: ClientName

	# CSS Framework: 2013 Effectal Media

	# CSS Authors: Effectal Media - Nick Maller,

	# File: layout.css

*/



/*

	** Layout :: Core & Structure Specific

*/

/* layout */

.layout

{

	width: 100%;

	padding: 0;

}



.container

{

    width: 958px;

    margin: 0 auto;

}



/* header */

.header

{

	height: 228px;

	background: url(../images/header-bg.jpg) repeat-x 0 0 transparent;

}

    .header .container

    {

        position: relative;

    }

	.header .logo img

	{

		margin-top: 32px;

	}

	.header .navigation

	{

		float: right;

		padding: 20px 0;

        background: url(../images/header-separator.png) no-repeat 100% 100% transparent;

	}

		.header .navigation ul

		{

			padding: 0;

		}

		.header .navigation ul li

		{

			float: left;

			margin-left: 5px;

			padding: 0;



			background-image: none;

		}

		.header .navigation ul li a:link,

		.header .navigation ul li a:visited

		{

			display: block;

            height: 11px;

			padding: 7px 8px 13px;



			background: url(../images/header-nav-bg.gif) repeat-x 0 0 transparent;



            color: #3a393b;

            font-size: 13px;

            text-transform: uppercase;

		}

        .header .navigation ul li a:hover,

        .header .navigation ul li.active a

        {

            background-position: 0 -31px;

        }

    .header h1.header-text

    {

        position: absolute;

        top: 110px;

        left: 300px;

        width: 495px;

        height: 64px;

        background: url(../images/header-text.png) no-repeat 0 0 transparent;

    }

    .header a.more-about-us

    {

        position: absolute;

        top: 152px;

        right: 0;

        display: block;

        width: 101px;

        padding-right: 25px;



        background: url(../images/header-more-about-us.gif) no-repeat 100% 1px transparent;



        font-size: 14px;

        text-transform: uppercase;

    }



/* screen */

.screen

{

	clear: both;

    min-height: 447px;

    padding: 40px 0;

    background: #f7f7f7

}

    .screen.left-side

    {

        background: url(../images/screen-bg.jpg) repeat-y center 0 #efefef;

    }

        .screen.left-side .content

        {

            width: 672px;

            margin-left: 40px;

        }





/* banner */

.banner

{

	height: 191px;

    background: url(../images/banner-bg.gif) repeat-x 0 0 transparent;

    text-align: center;

}

    .banner .banner-img

    {

        width: 100%;

        height: 100%;

        background: url(../../media/images/banners/banner.jpg) no-repeat center 0 transparent;

    }



/* sectionpanel */

.sectionpanel

{

	float: left;

	width: 246px;

}

	.sectionpanel .group

	{

		padding: 27px 0 100px 5px;

	}

	.sectionpanel h2

	{

		padding-bottom: 10px;



		text-transform: uppercase;

	}

	.sectionpanel h2 a:link,

	.sectionpanel h2 a:visited

	{

		color: #404040;

	}

    .sectionpanel .navigation

    {

        margin-bottom: 20px;

    }

        .sectionpanel .navigation ul

        {

            padding-bottom: 1px;

            background: url(../images/side-nav-bottom-bg.png) no-repeat 0 100% transparent;

        }

            .sectionpanel .navigation li

            {

                padding: 0;

                background: none;

            }

            .sectionpanel .navigation li a:link,

            .sectionpanel .navigation li a:visited

            {

                display: block;

                width: 227px;

                padding: 11px 0 7px 19px;



                background: url(../images/side-nav-bg.png) no-repeat 0 0 transparent;



                color: #3a393b;

                font-size: 12px;

            }

            .sectionpanel .navigation li a:hover

            {

                background: url(../images/side-nav-hover-bg.png) no-repeat 0 0 transparent;

            }

            .sectionpanel .navigation li.active a

            {

                background: url(../images/side-nav-hover-bg.png) no-repeat 0 0 transparent;

                font-weight: bold;

            }

            .sectionpanel .navigation li.active ul.sub li a

            {

                width: 210px;

                padding-left: 28px;

                background: url(../images/bullet.gif) no-repeat 16px 14px #f7f7f7;

                border-left: 8px solid #d1d1d1;

                font-weight: normal;

            }

                .sectionpanel .navigation li.active ul.sub li.active a

                {

                    font-weight: bold;

                }



/* content */

.content

{

	float: left;

	width: 636px;

}

	.content .breadcrumbs

	{

		padding-bottom: 16px;



		color: #3a393b;

        font-size: 10px;

	}

	.content .breadcrumbs a:link,

	.content .breadcrumbs a:visited

	{

		color: #de234b;

	}

	.content .breadcrumbs a:hover

	{

		color: #de234b;

	}

    .content ul li

    {

        background-position: 0 3px;

        padding-bottom: 5px;

    }



    /* full width content */

    .content.full-width

	{

        float: none;

		width: 100%;

	}





/* sidepanel */

.sidepanel

{

	float: left;

	width: 222px;

	margin-left: 100px;

}





/* footer */

.footer

{

	clear: both;

	width: 100%;

    padding: 22px 0 110px;

    background-color: #3a393b;

	color: #fff;

    font-size: 11px;

}

    .footer a:link,

	.footer a:visited

	{

		color: #fff;

	}

	.footer a:hover

	{

		text-decoration: underline;

	}

	.footer div.right

	{

		width: 615px;

        padding-top: 7px;

        text-align: right;

	}

    .footer .contact

    {

        float: right;

        text-align: right;

    }

	.footer .contact p,

    .footer .contact a

    {

        display: block;

        float: left;

        padding-left: 10px;

    }

        .footer .contact p

        {

            padding: 4px 5px 0 0;

        }

            .footer .contact p span

            {

                font-size: 16px;

            }

    .footer span.abn

    {

        color: #ccc;

        font-size: 10px;

    }

    .footer .navigation

	{

        clear: right;

		float: right;

		padding-top: 9px;

	}

		.footer .navigation ul

		{

			padding: 0;

		}

		.footer .navigation ul li

		{

			float: left;

			padding: 0;



			background-image: none;

		}









/*

	** Layout :: Template

*/



/* Home page */

#homepage .banner

{

	height: 451px;

    background: url(../images/banner-home-bg.gif) repeat-x 0 0 transparent;

}

    #homepage .banner .banner-img

    {

        background: url(../../media/images/banners/banner-home.jpg) no-repeat center 0 transparent;

    }



    #homepage .banner .container

    {

        position: relative;

    }

    #homepage .banner .split

    {

        position: relative;

        top: 111px;

        left: 0;

    }

    #homepage .banner .panel

    {

        height: 340px;

        background: url(../images/banner-overlay.png) repeat 0 0 transparent;

        color: #fff;

    }

        #homepage .banner .panel .group

        {

            padding: 20px 10px;

        }

        #homepage .banner .panel h2

        {

            padding: 8px 0;

            color: #fff;

        }

        #homepage .banner .panel p

        {

            font-size: 11px;

        }

        #homepage .banner .panel a

        {

            padding: 0 0 2px 23px;

            background: url(../images/banner-link.png) no-repeat 0 0 transparent;

            color: #fff;

        }

        #homepage .banner .panel a.full-link

        {

            position: absolute;

            top: 0;

            left: 0;

            width: 175px;

            height: 340px;

            padding: 0;

            background: none;

        }

#homepage .screen

{

    min-height: 343px;

}

#homepage .panel

{

    margin: 0 19px 0 0;

}

    #homepage .panel h2

    {

        padding-bottom: 20px;

    }

    #homepage .panel a.view-all-projects

    {

        position: absolute;

        top: 0;

        left: 0;

        display: block;

        width: 220px;

        height: 262px;

        background: url(../images/btn-view-all-projects.gif) no-repeat 40px 215px transparent;

    }

    #homepage .panel ul.projects li a:link,

    #homepage .panel ul.projects li a:visited

    {

        display: block;

        padding: 5px 0;

        background: url(../images/projects-separator.gif) repeat-x 0 100% transparent;

        color: #3a393b;

    }

        #homepage .panel ul.projects li.first

        {

            background-position: 0 3px;

        }

            #homepage .panel ul.projects li.first a

            {

                padding-top: 0;

            }

            #homepage .panel ul.projects li.last a

            {

                background: none;

            }





/* Services, Projects and Projects Listings pages */

.content .split.services .panel

{

    height: 189px;

    padding-top: 25px;

    background: url(../images/services-bg.png) no-repeat 0 0 transparent;

    text-align: center;

}

    .content.full-width .services .panel.last,

    .content.full-width .projects .panel.last

    {

        margin-right: 0;

    }

    .content .split.projects .panel .overlay

    {

        padding-top: 168px;

    }

    .content .split.services .panel .overlay

    {

        width: 156px;

        height: 34px;

        padding: 156px 42px 23px 21px;

    }



.content .split.project-listing .panel

{

    height: 254px;

    background: url(../images/project-listing-bg-sprite.png) no-repeat 0 0px transparent;

}

    .content .split.project-listing .panel a

    {

        position: absolute;

        top: 0;

        left: 0;

        display: block;

        width: 100%;

        height: 316px;

    }

    .content .split.project-listing .panel .group

    {

        padding: 20px 35px 20px 20px;

    }

.content .project-contacts li

{

    background-position: 0 3px;

}

    .content .project-contacts li a

    {

        display: block;

        padding-bottom: 10px;

    }



.content .project-slider

{

    float: left;

    width: 425px;

    margin-right: 20px;

}

.content .separator

{

    clear: both;

    height: 10px;

    margin-bottom: 10px;

    background: url(../images/flexslider-bottom.jpg) no-repeat 50% 100% transparent;

}

.content .project-info

{

    float: left;

    width: 227px;

}

    .content .project-info li

    {

        background: none;

        padding: 0 0 10px 0;

        line-height: 18px;

    }





/* Team pages */

.team .team-name

{

    text-transform: capitalize;

}

.team .hierachy-wrapper

{

    clear: both;

    padding-bottom: 20px

}

.team a.overlay

{

    width: 173px;

    height: 56px;

    padding: 197px 38px 9px 9px;

    font-size: 14px;

}

.team-profile .details

{

    float: left;

    padding-bottom: 20px;

    margin-bottom: 30px;

    border-bottom: 1px solid #e1e1e1;

}

    .team-profile .details .portrait

    {

        float: left;

        margin-right: 30px;

    }

    .team-profile .details .profile

    {

        float: left;

        width: 422px;

    }

        .team-profile .details .profile a.vcard img

        {

            margin-top: 24px;

        }

.team-profile ul.expertise li

{

    padding: 0 0 5px 20px;

    background: url(../images/expertise-bullet.gif) no-repeat 0 2px transparent;

}



.portal-container

{

    width: 1200px;

    margin: 100px auto 0;

}







/*

	** Layout :: Responsive

*/

/* iPhone, portrait & landscape. */

@media all and (max-device-width: 480px) {

    html,body { -webkit-text-size-adjust:none; }

}

/* iPad, portrait & landscape. */

@media all and (min-device-width: 768px) and (max-device-width: 1024px) {

    html,body { -webkit-text-size-adjust:none; }

}