/* 
    Document   : styles
    Created on : 27-Mar-2012, 16:44:26
    Author     : Ian
    Description:
        main layout and positioning styles.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

@import url('reset.css');
@import url('typography.css');
@import url('smoothmenu.css');

root { 
    display: block;
}

/* declare HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

/* to fix after any floats */
.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.clear {
   clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 100%;
}

/***** Layout *****/
body {
    background: #F5F5F5 url('../img/flower4.png') scroll repeat top left;
}
.body {clear: both; margin: 0 auto; width: 940px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}
.wrapper {
    width:1006px;
    background-color: #fff;
    margin: 0 auto;
    border-top:#72A200 5px solid;
}
/* Header *****************/
#banner {
    margin: 0 auto;
    padding: 0 0 15px 0;
    height: 75px;
    border-bottom: 1px solid #DEDEDE;
}

/* Banner or the title */
#banner h1 {
    width: 235px;
    float: left;
}

.slogan h2 {
    text-align: center;
}

/* main content area */
.col_13 {
    display: inline;
    float: left;
    margin-right: 20px;
    width: 300px;
}

.col_23 {
    display: inline;
    float: left;
    margin-right: 20px;
    width: 620px;
}

.last {
    margin-right: 0;
}

#phoneicon {
    padding-right: 15px;
}

/* home styles */

#portfolioimgs ul {list-style: none; margin: 0; padding: 0;}
#portfolioimgs li {
    background: none repeat scroll 0 0 #F5F5F5;
    float: left;
    padding-bottom: 10px;
    margin-bottom: 20px;
    margin-right: 20px;
    width: 220px;
}
#portfolioimgs li.last {margin-right: 0;}
#portfolioimgs li h5 {text-align: center;}
#portfolioimgs li h5 a {text-decoration: none;}

.divider {
    border-bottom: 1px solid #DEDEDE;
    float: left;
    margin: 25px 0;
    width: 100%;
}

#servicesoffered h4 {margin-top: 0;}
#servicesoffered h4 a {text-decoration: none;}



/* Main Nav */
#banner nav {
    background: #fff;
    font-size: 1.143em;
    height: 75px;
    line-height: 30px;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 705px;
    float: right;
}

#banner nav ul {list-style: none; margin: 0 auto; width: auto; float: right;}
#banner nav li {float: left; display: inline; margin: 0;}

#banner nav a:link, #banner nav a:visited {
    color: #474343; display: inline-block; height: 50px; padding: 5px 1.5em; text-decoration: none; padding-top: 20px;
}

#banner nav ul li ul li a:link, #banner nav ul li ul li a:visited {
    color: #474343; display: inline-block; height: 18px; padding: 5px 1.5em; text-decoration: none; padding-top: 20px;
}

#banner nav a:hover, #banner nav a:active,
#banner nav .selected a:link, #banner nav .selected a:visited {
    background: #72A200;
    color: #fff;
    text-shadow: none !important;
}


/* footer styles */
footer {
    background: #72A200 url('../img/minimalist3.png') repeat scroll 0 0;
    border-top:4px solid #618A00;
    border-bottom:4px solid #618A00;
    margin-top: 20px;
    margin-bottom: 30px;
    position: relative;
}

footer nav ul { height: 30px; padding-top: 20px;}
footer nav li { display: inline-block; border-right: 1px solid #fff;}
footer nav ul li a:link { color:#fff !important; text-decoration: none; display: inline-block; padding: 0 15px; }
footer a:link, footer a:visited {color: #fff;}
footer a:hover {text-decoration: underline; color: #AF2009;}
footer nav ul li:first-child a {padding-left: 0;}
footer nav ul li:last-child {border-right:none;}

footer p {color: #fff;}
footer p address {color: #fff;}
#createdby {position: absolute; right: 5px; bottom: -45px; color: grey;}
#createdby a {color: #72A200;}
#telephoneus {position: absolute; top: 10px; right: 40px;}

/* contact form styles */

#maincontactform {padding:10px 10px 10px 10px; margin-top:10px;   width:80%; border:1px solid #c2c2c2;	}
		#maincontactform  div { padding:10px 0; float:left; width:100%; }
		#maincontactform label { display:block; width:150px; float:left; padding:5px; text-transform:uppercase;}
		#maincontactform input, #maincontactform textarea { float:left; clear:none; width:400px; padding:5px; border:1px solid #c2c2c2; }
		#maincontactform input#sendbtn { margin:0px; width: 200px; }
		#maincontactform textarea { height:100px; }