/* ---------------------------------------------------------------------------------

   Master Stylesheet
   Author: Pixel House
   Website: www.pixel-house.com.au

--------------------------------------------------------------------------------- */

body { background: url(../images/bg.gif) repeat-x 0 0; font-family: 'Open Sans', arial, helvetica, sans-serif; margin: 0; padding: 0; }
p, li { font-size: 0.9em; line-height: 1.55em; color: #676363; }
p, ul, ol { margin: 0 0 1.55em 0; }
p.sm { font-size: 0.8em; line-height: 1.4em; }
a { color: #e16e00; }
a img { border: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: #555555; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none!important; }
h1 { color: #e16e00; font-size: 1.85em; font-weight: normal; margin: 0 0 20px 0; }
h1 span { font-weight: 700; color: #000; }
h2, h3, h4 { font-size: 19px; margin: 0 0 20px 0; font-weight: normal; }
h1, h2, h3 { letter-spacing: -0.01em; }
h2 a { color: #555555; }
h4 { font-size: 15px; }
h4 span { color: #e16e00; }

.black { color: #000; }
.orange { color: #e16e00; }
.green { color: #549d27; }
.grey { color: #555555; }
.bold { font-weight: bold; }
.no-margin { margin: 0 0 2px 0!important; }
.youtube { margin: 0 0 30px 0; }

@media all and (min-width: 600px) {

    #mob-header, #mob-logo, .mob-show { display: none; }

    .left { float: left; }
    .right { float: right; }
    .right.img { margin-left: 20px; }

    /* ---------------------------------------------------------------------------------
       FONTS
    --------------------------------------------------------------------------------- */

    h1, h2, h3, h4, h5, h6,
    #purple-bar, 
    .btn,
    input, 
    textarea,
    label,
    .app-list,
    #breadcrumbs,
    .price,
    .callout-osmo,
	.callout-sprk
    { font-family: 'Arvo', Georgia, serif;  }


    /* ------------------------------------------------------------------------------ */


    #header-wrap,
    #main-wrap,
    #footer-wrap
    { float: left; width: 100%; }

    #header,
    #main,
    #footer
    { width: 940px; margin: 0 auto; padding: 0 30px; }

    #header-wrap { background: url(../images/header.jpg) no-repeat center 0; }
    #header { height: 217px; position: relative; }

    #footer-wrap { background: #e6e6e6; border-top: solid 1px #bbbbbb; }

    #logo { position: absolute; top: 38px; left: 30px; }
    #slogan { display: none; }

    #purple-bar { float: left; width: 900px; padding: 14px 20px 12px 20px; background: url(../images/purple-bar.gif) repeat-x 0 bottom #6a4ea2; border-bottom: solid 3px #3e1492; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; }
    #purple-bar p { margin: 0; color: #fff; font-size: 1.2em; text-shadow: #583c94 1px 2px 1px; }
    #purple-bar p span { color: #fea5d3; font-style: italic; }

    /* ---------------------------------------------------------------------------------
       NAVIGATION
    --------------------------------------------------------------------------------- */

    #nav { float: right; margin: 7px 0 0 0; padding: 0; }
    #nav li { list-style-type: none; padding: 0 0 0 15px; float: left; }
    #nav li a { float: left; padding: 12px 0 0 0; height: 32px; text-decoration: none; color: #3e1492; }
    #nav li a:hover { background: url(../images/nav-hover.gif) no-repeat center 0; text-decoration: underline; }

    #n03, #n04 { font-weight: bold; }
    #n07 a { width: 91px; background: url(../images/buzzcases-sm.gif) no-repeat 0 center!important; }
    #n07 a span { display: none; }

    #p01 #n01 a,
    #p02 #n02 a,
    #p03 #n03 a,
    #p04 #n04 a,
    #p05 #n05 a,
    #p06 #n06 a
    { color: #e16e00; }

    /* ---------------------------------------------------------------------------------
       HOMEPAGE
    --------------------------------------------------------------------------------- */

    #slider { float: left; width: 940px; height: 319px; position: relative; }
    #screens { width: 940px; height: 319px; float: left; overflow: hidden; }
    #screens p { font-size: 1.05em; line-height: 1.45em; }

    .panel { float: left; width: 940px; height: 319px; z-index: 10; }
    .panel-text { float: left; padding: 40px 0 0 40px; }

    .stripViewer { /* This is the viewing window */
        position: relative;
        overflow: hidden;
        margin: auto;
        width: 940px; /* Also specified in  .stripViewer .panelContainer .panel  below */
        height: 319px;
        clear: both;
        z-index: 100;
    }

    .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
        position: relative;
        left: 0; top: 0;
        width: 100%;
        list-style-type: none;
        z-index: 100;
        /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
    }
    .stripNav { display: none; }

    .coda-nav-left a, .coda-nav-right a { width: 26px; height: 26px; text-indent: -5000px; display: block; position: absolute; top: -40px; z-index: 600; outline: none; }
    .coda-nav-left a { background: url(../images/slider-arrow-left.png) no-repeat 0 0; float: left; left: 870px; }
    .coda-nav-right a { background: url(../images/slider-arrow-right.png) no-repeat 0 0; float: right; left: 900px; }
    .coda-nav-left a:hover, .coda-nav-right a:hover { background-position: 0 -26px; cursor: pointer; outline: none; }
    .coda-nav { display: none; }
    #corner { float: left; width: 940px; height: 10px; background: url(../images/slider-corners.png) no-repeat 0 0; position: absolute; top: 309px; left: 0px; z-index: 100; }

    #img2 { background: url(../images/slider/speck-iguy-02.jpg) no-repeat 0 0 #eee2bc; }
    #img1 { background: url(../images/slider/speck-iguy.jpg) no-repeat 0 0 #eee2bc; }
    #img1 .panel-text { width: 300px; }
    #img2 .panel-text { width: 360px; }

    #home-boxes { float: left; width: 100%; padding: 30px 0 15px 0; }
    #home-boxes h2, #home-boxes h3 { padding: 5px 0; margin: 0 0 15px 0; }

    .home-box { float: left; width: 283px; }
    .padd { padding-right: 30px; }

    #mailing-list { width: 313px; }
    #mailing-list p { margin: 0 0 24px 0; }
    #mailing-list .field { width: 291px; }
    .mail-list .sm { margin: 0 0 24px 0; }
    .mail-list h2 { padding-bottom: 1px!important; }

    #home-boxes .ipad-icon { background: url(../images/ico-ipad.jpg) no-repeat 0 0; padding-left: 50px; }

    #case-mate { float: left; width: 100%; background: url(../images/case-mate.jpg) no-repeat 0 0; min-height: 247px; border-top: solid 1px #bbbbbb; position: relative; }
    #case-mate #text { float: left; padding: 35px 0 30px 370px; width: 230px; }
    #case-mate h3 { width: 210px; }
    #case-mate p { margin: 0 0 15px 0; }
    #speech-bubble { width: 142px; height: 95px; background: url(../images/speech.png) no-repeat 0 0; position: absolute; top: -31px; left: 782px; }

    /* ---------------------------------------------------------------------------------
       CONTENT
    --------------------------------------------------------------------------------- */

    #content { float: left; width: 100%; }
    #left { float: left; width: 587px; padding: 40px 0 60px 0; }
    #left h1 { margin: 0 0 30px 0; }
    #left.nopadd { padding-bottom: 15px; }
    #right { float: right; width: 313px; }
    #right.btm-margin { padding-bottom: 50px; }
    .btn-wrap { float: left; width: 100%; margin: 0 0 30px 0; }
    .split #left { width: 437px; }
    .split #right { width: 503px; }
    .shift { float: left; width: 100%; padding-top: 20px; }
    .extend { float: left; width: 100%; }
    .callout { float: left; clear: both; width: 313px; padding-top: 40px; }
    .callout li span { width: 267px; }
    .callout h2, .callout h3 { padding: 5px 0; margin: 0 0 15px 0; float: left; width: 100%; }
    .callout h2 { width: 280px; }
    .callout .app-list { padding: 0!important; }

    .callout.iguy { background: url(../cases/iguy-callout.jpg) no-repeat 0 0; width: 293px; height: 132px; padding: 75px 0 0 20px; margin-top: 15px; }
    .callout.iguy h3 {  }
    .callout.iguy .black { float: left; width: 100%; }
    .callout.iguy .orange { font-size: 24px; float: left; width: 100%;}
    .callout.iguy .btn { box-shadow: none!important; }

    #breadcrumbs { float: left; width: 898px; background: #eee2bc; padding: 15px 20px; border: solid 1px #dec88b; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; }
    #breadcrumbs ul { margin: 0; padding: 0; }
    #breadcrumbs ul li { list-style-type: none; float: left; font-size: 0.85em; color: #837f74; }
    #breadcrumbs ul li a { padding: 0 15px 0 0; background: url(../images/breadcrumbs-arrow.png) no-repeat right center; margin-right: 7px; color: #837f74; text-decoration: none; }
    #breadcrumbs ul li a:hover { color: #e16e00; text-decoration: underline; }


    .btn { float: left; background: url(../images/btn-bg.gif) repeat-x 0 0 #e16d00; padding: 8px 15px 8px 20px; color: #fff; text-decoration: none; box-shadow: #cec196 1px 1px 2px; }
    .btn:hover { background: url(../images/btn-bg-hover.gif) repeat-x 0 0 #ee8c00; }

    .btngreen { background: url(../images/btn-green.gif) repeat-x 0 0 #539c26; }
    .btngreen:hover { background: url(../images/btn-green-hover.gif) repeat-x 0 0 #6fbb36; }

    .btn.lg { -moz-border-radius: 20px; border-radius: 20px; font-size: 0.85em; }
    .btn.lg span { float: left; background: url(../images/btn-arrow-lg.png) no-repeat right center; padding-right: 18px; letter-spacing: -0.01em; }

    .btn.sm { -moz-border-radius: 20px; border-radius: 20px; font-size: 0.85em; }
    .btn.sm span { float: left; background: url(../images/btn-arrow-sm.png) no-repeat right center; padding-right: 18px; }

    .app-list { margin: 0 0 14px 0; padding: 0; float: left; width: 100%; }
    .app-list li { float: left; margin: 0 0 16px 0; list-style-type: none; width: 100%; font-size: 0.85em; }
    .app-list li img { float: left; }
    .app-list li span { float: right; width: 237px; }
    .app-list li a { float: left; width: 100%; color: #3e1492; }
    .app-list li a:hover { text-decoration: underline!important; color: #e16e00; }

    .sub-list { float: left; width: 100%; clear: both; margin: 0; padding: 0; }
    .sub-list li { float: left; width: 100%; list-style-type: none; }
    .sub-list li a { float: left; width: 100%; padding: 10px 0; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; }

    #right .app-list { width: 313px; padding-top: 40px; clear: both; }
    #right .app-list li span { width: 267px; }

    .stars-5 { background: url(../images/stars-5.gif) no-repeat 0 bottom; padding-bottom: 18px; }
    .stars-45 { background: url(../images/stars-45.gif) no-repeat 0 bottom; padding-bottom: 18px; }
    .stars-4 { background: url(../images/stars-4.gif) no-repeat 0 bottom; padding-bottom: 18px; }
    .stars-35 { background: url(../images/stars-35.gif) no-repeat 0 bottom; padding-bottom: 18px; }
    .stars-3 { background: url(../images/stars-3.gif) no-repeat 0 bottom; padding-bottom: 18px; }

    #full-list span em { color: #6c6c6c; }

    .product { float: left; width: 100%; padding-bottom: 30px; }
    .buzz { float: left; width: 100%; padding-top: 10px; }
    .buzz .btn { margin-right: 10px; }
    .buzz .price { font-size: 17px; color: #ad0d00; float: left; padding: 7px 10px 0 0; }

    #left.apps  { width: 567px; border-right: solid 1px #bbbbbb; padding: 0 30px 0 0!important; margin-top: 30px; }
    .apps h2 { margin: 0 0 5px 0; color: #000; }
    .app { float: left; width: 100%; padding: 0 0 40px 0; }
    .app .heading { float: left; width: 100%; }
    .app .heading img { float: left; }
    .app .heading h2, .app .heading h4 { float: right; width: 486px; }
    .app .rating { font-size: 0.8em; }
    .app .rating span { color: #000; font-weight: bold; padding-right: 10px; }

    #partners { margin: 0; padding: 0; }
    #partners li { padding: 0; margin: 0 0 20px 0; list-style-type: none; }
    #partners li a { text-decoration: none; }
    #partners li a span { font-weight: bold; color: #000; }

    /* ---------------------------------------------------------------------------------
       FIELDSETS
    --------------------------------------------------------------------------------- */

    #contact-form { float: left; width: 100%; padding: 0 0 10px 0; }

    fieldset { border: none; margin: 0; padding: 0; }
    fieldset div { position: relative; float: left; width: 100%; margin: 0 0 10px 0; }
    fieldset input[type="text"], fieldset textarea { border: solid 1px #bbbbbb; padding: 11px 10px; -moz-border-radius: 4px; border-radius: 4px; font-size: 15px; color: #7b7b7b; background: url(../images/input-bg.gif) repeat-x 0 bottom; }
    fieldset input[type="text"]:focus, fieldset textarea:focus { border: solid 1px #ec8700; }
    fieldset label { position: absolute; top: 12px; left: 11px; font-size: 15px; color: #7b7b7b; }
    fieldset label .req { font-size: 0.75em; color: #b60404; }
    fieldset .sm { font-size: 11px; color: #7b7b7b; }
    fieldset .btn.sm { color: #fff; }


    #contact-form fieldset { float: left; width: 100%; }
    #contact-form fieldset p { position: relative; float: left; width: 100%; margin: 0 0 10px 0; line-height: 1.0em; }
    #contact-form fieldset input[type="text"], #contact-form fieldset input[type="password"], #contact-form fieldset textarea { width: 188px; }
    #contact-form fieldset textarea { width: 340px; }
    #contact-form fieldset .smtxt { font-size: 0.7em; line-height: 1.3em; color: #888888; padding-top: 5px; }
    .fieldset-left { float: left; width: 200px; }
    .fieldset-right { float: right; width: 360px; }
    #left #error { color: #d40000; border-top: solid 1px #d40000; font-size: 0.85em; padding-top: 10px; }
    #left #success { color: #449624; }

    /* ---------------------------------------------------------------------------------
       OSMO
    --------------------------------------------------------------------------------- */

    #osmo-games .desc img { width: 40%; float: left; }
    #osmo-games .desc h3, .desc p { float: right; width: 50%; padding-right: 10%; }
    #osmo-games .desc h3 { padding-top: 20px; margin: 0 0 10px 0; }
    #osmo-games .desc.word-games h3, .desc.tangram h3 { padding-top: 40px; }
    #osmo-games .desc.newton h3 { padding-top: 30px; }
    
    /* ---------------------------------------------------------------------------------
       FOOTER
    --------------------------------------------------------------------------------- */


    #footer p { font-size: 0.75em; color: #6a6a6a; }

    #foot-left { float: left; background: url(../images/logo-footer.png) no-repeat 0 20px; padding: 35px 0 40px 155px; width: 550px; }
    #foot-left p { float: left; width: 100%; }
    #foot-right { float: right; text-align: right; width: 158px; padding-top: 28px; }
    #foot-right p span { float: right; margin: 0 0 7px 0; }

    #foot-nav { margin: 0 0 4px 0; padding: 0; float: left; }
    #foot-nav li { list-style-type: none; padding: 0 15px 0 0; float: left; }
    #foot-nav li a { float: left; text-decoration: none; color: #515151; }
    #foot-nav li a:hover { color: #000; text-decoration: underline; }

    #f03 a, #f04 a { font-weight: bold; }
    #foot-buzz { margin-right: -7px; }
    
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
    margin-bottom: 30px;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#osmo-games { float: left; width: 100%; border: solid 1px #eee; margin: 0 0 30px 0; }
#osmo-games .desc { float: left; width: 100%; padding: 20px 0; }
#osmo-games .desc.grey { background: #eeeeee; }

.callout-osmo { float: left; width: 100%; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; background: #f7efce; }
.callout-osmo .text { float: left; width: 80%; padding: 0 10% 20px 10%; margin-top: -55px; z-index: 999; position: relative; }
.callout-osmo .text img { max-width: 100%; }
.callout-osmo .text a.btn { margin: 0 0 20px 0; }
.callout-osmo .text p { font-size: 15px; }
.callout-osmo .text p a { font-weight: bold; text-decoration: none; }

.callout-sprk { float: left; width: 100%; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; background: #f0e7bf; }
.callout-sprk .text { float: left; width: 80%; padding: 0 10% 20px 10%; margin-top: -55px; z-index: 999; position: relative; }
.callout-sprk .text img { max-width: 100%; }
.callout-sprk .text a.btn { margin: 0 0 20px 0; }
.callout-sprk .text p { font-size: 15px; }
.callout-sprk .text p a { font-weight: bold; text-decoration: none; }

#iguy-callout { float: left; width: 100%; background: url(../images/iguy-callout.jpg) no-repeat 0 0; }
#iguy-callout #text { float: left; padding: 70px 0 40px 0px; width: 250px; }
#iguy-callout p { margin: 0 0 15px 0; }

#tabs { float: left; width: 100%; margin: 0 0 30px 0; padding: 0; border-bottom: solid 1px #d3d3d3; }
#tabs li { float: left; list-style-type: none; margin: 0 10px 0 0; }
#tabs li a { float: left; padding: 9px 15px; background: #fff; border: solid 1px #d3d3d3; border-bottom: none; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; text-decoration: none; color: #666; background: #efefef; }
#tabs li.active a { background-color: #fff; color: #000; border-bottom: solid 1px #fff; margin-bottom: -1px; }