/* ===== ranger.css - created: 03/07/2006 Simon Moss - www.simonmoss.co.uk ============ */
/* === updated: 01/12/2011 === */
/* div
{
border:solid 1px #f00;
} 
##### DIV BORDER TEST ###### */
/* #~~~~~~~~~~~~~~~~~~~~ START HTML, BODY ~~~~~~~~~~~~~~~~~~~# */
html, body
{
height:100%;
margin:0;
padding:0;
}
body
{
background:#fafaea url("images/ranger_bg.jpg") repeat;
color:#060;
font-family:Arial, Helvetica, sans-serif;
overflow:visible;
}
#head, #nav, #wholepage, #sectionnav
{
min-width:1024px;
}
/* #~~~~~~~~~~~~~~~~~~~~ END HTML, BODY ~~~~~~~~~~~~~~~~~~~~~# */
/* #~~~~~~~~~~~~~~~~~~~~ START BANNER ~~~~~~~~~~~~~~~~~~~~~~~# */
#bannerlogo
{
width:100%; 
height:96px;
position:absolute;
top:0;
left:0;
text-align:center;
margin:auto;
}
#bannerlogo img
{
border-left:1px solid #060;
border-right:1px solid #060;
}
#banner
{
width:100%;
height:96px;
position:absolute;
top:0;
left:0;
background:url("images/spacer.gif") repeat;
}
#wholepage /* to centre page at higher resolutions  */
{
margin:0;
padding:0;
text-align:center;
}
html>body #wholepage
{
margin:0 auto;
}
#head
{
height:96px;
text-align:center;
background:url("images/ranger_banner.jpg") repeat-x;
margin:0 auto;
}
/* #~~~~~~~~~~~~~~~~~~~~ END BANNER ~~~~~~~~~~~~~~~~~~~~~~~~~# */
/* #~~~~~~~~~~~~~~~~~~~~ START NAV ~~~~~~~~~~~~~~~~~~~~~~~~~~# */
#nav
{
min-width:860px;
height:1.1em;
background:#060; 
border-top:1px solid #000;
border-bottom:1px solid #000;
text-align:center;
padding-top:3px;
}
html>body #nav
{
height:1.4em;
margin:0 auto;
}
#nav p
{
display:inline;
} 
#nav p a
{
width:100%;
border:1px solid;
border-color:#62a162 #003600 #003600 #5d9e5d;
color:#f3f8a6;
text-decoration:none;
background:#060;
text-align:center;
}
html>body #nav p a
{
padding:0.1em 0.4em;
}
#nav p.red a
{
background:#92140e;
border-color:#b57e7b #f8bbb7 #f8bcb8 #b7807c;
color:#fff;
}
#nav p
{
font-size:0.8em;
font-weight:bold;
padding:2px 0;
}
#nav p a:hover, #nav p.active a:hover, #nav p.selected a
{
color:#000;
background:#3f8c3f;
border-color:#3f683f #87b787 #89b889 #3f683f;
}
#nav p.red a:hover, #nav p.active.red a:hover
{
color:#00f;
border-color:#f616a1 #9e5550 #9d5450 #f6a49f;
background:#cf534d;
}
/* #~~~~~~~~~~~~~~~~~~~~ END NAV ~~~~~~~~~~~~~~~~~~~~~~~~~~~~# */
/* ~~~ sectionnav ~~~ */
.sectionnav
{
clear:both;
list-style-type:none;
padding:0;
border-top:1px solid #030;
border-bottom:1px solid #030;
background-color:#c9995b;/*  #977e3b  */
text-align:center;
margin:0;
margin-top:9px;
font-size:24px;
font-weight:bold;
max-height:29px;
}
.sectionnav li
{
display:inline;
padding:0;
margin:0;
}
.sectionnav a
{
display:inline-block;
padding:0;
margin:0;
font-style:italic;
color:#fff;
text-decoration:none;
vertical-align:top;
min-height:29px;
}
.sectionnav a:hover, .sectionnav a.selected
{
background-color:#060;
}
/* ~~~ end sectionnav  ~~~ */
/* #~~~~~~~~~~~~~~~~~~~~ START MAIN ~~~~~~~~~~~~~~~~~~~~~~~~~# */
#main
{
width:98%;
margin:0;
padding:12px 0;
}
#anchor
{
float:left;
width:74%;
margin:6px auto;
margin-right:275px;
height:358px;
}
#anchor a
{
display:block;
width:100%;
height:100%;
color:#dbcbbc;
background:transparent url("images/rangerinterior.jpg") no-repeat center center;
}
/* #~~~~~~~~~~~~~~~~~~~~ END MAIN ~~~~~~~~~~~~~~~~~~~~~~~~~~~# */
/* #~~~~~~~~~~~~~~~~~~~~ START UPDATER ~~~~~~~~~~~~~~~~~~~~~~# */
#updater
{
float:right;
margin:0 2px;
margin-top:-35px;
width:280px;
height:365px;
padding:9px;
color:#000;
background-color:#fff;
overflow:auto;
overflow-x:hidden;
font-size:0.8em;
border:4px double #060;
}
#updater img
{
margin:0 auto;
}
#updater p
{
margin-top:12px;
margin-bottom:12px;
text-align:justify;
}
#updater #despatchheader
{
margin:-9px;
margin-bottom:9px;
padding:6px;
text-align:center;
background-color:#060;
font-size:1.6em;
color:#fff;
}
.rangerhead
{
font-weight:bold;
font-style:italic;
}
.rangergreen
{
font-weight:bold;
font-style:italic;
color:#060;
}
.rangerwhite
{
font-weight:bold;
font-style:italic;
color:#fff;
}
/* #~~~~~~~~~~~~~~~~~~~~ END UPDATER ~~~~~~~~~~~~~~~~~~~~~~~~# */
/* #~~~~~~~~~~~ START VISITTEXT / MESSAGEBOARD ~~~~~~~~~~~~~~# */
#visittext
{
float:left;
width:62%;
margin:6px auto;
margin-left:35px;
color:#000;
text-align:left;
}
#productshow
{
float:right;
width:290px;
height:390px;
margin:0 auto;
margin-right:2%;
margin-top:-365px;
background-color:#dbcbbc;
}
#showhead
{
float:right;
width:240px;
margin:0 auto;
margin-right:2%;
font-size:1.4em;
color:#fff;
background-color:#060;
line-height:101%;
}
#frameshow
{
width:240px;
height:320px;
}
#facebooklink
{
clear:right;
float:right;
margin-right:18px;
}
#newsupdater
{
float:right;
margin:0 auto;
}
.invisibleclear
{
clear:both;
display:block;
width:100%;
}
#messageboard
{
clear:both;
display:block;
margin:9px 0;
margin-bottom:24px;
overflow:auto;
border-top:6px solid #060;
border-bottom:6px solid #060;
background-color:#060;
}
#backfill
{
margin:0;
padding:4px 0;
background-color:#f3fca9;
overflow:hidden;
}
.poster
{
margin:0;
margin-left:-4px;
font-size:1em;
font-weight:bold;
color:#060;
padding:14px 9px;
padding-top:17px;
vertical-align:36%;
}
.inline
{
display:inline;
}
h1.italicheader, .italicheader
{
font-style:italic;
font-size:24px;
}
h1, h3.posterhead
{
letter-spacing:2px;
font-size:1.4em;
font-family:Arial Black;
color:#92140e;
font-style:italic;
}
h3.posterhead
{
margin:0;
margin-top:-9px;
padding:0 9px;
font-size:3em;
line-height:80%;
}
/* #~~~~~~~~~~~~ END VISITTEXT / MESSAGEBOARD ~~~~~~~~~~~~~~~# */
/* #~~~~~~~~~~~~~~~~~~~~ START FOOTER ~~~~~~~~~~~~~~~~~~~~~~~# */
#footer
{
clear:both;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
#footer p
{
text-align:center;
color:#000;
font-size:1.2em;
}
#phone
{
font-size:24px !important;
}
/* #~~~~~~~~~~~~~~~~~~~~ END FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~# */
/* #~~~~~~~~~~~~~~~~~~~~ START THREE COLUMN ~~~~~~~~~~~~~~~~~# */
#threecolumn
{
text-align:center;
}
html>body #threecolumn
{
width:990px;
margin:0 auto;
}
#leftcolumn, #rightcolumn
{
width:320px;
margin:0 12px;
float:left;
}
html>body #leftcolumn, html>body #rightcolumn
{
margin:0 24px;
}
#divider
{
margin:0 24px;
float:left;
margin-bottom:24px;
}
#leftcolumn, #rightcolumn, #centrecolumn
{
font-size:1em;
font-weight:bold;
}
#centrecolumn 
{
width:650px;
float:left;
margin:24px 12px;
text-align:justify;
}
.large
{
font-size:1.3em;
}
#leftpic, #rightpic
{
float:left;
margin:24px 12px;
}
/* #~~~~~~~~~~~~~~~~~~~~ END THREE COLUMN ~~~~~~~~~~~~~~~~~~~# */
/* #~~~~~~~~~~~~~~~~~~~~ START MISCELLANEOUS ~~~~~~~~~~~~~~~~# */
h2
{
margin:0;
padding:0;
}
img
{
border:0;
}
.italic
{
font-style:italic;
}
.floatleft
{
float:left;
}
.floatright
{
float:right;
}
.imageright
{
float:right;
padding-left:12px;
padding-bottom:12px;
}
.imageleft
{
float:left;
padding-right:12px;
padding-bottom:12px;
}
/* #~~~~~~~~~~~~~~~~~~~~ END MISCELLANEOUS ~~~~~~~~~~~~~~~~~~# */
#flashholder
{
position:absolute;
top:150px;
right:10px;
width:252px;
}
#blockhead
{
font-size:40pt;
background-color:#063;
color:#fff;
margin:-6px;
padding:12px;
}
#catalogue-survey h3
{
text-align:center;
}
#catalogue-survey
{
text-align:justify;
margin-left:2%;
margin-right:2%;
padding:6px;
border:6px double #063;
}
#catalogue-survey p
{
font-size:0.8em;
}
.bold
{
font-weight:bold;
}
.clearall
{
clear:both;
}
/* #~~~~~~~~~~~~~~~~~~~~ LINKLIBRARY ~~~~~~~~~~~~~~~~~~# */
.linkleft
{
float:left;
width:42%;
margin:12px;
margin-right:6px;
border:3px double #060;
padding:12px;
}
.linkright
{
float:right;
width:42%;
margin:12px;
margin-left:6px;
border:3px double #060;
padding:12px;
}
.linklibrary
{
text-align:left;
line-height:130%;
}
.linklibrary dt
{
display:block;
font-weight:bold;
background-color:#060;
color:#fff;
border-top:1px solid #000;
}
.linklibrary dt a
{
color:#fff;
text-decoration:none;
}
.linklibrary dt a.clam, .linklibrary dt a.clam:hover
{
text-decoration:none;
padding:0 3px;
font-weight:bold;
border:1px solid #000;
margin:4px 2px;
margin-right:3px;
}
.linklibrary dt a.clam:hover
{
border-color:#fff;
}
.linklibrary dt a:hover
{
text-decoration:underline;
background-color:#3f8c3f;
color:#fff;
}
.linklibrary dd
{
color:#000;
margin-bottom:16px;
margin-left:12px;
}
/* #~~~~~~~~~~~~~~~~~~~~ END LINKLIBRARY ~~~~~~~~~~~~~~~~~~# */
.linklist
{
float:right;
width:250px;
margin:3px 9px;
margin-left:18px;
border:3px double #060;
background-color:#fcfdf2;/* #f3f7ca #ebf0a4  */
}
.linklist h2
{
background-color:#060;
color:#fff;
margin:0;
padding:9px;
}
.linkleft h2 a, .linkright h2 a
{
text-decoration:none;
color:#060;
}
.linklist dl
{
margin:9px;
}
.linklist p
{
margin:2px;
}
.article
{
padding:6px 12px;
text-align:left;
line-height:135%;
}
.article750
{
max-width:750px;
padding:6px 12px;
text-align:left;
line-height:135%;
margin:0 auto;
}
.articlewidth
{
padding:6px 12px;
text-align:left;
line-height:135%;
max-width:683px;
margin:0 auto;
margin-right:284px;
background-color:#fffae3;
border:1px solid #000;
}
.articlewidth h2
{
margin:0;
padding:12px;
padding-left:0;
background-color:#060;
color:#fff;
}
h2 .clam
{
text-decoration:none;
color:#fff;
background-color:#060;
border:6px double #fff;
padding:2px 5px;
margin:3px;
margin-right:9px;
}
.articlewidth h2 .clam:hover
{
border-color:#fff;
background-color:#3f8c3f;
}
.articlewidth li
{
margin-bottom:8px;
}
.rangertopic
{
border:6px double #060;
padding:12px;
margin-bottom:12px;
}
.rangertopic img
{
width:80%;
}
.rangertopic .caption
{
color:#000;
text-align:center;
}
.article ul, .article li
{
margin:0;
padding:0;
padding-left:9px;
}
.article li
{
padding-bottom:9px;
}
.article h2
{
text-align:center;
}
.leftpic, .leftpic170
{
clear:left;
float:left;
margin:12px 0;
margin-right:36px;
}
.leftpic170
{
margin-bottom:170px;
}
.rightpic
{
clear:right;
float:right;
margin:12px 0;
margin-left:18px;
}
.nobullets
{
list-style-type:none;
}
.w250
{
max-width:250px;
}
.picborder
{
border:3px solid #060;
}
.centre
{
text-align:center;
}
.leftcol
{
float:left;
width:45%;
}
.rightcol
{
float:right;
width:45%;
}
hr.invisible
{
clear:both;
margin:0;
padding:0;
visibility:hidden;
}
.threecolumn /* three column table */
{
width:95%;
margin-left:2%;
margin-right:2%;
margin-top:2%;
}
.threecolumn th
{
font-size:1.4em;
line-height:140%;
}
.threecolumn td.subhead
{
font-size:1.2em;
font-weight:bold;
line-height:140%;
font-style:italic;
border:0;
}
.threecolumn td
{
padding:3px 2px;
border-bottom:1px solid #c9995b;
}
tr.toprow td
{
border-top:1px solid #c9995b;
}
.threecolumn td.spacer
{
margin:0;
padding:0;
line-height:20%;
height:3px !important;
border:0;
}
.threecolumn tr.rowfill
{
background-color:#fcfdf2;
}
.threecolumn th, .threecolumn td
{
width:33%;
}
li.rowfill
{
background-color:#fcfdf2;
border-top:1px solid #c9995b;
border-bottom:1px solid #c9995b;
}
.printicon a
{
width:30px;
height:30px;
display:block;
padding:1px;
margin-top:-8px;
margin-right:2px;
float:right;
border:3px double #fff;
background-image:url("images/printer.jpg");
}
.printicon a:hover
{
background-image:url("images/printer_o.jpg");
}