/* islandbins.css */

/* ********************** size 1 - smallest screen (default) ********************** */
/* ******************************************************************************** */

html,body,div{ margin:0; padding:0; }
body{ font: 76% Verdana,Arial,Helvetica,sans-serif; background-color:#aaa; }

div#container { width:100%; max-width:842px; min-width:300px; margin:auto; border-left:1px solid #888; }
/* div#header { height:98px; background:#9acc99 url(images/ib_logo.gif) no-repeat; border-bottom:1px solid #888; } */

div#header { background:#fff; border-bottom:1px solid #888; overflow:hidden; }
div#header div#logo { margin:auto; width:30%; min-width:170px; max-width:247px; }

/* div#bannertag { height:98px; margin-left:247px; background-image:url(images/banner2.gif); } */

div#bannertag { clear:left; }

div#header div#bannertag { text-align:center; padding:1.3em 0 1.3em 1.3em;  }
div#header div#bannertag p { display:inline-block; margin:0; letter-spacing:0.06em; }
div#header div#bannertag p:first-child { color:#b91726; font-size:1.5em; padding:0.1em 1em; font-weight:bold; background:#a5c3f5; border-radius:1em; margin-bottom:0.2em; }
div#header div#bannertag span { display:inline-block; color:#000; font-style:italic; font-weight:bold; font-size:1.1em; margin:0 1em; }

div#nav{ float:left; width:100%; background:#9acc99; }

/* div#banner { height:220px; background:url(images/banner_640x220.jpg) no-repeat; margin:0 -20px 0 -20px; } */
div#banner { margin:0 -20px; }

div#footer{ background:#b91726; color: #fff; }
div#footer p{ margin:0; padding:5px 10px; }

div#wrapper{ width:100%; margin-left:0; background:#9acc99; position:relative; }
div#content{ float:right; margin-left:0; padding:0 20px 20px 20px; border-left:1px solid #888; background:#fff; min-height:200px; }

div#footer{ clear:both; width:100%; text-align:center; }

div#header,div#content,div#footer { border-right:1px solid #888; }

div#content p { line-height:1.4em; margin:0.5px 0 1em 0; }
div#content h2 { color:#666; margin-top:0; padding-top:10px; font-size:13pt; }
div#content h3 { color:#666; font-size:10pt; }
div#content h4 { color:#333; font-size:12pt; }

a { color:#444; font-weight:bold; }
a:hover { color:#53871b; }

#nav ul { margin:0; padding:0; padding-bottom:5px; text-align:center; }
#nav li { margin:0; padding:0; list-style:none; display:inline-block; }
#nav li a { display:block; height:20px; line-height:20px; text-decoration:none; color:#b91726; 
    padding:5px 10px 5px 10px; margin:5px 5px; font-size:1.5em; box-shadow:2px 2px 4px black; /* 29/10/15 shadow replaces border:1px solid #888; */ }
#nav li a:link {}
#nav li a:visited {}
#nav li a:hover { background:#b91726; color:#fff; }
#nav li a:active {}
#nav li.current a { background:#b91726; color:#fff; }

a.shout { color:#b91726; font-size:13pt; font-weight:normal; }
a.shout:hover { color:#53871b; }

label.shout { color:#b91726; font-weight:bold; }

tr.headrow td { border-bottom:1px solid #666; font-weight:bold; }

td.formlabel,td.formLabel { text-align:right; vertical-align:top; background-color:#e4f4ce; }

dt { font-weight:bold; color:#666; }
dd { margin-left:20px; margin-bottom:10px; }

div#content div.bin { background:#d8ebd8; padding:10px 5px; margin-bottom:10px; text-align:center; }
div#content div.bin img { max-width:320px; }
div#content div.bin h4,div#content div.bin p { text-align:left; }
div#content div.bin h4 { margin:5px 0; }
div#content div.bin p:last-child { margin-bottom:5px; }



.ibphone,.ibphone a { font-size:16pt; color:#b91726; font-weight:normal; text-decoration:none; }
.ibphone.tel { display:inline-block; margin:10px 0; }
.ibphone.notel { display:none; }

.quote-price { font-size:16pt; }
.ib-bold { font-weight:bold; }
.img-right { float:right; border:1px solid #7cb52a; padding:1px; margin:10px 0 10px 10px; }
.img-left { float:left; border:1px solid #7cb52a; padding:1px; margin:10px 10px 10px 0; }

/* order form */
table#quote { border:0; border-collapse:separate; border-spacing:7px; width:100%; } /* width orig 400px */
table#quote td { padding:3px; }
table#quote td.postOK { color:#595; text-align:left; margin-bottom:10px; }
table#quote td.postError { color:#b40; text-align:left; margin-bottom:10px; font-weight:bold; }

/* ********************** size 2 - ********************** */
/* ****************************************************** */
@media (min-width: 40em) { /* 26em */

    div#header div#logo { float:left; }

    div#bannertag { clear:none; }
    div#header { background:linear-gradient(to left, #9acc99 25em, white, white); }

    .ibphone.tel { display:none; }
    .ibphone.notel { display:inline; }

}

/* ********************** size 3 - ********************** */
/* ****************************************************** */
@media (min-width: 40em) { /* 48em */

    div#header div#bannertag p:first-child { font-size:2em; }
    div#header div#bannertag span { font-size:1.3em; margin:0 2em; }

    div#nav{ float:left; width:200px; }
    #nav ul { padding-top:20px; text-align:left; }
    #nav ul li { display:block; }
    #nav li a { height:20px; line-height:20px; padding:0 0 0 20px; margin:5px 0; font-size:1em; border-color:transparent; box-shadow:none; }

    div#content{ float:none; overflow:hidden; } /* overflow:hidden makes #content use remaining width */

}

/* ********************** size 4 - largest ********************** */
/* ************************************************************** */
@media (min-width: 46em) { /* 60em */

    div#content div.bin { background:none; padding:0; margin-bottom:20px; text-align:left; overflow:hidden; }
    div#content div.bin img { float:left; clear:left; margin-right:10px; margin-top:20px; }
    div#content div.bin h4,div#content div.bin p { overflow:hidden; }
    div#content div.bin h4 { margin:30px 0 10px 0; }

}


@media (min-width: 700px) and (orientation: landscape) {

}