/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/* =============================================================================
  HTML5 element display
  ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }


/* =============================================================================
  Base
  ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Force vertical scrollbar in non-IE
 * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
 *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
 * 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: "Helvetica Neue", Helvetica,Arial,sans-serif; color: #222; }

/* 
 * These selection declarations have to be separate
 * No text-shadow: twitter.com/miketaylr/status/12228805301
 * Also: hot pink!
 */

::-moz-selection { background: #00A2D2; color: #fff; text-shadow: none; }
::selection { background: #00A2D2; color: #fff; text-shadow: none; }


/* =============================================================================
  Links
  ========================================================================== */

a { color: inherit; }
a:visited { color: inherit; }
a:focus { outline: 0; }

/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: 0; }


/* =============================================================================
  Typography
  ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
  Lists
  ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0; }


/* =============================================================================
  Embedded content
  ========================================================================== */

/*
 * Improve image quality when scaled in IE7
 * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */

img { border: 0; -ms-interpolation-mode: bicubic; }

/*
 * Correct overflow displayed oddly in IE9 
 */

svg:not(:root) {
   overflow: hidden;
}


/* =============================================================================
  Figures
  ========================================================================== */

figure { margin: 0; }


/* =============================================================================
  Forms
  ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

/* 
 * Remove inner padding and border in FF3/4
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* Remove default vertical scrollbar in IE6/7/8/9 */
textarea { overflow: auto; vertical-align: top; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
  Tables
  ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }


/* =============================================================================
  Primary styles
  Author: Gamut / gamutsf.com
  ========================================================================== */

/* HOME */
.ui-dialog-titlebar-close {
  float:right;
  background:url(../images/madebymog/close.png) 0 0 no-repeat;
  height:28px;
  border:none;
  text-indent: -10000px;
  width:24px;
}
#main.index { position:relative; background:#FFF; width:976px; height:auto; margin:0 auto; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-font-smoothing: antialiased; }
#main.index .superheader { position:relative; width:944px; height:400px; padding:24px 0px 0px 33px; background:url(../images/madebymog/au_mog_background.png) 0 0 no-repeat #121212; -webkit-border-top-left-radius: 12px; -webkit-border-top-right-radius: 12px; -moz-border-radius-topleft: 12px; -moz-border-radius-topright: 12px; border-top-left-radius: 12px; border-top-right-radius: 12px;}
#main.index .superheader .clickme {width:515px;height:380px;position:relative;left:36px;cursor:pointer;}
/*
.video_frame {border-style:solid; border-color:red;}
*/
#main.index .superheader .content { position:relative; width:100%; margin-top:0px; }
#main.index .superheader .hero { position:relative; background:url(../images/home-hero.png) 0 0 no-repeat; width:568px; height:400px; display:block; margin:-8px -9px 0px; }
#main.index .superheader .madebymog { position:relative; background:url(../images/home-hero-btn.png) -15px 12px no-repeat; width:568px; height:400px; display:block; margin:-8px -9px 0px; }
#main.index .superheader h1 { position:relative; width:380px; color:#eee; font-size:34px; font-weight:400; line-height:1.2em; margin:0; float:left; display:block; }
#main.index .superheader h2 { float:left; padding-top: 1em; font-size: 0.9em; color:#eee; font-weight:400; line-height:1.2em; }
#main.index .superheader p { color:#eee; font-weight:400; }
#main.index .superheader p.new_icon { margin-left: 57px; }
#main.index .superheader p.new_icon::before { position: absolute; content:" "; background:url(../images/btn_new.png) no-repeat; width:50px; height:50px; left: -3px; top: 140px;}
#main.index .superheader a.big_btn {float:left; margin-top: 1em; width: 172px; height: 50px; background-image:url(../images/btn_start_trial_2.png); text-indent: -999em; overflow: hidden; background-repeat: no-repeat; }
#main.index .superheader a.mbm_btn {float:left; margin-top: 1em; width: 172px; height: 50px; background-image:url(../images/madebymog/start_trial.png); text-indent: -999em; overflow: hidden; background-repeat: no-repeat; }
/*
#main.index .superheader a.big_btn:hover { background-position: 0 -64px; }
#main.index .superheader a.big_btn:active { background-position: 0 -128px; }
*/
#main.index .superheader .cta { position:absolute; margin:1px 0px 0px 0px; color:#303030; }
#main.index .superheader .cta a { color:#00A2D2; padding-right:20px; }
#main.index .superheader .cta a:hover { color:#FF263A; }
#main.index .superheader .cta a:after { content:""; background:url(../images/mog-sprite.png) -62px -735px no-repeat; width:9px; height:14px; display:block; float:right; margin:4px 0px 0px -9px; }
#main.index .superheader .cta a:hover:after { content:""; background:url(../images/mog-sprite.png) -76px -735px no-repeat; width:9px; height:14px; display:block; float:right; margin:4px 0px 0px -9px; }
#main.index .hype { position:relative; background:#404041; width:100%; height:220px; margin:0; }
#main.index .hype .fuzzy { position:absolute; background:url(../images/mog-sprite.png) -9px -400px no-repeat; width:209px; height:160px; margin:30px 0px 0px 36px; }
#main.index .hype .quotes { position:absolute; width:709px; height:auto; margin:64px 0px 0px 267px; }
#main.index .hype .quote { position:relative; width:211px; height:122px; float:left; display:block; padding-right:14px; }
#main.index .hype .quote .logo { height:48px; display:table-cell; vertical-align:middle; }
#main.index .hype .quote .text { color:#FFF; text-indent: -0.4em; }
#main.index .hype .quote .text:before { content: "“"; font-size:110%; }
#main.index .hype .quote .text:after { content: "”"; font-size:110%; }
#main.index .features { position:relative; width:100%; height:auto; color:#303030; padding:0px 0px 35px 0px; }
#main.index .features .feature { position:relative; width:488px; height:auto; display:block; float:left; padding:38px 0px 0px 0px; }
#main.index .features .feature .left { padding-right:12px; }
#main.index .features .feature .right { width:340px; float:left; line-height:1.1em; }
#main.index .features .feature .one { position:relative; background:url(../images/mog-sprite.png) -34px -594px no-repeat; width:59px; height:36px; margin:0px 0px 0px 36px; }
#main.index .features .feature .two { position:relative; background:url(../images/mog-sprite.png) -126px -588px no-repeat; width:59px; height:49px; margin:-13px 0px 0px 22px; }
#main.index .features .feature .three { position:relative; background:url(../images/mog-sprite.png) -46px -789px no-repeat; width:59px; height:59px; margin:0px 0px 0px 48px; padding:0; }
#main.index .features .feature .four { position:relative; background:url(../images/mog-sprite.png) -126px -669px no-repeat; width:59px; height:41px; margin:0px 12px 0px 22px; padding:0; }
#main.index .features .feature h2 { font-size:24px; margin:0; line-height:1.3em; font-weight:400; }
#main.index .features .feature p { font-size:14px; margin:0; }
#main.index .catcher { position:relative; background:#404041; width:100%; height: 80px; margin:0; -webkit-border-bottom-left-radius: 12px; -webkit-border-bottom-right-radius: 12px; -moz-border-bottom-left-radius: 12px; -moz-border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
#main.index .catcher p { font-size: 24px; text-align: center; line-height: 80px; margin: 0; padding: 0; }
#main.index .catcher a { color:#00A2D2; text-decoration:none; position:relative;}
#main.index .catcher a:hover { color:#0085B6; }
#main.index .catcher a:active { color:#006488; }
/*
#main.index .catcher a::after { position: absolute; content:" "; background:url(../images/mog-sprite.png) -154px -738px no-repeat; width:7px; height:10px; right: -12px; top: 11px;}
*/
/* WHAT */
#main.what { position:relative; background:#FFF; width:976px; min-height:500px; height:auto; margin:0 auto; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-font-smoothing: antialiased; }
#main.what .superheader { position:relative; width:910px; height:auto; margin:0px 33px; }
#main.what .superheader .content { position:relative; width:100%; margin-top:30px; }
#main.what .superheader h1 { position:relative; width:100%; color:#303030; font-size:36px; font-weight:400; line-height:1.1em; margin:0px 0px 20px 0px; float:left; display:block; text-align:left; }
#main.what .panel { position:relative; background:#26B0D9; width:100%; height:192px; margin:0; }
#main.what .panel .modules { position:relative; width:912px; height:192px; margin:0px auto 0px auto; }
#main.what .panel .modules .module { position:relative; background:#26B0D9; width:304px; height:100%; float:left; display:block; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; margin-left:0px; color:#404041; }
#main.what .panel .modules .module.on { background:#404041; color:#FFF; }
#main.what .panel .modules .module.on:after { content:""; position:absolute; bottom:-13px; left:140px; border-width:13px 13px 0; border-style:solid; border-color:#404041 transparent; display:block; width:0; }
#main.what .panel .modules .module.on.left:after { left:50px; }
#main.what .panel .modules .module.on.right:after { left:220px; }
#main.what .panel .modules .module .content .number { position:relative; font-size:36px; font-weight:600; margin:8px 0px 0px 30px; color:#FFF; }
#main.what .panel .modules .module .content .header { position:relative; font-size:28px; font-weight:400; margin:2px 0px 0px 30px; }
#main.what .panel .modules .module.left .graphic { position:relative; background:url(../images/mog-sprite.png) -240px -425px no-repeat; width:212px; height:62px; margin:10px 0px 0px 33px; z-index:999999; }
#main.what .panel .modules .module.center .graphic { position:relative; background:url(../images/mog-sprite.png) -231px -271px no-repeat; width:237px; height:59px; margin:14px 0px 0px 33px; z-index:999999; }
#main.what .panel .modules .module.right .graphic { position:relative; background:url(../images/mog-sprite.png) -212px -589px no-repeat; width:268px; height:83px; margin:4px 0px 0px 20px; z-index:999999; }
#main.what .panel .modules .module.left.on .graphic { background:url(../images/mog-sprite.png) -240px -503px no-repeat; }
#main.what .panel .modules .module.center.on .graphic { background:url(../images/mog-sprite.png) -231px -346px no-repeat; }
#main.what .panel .modules .module.right.on .graphic { background:url(../images/mog-sprite.png) -212px -681px no-repeat; }
#main.what .panel .modules .panel-text { position:absolute; width:700px; height:192px; color:#1F1F1F; }
#main.what .panel .modules .module .panel-text h2 { margin:0; padding:0; font-size:24px; font-weight:400; }
#main.what .panel .modules .module.left.on .panel-text { margin:58px 0px 0px 30px; display:block !important; }
#main.what .panel .modules .module.center.on .panel-text { margin:58px 0px 0px -192px; display:block !important; }
#main.what .panel .modules .module.right.on .panel-text { margin:43px 0px 0px -328px; width:600px; text-align:right; display:block !important; }
#main.what .features { position:relative; width:100%; height:auto; color:#303030; padding:0px 20px 60px 20px; margin:108px 0px 0px; }
#main.what .features .feature { position:relative; width:auto; height:120px; display:block; float:left; padding:38px 20px 0px 0px; }
#main.what .features .feature .left { padding-right:12px; }
#main.what .features .feature .right { width:300px; float:left; line-height:1.1em; }
#main.what .features .feature h2 { font-size:24px; margin:0; line-height:1.3em; font-weight:400; }
#main.what .features .feature p { font-size:14px; margin:0; }
#main.what .features .feature .one { position:relative; background:url(../images/mog-sprite.png) -22px -35px no-repeat; width:84px; height:48px; margin:0px 2px 0px 40px; }
#main.what .features .feature .two { position:relative;  background:url(../images/mog-sprite.png) -46px -789px no-repeat; width:52px; height:59px; margin:0px 0px 0px 74px; }
#main.what .features .feature .three { position:relative; background:url(../images/mog-sprite.png) -139px -26px no-repeat; width:58px; height:66px; margin:-18px 17px 0px 51px; }
#main.what .features .feature .four { position:relative; background:url(../images/mog-sprite.png) -218px -26px no-repeat; width:90px; height:69px; margin:0px -5px 0px 41px; }
#main.what .features .feature .five { position:relative; background:url(../images/mog-sprite.png) -404px -34px no-repeat; width:72px; height:60px; margin:0px 5px 0px 49px; }
#main.what .features .feature .six { position:relative; background:url(../images/mog-sprite.png) -31px -121px no-repeat; width:70px; height:59px; margin:0px 4px 0px 52px; }
#main.what .features .feature .seven { position:relative; background:url(../images/mog-sprite.png) -146px -113px no-repeat; width:54px; height:75px; margin:-5px 8px 0px 64px; }
#main.what .features .feature .eight { position:relative; background:url(../images/mog-sprite.png) -230px -122px no-repeat; width:66px; height:56px; margin:0px 5px 0px 55px; }
#main.what .features .feature .nine { position:relative; background:url(../images/mog-sprite.png) -318px -117px no-repeat; width:65px; height:66px; margin:-3px 8px 0px 52px; }
#main.what .features .feature .ten { position:relative; background:url(../images/mog-sprite.png) -401px -130px no-repeat; width:78px; height:40px; margin:0px 0px 0px 48px; }
#main.what .features .feature a { color:#00A2D2; text-decoration:none; }
#main.what .features .feature a:hover { color:#0085B6; }
#main.what .features .feature a:active { color:#006488; }
#main.what .features .feature a:after { position:absolute; content:""; background:url(../images/mog-sprite.png) -154px -738px no-repeat; width:7px; height:10px; margin-top:4px; margin-left:8px; }


/* GET */
#main.get { position:relative; background:#FFF; width:976px; height:auto; margin:0 auto; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-font-smoothing: antialiased; }
#main.get .superheader { position:relative; width:910px; height:auto; margin:0px 33px; }
#main.get .superheader .content { position:relative; width:100%; margin-top:30px; }
#main.get .superheader h1 { position:relative; width:100%; color:#303030; font-size:36px; font-weight:400; line-height:1.1em; margin:0px 0px 20px 0px; float:left; display:block; text-align:center; }
#main.get .panel { position:relative; background:#26B0D9; width:100%; height:303px; margin:0; -webkit-border-bottom-right-radius: 12px; -webkit-border-bottom-left-radius: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; }
#main.get .panel .modules { position:relative; width:944px; height:auto; margin:16px auto 0px auto; }
#main.get .panel .modules .module { position:relative; background:#FFF; width:304px; height:272px; float:left; display:block; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; margin-left:16px; }
#main.get .panel .modules .module:first-child { margin-left:0px; }
#main.get .panel .modules .module .badge { position:absolute; background:url(../images/mog-sprite.png) -118px -326px no-repeat; width:83px; height:82px; right:-35px; margin:-46px 0px 0px; z-index:99; }
#main.get .panel .modules .module .header { position:relative; background:#3E3E44; width:100%; height:48px; -webkit-border-top-left-radius: 12px; -webkit-border-top-right-radius: 12px; -moz-border-radius-topleft: 12px; -moz-border-radius-topright: 12px; border-top-left-radius: 12px; border-top-right-radius: 12px; color:#FFF; }
#main.get .panel .modules .module .header .name { position:relative; margin:10px 0px 0px 20px; font-size:24px; }
#main.get .panel .modules .module .header .price { position:relative; margin:16px 20px 0px 0px; font-size:18px; }
#main.get .panel .modules .module .content .details { font-size:18px; color:#303030; list-style:none; padding:0; }
#main.get .panel .modules .module .content .details li { position:relative; margin:10px 0px 0px 20px; padding-left:40px; }
#main.get .panel .modules .module .content .details li:first-child { margin-top:26px; }
#main.get .panel .modules .module .content .details li.free { height:30px; padding:0; }
#main.get .panel .modules .module .content .details li.unlimited { background:url(../images/mog-sprite.png) -435px -779px no-repeat; height:30px; line-height:0.7em; }
#main.get .panel .modules .module .content .details li.noads { background:url(../images/mog-sprite.png) -435px -812px no-repeat; height:30px; line-height:1em; }
#main.get .panel .modules .module .content .details li.mobile { background:url(../images/mog-sprite.png) -435px -848px no-repeat; height:30px; line-height:1.6em; }
#main.get .panel .modules .module .content .details li.mobile span { font-size:13px; }
#main.get .panel .modules .module .content .choose { position:absolute; width:100%; height:72px; bottom:0px; text-align:center; display:block; color:#00A2D2; font-size:13px; }
#main.get .panel .modules .module .content .choose button { text-shadow:0 -1px 0 #006685; margin-bottom:4px; }


/* WHERE */
#main.where { position:relative; background:#FFF; width:976px; min-height:500px; height:auto; margin:0 auto; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-font-smoothing: antialiased; }
#main.where .superheader { position:relative; width:910px; height:auto; margin:0px 33px; }
#main.where .superheader .content { position:relative; width:100%; margin-top:30px; }
#main.where .superheader h1 { position:relative; width:100%; color:#303030; font-size:36px; font-weight:400; line-height:1.1em; margin:0; float:left; display:block; text-align:left; padding:0; }
#main.where .superheader p { position:relative; width:100%; color:#303030; font-size:14px; font-weight:400; line-height:1.4em; float:left; display:block; text-align:left; padding:0; margin:10px 0px 30px 0px; }
#main.where .quad { position:relative; width:100%; height:auto; margin:0; }
#main.where .quad .lft { -webkit-border-top-left-radius: 12px; -webkit-border-bottom-left-radius: 12px; -moz-border-radius-topleft: 12px; -moz-border-radius-bottomleft: 12px; border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
#main.where .quad .rt { -webkit-border-top-right-radius: 12px; -webkit-border-bottom-right-radius: 12px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
#main.where .quad .left { position:relative; width:200px; height:100%; margin:0px 0px 0px 16px; }
#main.where .quad .right { position:relative; width:260px; height:143px; font-size:14px; color:#FFF; padding:25px 20px 0px 0px; }
#main.where .quad .right h2 { font-size:24px; font-weight:400; margin:0px 0px 6px 0px; padding:0; color:#303030; }
#main.where .quad .right p { padding:0; margin:0; line-height:1.4em; }
#main.where .quad .right a { display:block; color:#C7FF1F; }
#main.where .quad .right a:hover { color:#C7FF1F; }
#main.where .quad .right a:after { position:absolute; content:""; background:url(../images/mog-sprite.png) -141px -738px no-repeat; width:7px; height:10px; margin-top:4px; left:82px; }
#main.where .quad .topleft { position:relative; background:#26B0D9; width:480px; height:168px; margin:0px 0px 15px 0px; float:left; }
#main.where .quad .topleft .left { background:url(../images/mog-where-sprite.png) -22px -196px no-repeat; width:169px; height:121px; margin-top:25px; }
#main.where .quad .topright { position:relative; background:#26B0D9; width:480px; height:168px; margin:0px 0px 15px 0px; float:right; }
#main.where .quad .topright .left { background:url(../images/mog-where-sprite.png) -226px -49px no-repeat; width:169px; height:99px; margin:37px 0px 0px 18px; }
#main.where .quad .bottomleft { position:relative; background:#26B0D9; width:480px; height:168px; margin:0; float:left; }
#main.where .quad .bottomleft .left { background:url(../images/mog-where-sprite.png) -221px -208px no-repeat; width:175px; height:105px; margin:30px 0px 0px 16px; }
#main.where .quad .bottomright { position:relative; background:#26B0D9; width:480px; height:168px; margin:0; float:right; }
#main.where .quad .bottomright .left { background:url(../images/mog-where-sprite.png) -39px -28px no-repeat; width:142px; height:139px; margin:15px 0px 0px 31px; }
#main.where .featured { position:relative; padding:30px 0px 30px 0px; height:auto; display:block; color:#303030; }
#main.where .featured .left { position:relative; width:300px; height:auto; margin:0px 0px 0px 33px; }
#main.where .featured .left h2 { font-size:24px; font-weight:400; margin:0; padding:0; color:#26B0D9; }
#main.where .featured .left h2 span { margin-left:5px; font-weight:600; color:#303030; }
#main.where .featured .left p { font-size:14px; line-height:1.4em; }
#main.where .featured .left .bluebtn { margin:0; }
#main.where .featured .right { position:absolute; bottom:0px; right:80px; }


/* GENERAL PAGES */
#main.page { position:relative; background:#FFF; width:976px; height:auto; margin:0 auto; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-font-smoothing: antialiased; }
#main.page .content { position:relative; width:688px; height:auto; margin:31px 0px 30px 0px; color:#303030; }
#main.page .content h1 { position:relative; width:80%; font-size:36px; font-weight:400; line-height:1.1em; margin:0px 0px 20px 0px; display:block; text-align:left; }
#main.page .content h2 { position:relative; width:100%; font-size:24px; font-weight:400; line-height:1.1em; margin:0px 0px 10px 0px; padding:0; display:block; text-align:left; }
#main.page .content h4 { font-size:16px; font-weight:400; padding:0; margin:20px 0px 4px 0px; }
#main.page .content h5 { font-size:14px; font-weight:600; padding:0; margin:0; }
#main.page .content .content-area { position:relative; height:auto; padding:0px 80px 0px 0px; margin:0px 0px 0px 0px; }
#main.page .content .content-area p, #main.page .content .content-area li { position:relative; width:100%; font-size:14px; font-weight:400; line-height:1.4em; margin:0px 0px 12px 0px; text-align:left; }
#main.page .content .content-area li { width:90%; }
#main.page .content .content-area p.copyright { font-size: 0.5em; }
#main.page .content .content-area .right { position:relative; background:url(../images/mog-sprite.png) -22px -188px no-repeat; width:267px; height:134px; margin:-20px 0px 20px 20px; }
#main.page .content .content-area a { color:#00A2D2; text-decoration:none; }
#main.page .content .content-area a:hover { color:#0085B6; }
#main.page .content .content-area a:active { color:#006488; }
#main.page .content .content-area .group { position:relative; width:608px; height:auto; margin:0px 0px 30px 0px; }
#main.page .content .content-area .group:before { content:""; background:url(../images/mog-sprite.png) -25px -883px repeat-x; width:100%; height:2px; }
#main.page .content .content-area .group.first:before { content:""; background:none; margin:0; }
#main.page .content .content-area .group.first .member-img { padding-top:0px; }
#main.page .content .content-area .group.first .member-text { padding-top:0px; }
#main.page .content .content-area .group .member-img { padding:20px 20px 20px 0px; height:100%; width:150px; text-align:center; }
#main.page .content .content-area .group .member-text { width:438px; float:right; padding:20px 0px 0px 0px; }
#main.page .content .content-area .group h3 { font-size:18px; font-weight:400; padding:0; margin:0; }
#main.page .content .content-area .bluebtn { margin:0px 0px 20px 0px; }
#main.page .content .content-area .dynamic h3 { font-size:16px; font-weight:400; padding:0; margin:20px 0px 4px 0px; }
#main.page .content .content-area .dynamic .group:first-child:before { content:""; background:none; margin:0; }
#main.page .content .content-area .dynamic .group:first-child .member-img { padding-top:0px; }
#main.page .content .content-area .dynamic .group:first-child .member-text { padding-top:0px; }
#main.page.images .content .content-area { font-size:14px; }
#main.page.videos .content .content-area .dynamic h2:first-child { margin-top:0px; }
#main.page.videos .content .content-area .dynamic a, #main.page.videos .content .content-area .dynamic table { font-size:14px; }
#main.page.videos .content .content-area .dynamic p { margin:0; padding:0; }
#main.page .sidebar { position:relative; width:208px; height:auto; min-height:400px; color:#454545; margin:30px 0px 30px 0px; padding:0px 48px 0px 32px; text-indent:16px; }
#main.page .sidebar .snav { margin:15px 0px 0px 0px; }
#main.page .sidebar .snav:before { content:""; background:url(../images/mog-sprite.png) -25px -883px no-repeat; width:100%; height:2px; display:block; margin:0px 0px 15px 0px; }
#main.page .sidebar .snav.first:before { content:""; background:none; margin:0; }
#main.page .sidebar .snav a { color:#454545; display:block; }
#main.page .sidebar .snav .snav-element { overflow:hidden; display:none; }
#main.page .sidebar .snav .snav-element a.sub { font-size:14px; margin:14px 0px; text-indent:16px; }
#main.page .sidebar .current:before { content:""; position:absolute; background:url(../images/mog-sprite.png) -441px -902px no-repeat; width:14px; height:26px; margin-top:-2px; left:0px; }
#main.page .content .content-area .pagenav { position:relative; margin:5px -80px 20px 20px; padding:30px 20px 30px 30px; float:right; list-style:none; background:#26B0D9; width:190px; height:auto; min-height:100px; -webkit-border-top-left-radius: 12px; -webkit-border-bottom-left-radius: 12px; -moz-border-radius-topleft: 12px; -moz-border-radius-bottomleft: 12px; border-top-left-radius: 12px; border-bottom-left-radius: 12px; z-index:999; color:#FFF; }
#main.page .content .content-area .pagenav li { margin:12px 0px 0px 0px; cursor:pointer; }
#main.page .content .content-area .pagenav li:hover { opacity:0.8; }
#main.page .content .content-area .pagenav li:first-child { margin-top:0px; }
#main.page .content .content-area .pagenav .selected { color:#303030; /*text-shadow:0 1px 0 #47c7ee;*/ }
#main.page .content .content-area .pagenav .selected:hover { opacity:1; }
#main.page .content .content-area .pagenav .selected:before { content:""; position:absolute; background:url(../images/mog-sprite.png) -411px -902px no-repeat; width:14px; height:26px; margin-top:-3px; left:-30px; }

#main.page .content .wherepage.content-area { padding:0; }
#main.page .content .wherepage.content-area .lft { position:relative; background:#26B0D9; width:688px; height:192px; margin:0px 0px 15px 0px; float:right; -webkit-border-top-left-radius: 12px; -webkit-border-bottom-left-radius: 12px; -moz-border-radius-topleft: 12px; -moz-border-radius-bottomleft: 12px; border-top-left-radius: 12px; border-bottom-left-radius: 12px; z-index:999; }
#main.page .content .wherepage.content-area .lft .left { width:348px; height:161px; margin:20px 0px 0px 26px; font-size:18px; }
#main.page .content .wherepage.content-area .lft .left p { font-size:18px; color:#FFF; }
#main.page.home .content .content-area .lft .right { background:url(../images/mog-where-sprite.png) -443px -208px no-repeat; width:252px; height:163px; margin:32px 30px 0px 18px; }
#main.page.mobile .content .content-area .lft .right { background:url(../images/mog-where-sprite.png) -717px -19px no-repeat; width:303px; height:178px; margin:14px 0px 0px 0px; }
#main.page.computer .content .content-area .lft .right { background:url(../images/mog-where-sprite.png) -433px -28px no-repeat; width:280px; height:151px; margin:20px 20px 0px -20px; }
#main.page.car .content .content-area .lft .right { background:url(../images/mog-where-sprite.png) -720px -208px no-repeat; width:252px; height:160px; margin:15px 30px 0px 0px; }
#main.page .content .wherepage.content-area .wherepage .group { position:relative; width:658px; height:auto; margin:0px 0px 30px 0px; }
#main.page .content .wherepage.content-area .wherepage .group .right { position:relative; background:none; float:right; margin:30px 30px 0px 0px; width:160px; height:auto; text-align:center; }
#main.page .content .wherepage.content-area .wherepage .group h3 { font-size:24px; font-weight:400; padding:0; margin:0; }
#main.page .content .wherepage.content-area .wherepage .group .member-text { width:412px; float:left; padding:20px 0px 0px 25px; }
#main.page .content .wherepage.content-area .wherepage .group .member-text button { margin:0px 0px 20px 0px; }
#main.page .content .wherepage.content-area .featured { width:913px; height:200px; background:#FFF; margin:0px 0px 0px -256px; }
#main.page .content .wherepage.content-area .featured:before { content:""; background:url(../images/mog-sprite.png) -25px -883px repeat-x; width:100%; height:2px; }
#main.page .content .wherepage.content-area .featured .left { position:relative; width:276px; height:210px; margin:8px 0px 0px -16px; }
#main.page .content .wherepage.content-area .featured .right { position:relative; background:none; float:left; width:412px; height:auto; margin:0px 0px 0px 20px; }
#main.page .content .wherepage.content-area .featured .right p, #main.page .content .wherepage.content-area .featured .right h2 { position:relative; margin:0; padding:0; }
#main.page .content .wherepage.content-area .featured .right p:first-child { margin:20px 0px 0px 0px; }
#main.page .content .wherepage.content-area .featured .right h2 { font-size:36px; color:red; margin-bottom:20px; }
#main.page.mobile .content .wherepage.content-area .featured .left { margin:70px -34px -25px 19px; }
#main.page .content .wherepage.content-area .featured button { margin:15px 0px 0px; }


/**** GLOBAL ****/
#main { position:relative; background:#FFF; width:976px; height:auto; min-height:392px; margin:0 auto; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; }
.btn { cursor:pointer; }
.btn:hover { opacity:0.95; }
.bluebtn { background:url(../images/mog-sprite.png) -41px -892px no-repeat; font-size:18px; color:#FFF; width:180px; height:44px; display:block; border:0; padding-left:16px; text-align:left; margin:0 auto; padding-top:3px; text-shadow:0 -1px 0 #006685; }
.bluebtn:hover { background:url(../images/mog-sprite.png) -41px -936px no-repeat; }
.bluebtn:active { background:url(../images/mog-sprite.png) -41px -980px no-repeat; }
.graybtn { background:url(../images/mog-sprite.png) -232px -939px no-repeat; font-size:13px; color:#000; width:180px; height:28px; display:block; border:0; padding-left:14px; text-align:left; margin:0; text-shadow:0 1px 0 #FFF; }
.graybtn.small { background:url(../images/mog-sprite.png) -232px -902px no-repeat; width:164px; }
.left { float:left; }
.right { float:right; }
.on, .on a, .on a:hover { color:#FFF !important; }
a.current { color:#FF263A !important; }
#main a:hover, #main.page .sidebar .snav a:hover { color:#FF263A; }
a:link { color:#303030; }
.index #page-content, .what #page-content, .get #page-content, .where #page-content { display:none; }
.page #page-content { display:block; }
.blue { color:#00A2D2 !important; }
h1, h2 {

letter-spacing: -.2px;
}

#alertbox {
  display:none;
  background:url(../images/non-au-alert.png) 0 0 no-repeat;
  width:513px;
  height:439px;
  z-index: 99999;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  behavior: url(css/PIE.htc);
  -webkit-box-shadow:  0px 0px 40px 0px #222;
  -moz-box-shadow:  0px 0px 40px 0px #222;
  box-shadow:  0px 0px 40px 0px #222;
}

#alertbox .close { position:absolute; background:url(../images/close-btn.png) 0 0 no-repeat; width:11px; height:11px; right:10px; margin-top:3px; border:0; outline:0; }
 
/* Body */
body { background:#323232; color:#FFF; font-size:18px; outline:0; }
body a { color:inherit; text-decoration:none; }

/* Header */
header { position:relative; width:976px; height:72px; margin:0 auto; -webkit-font-smoothing: antialiased; }
header .logo { position:relative; background:url(../images/logo.png) 0 0 no-repeat; width:129px; height:45px; margin:11px 6px 0px 0px; }
header .gnav { display:block; float:left; color:#A8A8A9; /*text-shadow:-1px -1px 0px #111111;*/ cursor:pointer; }
header .gnav a { color:inherit; }
header .link { position:relative; background:url(../images/gnav-seperator.png) 0 0 no-repeat; margin:19px 0px 0px; height:37px; padding:8px 20px 0px 20px; }
header .link.first { background:none; margin-left:0px; padding-left:0; }
header .link.last { float:right; background:url(../images/white.png) 0 0 no-repeat; padding-right:0px; width: 92px;}
header .link.last:hover { background-image: url(../images/white_rollover.png) }
header .link.last:active { background-image: url(../images/white_rollover.png) }
header .link:hover { color:#DEDEDE; }
header .link:active { color:#FFF; }
header .tooltip { display:none; background:transparent url(../images/bigpond_hover.png); height:144px; width:254px; z-index:999999; }

/* Footer */
footer.footsy { position:relative; width:976px; height:70px; margin:0 auto; color:#A8A8A9; }
footer.footsy .items { width:660px; padding-top:15px; margin:0 auto; text-align:left; }
footer.footsy .items .item { float:left; font-size:11px; }
footer.footsy .items .item ul { list-style:none; margin:0; padding:0; }
footer.footsy .items .item ul li { margin:10px; display: inline;}
footer.footsy .items .item ul li a { color:inherit; }
footer.footsy .items .item ul li a:hover { color:#DEDEDE; }
footer.footsy .items .item ul li a:active { color:#FFF; }
footer.footsy .copyright { position:relative; margin:6px auto 0; font-size:10px; text-transform:uppercase; text-align:center; }
footer.footsy .asterix { position:relative; margin:6px auto 0; font-size:10px; text-align:center; }
footer.footsy .moggy { position:relative; background:url(../images/mog-sprite.png) -325px -209px no-repeat; width:100px; height:50px; margin:10px auto 0; }

/* Navigation */
#main.index:after { content:""; }
#main.what:after { content:""; position:absolute; top:-26px; left:184px; border:13px solid transparent; border-bottom-color:#FFF; display:block; width:0; }
#main.get:after { content:""; position:absolute; top:-26px; left:328px; border:13px solid transparent; border-bottom-color:#FFF; display:block; width:0; }
#main.where:after, #main.home:after, #main.mobile:after, #main.computer:after, #main.car:after { content:""; position:absolute; top:-26px; left:507px; border:13px solid transparent; border-bottom-color:#FFF; display:block; width:0; }

/* z-index hacks to fix chrome z-index bugs */

#bphf-top { position: absolute; z-index: 2;}
#container { padding-top: 0px; }

/* =============================================================================
  Non-semantic helper classes
  Please define your styles before this section.
  ========================================================================== */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers:
  css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* =============================================================================
  PLACEHOLDER Media Queries for Responsive Design.
  These override the primary ('mobile first') styles
  Modify as content requires.
  ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

@media screen and (-webkit-min-device-pixel-ratio: 0) {

  .bluebtn { padding-top:3px; }

}

/* =============================================================================
  Print styles.
  Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
  ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}