/*!
 * Gridpak Beta CSS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */
 
 

/* Reusable column setup */
.col {
    border:0px solid rgba(0,0,0,0);
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
}



    /* 1. 6 Column Grid 0px - 319px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    15.8333333333%
    Span 2:    32.6666666667%
    Span 3:    49.5%
    Span 4:    66.3333333333%
    Span 5:    83.1666666667%
    Span 6:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 0px) and (max-width: 320px) {
        .container {padding-bottom:0;}
        .page-content {min-height:400px;margin-bottom:0;}
        .logo {max-width:100%;margin-right:0;text-align:center;}
        .navigation ul {width:100%;clear:both;}
        .navigation ul li {width:20%;}
        li.cta {display:none;}
        #slider {width:320px;margin:0;}
        .slide {margin:0;padding:0;}
        .social img {margin: 0.2em;max-width:30px;}  
        .rhino-caption {font-size: 0.8em;}
        .community .wiki {margin-left:2%;}
        .community .forums {margin-right:2%;}
        #home2 h3 {
            font-size: 0.9em;
            margin: 0;
            clear:both;
        }
        div.share {float:left;margin-top:0;}
        .usp {margin-top:10%;width:100%;}
        .thumbs img {max-width:40%;}
        .overview .video {float:none;}
        .overview .icon {display:none;}
        .overview-text {font-size:0.9em;max-width:80%;margin:1em;background:none;}
        .overview-text h2 {width:100%;margin:0.5em 0 0;float:none;font-size:1.1em;}
        .overview-text p {font-size: 0.9em;margin-top:0;float:none;}
        footer .corp-logo, footer .rating-logos {text-align:center;}    
        .char-blurb p {margin:0;}
        .calling-img img {max-width:40%;}
        #generic, #character {margin:0;padding:1.5em;}
        .content-frame-bot, .content-frame-top, footer #change-region {display:none;}
        #nav-gem {display:none;}        
.rexcycle {max-width:40%;}
.news-item {padding:0.5em;margin:0;}
.news {margin:0;}
.news, .community, .media, .side, #home .social {padding:0;}
#nav-gem, #nav-gem-lg {display:none;}
nav#navWrapper {margin-top:2em;}
#homeslider h2 {font-size:2em;}
.blogroll a, .widget_rss ul li a {font-size:0.8em}
#home, #post {margin:-1.2em 0 0;padding:1em;width:100%;}
h1.page-title {margin-top:0;}
        .col {
            margin-left:1%;
            padding:0 0.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
        
        /*
        Add your semantic classnames in alongside their corresponding spans here. e.g.
        
        .span_3,
        .my_semantic_class_name {
            ...
        }
        */
        
        .span_1 {
            width:15.8333333333%;
        }
        .span_2 {
            width:32.6666666667%;
        }
        .span_3 {
            width:100%;
        }
        .span_5 {
            width:83.1666666667%;
        }
        .span_4, 
        .span_8,
        .span_6,
        .span_9,
        header,
        footer,
        .related_content,
        .other-callings {
            width:90%;
            margin-left:0;
        }
    }

    /* 2. 2 Column Grid 320px - 479px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    49.5%
    Span 2:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 321px) and (max-width: 480px) {
        .container {padding-bottom:0;}
        .page-content {min-height:400px;margin-bottom:0;}
        .logo {max-width:60%;margin-right:0;}
        .navigation ul {width:100%;clear:both;}
        .navigation ul li {width:20%;}
        li.cta {display:none;}
        .thumbs img {max-width:40%;}      
        .usp {margin-top:10%;width:100%;}
        .overview .video {float:none;margin-left:20%;}
        .overview .icon {
            margin-left: 0.25em;
            max-width: 30%;
        }
        .overview-text {font-size:0.9em;max-width:70%;background:none;}
        .overview-text h2 {width:100%;margin:0.5em 0 0;float:none;font-size:1.1em;}
        .overview-text p {font-size: 0.9em;margin-top:0;float:none;}
        footer .corp-logo, footer .rating-logos {text-align:center;}    
        .char-blurb p {margin:0;}
        div.share {float:left;margin-top:0;}
        #generic, #character {margin:0;padding:1.5em;}
        .content-frame-bot, .content-frame-top, footer #change-region {display:none;}
        .calling-img img {max-width:40%;}
.rexcycle {max-width:40%;}
.news-item {padding:0.5em;margin:0;}
.news {margin:0;}
.news, .community, .media, .side, #home .social {padding:0;}
#nav-gem, #nav-gem-lg {display:none;}
nav#navWrapper {margin-top:1em;}
#homeslider h2 {font-size:2em;}
.blogroll a, .widget_rss ul li a {font-size:0.8em}
#home, #post {margin:-1.2em 0 0;padding:1em;width:100%;}
h1.page-title {margin-top:0;}
        .col {
            margin-left:1%;
            padding:0 0.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        .span_3 {width:49.5%;}
        .span_6,
        header,
        footer,
        .related_content {
            width:100%;
            margin-left:0;
        }        
        .span_4, .span_8 {
            width:90%; margin-left:0;
        }

        .span_1 {
            width:49.5%;
        }
        .span_2 {
            margin-left:0;
            width:100%;
        }
        .other-callings {width:99%;}
        .span_9 {width:100%;}
    }

    /* 3. 4 Column Grid 480px - 768px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    24.25%
    Span 2:    49.5%
    Span 3:    74.75%
    Span 4:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 481px) and (max-width: 767px) {
        
        .container {padding-bottom:0;}
        .page-content {min-height:400px;margin-bottom:0;}
        .logo {max-width:50%;margin-right:0;}
        .navigation ul {width:100%;clear:both;}
        .navigation ul li {width:20%;}
        li.cta {display:none;}
        #nav-gem {display:none;}
        #navigation {
        float: left;
        margin-right: 0;
        margin-top: 3%;
        width: 100%;
        }  
        #slider {width:700px;text-align:center;}
        .slide {margin:0.2em;}
        .rhino-caption {font-size:0.9em;}  
        .usp {margin-top:10%;width:100%;}
        .overview .video {float:none;}
        .overview .icon {
            margin-left: 0.25em;
            max-width: 30%;
        }
        .overview-text {font-size:0.9em;max-width:70%;background:none;}
        .overview-text h2 {width:100%;margin:0.5em 0 0;float:none;font-size:1.1em;}
        .overview-text p {font-size: 0.9em;margin-top:0;float:none;}
        footer .corp-logo, footer .rating-logos {text-align:center;}    
        .char-blurb p {margin:0;}
        div.share {float:left;margin-top:0;}
        .content-frame-bot, .content-frame-top, footer #change-region {display:none;}
.home-side-menu li {width:96%;}
.social img {max-width:10%;}
#playfree .related_content {margin-left:-12%;}
#playfree .related_content .content {width:384px;}
#navWrapper {/*margin-right:8%;*/}
#section-screens {width:383px;}
.blogroll a, .widget_rss ul li a {font-size:0.8em}
#home, #post {margin:0;padding:1em;}
.content-frame-bot, .content-frame-top {display: none;}
h1.page-title {margin-top:0;}
        .col {
            margin-left:0;
            padding:0 0.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }        
        
        .span_1 {
            width:24.25%;
        }
        .span_2 {
            width:49.5%;
        }
        .span_3, .span_6 {
            width:49.5%;
        }
        .other-callings {width:32.6666666667%;}
        .span_9 {width:66.3333333333%;}
        .span_4, .span_8 {
            margin-left:0;
            width:100%;
        }

    }
    @media screen and (min-width: 768px) and (max-width: 768px) {
        #home, #post {margin:0;padding:1em;}
        .content-frame-bot, .content-frame-top {display: none;}
        h1.page-title {margin-top:-1em;}
}
    /* 4. 6 Column Grid 769px - 960px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    15.8333333333%
    Span 2:    32.6666666667%
    Span 3:    49.5%
    Span 4:    66.3333333333%
    Span 5:    83.1666666667%
    Span 6:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 769px) and (max-width: 960px) {
        .community .wiki {margin-left:5%;}
        .community .forums {margin-right:5%;}
        #slider {width:560px;}
        .community .social img {margin: 0.25em;}
        .overview-text h2 {width:100%;margin:0.8em 0 0;float:none;font-size:1.2em;}
        .overview-text p {width:98%;float:none;font-size:0.9em;margin-top:0;}
        #generic, #character {background-image:url('//cdn.trionworlds.com/rift/img/bg/frame-bg-960.jpg');}
.home-side-menu li {width:96%;}
.social img {max-width:10%;}
#playfree .related_content {margin-left:-12%;}
#playfree .related_content .content {width:384px;}
#section-screens {width:383px;}
        .col {
            margin-left:1%;
            padding:0 0.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        .logo {max-width:28%;}
        
        
        .span_1 {
            width:15.8333333333%;
        }
        .span_2 {
            width:32.6666666667%;
        }
        .span_3 {
            width:49.5%;
        }
        .span_4 {
            width:31.6666666667%;
        }
        .span_8 {
            width:66.3333333333%;
        }
        .span_5 {
            width:83.1666666667%;
        }
        .span_6 {
            margin-left:0;
            width:100%;
        }
        #character .span_6 {width: 49.5%;}
        .other-callings {width:32.6666666667%;}
        .span_9 {width:66.3333333333%;}
        .related_content {
            height: 400px;
            float:right;
        }
    }
    .siderift {padding:0 1em}

    @media screen and (min-width: 800px) and (max-width: 800px) {
        #generic, #character {background-image:url('//cdn.trionworlds.com/rift/img/bg/frame-bg-800.jpg');margin:0;}
        .content-frame-bot, .content-frame-top {margin:0;}
        .content-frame-bot img {margin-top:-2em;}
        .content-frame-top img {margin-bottom:-1em;}
        .followus img {width:20%;height:20%;}
        #searchform .searchinput {width:100%}
        .sidebarBox.forumlink a, .sidebarHead.big {font-size:1em}
        .content-frame-bot img,.content-frame-top img {width:100%;}
        #home, #post {margin:-1em 0;}
}
    @media screen and (min-width: 959px) and (max-width: 961px) {
        #generic, #character {background-image:url('//cdn.trionworlds.com/rift/img/bg/frame-bg-960.jpg');}
}
    @media screen and (min-width: 1024px) and (max-width: 1024px) {
        #generic, #character {background-image:url('//cdn.trionworlds.com/rift/img/bg/frame-bg-1024.jpg');}
}
    @media screen and (min-width: 1140px) and (max-width: 1140px) {
        #generic, #character {background-image:url('//cdn.trionworlds.com/rift/img/bg/frame-bg-1140.jpg');}
}
    /* 5. 12 Column Grid 960px - 1139px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    7.41666666667%
    Span 2:    15.8333333333%
    Span 3:    24.25%
    Span 4:    32.6666666667%
    Span 5:    41.0833333333%
    Span 6:    49.5%
    Span 7:    57.9166666667%
    Span 8:    66.3333333333%
    Span 9:    74.75%
    Span 10:    83.1666666667%
    Span 11:    91.5833333333%
    Span 12:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 961px) and (max-width: 1140px) {
        .overview-text h2 {width:12%;margin:0.8em 0.5em;float:left;}

        .col {
            margin-left:1%;
            padding:0 0.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        .logo img {max-width:80%;}
        
        
        
        .span_1 {
            width:7.41666666667%;
        }
        .span_2 {
            width:15.8333333333%;
        }
        .span_3 {
            width:24.25%;
        }
        .span_4 {
            width:31.6666666667%;
        }
        .span_5 {
            width:41.0833333333%;
        }
        .span_6 {
            width:49%;
        }
        .span_7 {
            width:57.9166666667%;
        }
        .span_8 {
            width:65.3333333333%;
        }
        .span_9 {
            width:74.75%;
        }
        .span_10 {
            width:83.1666666667%;
        }
        .span_11 {
            width:91.5833333333%;
        }
        .span_12 {
            margin-left:0;
            width:100%;
        }
    }
    .siderift {padding:0 2em}

    /* 6. 12 Column Grid 1141px - 1280px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    7.41666666667%
    Span 2:    15.8333333333%
    Span 3:    24.25%
    Span 4:    32.6666666667%
    Span 5:    41.0833333333%
    Span 6:    49.5%
    Span 7:    57.9166666667%
    Span 8:    66.3333333333%
    Span 9:    74.75%
    Span 10:    83.1666666667%
    Span 11:    91.5833333333%
    Span 12:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 1141px) and (max-width: 1280px) {
        
        .col {
            margin-left:1%;
            padding:0 0.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
        
        
        .span_1 {
            width:7.41666666667%;
        }
        .span_2 {
            width:15.8333333333%;
        }
        .span_3 {
            width:24.25%;
        }
        .span_4 {
            width:31.6666666667%;
        }
        .span_5 {
            width:41.0833333333%;
        }
        .span_6 {
            width:49%;
        }
        .span_7 {
            width:57.9166666667%;
        }
        .span_8 {
            width:66.3333333333%;
        }
        .span_9 {
            width:74.75%;
        }
        .span_10 {
            width:83.1666666667%;
        }
        .span_11 {
            width:91.5833333333%;
        }
        .span_12 {
            margin-left:0;
            width:100%;
        }
    }
    .siderift {padding:0 2em}

    /* 7. 12 Column Grid 1280px - 1919px 
    ----------------------------------------------------------------------------- 
    
    Span 1:    7.41666666667%
    Span 2:    15.8333333333%
    Span 3:    24.25%
    Span 4:    32.6666666667%
    Span 5:    41.0833333333%
    Span 6:    49.5%
    Span 7:    57.9166666667%
    Span 8:    66.3333333333%
    Span 9:    74.75%
    Span 10:    83.1666666667%
    Span 11:    91.5833333333%
    Span 12:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 1281px) and (max-width: 1920px) {
        
        .col {
            padding:0 0.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
        
        
        .span_1 {
            width:7.41666666667%;
        }
        .span_2 {
            width:15.8333333333%;
        }
        .span_3 {
            width:24.25%;
        }
        .span_4 {
            width:32.6666666667%;
        }
        .span_5 {
            width:41.0833333333%;
        }
        .span_6 {
            width:49.5%;
        }
        .span_7 {
            width:57.9166666667%;
        }
        .span_8 {
            width:66.3333333333%;
        }
        .span_9 {
            width:74.75%;
        }
        .span_10 {
            width:83.1666666667%;
        }
        .span_11 {
            width:91.5833333333%;
        }
        .span_12 {
            margin-left:0;
            width:100%;
        }
    }
    .siderift {padding:0 2em}

    /* 8. 12 Column Grid 1920px - Infinity 
    ----------------------------------------------------------------------------- 
    
    Span 1:    7.41666666667%
    Span 2:    15.8333333333%
    Span 3:    24.25%
    Span 4:    32.6666666667%
    Span 5:    41.0833333333%
    Span 6:    49.5%
    Span 7:    57.9166666667%
    Span 8:    66.3333333333%
    Span 9:    74.75%
    Span 10:    83.1666666667%
    Span 11:    91.5833333333%
    Span 12:    100%
    
    ----------------------------------------------------------------------------- */

    @media screen and (min-width: 1921px) {
        
        .col {
            margin-left:1%;
            padding:0 0.5%;
        }
        
        .row .col:first-child {
            margin-left:0;
        }
        
        
        
        .span_1 {
            width:7.41666666667%;
        }
        .span_2 {
            width:15.8333333333%;
        }
        .span_3 {
            width:24.25%;
        }
        .span_4 {
            width:32.6666666667%;
        }
        .span_5 {
            width:41.0833333333%;
        }
        .span_6 {
            width:49.5%;
        }
        .span_7 {
            width:57.9166666667%;
        }
        .span_8 {
            width:66.3333333333%;
        }
        .span_9 {
            width:74.75%;
        }
        .span_10 {
            width:83.1666666667%;
        }
        .span_11 {
            width:91.5833333333%;
        }
        .span_12 {
            margin-left:0;
            width:100%;
        }
    }
    .siderift {padding:0 2em}
    /*
    ----------------------------------------------------------------------------- 
    Main Nav - hide imagemap, show ul    
    ----------------------------------------------------------------------------- */

    @media screen and (max-width: 767px) {
        #generic, #character {margin:0;}
        .news-item img {height:auto;width:60%;}
        nav#navWrapper img.navImageMap, nav#navWrapper map, div#subnavWrapper, div#navHover, .navText {
            display: none;
        }
        nav#navWrapper {
            width:100%;
            min-height:60px;
        }
        nav#navWrapper ul.nav > li {
            width:25%;
            min-height: 60px;
            /* background: url('../images/nav/monav-divider.png')no-repeat right center transparent; */
        }     
        nav#navWrapper ul.nav {
            display: block;
            background: url('//cdn.trionworlds.com/rift/img/bg/mo-nav-bg.png') repeat-x 0 0 transparent;
            min-height: 62px;
            z-index: 999;
            border-bottom: 3px solid #333;
        }
        nav#navWrapper ul.nav li a {text-transform:uppercase;font-size:0.6em;color: #fff;height:78px;margin-top: 2em;}
        nav#navWrapper ul.children li a {margin-top:0;}
        ul.nav li ul.children li {background:url('//cdn.trionworlds.com/rift/img/bg/tr-blu.png') repeat scroll 0 0 transparent;float:none;text-align:left;}
        ul.nav li.mchar {background:url('//cdn.trionworlds.com/rift/img/icons/mo-icon-char.png') no-repeat center top transparent;}
        ul.nav li.mbattles {background:url('//cdn.trionworlds.com/rift/img/icons/mo-icon-battles.png') no-repeat center top transparent;}
        ul.nav li.mworld {background:url('//cdn.trionworlds.com/rift/img/icons/mo-icon-world.png') no-repeat center top transparent;}
        ul.nav li.mstore {background:url('//cdn.trionworlds.com/rift/img/icons/mo-icon-store.png') no-repeat center top transparent;}
        .cta2 {display: block;position: relative;z-index: 999;font-size:1.2em;background: url("//cdn.trionworlds.com/rift/img/nav/nav-gem.png") no-repeat scroll center center transparent;height:84px;padding-top:48px;text-align: center;width: 217px;font-size:1.2em;}
        div.cta2 a {text-transform:uppercase;color:#fff;padding:2.2em 1em;}
    }
@media all and (max-width:650px) and (min-width:320px){#gnav-2013 .gnav2 .lang2,#gnav-2013 .gnav2 .support{display:none}
#gnav-2013 .games a{padding:12px 11px}
}
@media all and (max-width:481px) and (min-width:320px){#gnav-2013{min-height:42px;min-width:300px}
#gnav-2013 h6{width:42px}
#gnav-2013 .trion-logo{width:42px;margin:5px 4px 4px 5px;background-position:-71px -98px}
#gnav-2013 a{font-size:.8em}
#gnav-2013 .games a,#gnav-2013 .gnav2 a{padding:12px 10px}
#gnav-2013 .gnav2{min-width:133px;max-width:223px}
#gnav-2013 .gnav2 li{width:47%;border-bottom:1px dotted #666;border-right:1px dotted #666}
#gnav-2013 .games .sub{background-color:#1a1a1a;background-image:none;min-height:100px;padding:15px 0}
#gnav-2013 .games .sub li{width:48%;min-height:40px;opacity:1;background-image:none}
#gnav-2013 .games .sub li a{height:40px;opacity:1}
#gnav-2013 .games .sub li a:hover{background-image:none}
#gnav-2013 .games .sub li a img{margin-top:5%;width:55%}
#gnav-2013 .games .sub li a:hover img{margin-top:5%;width:55%;opacity:1}
#gnav-2013 .games .sub .rift img{margin-top:-1%;width:35%;opacity:1}
#gnav-2013 .games .sub .rift:hover img{margin-top:-1%;width:35%}
#gnav-2013 .games .sub .arch img{margin-top:-4%;width:30%;opacity:1}
#gnav-2013 .games .sub .arch:hover img{margin-top:-4%;width:30%}
#gnav-2013 .games .sub .eon img{margin-top: 1%;opacity:1}
#gnav-2013 .games .sub .eon:hover img{margin-top: 1%}
#gnav-2013 .gnav2 .sub{top:42px;min-width:100px}
#gnav-2013 .gnav2 li li{width:100px;border:0}
#gnav-2013 .gnav2 .lang2,#gnav-2013 .gnav2 .support{display:none}
}
.ie8 .page-template-classes-php .forie{width:220px;}
.ie8 .page-races .forie{width:490px;}
.ie7 .news-item .left a, .ie8 .news-item .left a {width:183px; height:122px; float:left;}
.ie7 .page-template-index-php .span_8 {width:65.333%;}
.ie7 .page-template-index-php .thumbs { width:371px; }
.ie7 .content-frame-top {margin-bottom:-30px; z-index:2;}