@import "reset.css";
@import "typography.css";

body                                    { background: #b0e3e7 url(images/bgr.png) repeat-y top center; font-size: 13px; color: #808080; font-family: Helvetica, Arial, sans-serif; font-weight: 100; }

hr                                      { clear: both; visibility: hidden; display: none; margin: 0; height: 0; padding: 0; }

.clear                                  { clear: both; visibility: hidden; margin: 0; height: 0; padding: 0; }

.ifie                                   { padding:40px; }

.hidden                                 { display:none; }

.pageerror                              { margin: 25px 0 1px 0 !important; }

.die                                    { background: #fff; margin-bottom: 1px; }
.die div                                { padding: 20px 40px; background: url(images/error.png) no-repeat 0 5px; width: 960px; margin: 0 auto; }
.die div h5                             { margin: 0 0 10px 0 !important; }

#seo	{ display: none; }

/* Header ---------------------------- */


header                                  { background: #fff; overflow: visible; margin: 0 0 1px 0; }

.brand                                  { width: 290px; height: 105px; background: url(images/logo.png) no-repeat; position: absolute; margin: 5px; z-index: 10; overflow: hidden; text-indent: -999px; }

#global                                 { width: 960px; margin: 0 auto; -webkit-animation-name: reset, fade-in; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 0; }

#global ul                              { width: 670px; margin-left: 290px; }

#global ul li                           { display: inline-block; position: relative; }

#global ul li a                         { padding: 20px 0; margin: 0 20px 0 0; display: inline-block; border-bottom: solid 4px transparent; text-decoration: none;  }

#global ul li a:hover                   { border-bottom: solid 4px #000; color: #000; }

#global ul li a.current                 { padding: 20px 0; margin: 0 20px 0 0; display: inline-block; border-bottom: solid 4px #000 !important; }

#global .signin                         { float: right }

#global .signin a                       { background: url(images/signin.png) no-repeat right; padding-right: 30px; }

@-webkit-keyframes reset {
    0%   { opacity: 0; }
    100% { opacity: 0; }
}
 
@-webkit-keyframes fade-in {
    0%   { opacity: 0; }
    60%  { opacity: 0; }
    100% { opacity: 1; }
}

        /* Global Navigation / Dropdown ------ */


        #global ul li ul                { padding: 1px 0 0 0; position: absolute; top: 53px; left: -290px; width: 230px; display: none; opacity: 0; visibility: hidden; z-index: 10; }

        #global ul li ul li             { display: block }

        #global ul li:hover a           { border-bottom: solid 4px #000; color: #000; }

        #global ul li:hover ul li a     { border: none }

        #global ul li ul li a           { padding: 10px 20px; display: block; margin: 0 20px 1px 0; background: #fff; }

        #global ul li ul li a:hover     { color: #16626A }

        #global ul li:hover ul          { display: block; opacity: 1; visibility: visible; }


/* Hero and Promos ------------------- */


#hero                                   { background: #b0e3e7; position: relative; }

#hero nav                               { position: absolute; bottom: 0; padding: 0 20px; background: #fff; width: 690px; z-index: 10; }

#hero nav ul li                         { float: left; margin: 0 0 -5px 0; }

#hero nav ul li a                       { padding: 20px 0; margin: 0 20px 0 0; display: inline-block; border-bottom: solid 4px transparent; }

#hero ul li a:hover                     { border-bottom: solid 4px #fff; color: #000; }

.details                                { background: #16626a url(images/buttons.png) no-repeat right top; padding: 22px 30px; margin: 0 0 1px 0; width: 640px; color: #fff; display: block; }

.details:hover                          { color: #fff; }

.details strong                         { font-family: "Medium", Helvetica, sans-serif; color: #fff; margin-right: 20px; }

.minihero                               { background: #2cb5c3; padding: 20px 30px; margin: 0 0 1px 0; width: 690px; height: 200px; }

.minihero h3, .minihero h3 a            { color: #fff; font-size: 26px; font-family: "Regular", Helvetica, sans-serif; }

.minihero p, .minihero p a              { color: #fff; font-size: 18px; font-family: "Light", Helvetica, sans-serif; text-transform: uppercase; width: 65%; }

.minipromo                              { position: absolute; top: 80px; right: 0; }

.minipromo h3                           { background: #fff; margin: 0 1px 0 0; padding: 40px 30px 20px 30px; float: left; width: 260px; font-family: "Light", Helvetica, sans-serif; font-size: 18px; color: #16626a; }

.minipromo h3 strong                    { font-family: "Medium", Helvetica, sans-serif }

.minipromo a:hover .button              { background: url(images/buttons.png) no-repeat right -147px #ebfdff }

.minipromo img                          { margin: -90px 0 20px 0 }

#promos                                 { position: relative }

.builderbtn                             { padding: 10px; background: #b3dee3; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; display: block; text-align: center; font-weight: bold; color: #748f93; }

.buyit                                  { padding: 10px; background: #b3dee3 !important; border-radius: 3px !important; -moz-border-radius: 3px; -webkit-border-radius: 3px; display: block; font-weight: bold; color: #748f93; clear: both; }


/* Social ---------------------------- */


.social                                 { margin: 0 0 1px 0 }

.social .blog                           { float: left; margin: 0 1px 1px 0; width: 580px; background: url(images/social.png) 30px -30px no-repeat #fff; }

.social .blog .title                    { float: left; width: 110px; margin: 0 0 0 90px; padding: 30px 0; }

.social .blog .post                     { float: left; width: 380px; padding: 20px; }

.social .connect                        { float: left; width: 379px; }

.social .connect ul li a                { background: url(images/buttons.png) no-repeat right -80px #fff; margin: 0 0 1px 0; padding: 23px; display: block; }

.social .connect ul li a:hover          { background: url(images/buttons.png) no-repeat right -147px #fff }

.social .twitter                        { float: left; margin: 0 30px 1px -30px; clear: both; background: #fff url(images/buttons.png) right -80px repeat-y; padding: 18px; width: 990px; }

.social .twitter:hover                  { background: #fff url(images/buttons.png) right -147px repeat-y }

.social .twitter a                      { display: block }

.social .twitter h4                     { padding: 5px 0 5px 60px; background: url(images/social.png) no-repeat; float: left; margin: 0 20px 0 0; }

.social .twitter .tweet                 { float: left; margin: 5px 0; font-family: "Light", Helvetica, sans-serif; text-transform: none; font-size: 18px; width: 720px; height: 20px; overflow: hidden; }

.social .connect .fb                    { background: url(images/fb.png) no-repeat right top #fff; }

.social .connect .fb:hover              { background: url(images/fb.png) no-repeat right bottom #fff; }

form.subscribe                          { display: block; zoom: 1; overflow: hidden; }

.subscribe input                        { border: solid 1px #b9bcbe; padding: 10px; color: #808080; -webkit-box-shadow: 0px 0px 0px 3px rgba(243, 247, 248, 1);
                                          box-shadow:  0px 0px 0px 3px rgba(243, 247, 248, 1); margin: 20px 30px 10px 0; width: 250px; float: left; outline: none; }

.subscribe .btn                         { border: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; width: 300px; font-family: "Medium", Helvetica, sans-serif; font-size: 18px;
                                          margin: 20px 0; padding: 5px 10px; cursor: pointer;  }
.subscribe .btn:hover                   { color: #7ed2d7; }


/* Mini Social ----------------------- */


.socialMini                             { float: left; width: 57px; }

.socialMini li a                        { margin: 0; margin: 0 0 1px 0; padding: 0; height: 57px; background: #fff url(images/socialmini.png); display: block; }

.socialMini li a span                   { display: none; }

.socialMini .twitter                    { background-position: right top; }

.socialMini .facebook                   { background-position: right -57px ; }

.socialMini .gplus                      { background-position: right -112px; }

.socialMini .more                       { background-position: right bottom; }

    /* ---- Note ---------

    Hover state separated for Firefox users :(
    Needs a tidy eventually. */

.socialMini .twitter:hover              { background-position: left top; }

.socialMini .facebook:hover             { background-position: left -57px; }

.socialMini .gplus:hover                { background-position: left -112px; }

.socialMini .more:hover                 { background-position: left bottom; }

.tooltip                                { display: inline; position: relative }

.tooltip:hover:after                    { background: #fff; bottom:0; color:#808080; content:attr(title); display:block; left: 70px; padding:20px; position:absolute; white-space:nowrap; z-index:5 }

.tooltip:hover:before                   { border:solid; border-color:transparent #fff; border-width:8px 8px 8px 0; bottom:20px; content:""; display:block; left:65px; position:absolute; z-index:5 }


/* Target Groups --------------------- */


.target                                 { clear: both; overflow: auto; width: 903px; float: left; }

.target .col                            { width: 300px; float: left; margin: 0 1px 0 0; }

.target p                               { padding: 0 30px 20px 30px; margin: 0 0 1px 0; background: #fff; min-height: 160px; }

.target a                               { padding: 20px 30px; background: #fff url(images/buttons.png) right -85px repeat-y; display: block; }

.target a:hover                         { background: #fff url(images/buttons.png) right -152px repeat-y }

.target h4                              { padding: 30px }

.target h5                              { font-size: 18px; color: #333; font-family: "Medium", Helvetica, sans-serif !important; }

.t-edu, .t-rel, .t-pro                  { background-image: url(images/targets.png); background-color: #fff; background-repeat: no-repeat; }

.t-edu                                  { background-position: top right }

.t-rel                                  { background-position: 200px -83px }

.t-pro                                  { background-position: 200px -163px }


/* Columns --------------------------- */


.col-s                                  { width: 260px; float: left; }

.col-l                                  { width: 700px; float: left; }

.col                                    { width: 213px; float: left; }


/* Generic Page ---------------------- */


#subnav                                 { background: #fff; padding: 20px 30px; margin: 0 0 1px 1px; }

#subnav ul li a                         { display: block; text-transform: none; font-family: Helvetica, Arial, sans-serif; margin: 0 0 5px 0; font-size: 13px; }

#subnav h4                              { text-transform: none; margin: 0 0 20px 0; }

.title                                  { background: #fff; padding: 20px 30px; margin: 0 0 1px 0; font-size: 18px !important; line-height: 1.3em; }

.location                               { clear: both; background: #fff; height: 800px; position: relative; }

.location iframe                        { position: absolute; top: 0; left: 0; z-index: 0; }

.location .col-l                        { position: absolute; z-index: 2; }

.container                              { width: 960px; margin: 0 auto; }

.highlight                              { background: #fff; padding: 20px 30px; margin: 0 0 1px 1px; }

#contact .col p                         { padding: 0 30px 0 0 }

#contact .col:last-child p              { padding: 0 }

.vcard span                             { margin: 10px 0; line-height: 20px; color: #808080; }

.gmnoprint                              { display: none }

.locate                                 { position: absolute; top: 0; right: 0; z-index: 8; background: #fff; padding: 23px 30px 22px 30px; margin: 0 0 1px 0; width: 259px; }

.page-part                              { border-bottom: solid #e4e4e4 1px; padding: 0 0 30px 0; margin: 0 0 30px 0;  }


/* Landing & Product Pages ----------- */


#landing                                { overflow: hidden; zoom: 1; }

#landing .col-s                         { margin: 0 1px 0 0; width: 259px; }

#landing h1                             { font-size: 44px; font-family: "Medium", Helvetica, sans-serif; color: #16626a; margin: 100px 30px; }

#landing h1 strong                      { color: #fff; }

#landing h2                             { font-size: 44px; font-family: "Medium", Helvetica, sans-serif; color: #16626a; margin: 100px 30px; }

#landing h2 strong                      { color: #fff; }

.features                               { clear: both; overflow: auto; margin: 0 0 1px 0; background: #fff; }

.features li                            { float: left; width: 25%; margin: 0; padding: 0; }

.features li h4                         { padding: 25px 30px 20px 60px; background: #fff; margin: 0; font-size: 15px; height: 70px; }

.features li h4 a                       { font-family: "Medium", Helvetica, sans-serif; font-weight: normal; color: #000; margin: 0; padding: 0; text-transform: uppercase; }

.features li p                          { padding: 10px 10px 30px 30px; background: #fff; margin: 0; }

.features li h4 + p                     { min-height: 200px; }

.features li:last-child p               { padding-right: 30px; }

.featuresextra                          { padding: 30px; background: #fff; margin: 1px 0 0 0; clear: both; }

.featuresextra h4                       { padding: 0 0 20px 0; background: #fff; margin: 0; font-size: 15px; }

.box                                    { margin: 0 0 1px 0; }

.box h3                                 { background: #fff url(images/buttons.png) no-repeat right bottom; margin:  60px 0 1px 0; position: relative; height: 80px; }

.box h3 img                             { position: absolute; bottom: 0; right: 0; }

.box h4                                 { padding: 30px; background: #fff; }

.box p                                  { padding: 0 30px 30px 30px; margin: 0 0 1px 0; background: #fff; }

.box h3 a                               { display: block; padding: 20px 30px; }

.box h3 a span                          { display: none }

.box .content                           { padding: 0 }

.tabbtn                                 { float: right; background: #fff; margin: 0 0 1px 0; position: relative; padding: 20px 30px; color: #00aeef; font-size: 18px;
                                          font-family: "Medium", Helvetica, sans-serif; text-transform: uppercase; }

#product-info                           { clear: both;display: block }

.pricing-table                          { color: #555; display: block; margin: 1px 0 30px 0; }

.pricing-table strong                   { color: #555; margin: 0 auto; width: 150px; display: block; }

.pricing-table p                        { margin: 10px 0 0 }

.pricing-table a.buy                    { margin: 10px 0 0 0; display: block; background: url(images/checkX.png) no-repeat left top; text-align: center; text-transform: none; color:#7ed2d7; padding: 20px; }

.pricing-table a.buy:hover              { color: #06636c; background-position-y: bottom; }

.pricing-table h2                       { margin: 30px 0 0 0 !important; font-size: 30px !important; }

.pricing-table h1, .pricing-table h2, .pricing-table h3, .pricing-table h4, .pricing-table h5, .pricing-table h6
                                        { margin: 20px 0 0 }

.pricing-table-column                   { background: #f7f7f7; float: left; padding: 0 10px; text-align: center; width: 240px; }

.pricing-table-column:first-child       { min-height: 366px; padding: 0 30px; text-align: left; }

.pricing-table-column:nth-child(2n)     { background: #fff }

.pricing-table-column-highlight         { border: 4px solid #7ed2d7; margin: -25px 0 0; padding: 20px 20px 0 20px; -webkit-box-shadow: 3px 3px 0 rgba(200, 200, 200, .5); -moz-box-shadow: 3px 3px 0 rgba(200, 200, 200, .5);
                                          box-shadow: 3px 3px 0 rgba(200, 200, 200, .5); }

.pricing-table-column-highlight a.buy   { margin: 30px 0 10px 0; }

.pricing-table-row                      { border-top: 1px solid #DDD; padding: 0 0 10px; }

.pricing-table-column:nth-child(2n) .pricing-table-row
                                        { border-top: 1px solid #EEE }

.pricing-table-row:first-child          { border: none }

.pricing-table-column:nth-child(2n) .pricing-table-row:first-child
                                        { border: none }

.product-features                       { background: #fff; clear: both; display: block; zoom: 1; overflow: hidden; padding: 30px 0; margin: 1px 0 0 0; }

.product-features .col                  { width: 22%; margin: 0 30px 0 0; float: left; }

.product-features .colL                  { width: 680px; float: left; }

.product-features .col:first-child h4   { border-bottom: solid 1px #afe4e8; padding: 0 0 30px 30px; margin: 0; }

.product-features .col:last-child       { margin-right: 0; }

.product-features .col h5               { padding: 3px 0 20px 0; margin: 0; color: #333 }

.product-features .col:first-child p    { padding: 20px 0 0 30px; }

.product-features .multicheck           { -moz-column-count: 2; -moz-column-gap: 10px; -moz-column-width: 50%;
                                          -webkit-column-count: 2; -webkit-column-gap: 10px; -webkit-column-width: 50%;
                                          column-count: 2; column-gap: 10px; column-width: 50%;
                                          margin: 30px 0 0 0;
                                        }

.product-features .multicheck li        { padding-left: 5px; }

.checklist h5                           { padding-left: 10px; }

.checklist                              { float: right; width: 250px; margin: 0 0 0 30px; padding: 0 0 20px 40px; list-style: url(images/check.png) outside; line-height: 20px; }

.checklist li                           { padding: 4px 0 5px 10px; margin: 0 0 10px 0; }

.multicheck                             { -moz-column-count: 3; -moz-column-gap: 30px; -moz-column-width: 33%;
                                          -webkit-column-count: 3; -webkit-column-gap: 30px; -webkit-column-width: 33%;
                                          column-count: 3; column-gap: 30px; column-width: 33%;
                                          margin: 30px 0 0 0;
                                        }
                                        
.multicheck li                          { padding: 4px 0 5px 10px; margin: 0 0 10px 25px; list-style: url(images/check.png) outside; }
                                        
.multicheck h5                          { margin-top: 0; -webkit-column-break-before: always; -moz-column-break-before: always; column-break-before: always; }

.multicheck strong                      { font-weight: bold; display: block; margin: 0 0 10px 0; }

.introextra                             { float: right; width: 250px; margin: 0 0 0 40px; padding: 0 0 20px 50px; clear: both; }


/* Showcase Block -------------------- */


#testimonials                           { background: #fff; margin: 50px 0 1px 0; clear: both; padding: 30px; overflow: auto; }

#testimonials .left                     { float: left; margin: 0 30px 0 0; width: 230px; }

#testimonials .right                    { float: left; width: 640px; }

#testimonials blockquote                { background: url(images/quote.png) no-repeat top left; padding: 0 0 0 50px; margin: 0; }

#testimonials blockquote p              { margin: 0; font-size: 20px; line-height: 30px; }

#testimonials cite                      { font-style: italic; }


/* Footer ---------------------------- */


footer                                  { clear: both; margin: 100px auto; width: 960px; overflow: visible; }

footer h4                               { padding: 30px 30px 0 30px; background: #fff; margin: 48px 0 0 0; }

footer p                                { background: #fff; padding: 20px 30px; margin: 0 1px 1px 0; }

footer .col-s p                         { margin: 0 }

footer nav ul                           { background: #fff; list-style-type: none; margin: 0 1px 0 0; }

footer nav ul li                        { display: inline-block }

footer nav ul li a                      { padding: 23px 0 22px 30px; margin: 0; display: inline-block; }

footer .ftrsuprt                        { background: url(images/footer.png) no-repeat top left; padding: 130px 0 0 0; }

footer .ftrsuprt a                      { background: url(images/buttons.png) repeat-y right -80px #fff; display: block; padding: 18px 30px 18px 20px; margin: 0 0 1px 0; }

footer .ftrsuprt a:hover                { background: url(images/buttons.png) repeat-y right -147px #fff }


/* Typography and Links -------------- */


h1, h2, h3, h4, h5, h6                  { font-family: "Medium", Helvetica, sans-serif; font-weight: normal; color: #000; margin: 0; padding: 0; text-transform: uppercase; }

h1 a, h2 a, h3 a                        { font-weight: normal }

h1                                      { font-size: 4em; line-height: 1em; padding: .25em 0; }

h2                                      { font-size: 18px; line-height: 1.3em; }

h3                                      { font-size: 18px }

h4                                      { font-size: 18px }

h5                                      { font-size: 15px; margin: 10px 0 30px 0; color: #808080; text-transform: none; font-family: "Regular", Helvetica, sans-serif; }

p                                       { margin: 10px 0; line-height: 20px; color: #808080; }

p strong                                { font-weight: bold }

em                                      { font-style: italic; color: #000; }

section                                 { margin: 0 0 1px 0 }

article, .content                       { background: #fff; padding: 20px 30px; overflow: auto; clear: both; }

nav                                     { text-transform: uppercase; font-family: "Regular", Helvetica, sans-serif; }

nav a                                   { color: #808080; font-size: 15px; }

a                                       { font-family: "Regular", Helvetica, sans-serif; text-decoration: none; color: #808080; font-size: 15px; text-transform: uppercase; }

a:hover                                 { color: #16626A }

p a                                     { font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #000; text-decoration: none; text-transform: none; }

p a:hover                               { color: #16626A }

a strong                                { color: #2cb5c3 }

.button                                 { background: url(images/buttons.png) no-repeat right -80px #fff; height: 66px; width: 68px; float: left; text-indent: -999px; margin: 81px 0 0 0; overflow: hidden; }

.button:hover                           { background: url(images/buttons.png) no-repeat right -147px #ebfdff }

.list                                   { list-style: url(images/blt.png) inside; padding: 10px 0; }

.list li                                { margin: 10px 0; line-height: 20px; color: #808080; }

.quote                                  { background: url(images/quote.png) no-repeat top left; padding: 0 0 0 50px; margin: 20px 0 0 0; }

.quote-pull                             { margin: 20px 30px 30px 0 !important; width: 200px; float: left; }

.quote p                                { margin: 0; font-size: 20px; line-height: 30px; }

sup                                     { padding-left: 1px; font-size: 10px !important; font-weight: normal !important; vertical-align: baseline; position: relative; bottom: 0.33em; }

.sueme                                  { clear: both; color: #fff; font-size: 10px; padding: 40px; }

/* Tables and Data ------------------- */


table                                   { background: #fff; margin: 20px 0; width: 100%; border-collapse: collapse; text-align: left; }

table h4                                { font-size: 13px !important; }

table th                                { font-size: 12px; font-weight: normal; color: #616161; padding: 10px 20px 10px 0; border-bottom: 1px solid #ade4e9; }

table td                                { color: #757575; padding:9px 20px 9px 0; }

.mspace td:first-child, .mspace th:first-child
                                        { padding: 9px 8px 9px 30px; }

.mspace td, .mspace th                  { padding: 9px 8px; }

table tbody tr:hover td                 { color: #757575; background: #fbfbfb; }

.code                                   { width: 630px; height: 100px; margin: 30px 0 30px 0; border: solid 1px #ccc; padding: 20px; }


/* Additional Navigation ------------- */


.accordion                              { clear: both; }

.accordion a                            { background: #fff; padding: 20px 30px; display: block; margin: 0 0 1px 0; }

.accordion h4 + div                     { height: 0; margin: 0; padding: 0 30px; overflow: hidden; -webkit-transition: height 0.2s ease-in, padding 0.2s ease-in;
                                          -moz-transition: height 0.2s ease-in, padding 0.2s ease-in; -o-transition: height 0.2s ease-in, padding 0.2s ease-in;
                                          -ms-transition: height 0.2s ease-in, padding 0.2s ease-in; transition: height 0.2s ease-in, padding 0.2s ease-in; background: #fff; }

.accordion :hover h4 + div              { height: 100px; padding: 30px; margin: 0 0 1px 0; }

.accordion .open h4 + div               { height: 430px; padding: 30px; margin: 0 0 1px 0; }

.accordion .section.large:hover h4 + div
                                        { overflow: auto }
                                        
.accordion p a                          { padding: 10px 20px; background: url(images/follow.png) no-repeat left center; }

.tabs                                   { min-height: 200px; position: relative; width: 100%; margin: 0 0 1px 0; }

.tab                                    { float: left; }

.ext                                    { height: 500px; }

.extL                                   { height: 610px; }

.tab label                              { background: #fff; margin: 0 1px 1px 0; position: relative; padding: 20px 30px; color: #808080; font-size: 18px; font-family: "Medium", Helvetica, sans-serif; text-transform: uppercase; }

.tab label:hover                        { cursor: pointer; }

.tab [type=radio]                       { display: none; }

.tabs .cont                             { position: absolute; top: 59px; left: 0; background: #fff;; right: 0; bottom: 0; padding: 30px; }

.tabs [type=radio]:checked ~ label      { background: #fff; color: #000; border-bottom: solid 1px #fff; z-index: 2; }

.tabs [type=radio]:checked ~ label ~ .cont { z-index: 1; }

.tabs label span                        { color: #b3dee3; }


/* Modals ---------------------------- */


.modal                                  { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.7); z-index: -10; display:none; -webkit-transition: opacity 200ms ease-in;
                                          -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; opacity: 0; pointer-events: none;  }

.modal:target                           { opacity: 1; pointer-events: auto; z-index: 1000; display: block; }

.modal > .modal-cont                    { width: 600px; background: #fff; position: relative; margin: 10% auto; -webkit-animation: minimise 500ms linear; -moz-animation: minimise 300ms linear; 
                                          border: solid 1px #c8c8c8; background: #fff; -webkit-box-shadow: 3px 3px 0 rgba(200, 200, 200, .5); -moz-box-shadow: 3px 3px 0 rgba(200, 200, 200, .5);
                                          box-shadow: 3px 3px 0 rgba(200, 200, 200, .5); }

.modal:target > .modal-cont             { -webkit-animation-name: spring; -moz-animation-name: spring; }

.modal h2                               { font-size: 18px; padding:20px; border-bottom: solid 1px #c8c8c8; color: #808080; }

.modal h2 em                            { font-family: "Light", Helvetica, sans-serif; font-style: normal; color: #808080; }

.modal h4                               { margin: 0 0 20px 0; } 

.modal p                                { padding: 0 0 20px 0; margin: 0; }

@-webkit-keyframes spring   {
    0%                                  { -webkit-transform: scale3d(0.1,0.1,1); box-shadow: 3px 3px 0 rgba(200, 200, 200, .9); }

    55%                                 { -webkit-transform: scale3d(1.08,1.08,1); box-shadow: 3px 3px 0 rgba(200, 200, 200, .0); }

    75%                                 { -webkit-transform: scale3d(0.95,0.95,1); box-shadow: 3px 3px 0 rgba(200, 200, 200, .9); }

    100%                                { -webkit-transform: scale3d(1,1,1); box-shadow: 3px 3px 0 rgba(200, 200, 200, .0); }
}

@-webkit-keyframes minimise {
    0%                                  { -webkit-transform: scale3d(1,1,1) }

    100%                                { -webkit-transform: scale3d(0.1,0.1,1) }
}

@-moz-keyframes spring      {
    0%                                  { -moz-transform: scale3d(0.1,0.1,1); box-shadow: 3px 3px 0 rgba(200, 200, 200, .9); }

    55%                                 { -moz-transform: scale3d(1.08,1.08,1); box-shadow: 3px 3px 0 rgba(200, 200, 200, .0); }

    75%                                 { -moz-transform: scale3d(0.95,0.95,1); box-shadow: 3px 3px 0 rgba(200, 200, 200, .9); }

    100%                                { -moz-transform: scale3d(1,1,1); box-shadow: 3px 3px 0 rgba(200, 200, 200, .0); }
}

@-moz-keyframes minimise    {
    0%                                  { -moz-transform: scale3d(1,1,1) }

    100%                                { -moz-transform: scale3d(0.1,0.1,1) }
}

.modal a[href="#close"]                 { float: right; color: transparent; background: url(images/close.png) no-repeat left; width: 21px; height: 21px; }

.modal a[href="#close"]:hover           { background: url(images/close.png) no-repeat right; }

.modal a[href="#close"]:focus           { outline: none }

.modal a[href="#close"]:after           { display: block; float: right; }

.modal a[href="#close"]:focus:after, .modal a[href="#close"]:hover:after
                                        { -webkit-transform: scale(1.1,1.1); -moz-transform: scale3d(1.1,1.1); }
                                        
.modal a[href="#close"]:focus:after, .modal a[href="#close"]:hover:after
                                        { -webkit-transform: scale(1.1,1.1); -moz-transform: scale3d(1.1,1.1); }

.modal a[href="#close"]:focus:after     { outline: 1px solid #000 }

.modal .panel                           { position: relative; }

.modal .left                            { width: 418px; float: left; padding: 20px; }

.modal .right                           { width: 180px; float: left; border-left: solid 1px #c8c8c8; padding: 20px; top: 0; bottom: 0; right: 0; position: absolute; background: url(images/modhelp.png) no-repeat bottom center; }

.modal input, .modal textarea, .modal select    { border: solid 1px #b9bcbe; padding: 10px; width: 85%; color: #808080; -webkit-box-shadow: 0px 0px 0px 3px rgba(243, 247, 248, 1); box-shadow:  0px 0px 0px 3px rgba(243, 247, 248, 1); margin: 0 0 10px 0 }

.modal input:focus, .modal textarea:focus   { border: solid 1px #7dc6dd; -webkit-box-shadow:  0px 0px 0px 3px rgba(190, 235, 240, 1); box-shadow:  0px 0px 0px 3px rgba(190, 235, 240, 1); outline: none; }

.modal input::-webkit-input-placeholder { color: #808080 }

.modal input:-moz-placeholder           { color: #808080 }

.modal textarea::-webkit-input-placeholder     { color: #808080 }

.modal textarea:-moz-placeholder        { color: #808080 }

.modal select                           { -webkit-appearance: button; -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none;
                                          background: #fff url(images/dropdown.png) no-repeat right center; border-bottom: 1px solid #ccc; color: #7a7a7a; overflow: hidden; padding: 10px 0 15px 0;
                                          text-overflow: ellipsis; white-space: nowrap; }


/* Form Elements --------------------- */


input, textarea, select                 { border: none; border-bottom: solid 1px #ccc; padding: 10px 0; width: 85%; border-radius: 0; color: #808080; }

input::-webkit-input-placeholder        { color: #808080 }

input:-moz-placeholder                  { color: #808080 }

textarea::-webkit-input-placeholder     { color: #808080 }

textarea:-moz-placeholder               { color: #808080; font-family: Arial, sans-serif; font-size: 13px;  }

input[type="checkbox"]                  { width: 20px; float: left; clear: both; }

input[type="submit"]                    { background: #fff url(images/buttons.png) no-repeat 140px -455px; text-align: left; border: none; }

label                                   { float: left; padding: 10px 0; }

select                                  { -webkit-appearance: button; -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none;
                                          background: #fff url(images/dropdown.png) no-repeat right center; border-bottom: 1px solid #ccc; color: #7a7a7a; overflow: hidden; padding: 10px 0 15px 0;
                                          text-overflow: ellipsis; white-space: nowrap; }

input.submit                            { background: #fff; border: 1px solid #b9bcbe; border-bottom: 1px solid #a8abad; color: #808080; line-height: 1; padding: 8px 0; text-align: center; width: 100px; float: left; margin: 0 20px 0 0; }

input.submit:hover                      { background: #fcfcfc; border: 1px solid #b9bcbe; border-bottom: 1px solid #a8abad; cursor: pointer; }

input.submit:active                     { -webkit-box-shadow: inset 0 0 5px 2px #dfdfdf, 0 1px 0 0 #eeeeee, 0px 0px 0px 3px rgba(243, 247, 248, 1); -moz-box-shadow: inset 0 0 5px 2px #dfdfdf, 0 1px 0 0 #eeeeee;
                                          box-shadow: inset 0 0 5px 2px #dfdfdf, 0 1px 0 0 #eeeeee, 0px 0px 0px 3px rgba(243, 247, 248, 1); }

.butn	{ clear: both; nowhitespace: after property; width: auto; font-size: 12px; font-weight: bold; color: #414141; padding: 9px 20px; margin: 10px 0 0; cursor: pointer;
		background: #ffffff; background: -moz-linear-gradient(top,  #ffffff 0%, #f5f5f5 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f5f5));
		background: -webkit-linear-gradient(top,  #ffffff 0%,#f5f5f5 100%); background: -o-linear-gradient(top,  #ffffff 0%,#f5f5f5 100%);
		background: -ms-linear-gradient(top,  #ffffff 0%,#f5f5f5 100%);
		background: linear-gradient(top,  #ffffff 0%,#f5f5f5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 );
		border: 1px solid #bdbfc0; ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 0px 0px 4px #f5f5f5;
		box-shadow: 0px 0px 0px 4px #f5f5f5; display: inline-block;
		}

.butn:hover	{ border-color: #a1a1a2; color: #06636c; }

.butn:active	{ box-shadow: inset 0px 1px 2px rgba(0,0,0,.2),  0px 0px 0px 4px #f5f5f5; }


/* Product Tour ---------------------- */


.tour                               { width: 1102px !important; }
.tourbtn                            { padding: 15px 15px 15px 55px; background: #b3dee3 url(images/tour.png) no-repeat 15px center; margin: 30px 0 0; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; display: inline-block; text-align: center; font-weight: bold; color: #748f93; }
.scload                             { background: url(images/pages/broadcast/scload.png) no-repeat; }

@-webkit-keyframes f {
       0% { opacity:0; }
      12% { opacity:1; -webkit-transform:scale(1.03) }
      25% { opacity:1; -webkit-transform:scale(1.06) }
      37% { opacity:0; -webkit-transform:scale(1.30) }
     100% { opacity:0; } }

@keyframes f {
       0% { opacity:0; }
      12% { opacity:1; transform:scale(1.03) }
      25% { opacity:1; transform:scale(1.06) }
      37% { opacity:0; transform:scale(1.30) }
     100% { opacity:0; } }

@-moz-keyframes f {
       0% { opacity:0; }
      12% { opacity:1; -moz-transform:scale(1.03) }
      25% { opacity:1; -moz-transform:scale(1.06) }
      37% { opacity:0; -moz-transform:scale(1.30) }
     100% { opacity:0; } }

.tour ul [src] { position: absolute; }
.tour ul  { overflow:hidden; width:1100px; height:600px; padding:0; list-style:none; position: relative; }

.tour ul [src] { opacity:0; -webkit-animation:f 16s linear infinite; -moz-animation:f 16s linear infinite; }
.tour ul [src="/assets/images/pages/broadcast/sct1.png"] { -webkit-animation-delay:4s; -moz-animation-delay:4s; animation-delay:4s; }
.tour ul [src="/assets/images/pages/broadcast/sct2.png"] { -webkit-animation-delay:8s; -moz-animation-delay:8s; animation-delay:8s; }
.tour ul [src="/assets/images/pages/broadcast/sct3.png"] { -webkit-animation-delay:12s; -moz-animation-delay:12s; animation-delay:12s; }
.tour ul [src="/assets/images/pages/broadcast/sct4.png"] { -webkit-animation-delay:16s; -moz-animation-delay:16s; animation-delay:16s; }