/* Title: Visual Approval Date: November 2008 Author: Lynsey Buckley-Ratcliff */ * { margin: 0; padding: 0; list-style-type: none; outline: none} body { margin: 0; padding: 0; font-size: 100%; font-family: Arial, Helvetica, sans-serif; background-color: #C8C8C8; color: #000; text-align: center;} img { border: none; margin: 0; padding: 0;} a img { border: none; margin: 0; padding: 0;} div, p, form, h1, h2, h3, h4, h5, hr, ul, dl, dd, dt, ul, ol, li, object, param, table, tr, td, th { margin: 0; padding: 0;} h1,h2,h3,h4,h5 { margin: 0; padding: 0;} input,textarea,button,select { font-family: Arial, Helvetica, sans-serif;} table { display: block; border-collapse: collapse; border: none;} th { text-align: left;} /* Structure Styles -------------------------------------------------------------------------------- */ #container { width: 880px; text-align: left; margin-left: auto; margin-right: auto;} #container-popup { width: 583px; text-align: left; margin-left: auto; margin-right: auto;} #container-play-popup { width: 538px; height: 679px; margin-top: 14px; background-color: #C8C8C8; margin-left: auto; margin-right: auto;} #wrapper { width: 880px; background-color: #ffffff;} #wrapper-popup { width: 558px; padding-right: 25px; padding-bottom: 30px; background-color: #ffffff;} #leftcol { float: left; position: relative; display: inline; width: 583px; margin: 0; padding: 0; background-color: #ffffff;} #rightcol { float: right; position: relative; width: 279px; margin: 0; padding-left: 18px; padding-top: 20px; background-color: #ffffff;} #header { width: 880px; height: 71px;} #header p { float: left;} .home-mainimg { background: url(../images/home-panel.jpg) 0 0 no-repeat; height: 182px; width: 880px;} .features-mainimg { background: url(../images/features-panel.jpg) 0 0 no-repeat; height: 182px; width: 880px;} .products-mainimg { background: url(../images/products-panel.jpg) 0 0 no-repeat; height: 182px; width: 880px;} .contact-mainimg { background: url(../images/contact-panel.jpg) 0 0 no-repeat; height: 182px; width: 880px;} #footer { clear: both; margin-top: 7px;} #footer a:link, #footer a:visited { color: #818285; text-decoration: none;} #footer a:hover { text-decoration: none; color: #666666;} #footer p, #footer ul { font-size: 60%; color: #818285;} #footer li { display: inline; border-right: 1px solid #818285; padding-right: 4px; margin-right: 3px;} #footer .last { border-right: 0;} #leftfooter { float: left; position: relative; display: inline; width: 597px; text-align: right; padding-bottom: 10px;} #rightfooter { float: right; position: relative; width: 265px; text-align: right; padding-bottom: 10px;} /* Navigation -------------------------------------------------------------------------------- */ /* Main Navigation ---------------------------------------------------------------- */ #fullnav { width: 880px; height: 28px; background-color: #000000;} #nav li { float: left; display: inline;} #nav .last { margin-right: 0;} #subnav { float: right; display: inline; position: relative; height: 28px;} #subnav li { float: left; display: inline; margin: 0; padding-top: 3px;#} @media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari 3.0 and Chrome rules here */ #subnav li { float: left; display: inline; margin: 0; padding-top: 7px;} } #subnav li a:link, #subnav li a:visited { font-size: 75%; color: #cccccc; text-decoration: none; padding-right: 15px;} #subnav li a:hover { color: #666666;} li.home { background: transparent url(../images/nav/home.gif) no-repeat 0 0; width: 87px; height: 28px;} li.home a { width: 87px; height: 0; display: block; padding-top: 28px; color: #cccccc; overflow: hidden; background: transparent url(../images/nav/home.gif) no-repeat -87px 0;} li.home a:hover { background-position: 0 -28px; z-index: 50;} li.home-over { background: transparent url(../images/nav/home-over.gif) no-repeat 0 0; width: 87px; height: 0; display: block; padding-top: 28px; color: #cccccc; overflow: hidden;} * html li.home a:link, * html li.home a:visited { height: 28px; he\ight:0;} * html li.home a:hover { height: 28px; he\ight:0;} li.products { background: transparent url(../images/nav/products.gif) no-repeat 0 0; width: 88px; height: 28px;} li.products a { width: 88px; height: 0; display: block; padding-top: 28px; color: #cccccc; overflow: hidden; background: transparent url(../images/nav/products.gif) no-repeat -88px 0;} li.products a:hover { background-position: 0 -28px; z-index: 50;} li.products-over { background: transparent url(../images/nav/products-over.gif) no-repeat 0 0; width: 88px; height: 0; display: block; padding-top: 28px; color: #cccccc; overflow: hidden;} * html li.products a:link, * html li.products a:visited { height: 28px; he\ight:0;} * html li.products a:hover { height: 28px; he\ight:0;} li.features { background: transparent url(../images/nav/features.gif) no-repeat 0 0; width: 91px; height: 28px;} li.features a { width: 91px; height: 0; display: block; padding-top: 28px; color: #cccccc; overflow: hidden; background: transparent url(../images/nav/features.gif) no-repeat -91px 0;} li.features a:hover { background-position: 0 -28px; z-index: 50;} li.features-over { background: transparent url(../images/nav/features-over.gif) no-repeat 0 0; width: 91px; height: 0; display: block; padding-top: 28px; color: #cccccc; overflow: hidden;} * html li.features a:link, * html li.features a:visited { height: 28px; he\ight:0;} * html li.features a:hover { height: 28px; he\ight:0;} li.contact { background: transparent url(../images/nav/contact.gif) no-repeat 0 0; width: 87px; height: 28px;} li.contact a { width: 87px; height: 0; display: block; padding-top: 28px; color: #cccccc; overflow: hidden; background: transparent url(../images/nav/contact.gif) no-repeat -87px 0;} li.contact a:hover { background-position: 0 -28px; z-index: 50;} li.contact-over { background: transparent url(../images/nav/contact-over.gif) no-repeat 0 0; width: 87px; height: 0; display: block; padding-top: 28px; color: #cccccc; overflow: hidden;} * html li.contact a:link, * html li.contact a:visited { height: 28px; he\ight:0;} * html li.contact a:hover { height: 28px; he\ight:0;} li.login { background: transparent url(../images/nav/login.gif) no-repeat 0 0; width: 87px; height: 28px;} li.login a { width: 87px; height: 0; display: block; padding-top: 28px; color: #cccccc; overflow: hidden; background: transparent url(../images/nav/login.gif) no-repeat -87px 0;} li.login a:hover { background-position: 0 -28px; z-index: 50;} li.login-over { background: transparent url(../images/nav/login-over.gif) no-repeat 0 0; width: 87px; height: 0; display: block; padding-top: 28px; color: #cccccc; overflow: hidden;} * html li.login a:link, * html li.login a:visited { height: 28px; he\ight:0;} * html li.login a:hover { height: 28px; he\ight:0;} * html #nav a:hover { height: 28px; he\ight: 0;} #nav a { display: block; height: 0; overflow: hidden;} * html #nav a:link, * html #nav a:visited { height: 28px; he\ight: 0;} /* Content Styles -------------------------------------------------------------------------------- */ /* Main Content ---------------------------------------------------------------- */ #main-content { font-size: 100%; clear: both; padding-left: 25px;} #main-content h1 { font-size: 70%; font-weight: bold; padding-bottom: 10px; color: #000;} #main-content p, .telno-footer { font-size: 70%; padding-bottom: 10px; line-height: 15px; color: #2D292A;} #main-content a.moreinfo, #main-content a.moreinfo.visited { color: #000000; text-decoration: none;} #main-content a.moreinfo:hover { text-decoration: none;} #main-content ul { color: #000000; margin: 10px 0;} #main-content li { list-style: disc; margin-bottom: 3px; padding-left: 8px; margin-left: 15px; color: #000000;} #main-content ul { color: #4D4D4D; margin-bottom: 20px;} html>/**/body #main-content li { font-size: 75%; list-style: disc; margin-left: 17px; padding-bottom: 3px; color: #808284;} #main-content li { font-size: 75%; list-style: disc; margin-left: 17px; padding-bottom: 0; color: #808284;} .intro-txt { margin-top: 10px; margin-left: 20px;} .intro-txt h1 { color: #4FB6C7; font-size: 110%;} .intro-txt p { color: #000000; font-weight: bold; font-size: 105%;} .thankyou { padding-top: 22px; line-height: 18px;} .space { padding-right: 55px;} .last { padding-right: 0;} #what-our-cilents-think { background: url(../images/what_clients_think_bg.gif) no-repeat 0 0; width: 229px; height: 187px; padding: 15px 20px 15px 15px; clear: both;} #what-our-cilents-think p { color: #999999; font-size: 70%; margin-bottom: 10px; line-height: 12px;} #what-our-cilents-think p.client { color: #000000; font-weight: bold;} #getting_you_started { background: url(../images/getting_you_started.jpg) 0 0 no-repeat; width: 264px; height: 212px; margin-bottom: 15px;} .play-position { padding: 151px 0 0 10px;} .play1 a { background: url(../images/play-bttn.gif) 0 0 no-repeat; width: 66px; height: 16px; padding-left: 66px; vertical-align: top;} /* Firefox */ @-moz-document url-prefix() { .play1 a { background: url(../images/play-bttn.gif) 0 -1px no-repeat; width: 66px; height: 16px; padding-left: 66px; vertical-align: top;} } .play1 a:hover { background: url(../images/play-bttn-over.gif) 0 0 no-repeat;} /* Firefox */ @-moz-document url-prefix() { .play1 a:hover { background: url(../images/play-bttn-over.gif) 0 -1px no-repeat;} } .play2 a { background: url(../images/play-bttn.gif) 0 0 no-repeat; width: 66px; height: 16px; padding-left: 66px; vertical-align: top;} /* Firefox */ @-moz-document url-prefix() { .play2 a { background: url(../images/play-bttn.gif) 0 -1px no-repeat; width: 66px; height: 16px; padding-left: 66px; vertical-align: top;} } .play2 a:hover { background: url(../images/play-bttn-over.gif) 0 0 no-repeat;} /* Firefox */ @-moz-document url-prefix() { .play2 a:hover { background: url(../images/play-bttn-over.gif) 0 -1px no-repeat;} } .play3 a { background: url(../images/play-bttn.gif) 0 0 no-repeat; width: 66px; height: 16px; padding-left: 66px; vertical-align: top;} /* Firefox */ @-moz-document url-prefix() { .play3 a { background: url(../images/play-bttn.gif) 0 -1px no-repeat; width: 66px; height: 16px; padding-left: 66px; vertical-align: top;} } .play3 a:hover { background: url(../images/play-bttn-over.gif) 0 0 no-repeat;} /* Firefox */ @-moz-document url-prefix() { .play3 a:hover { background: url(../images/play-bttn-over.gif) 0 -1px no-repeat;} } .play1, .play2 { margin-bottom: 1px;} #popup-menu { background-color: #989898; width: 538px; height: 68px;} .popup-play-position { padding: 10px 0 0 10px;} .play1-lrg a { float: left; background: url(../images/play-bttn-lrg.gif) 0 0 no-repeat; width: 90px; height: 21px; padding-left: 90px; vertical-align: top;} /* Firefox */ @-moz-document url-prefix() { .play1-lrg a { background: url(../images/play-bttn-lrg.gif) 0 0 no-repeat; width: 90px; height: 21px; padding-left: 90px; vertical-align: top;} } .play1-lrg a:hover { background: url(../images/play-bttn-over-lrg.gif) 0 0 no-repeat;} /* Firefox */ @-moz-document url-prefix() { .play1-lrg a:hover { background: url(../images/play-bttn-over-lrg.gif) 0 0 no-repeat;} } .play2-lrg { padding-left: 256px;} .play2-lrg a { float: left; background: url(../images/play-bttn-lrg.gif) 0 0 no-repeat; width: 90px; height: 21px; padding-left: 90px; vertical-align: top;} /* Firefox */ @-moz-document url-prefix() { .play2-lrg a { background: url(../images/play-bttn-lrg.gif) 0 0 no-repeat; width: 90px; height: 21px; padding-left: 90px; vertical-align: top;} } .play2-lrg a:hover { background: url(../images/play-bttn-over-lrg.gif) 0 0 no-repeat;} /* Firefox */ @-moz-document url-prefix() { .play2-lrg a:hover { background: url(../images/play-bttn-over-lrg.gif) 0 0 no-repeat;} } * html .play3-lrg { padding-top: 0; margin-top: 0;} .play3-lrg { clear: left; padding-top: 5px;} .play3-lrg a { float: left; background: url(../images/play-bttn-lrg.gif) 0 0 no-repeat; width: 90px; height: 21px; padding-left: 90px; vertical-align: top;} /* Firefox */ @-moz-document url-prefix() { .play3-lrg a { background: url(../images/play-bttn-lrg.gif) 0 0 no-repeat; width: 90px; height: 21px; padding-left: 90px; vertical-align: top;} } .play3-lrg a:hover { background: url(../images/play-bttn-over-lrg.gif) 0 0 no-repeat;} /* Firefox */ @-moz-document url-prefix() { .play3-lrg a:hover { background: url(../images/play-bttn-over-lrg.gif) 0 0 no-repeat;} } .play1-lr, .play2-lr { margin-bottom: 1px;} #popup-contactfrm { clear: both; float: left;} .flash-player { margin-bottom: 20px;} .flash-player p { color: #6D6F71; font-size: 50%;/* line-height: 12px;*/} .flash-player img { float: left;} .flash-player a, .flash-player a:hover, .flash-player a:visited { color: #6D6F71; text-decoration: none;} p.findoutmore { padding: 142px 0 0 764px;} p.findoutmore a { background: url(../images/findoutmore-bullet1.gif) 0 0 no-repeat; padding-left: 19px; padding-bottom: 2px; padding-top: 1px; font-size: 75%; font-weight: bold; color: #2AB6B5; text-decoration: none;} p.findoutmore a:hover { background: url(../images/findoutmore-bullet1-over.gif) 0 0 no-repeat;} .main-img { background: url(../images/mainproduct-img.jpg) 0 0 no-repeat; width: 583px; height: 281px; padding: 12px 0 10px 0; margin-top: 10px;} .findoutmore-designer { padding: 12px 0 7px 110px; float: left; display: inline;} .findoutmore-designer a { background: url(../images/findoutmore-bullet2.gif) 0 3px no-repeat; padding-left: 19px; padding-bottom: 4px; padding-top: 4px; font-size: 70%; font-weight: bold; color: #000000; text-decoration: none;} .findoutmore-designer a:hover { background: url(../images/findoutmore-bullet2-over.gif) 0 3px no-repeat;} .findoutmore-studio { padding: 12px 0 7px 29px; float: left; display: inline;} .findoutmore-studio a { background: url(../images/findoutmore-bullet3.gif) 0 3px no-repeat; padding-left: 19px; padding-bottom: 4px; padding-top: 4px; font-size: 70%; font-weight: bold; color: #000000; text-decoration: none;} .findoutmore-studio a:hover { background: url(../images/findoutmore-bullet3-over.gif) 0 3px no-repeat;} .findoutmore-pro { padding: 28px 0 7px 44px; float: left; display: inline;} .findoutmore-pro a { background: url(../images/findoutmore-bullet4.gif) 0 3px no-repeat; padding-left: 19px; padding-bottom: 4px; padding-top: 4px; font-size: 70%; font-weight: bold; color: #000000; text-decoration: none;} .findoutmore-pro a:hover { background: url(../images/findoutmore-bullet4-over.gif) 0 3px no-repeat;} .freetrial { clear: left; margin-left: 385px; background: transparent url(../images/freetrial-button.jpg) no-repeat 0 0; width: 179px; height: 32px;} .freetrial a { width: 179px; height: 0; display: block; padding-top: 32px; color: #cccccc; overflow: hidden; background: transparent url(../images/freetrial-button.jpg) no-repeat -179px 0;} .freetrial a:hover { background-position: 0 -32px; z-index: 50;} .telno-highlight { font-size: 140%; font-weight: bold; color: #26B9C0;} ul.product-bttns li { float: left; display: inline; margin: 0; padding: 0;} .free1 { width: 140px; height: 58px;} .free2 { width: 140px; height: 58px;} .call { background: transparent url(../images/prod-4.jpg) no-repeat 0 0; width: 140px; height: 58px;} .call a { width: 140px; height: 0; display: block; padding-top: 58px; color: #cccccc; overflow: hidden; background: transparent url(../images/prod-4.jpg) no-repeat -140px 0;} .call a:hover { background-position: 0 -58px; z-index: 50;} .phonenumber { width: 264px; margin-top: 15px; margin-bottom: 20px;} /* Forms -------------------------------------------------------------------------------- */ /* POPUP Contact Forms -------------------------------------------------------------------------------- */ #form-col1 { width: 285px; float: left; position: relative; margin-bottom: 10px;} #form-col2 { width: 283px; float: right; display: inline; position: relative; text-align: left; margin-top: 20px; margin-bottom: 10px;} #popup-contactfrm { width: 538px; float: left; margin: 0; padding: 0;} #popup-contactfrm h2 { color: #CC0000; font-size: 80%; font-weight: bold;} #form-col1-popup { width: 229px; float: left; position: relative; padding-right: 10px; text-align: right;} #form-col2-popup { width: 299px; float: right; display: inline; position: relative; text-align: left;} .popup-heading { text-align: left; margin-bottom: 10px;} #fmcontact-popup { clear: both; margin: 0; padding: 0; font-size: 80%;} #fmcontact-popup #name { width: 154px; padding-left: 75px; text-align: left; border: 0; padding: 2px; background-color: #ffffff;} #fmcontact-popup #emailaddress { width: 171px; margin-left: 10px; border: 0; padding: 2px; background-color: #ffffff;} #fmcontact-popup #comments { width: 390px; height: 70px; vertical-align: top; border: 0; padding: 2px; margin-top: 7px; background-color: #ffffff;} #fmcontact-popup #submit { vertical-align: bottom;} #fmcontact-popup #name label { background-color:#006600} #comments-wrapper-popup { text-align: left; margin: 0; padding: 0;} /* Main Contact Forms -------------------------------------------------------------------------------- */ #wrapper-form { width: 568px; padding-left: 15px;} #wrapper-form h2 { color: #CC0000; font-size: 80%; font-weight: bold;} #fmcontact { margin-bottom: 10px; margin-top: 10px; padding: 0; font-size: 70%;} #fmcontact p { margin: 0; padding-bottom: 4px;} #fmcontact label { padding: 0; margin: 0; float: left; text-align: right; padding-right: 10px; width: 90px} #fmcontact input, #fmcontact textarea { vertical-align: middle; padding: 2px;} #fmcontact #forename, #fmcontact #company, #fmcontact #surname, #fmcontact #enquirytype, #fmcontact #telno, #fmcontact #emailaddress { font-size: 100%; width: 160px; margin: 0; padding: 0; border: 1px solid #000000; background-color: #ffffff;} #comments-wrapper { clear: both;} #comments { width: 275px; height: 60px; padding: 0; border: 1px solid #000000; font-size: 100%;} #radiobutton { margin-right: 0; margin-left: 4px;} input#submit { border: 0; vertical-align: middle;} .required { float: right; margin-top: -15px; padding-right: 43px; color: #999999;} /* Additional Styles -------------------------------------------------------------------------------- */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix { display: inline-table;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix { display: block;} /* End hide from IE-mac */