/* ============== */
/* General Styles */
/* ============== */
* {
    margin:     0;
    padding:    0;
    text-decoration: none;
}

a{
    text-decoration: none;
}

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

img {
    border: 0;
}

html, body, form {
    height: 100%;
}

body {
    font:                       100%/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:                      #2d2f35;
    background-image:           url(images/default_bg.jpg?v=1);
    background-repeat:          no-repeat;
    background-position:        center top;
    background-attachment:      fixed;

    /*-webkit-background-size:    auto;
    -moz-background-size:       auto;
    -o-background-size:         auto;
    background-size:            auto;*/

    -webkit-background-size:    cover;
    -moz-background-size:       cover;
    -o-background-size:         cover;
    background-size:            cover;
}

body[style*="background-image"]{
    -webkit-background-size:    auto;
    -moz-background-size:       auto;
    -o-background-size:         auto;
    background-size:            auto;
    filter:                     inherit;
    -ms-filter:                 inherit;
}

input, textarea, buttom, select {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.goLeft{float: left;}
.goRight{float: right;}
.hidden{display: none!important;}

.clearFloats:after {
  content: "";
  display: table;
  clear: both;
}

/* ============= */
/* Layout Styles */
/* ============= */
.Wrapper {
	min-height: 100%;
	height:     auto !important;
	height:     100%;
	margin:     0 auto -101px; /* the bottom margin is the negative value of the footer's height */
    clear:      both;   
}

.Footer, .End-Wrapper {
    width:      100%;
	height:     101px; /* .push must be the same height as .footer */
    clear:      both;
}

.Footer {
    height:         101px;
    background:     #ffffff;
}

/* Wrapper-Header */
.Wrapper-Header-Shadow{
    position:   fixed;
    z-index:    0;
    width:      100%;
    height:     166px;
    clear:      both;
    background: url(images/menu-shadow.png) repeat-x left bottom;
}

.Wrapper-Header{
    position:   fixed;
    z-index:    10;
    width:      100%;
    clear:      both;
}

.Wrapper-Header .Wrapper-Header-BG{
    clear:      both;
    background: #ffffff;
}

.Wrapper-Header .Wrapper-Header-Relative{
    position: relative;
}

.Wrapper-Header .Wrapper-Header-BG .Logo{
    position:       absolute;
    left:           0;
    top:            0;
    z-index:        1;
    display:        table;
    width:          180px;
    background:     #ffffff;
}

.Wrapper-Header .Wrapper-Header-BG .Logo h1{
    display:        table-row;
    width:          100%;
    margin:         0;
    padding:        0;
}

.Wrapper-Header .Wrapper-Header-BG .Logo a{
    display:        table-cell;
    width:          90px;
    height:         116px;
    padding:        0 10px 0 0;
    vertical-align: middle;
}

.Wrapper-Header .Wrapper-Header-BG .Logo a img{
    width:  100%;
    max-height: 116px;
}

.Wrapper-Header .Wrapper-Header-BG .Logo span{
    display:        table-cell;
    width: 			110px;
    height:         116px;
    padding:        0 10px 0 0;
    vertical-align: middle;
    font-size:      10px;
    line-height:    17px;
    color:          #000000;
    letter-spacing: 1px;
	text-transform: uppercase;
}

.Wrapper-Header .Wrapper-Header-BG .Wrapper-Header-Inside{
    clear: both;
}

.Wrapper-Header .Header{
    position:   relative;
    clear:      both;
    height:     20px;
    padding:    0 52px 0 150px;
}

.Wrapper-Header .Navigation .fpf-logo{
    position:       absolute;
    right:          0;
    top:            -20px;
    width:          52px;
    height:         64px;
    background:     url(images/fpf-small-logo.gif) no-repeat center;
}

.Wrapper-Header .Navigation .fpf-logo span{
    display: none;
}

/* Search-Area */
.Wrapper-Header .Navigation .Toggle-Search{
    position:       absolute;
    right:          0;
    bottom:         0;
    cursor:         pointer;
    display:        block;
    clear:          both;
    width:          52px;
    height:         52px;
    background:     #242425 url(images/search.png) no-repeat center;
}

.touch .Wrapper-Header .Navigation .Toggle-Search:hover{
    background:     #242425 url(images/search.png) no-repeat center;
}

.Wrapper-Header .Navigation .Search-Panel{
    display:    none;
    position:   absolute;
    z-index:    89;
    right:      0;
    top:        96px;
    padding:    0 0 48px 0;
    font-size:  12px;
    color:      #9ca1a8;
    background: url(images/shadow.png) repeat-x left bottom;
}

.Search-Panel .Search-Control{
    clear:          both;
    padding:    0 6px 6px 6px;
    background: #242425;
}

.Search-Panel .Search-Control > span{
    display:    block!important;
    clear:      both;
    background: #ffffff;
}

.Search-Panel .Search-Control > span:after {
  content: "";
  display: table;
  clear: both;
}

.Search-Panel .Search-Control ul.searchSkinObjectPreview {
   display: none;
}

.Wrapper-Header .Navigation .Search-Panel .searchInputContainer{
    float:      left;
    width:      190px;
    margin:     0!important;
}

.Wrapper-Header .Navigation .Search-Panel .searchInputContainer a.dnnSearchBoxClearText{
    height: 38px !important;
}

.Wrapper-Header .Navigation .Search-Panel input.NormalTextBox {
    display:        block;
    clear:          both;
    width:          100%;
    height:         38px;
    line-height:    38px;
    text-indent:    10px;
    color:          #9ca1a8;
    background:     none;
    border:         0;
}

.Wrapper-Header .Navigation .Search-Panel .SearchButton {
    float:          right;
    display:        block;
    width:          38px;
    height:         38px;
    text-indent:    9999px;
    background:     url(Images/search-button.png) no-repeat center;
}

.Wrapper-Header .Navigation .Search-Panel .Search-Menu{
    clear:      both;
    padding:    10px 0;
    background: #242425;
}

.Wrapper-Header .Navigation .Search-Panel .Search-Menu ul{
    display:    block;
    clear:      both;
    list-style: none;
    margin:     0;
    padding:    0;
}

.Wrapper-Header .Navigation .Search-Panel .Search-Menu li{
    display:    block;
    clear:      both;
}

.Wrapper-Header .Navigation .Search-Panel .Search-Menu li a{
    display:    block;
    clear:      both;
    color:      #ffffff;
    padding:    10px 8px 10px 28px;
    font-weight: bold;
    background: url(images/arrow-right-gray.png) no-repeat 14px center;
}

.touch .Wrapper-Header .Navigation .Search-Panel .Search-Menu li a:hover{
    text-decoration: underline;
}

/* Wrapper-Main */
.Wrapper-Main {
    clear:      both;
    padding:    181px 0 0 0;
}

.Wrapper-SubNavigation{
    clear:      both;
    padding:    0;
}

.Center {
    max-width:  960px;
    margin:     0 auto;
    clear:      both;
}

.LoggedIn .Center {
    max-width:  982px;
}

.LoggedIn .Wrapper-Header {
    width: calc(100% - 80px);
}

.MatchCenter{
    max-width:  1040px;
    margin:     0 auto;
    clear:      both;
}

/* ms-banners */
.ms-banners {
    clear: both;
    background: url(images/MS-Banners.png) no-repeat center top;
}
.ms-banners.banner-en {
    background-image: url(images/MS-Banners-en.png);
}

.ms-banners .Center {
position: relative;
height: 925px;
}
.ms-banners.banner-en .Center {
height: 716px;
}

.ms-banners .Center .ms-banner {
    position: absolute;
}

.ms-banners .Center .ms-banner a {
    display: block;
    clear: both;
}

.ms-banners .Center .ms-banner .title {
    display: block;
    clear: both;
    font-size: 40px;
    color: #ffffff;
    font-weight: bold;
    line-height: 40px;
}

.ms-banners .Center .ms-banner .sub-title {
    display: block;
    clear: both;
    font-size: 14px;
    color: #ffffff;
    line-height: 16px;
    padding: 5px 0 0 0;
}

.ms-banners .magazine {
top: 110px;
left: 60px;
}

.ms-banners .internationals {
top: 105px;
left: 575px;
}

.ms-banners .fpf-tv {
top: 310px;
left: 60px;
}

.ms-banners .portuguese-team {
top: 490px;
left: 60px;
}
.ms-banners .portuguese-team .facebook-like {
    clear: both;
    margin: 10px 0 0 0;
    padding: 6px 0 0 60px;
    background: url(images/ms-facebook.png) no-repeat left top;
}

.ms-banners .banner-newsletter {
top: 710px;
left: 60px;
}
.ms-banners.banner-en .banner-newsletter {
    display: none;
}

/* End ms-banners */

.Wrapper-Main .Wrapper-Main-Footer{
    clear:                      both;
    padding:                    230px 0 0 0;
    background:                 url(images/footer-bg.png) no-repeat center top;
    -webkit-background-size:    cover;
    -moz-background-size:       cover;
    -o-background-size:         cover;
    background-size:            cover;
}

.Wrapper-Main-Footer .Navigation-Footer{
    font-weight: bold;
}

.Wrapper-Main-Footer .Navigation-Footer .menuTitle{
    display:    block;
    clear:      both;
    font-size:  25px;
    color:      #9ca1a8;
    height:     45px;
}

.Wrapper-Main-Footer .Navigation-Footer ul{
    display:    block;
    clear:      both;
    list-style: none;
    margin:     0;
}

.Wrapper-Main-Footer .Navigation-Footer > ul > li{
    float:      left;
    max-width:  160px;
    padding:    0 0 0 20px;
}

.Wrapper-Main-Footer .Navigation-Footer > ul > li:first-child{
    padding: 0;
}

.Wrapper-Main-Footer .Navigation-Footer > ul > li > a,
.Wrapper-Main-Footer .Navigation-Footer > ul > li > .subMenuTitle{
    display:    block;
    clear:      both;
    font-size:  18px;
    color:      #000000;
}

.Wrapper-Main-Footer .Navigation-Footer > ul > li > ul{
    padding: 10px 0 0 0;
}

.Wrapper-Main-Footer .Navigation-Footer > ul > li > ul > li{
    display:    block;
    clear:      both;
    padding:    0 0 5px 0;
}

.Wrapper-Main-Footer .Navigation-Footer > ul > li > ul > li a,
.Wrapper-Main-Footer .Navigation-Footer > ul > li > ul > li .subMenuTitle{
    display:            block;
    clear:              both;
    font-size:          12px;
    color:              #9ca1a8;
}

.touch .Wrapper-Main-Footer .Navigation-Footer > ul > li > ul > li a:hover{
    color:              #000000;
}

.Wrapper-Main-Footer .Navigation-Footer > ul > li.contacts-fpf > ul > li,
.Wrapper-Main-Footer .Navigation-Footer > ul > li.contacts-fpf > ul > li a{
    color:       #000000;
    font-weight: bold;
}

.Wrapper-Main-Footer .Navigation-Footer > ul > li.contacts-fpf > ul > li a:hover{
    color: #9ca1a8;
}



/* Footer */
.footer-separator{
    clear:          both;
    padding:        0 60px 50px 60px;
    margin:         0 0 30px 0;
    border-bottom:  1px solid #ebeef3;
}

.Footer .Top{
    position: relative;
    padding: 10px 60px 50px 60px;
    margin: 0;
}

.Footer .Top .federacao{
    float:      left;
    width:      22px;
    height:     40px;
    background: url(images/federacao-logo.png) no-repeat center top;
}

.Footer .Top .fifa{
    float:      left;
    width:      52px;
    height:     40px;
    margin:    0 0 0 15px;
    background: url(images/fifa-logo.png) no-repeat center top;
}

.Footer .Top .uefa{
    float:      left;
    width:      28px;
    height:     40px;
    margin:    0 0 0 15px;
    background: url(images/uefa-logo.png) no-repeat center top;
}

.Footer .Top .copy{
    float:      left;
    font-size:  14px;
    color:      #000000;
    padding:    12px 0 0 48px;
    font-weight: bold;
}

.Footer .Top .fpf-logo{
    position:   absolute;
    top:        0;
    right:      0;
    width:      52px;
    height:     64px;
    background: url(images/fpf-small-logo.gif) no-repeat center;
}

.Footer .Top .fpf-logo span{
    display: none;
}

.touch .Footer .Top .termsconditions:hover{
	color: #000000;
}

/* ============ */
/* Panes Styles */
/* ============ */
.paint-pane{
    clear:      both;
    margin:     0 0 40px 0;
    background: #ebeef3;
}

.special-paint-pane{
    clear:      both;
    margin:     0 0 40px 0;
    padding:    20px 0 0 0;
    background: #ebeef3;
}

.contentPane{
    min-height: 150px;
}

.contentPane,
.sponsorsPane,
.micrositesPane,
.brandingPane,
.otherNewsPane,
.newsPane,
.article-wrapper {
    width: 100%;
    clear: both;
}


.brandingPane{
    text-align: center;
}

.brandingPane img{
    max-width: 960px;
}

.article-wrapper{
    position: relative;
}

.article-wrapper #PrevButton{
    display:        none;
    position:       absolute;
    left:           -60px;
    width:          60px;
    height:         60px;
    text-indent:    -999px;
    overflow:       hidden;
    background: url(images/PrevButton.gif) no-repeat 0 top;
}

.touch .article-wrapper #PrevButton:hover{
    background-position: -60px top;
}

.article-wrapper #NextButton{
    display:        none;
    position:       absolute;
    right:          -60px;
    width:          60px;
    height:         60px;
    text-indent:    -999px;
    overflow:       hidden;
    background: url(images/NextButton.gif) no-repeat 0 top;
}

.touch .article-wrapper #NextButton:hover{
    background-position: -60px top;
}


.article-wrapper .contentPane{
    float: left;
    clear: none;
    width: 600px;
}

.article-wrapper .otherNewsPane{
    float:      left;
    clear:      none;
    width:      360px;
    background: #ebeef3;
}

/* ============== */
/* Modules Styles */
/* ============== */
/* Navigation */
.Navigation{
    position:       relative;
    clear:          both;
    height:         96px;
    background:     url(images/mdd_border.gif) repeat-x left bottom;
}

.SubNavigation{
    position:       relative;
    clear:          both;
}

.SubNavigation-BG{
    background: url(images/dark-menu-bg.png) repeat left top;
}

/* breadCrumb */
.breadCrumb {
    position:       relative;
    display:        block;
    clear:          both;
    height:         50px;
    font-size:      11px;
    color:          #9e9fa4;
    text-transform: uppercase;
    letter-spacing: 0;
    padding:        20px 0 0 60px;
}

.breadCrumb .breadCrumb-wrapper{
    clear: both;
}

.breadCrumb .breadCrumb-wrapper span{
    padding: 0 5px;
    color:   #000000;
}

.breadCrumb .breadCrumb-wrapper a{
    cursor: 			pointer;
	color:              #9e9fa4;
}

.breadCrumb .breadCrumb-wrapper a.breadCrumbSpan:last-child{
    cursor: 			text!important;
    color:              #000000;
}

.touch .breadCrumb .breadCrumb-wrapper a:hover{
    color: #000000;
}

.breadCrumb #BackButton{
    display:        none;
    position:       absolute;
    left:           0;
    top:            0;
    width:          50px;
    height:         40px;
    text-indent:    -999px;
    overflow:       hidden;
    background: url(images/back-button.gif) no-repeat 0 top;
}

.touch .breadCrumb #BackButton:hover{
    background-position: -50px top;
}

/* end breadCrumb */

/* Buttons */
.green-button {
    cursor:                 pointer;
    white-space:            nowrap;
    display:                inline-block;
    zoom:                   1;
    *display:               inline;
    color:                  #ffffff!important;
    font-size:              15px;
    line-height:            35px;
    padding:                0 30px;
    margin:                 0;
	background:             #7fb124;
    border:                 1px solid #4b9c14;
    -webkit-border-radius:  3px;
    -moz-border-radius:     3px;
    border-radius:          3px;
}

.touch .green-button:hover {
	border:     1px solid #777777;
    background: #656c72;
}


/* Modal Pane */
.modalPane
{
    display: block;
    clear: both;
    padding: 50px 80px;
}

/* Modal */
.hidden, .hidden[hidden] 
{
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    margin: -1px;
    border: none;
    padding: 0;
    width: 1px;
    height: 1px;
}
.modal{position: fixed;left: 0;top: 0;right: auto;border: none;width: 100%;height: 100%;background-color: rgba(0,0,0, 0.60);padding: 2px;z-index: 50;}

.modal .wrapper
{
    max-width: 484px;
    max-height: 90%;
    margin: 5% auto 0 auto;
    padding: 0;
}

.modal .modal-header
{
    display: block;
    clear: both;
    position: relative;
}

.modal .modal-header .button.close
{
    cursor: pointer;
    position: absolute;
    z-index: 1;
    top: 35px;
    right: 35px;
    width: 22px;
    height: 19px;
    color: #000;
    background: url(images/btn-modal-close.png) no-repeat center;
}

.modal .modal-content{
    display: block;
    clear: both;
    text-align: left;
    background: url(images/modal-filler.png) repeat-y left top;
}

.modal .modal-bottom {
    display: block;
    clear: both;
}

.modal-content .modal-title {
    display: block;
    clear: both;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 32px;
    color: #000000;
    margin: 0 0 20px 0;
}

.modal-content .modal-subtitle {
    display: block;
    clear: both;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
    color: #f1271a;
    margin: 0;
}

.modal-content .modal-text {
    display: block;
    clear: both;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    color: #000000;
}

.modal-content .modal-buttons {
    display: block;
    clear: both;
    margin: 20px 0 10px 0;
}

.modal-content .modal-buttons:after {
  content: "";
  display: table;
  clear: both;
}


.modal-content .modal-buttons .button {
    cursor: pointer;
    display: block;
    width: 150px;
    padding: 15px 0;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
}

.modal-content .modal-buttons .button.green {
    float: left;
    color: #ffffff;
    background: #b9e22e;
}

.modal-content .modal-buttons .button.green:hover 
{
    background: #9bcc00;
}

.modal-content .modal-buttons .button.gray 
{
    float: right;
    color: #9ca1a8;
    background: #ebeef3;
}

.modal-content .modal-buttons .button.gray:hover
{
    color: #ffffff;
    background: #9ca1a8;
}

.modal-content .modal-links
{
    display: block;
    clear: both;
}

.modal-content .modal-links a {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #000000;
    font-weight: bold;
    text-decoration: underline;
}

.modal-content .modal-links a:hover {
    text-decoration: none;
}



/* ================================ */
/* Override Inheritance default.css */
/* ================================ */
/* clearfix propertie */
.Container-Standard {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

.Container-Standard:after {
  content:  "";
  display:  table;
  clear:    both;
}

.DnnModule {
    position: static;
}

.dnnEditState .DnnModule {
    position:   relative;
    clear:      both;
}

.searchInputContainer a.dnnSearchBoxClearText {
    top: -6px;
}

.dnnLogin{
    padding: 20px 0;
    background: #ffffff;
}

.dnnFormItem > .selectize-control,
.dnnFormItem select {
    display: inline-block!important;
    width: 47%;
    margin-bottom: 18px;
    max-width: 445px;
}

/* Navigation-Tools */
.Navigation-Tools{
    float: right;
}

/* .loginGroup */
.loginGroup {
	float:          left;
    padding:        0;
    border-left:    1px solid #ffffff;
}

.loginGroup a{
    float:              left;
    line-height:        20px;
    font-size:          12px;
    color:              #ffffff;
    text-transform:     lowercase;
    text-align:         center;
    background:         #ff0000;
    padding:            0 5px;
}

.touch .loginGroup a:hover{
    background:         #6f0000;
}

/* ============ */
/* Clean Styles */
/* ============ */
.Normal{
    color:          inherit;
    font-size:      inherit;
    line-height:    inherit;
    font-weight:    inherit;
}

.cleanStyle {
    line-height:    18px;
}

.cleanStyle img{
    max-width: 100%;
}

.cleanStyle h1, .cleanStyle h2, .cleanStyle h4, .cleanStyle h5, .cleanStyle h6 {line-height: 1; margin: 0 0 20px 0;}
.cleanStyle h3{
    line-height: 1; margin: 0 0 10px 0;
}

.cleanStyle h1 {font-size:30px; color: #000000;}
.cleanStyle h2 {font-size:20px; color: #9ca1a8;}
.cleanStyle h3 {font-size:18px; color: #000000;}
.cleanStyle h4 {font-size:13px; color: #9ca1a8;}
.cleanStyle h5 {font-size:10px; color: #000000; text-transform: uppercase;}
.cleanStyle h6 {font-size:10px; color: #9ca1a8; text-transform: uppercase;}
.cleanStyle strong{font-weight: 700;}

/* anchor style */
.cleanStyle a, .cleanStyle a:active {color:#9bcc00;}
.touch .cleanStyle a:hover{color:#000000;}

/* paragraph style */
.cleanStyle p { margin: 0 0 20px 0;}

hr {clear: both; height: 1px; border: 0; background: #cdd2d7; line-height: 1px; margin: 20px 0; float: left; width: 100%}

/* UnOrdered List */
.cleanStyle ul li {list-style-type: disc; margin-bottom: 8px; vertical-align: top;}
.cleanStyle ul ul {margin-top: 8px; margin-left: 30px;}
.cleanStyle ul ul li {list-style-type: circle;}
.cleanStyle ul ul ul li {list-style-type: square;}

/* Ordered List */
.cleanStyle ol li {list-style-type: decimal; margin-bottom: 8px; vertical-align: top;}
.cleanStyle ol ol {margin-top: 8px; margin-left: 30px;}
.cleanStyle ol ol li {list-style-type: lower-roman;}
.cleanStyle ol ol ol li {list-style-type: lower-alpha;}
.cleanStyle ol ul li {list-style-type: lower-roman;}

.cleanStyle ul, .cleanStyle ol{padding: 0 0 20px 20px;}

/* table style */
/* Default Table Style */
.cleanStyle table {width: 100%; margin: 0 0 20px 0; border-collapse: collapse; border-spacing: 0; background-color: transparent;}

.cleanStyle table th, 
.cleanStyle table td {text-align: center; height: 40px; padding: 0 20px; vertical-align: middle;}

.cleanStyle table thead th {font-size: 10px; color: #949a9f; background-color: #e0e2e5; font-family: 'Roboto';}

.cleanStyle table tbody th,
.cleanStyle table tbody td {font-size: 14px; color: #000000; border-bottom: solid 1px #cdd2d7;}