/* Inspiraweb Ltd. */
/* For styles used to define the general site common tags p, h1, h2, h3, h4, h5, h6, ul, ol and other styles that are used in the admin cms see the author.css stylesheet */

/* START general styles */

em, i {
    font-style: italic;
    line-height: inherit; }

strong, b {
    font-weight: bold;
    line-height: inherit; }

/* reduce the emphasis of inline or blocks of text, use the <small> tag to set text i.e. set as 80% the size of the parent. as an alternatively use .small with an inline element */
small {
    font-size: 80%;
}

.textalignLeft {
    text-align: left !important; }

.textalignRight {
    text-align: right !important; }

.textalignCenter {
    text-align: center !important; }

.textJustify {
    text-align: justify !important; }


.valigntextTop {
    vertical-align: text-top;
    }

.valigntextMiddle {
    vertical-align: middle;
}

.valigntextBottom {
    vertical-align: text-bottom;
}

.valignTop {
    vertical-align: top;
    }

.valignMiddle {
    vertical-align: middle;
}

.valignBottom {
    vertical-align: bottom;
}

.textNowrap {
    white-space: nowrap !important; }

.textLowercase {
    text-transform: lowercase !important; }

.textUppercase {
    text-transform: uppercase !important; }

.textCapitalize {
    text-transform: capitalize !important; }


.imgvertalgnMdl{ 
    vertical-align: middle; }

/* END general styles */

/* START Site specific styles */

.telnum{
  font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    color: #3f3e3e;      
}

.address{
  font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    color: #000000;     
}


a.textbutton{
margin-top: 10px;
margin-bottom: 10px;
padding-top: 3px;
padding-left: 11px; 
background-color: #c0c0c0;
  border: 1px solid #202020;
  border-radius: 6px;
}

a:link.textbutton, a:visited.textbutton, a:active.textbutton{
padding-left: 10px; 
font: bold 1.0em 'Helvetica Neue', Arial, Helvetica, sans-serif;
line-height: 20px; 
color: #494949; /*button text color*/
text-decoration: none;
}



/* Hover state CSS */
a.textbutton:hover{
background-position: bottom left;}

/* Hover state CSS */
a.textbutton:hover span{
	background-position: bottom right;
	color: black;
}


p.pageStrapline1st{
    padding-left: 30px;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 2.1em;
    line-height: 90%;
    color: #ffffff;
    text-shadow: 1px 1px #000000;
}

p.pageStrapline2nd{
    padding-left: 40px;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 1.6em;
    line-height: 80%;
    color: #ffffff;
    text-shadow: 1px 1px #000000;
}

/* START Header wrapper max-width: 767px Div style*/
@media only screen and (max-width: 767px) {
    p.pageStrapline1st{
    padding-left: 60px;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 1.4em;
    line-height: 90%;
    color: #ffffff;
    text-shadow: 1px 1px #000000;
}

p.pageStrapline2nd{
    padding-left: 55px;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    line-height: 80%;
    color: #ffffff;
    text-shadow: 1px 1px #000000;
}
    
}


/* END Site specific styles *


/* END Site specific styles */

/* START accessibility Links */
/*Used to place the access keys outside of the browser window*/
#accessibility_keys{
    position: absolute;
    z-index: -1;
    width: 30em;
    left: -200em;
}

#accessibilitytext{
    float: right;
    padding-right: 10px;
    color: #202020;
}

a.accessibilityTop:link, a.accessibilityTop:visited, a.accessibilityTop:active, a.accessibilityTop:hover{
    font-size: x-small;
    color: #202020;
    background-color: transparent;
}

@media only screen and (max-width: 767px) {
    a.accessibilityTop:link, a.accessibilityTop:visited, a.accessibilityTop:active, a.accessibilityTop:hover{
    color: #ffffff;
    }   
}

/* END accessibility Links */

@media only screen and (min-width: 768px) {
    .IWLlogo{
        width: 100%;
        border: 0px;     
    }
}

@media only screen and (max-width: 767px) {
    .IWLlogo{
        width: 120%;
        border: 0px; 
        margin-top: 10px;
        margin-left: 10px;
    }
}



/* START Header wrapper min-width: 768px Div style*/
@media only screen and (min-width: 768px) {

    .headerstrapline{
        position: relative;
        height: 32px;
        background: #b50101;
    }

    .straplineLbg{
        background-image: url(../backgrounds/strapline_left.gif);
    }


    .straplineRbg{
        background-image: url(../backgrounds/straplinerightBg.gif);
    }
	
	p.pageStrapline{
		padding-top: 20px;
		padding-right: 40px;
        display:inline;
        float: right;
        font-family:  Arial, Helvetica, Verdana, sans-serif;
        font-size: 2.0em;
        font-weight: 700;
        color: #ffffff;
	}


    #straplineMsg{
        position: relative;
        padding-top: 20px;
	padding-right: 40px;
        display:inline;
        float: right;
        font-family:  Arial, Helvetica, Verdana, sans-serif;
        font-size: 1.8em;
        font-weight: 700;
        color: #ffffff;
        line-height:200%
    }   
}
/* END Header wrapper min-width: 768px Div style*/

/* START Header wrapper max-width: 767px Div style*/
@media only screen and (max-width: 767px) {

    .headerstrapline{
        position: relative;
        height: 32px;
        background: #b50101;
    }

    .straplineLbg{
        background-image: url(../backgrounds/strapline_left.gif);
    }


    .straplineRbg{
        background-image: url(../backgrounds/straplinerightBg.gif);
    }


    #straplineMsg{
        position: relative;
        padding-left: 10px;
        display:inline;
        font-family:  Arial, Helvetica, Verdana, sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
        line-height:200%
    }

}
/* END Header wrapper max-width: 767px Div style*/


#indexcontentheader{
	position: relative;
	margin-left: 0px;
	background: #616266;
        padding-top: 1px;
	padding-right: 20px;
	padding-bottom: 1px;
	padding-left: 20px;
}

p.indexcontentheadertext{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.2em;
	color: #ffffff;
	font-weight: 700;
}

#indexcontent{
	clear: left;
	position: relative;
	background-color: #E8ECEC;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.0em;
	color: #404040;
	padding-top: 0px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 15px;
	text-align: left;
	vertical-align: top;
	border: 1px solid #616266;
}

p.indexcontentheadertext{
    display: inline-block;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.2em;
	color: #ffffff;
	font-weight: 700;
}

#indexcontent{
	text-align: left;
	vertical-align: top;
}



@media only screen and (min-width: 768px) {

#brochurecontentheader{
	clear: left;
	float: left;
	position: relative;
	display: block;
	width: 100%;
	margin-top: 5px;
	margin-right: 15px;
	margin-left: 0px;
	background: #616266;
	border: 1px solid #616266;
} 
}


@media only screen and (max-width: 767px) {
    #brochurecontentheader{
	clear: left;
	float: left;
	position: relative;
	display: block;
	width: 100%;
	margin-top: 5px;
	margin-right: 15px;
	margin-left: 0px;
	background: #616266;
} 
}
        
p.brochurecontentheadertext{       
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.2em;
	color: #ffffff;
	font-weight: 700;
	padding-top: 1px;
	padding-right: 20px;
	padding-bottom: 1px;
	padding-left: 20px;
}

@media only screen and (min-width: 768px) {
#brochurecontentwrapper{
	clear: left;
	position: relative;
	display: block;
	width: 100%;
        margin-left: -2px; /* Used to keep width inline with header when it uses inset to create shadow */
        margin-bottom: 0px;
	background-color: #d1e795;
        border-top: 0px;
	border-right: 1px solid #d1e795; /* Border used to keep width inline with header and footer */
        border-bottom: 0px;
        border-left: 2px solid #d1e795; /* Border used to keep width inline with header and footer */
        padding-top: 5px;
	padding-bottom: 1px;
}
}

@media only screen and (max-width: 767px) {
#brochurecontentwrapper{
	clear: left;
	position: relative;
	display: block;
	width: 98%;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        padding-top: 5px;
        padding-bottom: 5px;
	background-color: #E8ECEC;
    }
}

/* uses box-sizing: border-box alternative would be to not define the box or to use the  W3C's box definition box-sizing: content-box */
#brochurecontent{
	clear: left;
	position: relative;
	display: block;
        box-sizing: border-box; /* The width and height properties (and min/max properties) includes content, padding and border, but not the margin */
        background-color: #f7fce8;
        margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
        border-top: 1px solid #647e20;
         border-right: 2px solid #647e20;
          border-bottom: 1px solid #647e20;
           border-left: 2px solid #647e20;
         border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.0em;
	color: #404040;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
	text-align: left;
	vertical-align: top;
}



#pgbtmL{
	float: left; 
	border: 1px solid #999; 
	margin: 10px 5px 5px 0; 
	width: 455px; 
	background-color: #404040; 	
	padding-top: 5px;
	padding-left: 15px; 
	text-align: left;
	word-spacing: 3px;
}

#pgbtmR{
	float: right; 
	border: 1px solid #999; 
	margin: 10px 5px 0px 0; 
	width: 205px;  
	background-color: #404040; 
	padding-top: 17px;
	padding-left: 10px; 
	text-align: left;
}


.pgbtmstraplineT{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	color: #DD7008;
	font-weight: 700;
	line-height: 12px;
	
}



p.pgbtmstraplineB{
padding-left: 10px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	line-height: 12px;
}

a.pgbtmemail{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	line-height: 12px;
}


#footer{
	clear: left;
	display: block;
	padding-top: 10px;
	text-align: center;
}

/* START page Footer style*/
p.footer{
	font-size: x-small;
	color: #ffffff;
}

#inspirawebLink{
    margin-left: 30px;
    font-size: x-small;
    color: #000000;
}

img.iswlLogo {
	vertical-align: middle;
        width: 80px;
        height: 36px;
        margin-left: 4px;
	border: 0px;
}

a.footer_nav{
	font-size: small;
	color: #ffffff;
}

#footerCopyright{
	font-size: x-small;
	color: #ffffff;
}
/* END page Footer style*/


.telnum{
  font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    color: #3f3e3e;  
    
}

.address{
  font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    color: #000000;  
    
}



/* Responsive styles for screens that are at least 768px; Note the keyword "only" used here to hide style sheets from older browsers from seeing style sheet and "screen" means we will apply css styles to a device with a screen. */
@media only screen and (min-width: 768px) {

/* used to create responsive grid box containers  */
    
    .slideshowLgeBox4 {
        float: left;
        position: relative;
        width:  100%;
        padding-bottom: 60%;
    }

   
     /* used in conjunction with the .largeBox class to create an inner container for responsive grid box containers  */
    .slideshowLgeBoxInner {
       position: absolute;
       left: 1px;
       right: 1px;
       top: 1px;
       bottom: 1px;
       overflow: hidden;
    }
}


/*  GO FULL WIDTH AT LESS THAN 768 PIXELS */
/* For viewport narrower than 768px, the following rules will apply: Note the keyword "only" used here to hide style sheets from older browsers from seeing style sheet and "screen" means we will apply css styles to a device with a screen. */
/* Tips: use percentage (%) value to make the containers fluid. */

@media only screen and (max-width: 767px) {
  /* used to create responsive grid box containers  */
    
    .slideshowSmlBox12 {
        float: left;
        position: relative;
        width: 100%; 
        height: 400px;
        background-color: #ff0000;
    }
    
     /* used in conjunction with the .largeBox class to create an inner container for responsive grid box containers  */
    .slideshowSmlBoxInner {
       position: absolute;
       left: 1px;
       right: 1px;
       top: 1px;
       bottom: 1px;
       overflow: hidden;
       background-color: #00ff00;
    }
}


/* Responsive styles for screens that are at least 768px; Note the keyword "only" used here to hide style sheets from older browsers from seeing style sheet and "screen" means we will apply css styles to a device with a screen. */
@media only screen and (min-width: 768px) {

/* used to create responsive grid box containers  */
    
    .largeBox4 {
        float: left;
        position: relative;
        width:  33.33333%;
        padding-bottom: 41.66%;
    }

     /* used in conjunction with the .largeBox class to create an inner container for responsive grid box containers  */
    .largeBoxInner {
       position: absolute;
       left: 1px;
       right: 1px;
       top: 1px;
       bottom: 1px;
       overflow: hidden;
    }
}


/*  GO FULL WIDTH AT LESS THAN 768 PIXELS */
/* For viewport narrower than 768px, the following rules will apply: Note the keyword "only" used here to hide style sheets from older browsers from seeing style sheet and "screen" means we will apply css styles to a device with a screen. */
/* Tips: use percentage (%) value to make the containers fluid. */

@media only screen and (max-width: 767px) {
  /* used to create responsive grid box containers  */
    
    .smallBox12 {
        float: left;
        position: relative;
        width: 100%; 
        padding-bottom: 100%;
    }
    
     /* used in conjunction with the .largeBox class to create an inner container for responsive grid box containers  */
    .smallBoxInner {
       position: absolute;
       left: 20px;
       right: 1px;
       top: 1px;
       bottom: 1px;
       overflow: hidden;
    }
}



/* START page Footer style */
p.footer{
    font-size: x-small;
    color: #ffffff;
}

#inspirawebLink{
    font-size: x-small;
    color: #ffffff;
}


a.footer_nav{
    font-size: small;
    color: #ffffff;
}

p.footerCopyright{
    font-size: x-small;
    color: #ffffff;
}
/* END page Footer style */
/* Sitemap styles  */

sitemapWrapper{
    width: 100%;
    background-color: #11578B;
}		
		
ul.sitemap-a-to-z{	
    max-width: 100%;
    margin: 0px auto;
}

li.sitemapindex{
    background-color: #808080;
    color: #ffffff;
    width: 30px;
    padding: 0px 5px 0px 5px;
    line-height: 30px;
    border-radius: 3px;
    font-size: 2.0em;
    text-transform: uppercase;
    margin-right: 20px;
}

li.sitemapindexLinks{
    color: #E76C09;
    font-size: 0.8em;
}

ul.sitemap-a-to-z li {
    display: inline;
    list-style-type: none;
    border-radius: 3px;
    color: #ffffff;
    text-align: center;
}


ul.sitemap-a-to-z li a {
    background-color: #11578B;
    color: #ffffff;
    width: 30px;
    padding: 0px 5px 0px 5px;
    line-height: 30px;
    border-radius: 3px;
    font-size: 2.0em;
    text-transform: uppercase;
    margin-right: 2px;
    text-decoration: none;
}

ul.sitemap-a-to-z li a:hover {
    color: #ff0000;
}

/* Site map page links*/

.sitemapLinks{
    padding-left: 30px;
}

a.smatoz{
    width: 1.0em;
    text-decoration: none;
}

p.sitemap-a-to-z {
    background-color: #11578B;
    color: #ffffff;
    padding: 0px 0px 0px 5px;
    line-height: 30px;
    width: 2.0em;
    border-radius: 3px;
    font-size: 1.8em;
    text-transform: uppercase;
    text-decoration: none;
}

a.mapLink{
    margin-left: 30px;
}
/* START Form specific styles */

h2.contactform{
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1.8em;
    color: #e83131;
}

p.contactform{
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1.0em;
    color: #404040;
}

.qf14 {
    display: none;
}

p.jsreqd {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1.0em;
    text-align: center;
    color: red;
    border-style: solid;  
    border-width: 1px;  
    border-color: red;  
}

.textfield{   
    display: block;  
    font-family: "Helvetica Neue", Arial, sans-serif;  
    border-style: solid;  
    border-width: 1px;  
    border-color: #dedede;  
    margin-bottom: 20px;  
    font-size: 1.0em;   
    color: #777;  
    padding: 5px 1% 5px 1%; 
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;   
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;       
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
}  

.textfield:focus{   
    color: #333;  
    border-color: rgba(41, 92, 161, 0.4);     
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);   
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);  
    outline: 0 none;   
}


.textarea {  
    display: block;  
    font-family: "Helvetica Neue", Arial, sans-serif;  
    border-style: solid;  
    border-width: 1px;  
    border-color: #dedede;  
    margin-bottom: 15px;  
    font-size: 1.0em;  
    height: 180px;  
    color: #777;  
    padding: 5px 5px 5px 5px; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;   
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;          
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
}  
.textarea:focus {  
    color: #333;  
    border-color: rgba(41, 92, 161, 0.4);   
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);   
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);  
    outline: 0 none;   
}


.selectbox {  
    display: block;  
    font-family: "Helvetica Neue", Arial, sans-serif;  
    border-style: solid;  
    border-width: 1px;  
    border-color: #dedede;  
    margin-bottom: 15px;  
    font-size: 1.0em;  
    padding: 5px 5px 5px 5px;  
    width: 100%;    
    color: #777;       
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;  
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;         
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  
}  


.selectbox:focus {  
    color: #333;  
    border-color: rgba(41, 92, 161, 0.4);       
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);    
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);  
    outline: 0 none;   
}  


/* Radio */
input[type=radio] {
    display: inline-block;
    font-size: 0.9em;
    line-height: 1em;
    margin: 0 0.25em 0 0;
    padding: 0;
    width: 1.25em;
    height: 1.25em;
    border-radius: 2em; /* places a radius on all 4 corners and makes radios round */
    -webkit-border-radius: 2em;
    vertical-align: text-top;
}


input[type=radio]:focus { 
    color: #333;  
    border-color: rgba(41, 92, 161, 0.4);       
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);    
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);  
    outline: 0 none;   
} 

/* Checkbox */

input[type=checkbox] {
    display: inline-block;
    font-size: 0.9em;
    line-height: 1em;
    margin: 0 0.25em 0 0;
    padding: 0;
    width: 1.25em;
    height: 1.25em;
	border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    vertical-align: text-top;
}

input[type=checkbox]:checked {
    background: rgb(255,255,255); /* Fallback if gradient used but not supported by the users browser */
}

input[type=checkbox]:focus { 
    color: #333;  
    border-color: rgba(41, 92, 161, 0.4);       
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);    
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);  
    outline: 0 none;   
} 

/* END Form specific styles */