.UIPageBody {padding-bottom: 1.875em;}

.gtnResponsiveCommunityPortlet {padding: 0;}

.gtnResponsiveCommunityPortlet #willing,
.gtnResponsiveCommunityPortlet #documentation {
    float: right; /* orientation=rt */
    float: left; /* orientation=lt */
    margin-right: 2.5641%; /* orientation=rt */
    margin-left: 2.5641%; /* orientation=lt */
    width: 46.1538%;
}

.gtnResponsiveCommunityPortlet h4 {
    font-size: 1.5em;
    font-weight: normal;
    margin-bottom: .8332em;
    margin-top: 0;
    line-height: 1em;
}


/* Willing */

.gtnResponsiveCommunityPortlet .btn {
    background-color: #F5F5F5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e6e6e6)); /* Chrome, Safari 4+ */
    background-image: -webkit-linear-gradient(top, #fff, #e6e6e6); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
    background-image: -moz-linear-gradient(top, #fff, #e6e6e6); /* Firefox 3.6-15 */
    background-image: -ms-linear-gradient(top, #fff, #e6e6e6); /* IE 10+ */
    background-image: -o-linear-gradient(top, #fff, #e6e6e6); /* Opera 11.10-12.00 */
    background-image: linear-gradient(to bottom, #fff, #e6e6e6); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
    background-position: center top;
    background-repeat: repeat-x;
    border-radius: 0.25em;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #A2A2A2;
    border-style: solid;
    border-width: 0.07142em;
    box-shadow: 0 0.07142em 0 rgba(255, 255, 255, 0.2) inset, 0 0.07142em 0.14284em rgba(0, 0, 0, 0.05);
    color: #333333;
    display: inline-block;
    font-size: 0.875em;
    line-height: 1.4284em;
    padding: .28568em .85704em;
    text-shadow: 0 .07142em .07142em rgba(255, 255, 255, 0.75);
}

.gtnResponsiveCommunityPortlet .btn:hover {
    background-color: #E6E6E6;
    background-image: none;
}

.gtnResponsiveCommunityPortlet #willing div span {
    color: #999999;
    margin: 0 .35714em;
    font-size:.875em;
}

.gtnResponsiveCommunityPortlet #willing a:last-child {font-size:.875em;}

.gtnResponsiveCommunityPortlet #willing a:last-child:hover {text-decoration: underline;}


/* Documentation */

.gtnResponsiveCommunityPortlet #documentation {
    background-color: #E5EEF4;
    border-radius: 0.625em;
    margin-top: 1.875em;
    padding: 1.7094%;
    position: relative;
    width: 42.735%;
}

.gtnResponsiveCommunityPortlet #documentation i {
    background: url(../images/welcome-book.png) no-repeat right top; /* orientation=rt */
    background: url(../images/welcome-book.png) no-repeat left top; /* orientation=lt */
    display: block;
    float: right; /* orientation=rt */
    float: left; /* orientation=lt */
    height: 3.5625em;
    margin-left: 0.9375em; /* orientation=rt */
    margin-right: 0.9375em; /* orientation=lt */
    margin-top: 0.125em;
    width: 4.5625em;
}

.gtnResponsiveCommunityPortlet #documentation h4 {
    color: #505050;
    font-size: 1.25em;
    margin-bottom: 0.5em;
    text-shadow: 0 0.125em 0 #fff;
    margin-right: 4.4em; /* orientation=rt */
    margin-left: 4.4em; /* orientation=lt */
}

.gtnResponsiveCommunityPortlet #documentation p {
    color: #7A7A7A;
    line-height: 1.4em;
    margin-bottom: 0;
    text-shadow: 0 .0666em 0 #FFFFFF;
    font-size: 0.9375em;
    margin-top: 0;
    margin-right: 6.28571428571429em; /* orientation=rt */
    margin-left: 6.28571428571429em; /* orientation=lt */
}


/* Conversation */

.gtnResponsiveCommunityPortlet #conversation {
    float: left; /* orientation=rt */
    float: right; /* orientation=lt */;
    margin-left: 2.5641%;
    margin-right: 2.5641%;
    width: 46.1538%;
}

.gtnResponsiveCommunityPortlet #conversation > div {border-bottom: 0.0625em solid #ccc;}

.gtnResponsiveCommunityPortlet #conversation .accordion-group {margin-bottom: 0.125em;}

.gtnResponsiveCommunityPortlet #conversation .accordion-toggle {
    border-color: #ccc ;
    border-style: solid none none none;
    border-width: 0.07142em 0 0 0;
    color: #333333;
    display: block;
    font-size: 0.875em;
    font-weight: bold;
    line-height: 2.14285em;
    padding: 0 3.57143%;
}

.gtnResponsiveCommunityPortlet #conversation .accordion-toggle i {
    margin-left: 0.35714em; /* orientation=rt */
    margin-right: 0.35714em; /* orientation=lt */
    width: 1.14285714285714em;
    height: 1.14285714285714em;
    vertical-align: middle;
}

.gtnResponsiveCommunityPortlet .icon-blog {
    background-image: url("../images/rss.png");
}

.gtnResponsiveCommunityPortlet .icon-vimeo {
    background-image: url("../images/vimeo.png");
}

.gtnResponsiveCommunityPortlet .icon-gray {
    background-repeat: no-repeat;
    width: 1.14285em;
    height: 1.14285em;
    display: inline-block;
}

.gtnResponsiveCommunityPortlet #blog-content-mobile,
.gtnResponsiveCommunityPortlet #vimeo-content-mobile {
    overflow: hidden;
    padding: 0 3.57143%;
}

.gtnResponsiveCommunityPortlet #conversation ul {
    margin: 0 0 0.3125em 0;
    padding: 0;
}

.gtnResponsiveCommunityPortlet #conversation ul li {
    margin-top: 0.3125em;
    margin-bottom: 0.625em;
    list-style: none;
}

.gtnResponsiveCommunityPortlet #conversation h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.875em;
    margin: 0;
    font-weight: normal;
    line-height: 1.3em;
}

.gtnResponsiveCommunityPortlet #conversation .info a {
    color: #666;
    font-size: 0.75em;
}

.gtnResponsiveCommunityPortlet #conversation a:hover {
    text-decoration: underline;
}

.gtnResponsiveCommunityPortlet #conversation .info > span + span {
    font-size: 0.75em;
    margin-right: 0.25em; /* orientation=rt */
    margin-left: 0.25em; /* orientation=lt */
    color:#999;
}

.gtnResponsiveCommunityPortlet #conversation .info > span + span:before {
    content: "·";
    margin-left: 0.25em; /* orientation=rt */
    margin-right: 0.25em; /* orientation=lt */
}

.gtnResponsiveCommunityPortlet #conversation #vimeo-content-mobile .info span {
    font-size: 0.75em;
    color:#999;
}

.gtnResponsiveCommunityPortlet #conversation .accordion-body > a {
    float: left; /* orientation=rt */
    float: right; /* orientation=lt */
    font-size: .8125em;
    margin-bottom: 0.38461em;
    line-height: 1.53846153846154em;
}

.gtnResponsiveCommunityPortlet #conversation #vimeo-content-mobile {
    display:none;
}

.gtnResponsiveCommunityPortlet .errorPane {
    margin: 0.3125em 1.25em 0.9375em 1.25em;
    color: #e33;
}

.gtnResponsiveCommunityPortlet #vimeo-content-mobile .errorPane a,
.gtnResponsiveCommunityPortlet .errorPane > a,
.gtnResponsiveCommunityPortlet .errorPane > p {
    font-size: 0.875em;
    margin: 0;
}


/* RWD */

@media only screen and (max-width: 64em) {

    .gtnResponsiveCommunityPortlet #willing {width: 61.1111%;}

    .gtnResponsiveCommunityPortlet #willing p {font-size: 0.9375em;}

    .gtnResponsiveCommunityPortlet #documentation {width: 57.6923%;}

    .gtnResponsiveCommunityPortlet #conversation {
        margin-right: 4.70085%; /* orientation=rt */
        margin-left: 4.70085%; /* orientation=lt */
        width: 29.0598%;
    }

    .gtnResponsiveCommunityPortlet #conversation ul li + li {display: none;}

}

@media only screen and (max-width: 37.5em) {

    .gtnResponsiveCommunityPortlet #willing,
    .gtnResponsiveCommunityPortlet #documentation,
    .gtnResponsiveCommunityPortlet #conversation {
        float: none;
        margin-left: 2.5641%;
        margin-right: 2.5641%;
        width: auto;
    }

    .gtnResponsiveCommunityPortlet #conversation {margin-top: 1.875em;}

    .gtnResponsiveCommunityPortlet #documentation {padding: 0.9375em;}

    .gtnResponsiveCommunityPortlet #documentation p {font-size: 0.875em;}
}

@media only screen and (max-width: 20em) {

    .gtnResponsiveCommunityPortlet h4 {font-size: 1.125em;}

    .gtnResponsiveFeaturesPortlet h2  {font-size: 1.125em;}

}

.gtnResponsiveCommunityPortlet #conversation .accordion-body > a.ajaxLoader {
    background-image: url("/eXoResources/skin/DefaultSkin/background/Loading.gif");
    background-repeat: no-repeat;
    width: 2.5em;
    height: 2.5em;
    margin: 1em auto;
    text-indent: 10em;
    overflow: hidden;
    display: block;
    float: none;
}
