body { background:#fff; font-family:Tahoma, helvetica, sans-serif; font-size:75%; color:#4d4d4d; margin:0 auto; width:1000px }

p {  }
a { color:#00337f; text-decoration:none }
a:hover { color:#f08600 }
img { border:0 }
h1 { font-size:140% }
h2 { font-size:110% }
h3 { font-size:110%; font-weight:normal }
h4 { font-size:100%; margin-bottom:0 }
hr { height:1px; border:0; color:#7f99bf; background:#7f99bf }

#homepage_header { width:100%; height:143px; background:#fff url(graphics/header/homepage_bg.jpg) 100% 0 no-repeat }
#header { width:100%; height:143px; background:#fff url(graphics/header/bg.jpg) 100% 0 no-repeat }
#header .contact { float:right; width:550px; padding:25px 35px 0 0; text-align:right; color:#00337f }
#header .phone { float:right; margin:0 0 5px 35px; font-size:170%; font-weight:bold }
#header .office { font-size:85%; font-weight:normal }
#header .email { padding-top:8px; font-size:180% }



/* Main Menu */
#mainmenu { width:100%; background:url(graphics/mainmenu/bg.gif) 0 0 repeat-x }
#mainmenu #content { padding:4px 0 0 25px }
#mainmenu .menu_end { float:left; width:15px; height:30px; background:url(graphics/mainmenu/end.gif) 0 0 no-repeat }

/* CSS Dropdown Menu */
#csstopmenu, #csstopmenu ul { padding:0; margin:0; list-style:none }
#csstopmenu ul.submenus { position:absolute; top:19px; left:0; width:180px; z-index:1; padding:0 }
#csstopmenu li { float:left; position:relative }
#csstopmenu a { text-decoration:none }

.mainitems { border:0; margin-right:25px }
.mainitems a { margin:auto 0; color:#fff }
.mainitems a:hover { color:#ffdd00 }

.submenus { display:none; width:10em; position:absolute; top:22px; left:0; background:#e5e5e5; border-width:0 1px 1px; border-style:solid; border-color:#0b2e82 }
.submenus li { width:100% }
.submenus li a { display:block; width:100%; color:#0b2e82 }
html>body .submenus li a { /* non IE browsers */ width:auto }
.submenus li a:hover { background:#0b2e82; color:#fff }

#csstopmenu li>ul {/* non IE browsers */ top:auto; left:auto }
#csstopmenu li:hover ul, li.over ul { display:block }
html>body #clearmenu { /* non IE browsers */ height:3px }

.suboption { text-indent:10px }




/* Main Content Layout */
#left_column { float:left; width:230px }
#main_general { margin:20px 0 50px 25px }
#main_products { margin:20px 0 50px 25px; padding:0 20px 0 250px }




/* Homepage */
#homepage { width:555px }
#homepage h1 { font-size:120%; line-height:150%; margin-bottom:20px }
#homepage h2 { font-size:120%; line-height:150%; font-weight:normal; margin-bottom:20px }

/* Homepage category banners */
.homepage_banner { width:366px; height:89px; margin-bottom:20px; border-style:solid; border-width:0 1px 0 0; border-color:#000 }
.banner_label { float:right; height:26px; margin-top:63px }
.banner_label_end { float:right; width:15px; height:26px; margin-top:63px }
.banner_label p { margin:5px 20px 0 10px; font-size:100% }
.banner_label a { color:#fff }


/* News boxout */
#newsboxout {  }
html>body #newsboxout .title .left { float:left; width:15px; height:31px; background:url(graphics/boxouts/title-grey-left.gif) 0 0 no-repeat }
html>body #newsboxout .title .right { float:right; width:15px; height:31px; background:url(graphics/boxouts/title-grey-right.gif) 0 0 no-repeat }
#newsboxout .title .content { height:31px; margin:0; padding:0; color:#00337f; background:url(graphics/boxouts/title-grey-bg.gif) 0 0 repeat-x }
html>body #newsboxout .title .content { height:31px; margin:0 12px 0; padding:0; color:#00337f; background:url(graphics/boxouts/title-grey-bg.gif) 0 0 repeat-x }
#newsboxout .title a { float:right; margin-right:22px; padding:6px 10px 0 0; font-weight:bold; background:url(graphics/arrow-red.gif) 100% 80% no-repeat }
html>body #newsboxout .title a { float:right; margin-right:7px; padding:6px 10px 0 0; font-weight:bold; background:url(graphics/arrow-red.gif) 100% 80% no-repeat }
#newsboxout .title h3 { margin:0; padding:6px 0 0 20px; font-size:110% }
html>body #newsboxout .title h3 { margin:0; padding:6px 0 0 5px; font-size:110% }
#newsboxout .body { margin:0 12px 0; padding:5px 7px 0 }
#newsboxout .body p.item { padding:0; margin:0 100px 0 0; font-size:100% }
#newsboxout .body p.item a { color:#4d4d4d }
#newsboxout .body p.item a:hover { color:#e58600 }
#newsboxout .body p.date { padding:2px 0 2px; margin:0; color:#0b2e82; font-style:italic }
#newsboxout .body a.readmore { float:right; padding-right:10px; font-weight:bold; color:#0b2e82; background:url(graphics/arrow-red.gif) 100% 80% no-repeat }
#newsboxout .body a.readmore:hover { color:#f08600 }




/* Section Index Titles */
#section { margin:5px 0 3px }
#section h1 { margin:0; padding:4px 0 0 25px; font-size:100%; color:#fff }
#section .title { width:100%; height:30px }
#section .title .end { float:left; width:15px; height:30px }

/* Section Index Menus */
#sectionindex_left { margin-left:15px }
#sectionindex_left .menu { padding:5px 0; border:1px solid #4d4d4d }
#sectionindex_left .menu ul { padding:0; margin:0; list-style:none }
#sectionindex_left .menu li a { display:block; margin:0; padding:3px 10px 4px; color:#4d4d4d; text-decoration:none }

/* Section Index Content */
#sectionindex { float:left; width:705px }
#sectionindex h1 { margin-top:0; font-size:120% }
#sectionindex h2 { margin:20px 0 5px; font-size:120% }
#sectionindex .product { float:left; width:320px; margin:10px 0 5px; padding:0 25px 10px 0 }
#sectionindex .product .image { float:left; margin-right:10px }
#sectionindex .product .info { margin-left:185px }
#sectionindex .subsection { margin-bottom:40px }




/* Product Pages */
#productpage {  }
#productpage h1 { margin-top:0; font-size:120% }

#productpage .imagecolumn { float:right; width:285px; padding:10px 0 0 20px; text-align:right }
#productpage .button { margin:10px 0 20px }

#related_products { margin-top:40px }
#related_products .title { width:100%; height:30px }
#related_products .title .end { float:left; width:15px; height:30px }
#related_products .title h1 { margin:0; padding:4px 0 0 25px; font-size:100%; color:#fff }
#related_products .content { margin-left:15px; padding:9px; border-width:0 1px 1px; border-color:#d8d8d8; border-style:solid }
#related_products img { margin:5px 0 }
#related_products .button { margin:10px 0 }

#related_products .hardware .title { background:url(graphics/sections/bg-hardware.gif) 0 0 repeat-x }
#related_products .hardware .title .end { background:url(graphics/sections/end-hardware.gif) 0 0 no-repeat }
#related_products .consultancy .title { background:url(graphics/sections/bg-consultancy.gif) 0 0 repeat-x }
#related_products .consultancy .title .end { background:url(graphics/sections/end-consultancy.gif) 0 0 no-repeat }
#related_products .upgrades .title { background:url(graphics/sections/bg-upgrades.gif) 0 0 repeat-x }
#related_products .upgrades .title .end { background:url(graphics/sections/end-upgrades.gif) 0 0 no-repeat }
#related_products .supplies .title { background:url(graphics/sections/bg-supplies.gif) 0 0 repeat-x }
#related_products .supplies .title .end { background:url(graphics/sections/end-suppplies.gif) 0 0 no-repeat }
#related_products .servicing .title { background:url(graphics/sections/bg-servicing.gif) 0 0 repeat-x }
#related_products .servicing .title .end { background:url(graphics/sections/end-servicing.gif) 0 0 no-repeat }




/* Boxouts */
.boxout .header { height:10px }
.boxout ul { margin-left:25px; padding-left:0 }
html>body .boxout ul { margin-left:0; padding-left:15px }
.boxout li { margin-bottom:10px }
.boxout .body { margin-bottom:10px; padding:0 15px }

.boxout .blue { width:100%; background:#edeff8 }
html>body .boxout .blue .header .left { width:10px; height:10px; background:url(graphics/boxouts/corner-blue-tl.gif) 0 0 no-repeat }
html>body .boxout .blue .header .right { float:right; width:10px; height:10px; background:url(graphics/boxouts/corner-blue-tr.gif) 0 0 no-repeat }
html>body .boxout .blue .footer .left { width:10px; height:10px; background:url(graphics/boxouts/corner-blue-bl.gif) 0 0 no-repeat }
html>body .boxout .blue .footer .right { float:right; width:10px; height:10px; background:url(graphics/boxouts/corner-blue-br.gif) 0 0 no-repeat }
.boxout .blue hr { height:1px; border:0; color:#7691bb; background:#7691bb }
.boxout .blue li { list-style:url(graphics/arrow-blue.gif) }

.boxout .red { width:100%; background:#f7e9ed }
html>body .boxout .red .header .left { width:10px; height:10px; background:url(graphics/boxouts/corner-red-tl.gif) 0 0 no-repeat }
html>body .boxout .red .header .right { float:right; width:10px; height:10px; background:url(graphics/boxouts/corner-red-tr.gif) 0 0 no-repeat }
html>body .boxout .red .footer .left { width:10px; height:10px; background:url(graphics/boxouts/corner-red-bl.gif) 0 0 no-repeat }
html>body .boxout .red .footer .right { float:right; width:10px; height:10px; background:url(graphics/boxouts/corner-red-br.gif) 0 0 no-repeat }
.boxout .red hr { height:1px; border:0; color:#d58a9b; background:#d58a9b }

.boxout .orange { width:100%; background:#fcf3e5 }
html>body .boxout .orange .header .left { width:10px; height:10px; background:url(/graphics/boxouts/corner-orange-tl.gif) 0 0 no-repeat }
html>body .boxout .orange .header .right { float:right; width:10px; height:10px; background:url(/graphics/boxouts/corner-orange-tr.gif) 0 0 no-repeat }
html>body .boxout .orange .footer .left { width:10px; height:10px; background:url(/graphics/boxouts/corner-orange-bl.gif) 0 0 no-repeat }
html>body .boxout .orange .footer .right { float:right; width:10px; height:10px; background:url(/graphics/boxouts/corner-orange-br.gif) 0 0 no-repeat }
.boxout .orange hr { height:1px; border:0; color:#feca7f; background:#feca7f }
.boxout .button a { border-color:#e58600; color:#e58600; background:#fff url(/graphics/arrow-orange.gif) 90% 60% no-repeat }
.boxout .button a:hover { color:#fff; background:#e58600 url(/graphics/arrow-white.gif) 90% 60% no-repeat }



/* Footer and Copyright Area */
#footer { padding:30px 0 30px; color:#7f99bf }
#footer_links, #footer_info { margin:0 auto; width:100%; text-align:left }
#footer a { font-weight:normal; text-decoration:none; color:#7f99bf }
#footer a:hover { color:#f08600 }
html>body #footer_divider { height:6px; margin:3px 0 3px; background:#7f99bf }

#copyright { float:left; color:#b2c1d8 }
#copyright a { color:#b2c1d8; text-decoration:underline }



/* ------ General ------ */

/* Colours */ 
.blue { color:#00337f }
.red { color:#b32b4a }
.orange { color:#e58600 }

/* Buttons */
.button a { padding:5px 17px 5px 7px; border:1px solid #4d4d4d; color:#4d4d4d; background:url(graphics/arrow-dgrey.gif) 100% 50% no-repeat }
.button a:hover { color:#fff; background:#4d4d4d url(graphics/arrow-white.gif) 100% 50% no-repeat }

/* Misc */
.alignleft { text-align:left }
.alignright { text-align:right }
.aligncenter { text-align:center }
.floatleft { float:left }
.floatright { float:right }
.clear { clear:both; height:0; line-height:0; font-size:1%; /*for IE*/ }
.clear_right { clear:right; height:0; line-height:0; font-size:1%; /*for IE*/ }
.clear_left { clear:left; height:0; line-height:0; font-size:1%; /*for IE*/ }

#trace, .trace { border:solid 1px #ff0000 }