/*
Theme Name: dragonfly
Theme URI: http://tastypixels.com.au
Description: Dragonfly Environmental site designed by <a href="http://tastypixels.com.au">Tasty Pixels</a>.
Version: 1.0
Author: Ramapriya Ramanuja
Author URI: http://tastypixels.com.au
Tags: 
*/

@import url('bootstrap/css/bootstrap.css'); 
@import url('bootstrap/css/bootstrap-responsive.css'); 

/****** GENERAL ******/

body 
{
margin: 0px;
padding: 0px;
background: #F6F6F8;
color: #014E60;
font-family: 'PT Sans', sans-serif;
font-size: 15px;
}

img 
{
border: none !important;
}

/****** FIXES FOR WIDGETS ON PAGES PLUG-IN *****/

/* removes bullets from widgets */
div.widgets_on_page li 
{
list-style: none !important;
background: none !important;
}

div.widgets_on_page ul 
{
margin-left: -40px !important;
margin-bottom: 0px !important;
margin-top: 0px !important;
}


/****** FONTS - ALL FOOTER FONTS ARE IN THE FOOTER SECTION FURTHER DOWN ******/

h1
{
font-family: 'Tauri', sans-serif;
font-weight: normal;
line-height: 1.3em;
color: #01819C;
font-size: 30px;
margin: 15px 0px 0px 0px;
}

h2 
{
font-family: 'Tauri', sans-serif;
font-size: 28px;
font-weight: normal;
line-height: .7em;
color: #01819C;
margin-bottom: 12px;
}

h3 
{
font-family: 'Tauri', sans-serif;
font-size: 22px;
font-weight: normal;
line-height: 1.3em;
color: #01819C;
margin-bottom: 5px;
}

h4 
{
font-family: 'Tauri', sans-serif;
font-size: 18px;
font-weight: normal;
color: #FFF;
padding: 5px 5px 5px 5px;
line-height: 1.5em;
background: #5AA145; 
}

h5
{
clear: none;
float: right;
font-size: 22px;
font-weight: normal;
color: #01819C;
margin: 25px 0px 0px 15px;
padding: 0px 0px 0px 30px;
width: 290px;
line-height: 1.5em;
background: url(img/blockquote-bg.png) top left no-repeat;
}

h6 
{
clear: both;
margin: 10px 0px 20px 0px;
padding-top: 5px;
font-size: 12px;
font-weight: normal;
color: #524B36;
width: 100%;
line-height: 1.3em;
border-top: 1px solid #524B36;
}

p 
{
font-family: 'PT Sans', sans-serif;
clear: none;
margin: 0px 0px 15px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.7em;
color: #014E60;
}

p em
{
font-style: normal;
color: #01819C;
font-size: 16px;
text-align: center;
}

/**** HEADER CONTENT ****/

#header-wrapper
{
width: 100%;
height: 120px;
overflow: hidden;
}

#header
{
margin: 0px auto;
width: 960px;
height: 100px;
padding: 0px;
}

#logo
{
float: left;
margin: 5px 0px 0px 0px;
width: 225px;
height: 100px;
background: url(img/logo.png) top left no-repeat;
}

#header-contact
{
float: right;
clear: none;
width: 290px;
margin: -20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

h2.header-contact
{
font-family: 'Tauri', sans-serif;
font-size: 30px;
font-weight: bold;
text-align: left;
line-height: 1.5em;
color: #01819C;
padding: 0px 0px 0px 35px;
background: url(img/phone-icon.png) center left no-repeat;
}

/****** TOP MENU ******/

#menu-wrapper
{
position: relative;
clear: both;
width: 100%;
height: 40px;
margin: 0px;
z-index: 1001;
}

/* this creates the current page menu highlighting. Note the changes in the menu in the header.php file to echo ' page-item-home current_page_item'. In some themes this doesn't work without that modification and the creation of the custom menu in the WordPress admin panel. The custom menu on this site is called 'main'. */
.current_page_item
{
background: #01819C;
}

#menu .current_page_item a
{
color: #FFF;
}

/**** SLIDER CONTENT ****/

#slider-wrapper
{
width: 100%;
height: 300px;
background: #01819C;
overflow: visible;
}

#slider-frame
{
width: 960px;
height: 300px;
margin: 0px auto;
overflow: hidden;
}

#top-bar /***** replaces slider wrapper on all but the home page *****/
{
margin: 0px;
width: 100%;
height: 30px;
background: #01819C;
}

/**** BANNER CONTENT ****/

#banner-wrapper /* home page */
{
clear: both;
width: 100%;
background: #5AA145;
margin: 0px 0px 0px 0px;
}

#banner  /* home page */
{
margin: 0px auto 0px auto;
width: 960px;
overflow: hidden;
padding: 20px 0px 20px 0px;
}

#banner-text-wrapper /** wraps the banner-text divs **/
{
clear: both;
float: left;
width: 960px;
margin: 0px 0px 0px 0px;
}

#banner-text
{
float: left;
width: 217px;
margin: 0px 30px 0px 0px;
}

#banner-text-right
{
float: left;
width: 217px;
margin: 0px 0px 0px 0px;
}

h2.banner-header
{
font-size: 18px;
color: #FFF;
line-height: 1em;
text-align: center;
color: #FFF;
}

p.banner-text
{
line-height: 1.3em;
text-align: center;
color: #FFF;
font-size: 16px;
}

#banner-image
{
float: left;
width: 217px;
margin: 0px 30px 0px 0px;
}

#banner-image-right
{
float: left;
width: 217px;
margin: 0px 0px 0px 0px;
}

/****** BODY LAYOUT******/

#wrapper
{
margin: 0px auto;
width: 100%;
}

#page 
{
clear: both;
width: 960px;
margin: 0px auto 0px auto;
padding: 5px 0px 0px 0px;
}

#content 
{
position: relative;
z-index: 100; /* IE z-index bug */
}

#content-narrow 
{
float: left;
width: 622px;
padding: 0px;
margin: 0px 0px 0px 0px;
}

/*  for pages with no sidebar  */
#content-wide 
{
float: left;
width: 880px;
padding: 0px;
margin-top: 0px;
}

.box-right, .post, .page 
{
margin: 0 0 10px 0;
}

ol 
{
line-height: 1.7em;
clear: left;
margin-left: 20px;
padding-left: 0px;
}

#right-sidebar ol 
{
line-height: 1.7em;
clear: left;
margin-left: 0px !important;
padding-left: 0px !important;
}
 
#content-right ul 
{
clear: left;
margin-left: -8px;
padding-left: 0px;
list-style: none;
}

#content-right ul li 
{
background-image: url(img/bullet.png);
background-repeat: no-repeat;
padding-left: 24px;
background-position: 0.5em 0.3em;
line-height: 1.3em;
margin: 8px 0px;
color: #014E60;
}

.blog-navigation
{
margin: 0px auto;
width: 200px;
}

/****** HOME PAGE COLUMNS ******/

#home-column-1
{
float: left;
clear: both;
width: 286px;
margin: 0px 50px 0px 0px;
padding:0px 0px 20px 0px;
}

#home-column-2
{
float: left;
clear: none;
width: 286px;
margin: 0px 0px 0px 0px;
padding:0px 0px 20px 0px;
}

/****** FORM STYLE *****/

p.form-text
{
line-height: 1.5em;
margin-bottom: 0px;
}

p.form-break
{
line-height: 3px;
}

p.form-space
{
line-height: 0px !important;
font-size: 2px !important;
}

input    
{
width: 285px;
display: block;
border: 1px solid #999;
height: 40px;
font-size: 16px;
}

button
{
font-size: 15px;
color: #FFF;
text-align: center;
line-height: 1em;
text-decoration: none;
background: #5AA145; 
opacity: 0.7;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
padding: 12px 25px 16px 25px;
border-radius: 6px;
border: none;
}

button:hover
{
background: #5AA145;
color: #FFF;
opacity: 1.0;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
cursor: pointer;
}

button:active
{
color: #FFF;
background: #537CC9;
}

p.button-text
{
text-align: center;
margin: 35px 0px 0px 0px;
}

/****** RIGHT SIDEBAR ******/

#right-sidebar
{
float: right;
width: 288px;
margin: 0px 0px 20px 0px;
}

#sidebar-box
{
position: relative;
z-index: 1000;
width: 203px;
margin: 20px 0px 0px 0px;
border: 1px solid #C0AE94
}

#sidebar-title
{
margin: 0px auto;
width: 193px;
padding: 5px 5px;
}

#sidebar-title h2
{
font-family: 'Fjalla One', sans-serif;
text-align: center;
font-size: 26px;
}

#sidebar-text
{
clear: both;
margin: 0px auto;
width: 193px;
padding: 5px 5px;
background: #01819C;
opacity: 1.0;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}

#sidebar-text:hover
{
background: #01819C;
opacity: 0.5;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}

#sidebar-text p
{
font-size: 13px;
text-align: center;
line-height: 1.3em;
color: #FFF;
background: none;
}

/****** HOME PAGE 'OUR CUSTOMERS' PANEL ******/

#customers-panel-wrapper
{
clear: both;
width: 100%;
border-top: 1px solid #D7D7DB;
}

#customers-panel
{
width: 960px;
padding: 5px 0px 20px 0px;
height: 100px;
margin: 0px auto;
}

#customers-panel-header
{
width: 100%;
padding: 0px 0px 15px 0px;
}

h2.customers-panel-heading
{
text-align: center;
color: #01819C;
font-size: 24px;
line-height: 1em;
margin: 0px;
}

#logo-slider-cover
{
position: relative;
z-index: 1001;
width: 960px;
margin: 0px auto;
height: 70px;
background: url(img/logo-slider-cover.png) top left no-repeat;
}


/****** FOOTER ******/

#top-footer-wrap 
{
width: 100%;
height: 230px;
background: #434D4F; 
border-top: 5px solid #5AA145;
}

#top-footer 
{
width: 960px;
margin: 0px auto;
padding: 0px 0px 20px 0px;
}

#top-footer p 
{
font-family: 'PT Sans', sans-serif;
font-size: 14px;
color: #F6F6F8;
padding: 0px;
line-height: 1.5em;
}

#top-footer p.address 
{
font-family: 'PT Sans', sans-serif;
font-size: 14px;
color: #F6F6F8;
padding: 0px;
line-height: 1.5em;
margin-bottom: 5px;
}

#top-footer p.facebook
{
font-family: 'PT Sans', sans-serif;
font-size: 14px;
padding: 10px 0px 10px 40px;
background: url(img/facebook-footer-icon.png) left center no-repeat;
}

#top-footer h2
{
font-family: 'PT Sans', sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 1em;
margin: 0px 0px 15px 0px;
color: #F6F6F8;
}

#bottom-footer-wrap 
{
width: 100%;
height: 30px;
padding: 20px 0px 10px 0px;
background: #434D4F; 
}

#bottom-footer
{
width: 960px;
margin: 0px auto;
}

#bottom-footer p
{
font-size: 12px;
text-align: center;
color: #F6F6F8;
}

#footer1 /*** LEFT FOOTER COLUMN ***/
{
float: left;
width: 286px;
margin: 15px 60px 0px 0px;
}

#footer2 /*** RIGHT FOOTER COLUMN ***/
{
float: left;
width: 266px;
margin: 10px 0px 0px 0px;
}


/****** LINKS ******/
	
a 
{
color: #01819C;
text-decoration: none;
border-bottom: 1px dotted #01819C;
}

a:hover
{
color: #FFF;
background: #01819C;
text-decoration: none;
border-bottom: 1px solid #01819C;
}

#menu a 
{
color: #004D5F;
text-decoration:none;
border-bottom: none;
}

#banner-text a, #banner-text-right a
{
color: #FFF;
text-decoration: none;
border-bottom: 1px dotted #FFF;
}

#banner-text a:hover, #banner-text-right a:hover
{
color: #5AA145;
background: #FFF;
text-decoration: none;
border-bottom: 1px solid #FFF;
}

#menu a:hover 
{
color: #004D5F;
background: none;
border-bottom: none;
}
	
#top-footer a 
{
color: #F6F6F8;
text-decoration: none;
border-bottom: 1px dotted #F6F6F8;
}

#top-footer a:hover
{
color: #434D4F;
background: #F6F6F8;
text-decoration: none;
border-bottom: 1px solid #F6F6F8;
text-shadow: none;
}
	
#bottom-footer a 
{
color: #F6F6F8;
text-decoration: none;
border-bottom: 1px dotted #F6F6F8;
}

#bottom-footer a:hover
{
color: #434D4F;
background: #F6F6F8;
text-decoration: none;
border-bottom: 1px solid #F6F6F8;
text-shadow: none;
}

#header a
{
border-bottom: 0px;
}

#header a:hover
{
border-bottom: 0px;
}

.sliderImage a
{
color: #01819C;
text-decoration: none;
border-bottom: 1px dotted #01819C;
}

.sliderImage a:hover
{
color: #FFF;
background: #01819C;
text-decoration: none;
border-bottom: 1px solid #01819C;
}

					/****** DIVS WHICH LIVE BELOW THE FOOTER AND WHICH PRELOAD GRAPHICS ******/

#preloader1
{
clear: left;
float: left;
width: 1px;
height: 1px;
background: url(img/customers1hover.png) no-repeat -9999px -9999px;/* THIS PRELOADS THE SIDEBAR HOVER IMAGE */
}

#preloader2
{
clear: left;
float: left;
width: 1px;
height: 1px;
background: url(img/customers1hover.png) no-repeat -9999px -9999px;/* THIS PRELOADS THE SIDEBAR HOVER IMAGE */
}

#preloader3
{
clear: left;
float: left;
width: 1px;
height: 1px;
background: url(img/customers1hover.png) no-repeat -9999px -9999px;/* THIS PRELOADS THE SIDEBAR HOVER IMAGE */
}

#preloader4
{
clear: left;
float: left;
width: 1px;
height: 1px;
background: url(img/customers1hover.png) no-repeat -9999px -9999px;/* THIS PRELOADS THE SIDEBAR HOVER IMAGE */
}

#preloader5
{
clear: left;
float: left;
width: 1px;
height: 1px;
background: url(img/customers1hover.png) no-repeat -9999px -9999px;/* THIS PRELOADS THE SIDEBAR HOVER IMAGE */
}

/****** BLOG DATES ******/

#date 
{
float: left;
margin: 5px 15px 0px 0px;
width: 56px;
height: 66px;
padding: 8px 0px 3px 0px;
background: #01819C;
border-radius: 6px;
overflow: hidden;
}

#date p
{
font-family: 'Tauri', sans-serif;
font-size: 14px;
margin: 0px 0px 0px 0px;
color: #F6F6F8;
text-align: center;
line-height: 1em;
text-transform: uppercase;
}

#date p.year
{
font-family: 'Tauri', sans-serif;
font-size: 14px;
margin: 0px 0px 0px 0px;
color: #F6F6F8;
text-align: center;
line-height: 1em;
text-transform: uppercase;
}

#date h2
{
font-family: 'Tauri', sans-serif;
font-size: 28px;
color: #F6F6F8;
line-height: 1em;
text-align: center;
font-weight: strong;
margin: 3px 0px 3px 0px;
}


/****** IMAGES ******/

#shopper-header-icon
{
float: left;
width: 100px;
height: 100px;
background: url(img/shopper-header-icon.png) top left no-repeat;
margin: -15px 20px 0px 0px;
}


/****** USEFUL STUFF ******/

.inline
{
display: inline !important;
float: left !important;
clear: both;
margin: 0px 0px 8px 7px;
}

.clearfix:after 
{
content: " ";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix 
{
display: inline-block;
}

html[xmlns] .clearfix 
{
display: block;
}

* html .clearfix 
{
height: 1%;
}

.clear 
{
clear: both;
}

/****** WORDPRESS CSS ******/

.aligncenter,
div.aligncenter 
{
display: block;
margin: 0 auto;
}

.aligncenter 
{
margin-top: 10px;
margin-bottom: 20px!important;
}

.alignleft 
{
float: left;
margin: 8px 15px 10px 0px;
}

.alignright 
{
float: right;
margin: 8px 0px 10px 15px;
}

.wp-caption 
{
margin-bottom: 10px;
padding-top: 4px;
text-align: center;
background-color: #E6E4DA;
}

.wp-caption img 
{
float: none;
margin: 0px;
padding: 0px;
border: none;
}

.wp-caption p.wp-caption-text 
{
font-size: 11px;
line-height: 1.5em;
text-align: center;
padding: 3px 5px;
margin: 0px;
}

/****** WIDGETS CSS ******/

#calendar_wrap table 
{
width: 100%;
}

#calendar_wrap td 
{
text-align: center;
}

#wp-calendar caption 
{
margin: 0 0 10px 0;
padding: 2px;
background: #3a3a3a;
}

img a
{
border: none !important;
}


/* - - - - - - - - - - - - */

/*      SOCIAL MEDIA       */

/* - - - - - - - - - - - - */

.social-wrapper
{
width: 175px;
float: right;
clear: right;
margin: 0 70px 0 0;
}

.social-facebook-icon
{
float: left;
width: 40px;
height: 40px;
margin: 0 5px 0 0;
background: url(img/social-facebook.png) top left no-repeat;
}

.social-facebook-icon:hover
{
background: url(img/social-facebook-hover.png) top left no-repeat;
}

.social-twitter-icon
{
float: left;
width: 40px;
height: 40px;
margin: 0 5px 0 0;
background: url(img/social-twitter.png) top left no-repeat;
}

.social-twitter-icon:hover
{
background: url(img/social-twitter-hover.png) top left no-repeat;
}

.social-instagram-icon
{
float: left;
width: 40px;
height: 40px;
margin: 0 5px 0 0;
background: url(img/social-instagram.png) top left no-repeat;
}

.social-instagram-icon:hover
{
background: url(img/social-instagram-hover.png) top left no-repeat;
}

.social-linkedin-icon
{
float: left;
width: 40px;
height: 40px;
margin: 0 0 0;
background: url(img/social-linkedin.png) top left no-repeat;
}

.social-linkedin-icon:hover
{
background: url(img/social-linkedin-hover.png) top left no-repeat;
}

.preloader1
{
clear: left;
float: left;
width: 1px;
height: 1px;
background: url(img/social-facebook-hover.png) no-repeat -9999px -9999px;
}

.preloader2
{
clear: left;
float: left;
width: 1px;
height: 1px;
background: url(img/social-twitter-hover.png) no-repeat -9999px -9999px;
}

.preloader3
{
clear: left;
float: left;
width: 1px;
height: 1px;
background: url(img/social-instagram-hover.png) no-repeat -9999px -9999px;
}

.preloader4
{
clear: left;
float: left;
width: 1px;
height: 1px;
background: url(img/social-linkedin-hover.png) no-repeat -9999px -9999px;
}