/*
    Document   : resize
    Created on : 20-Nov-2012, 13:33:20
    Author     : matthew.gorton1
    Description:
        Responsive styles for resizing page to fit smaller device screens.
*/
/* Less than full width page */
@media only screen and (max-width : 950px),
only screen and (max-device-width : 950px) {

  /* Tab box */
  div.box ul.tabs li span {
    display: none;
  }

  div.box ul.tabs li span.icon {
    display: block;
  }

  div.box div.content div.column h3 span {
    display: none;
  }

  /* Header */
  div#header div.user {
    line-height: 40px;
  }

  div#header div.user p span.resize {
    display: none;
  }

  /* Navigation */
  div#nav {
    height: 26px;
    /*background: url("/euf/assets/images_fasthosts/nav_bg_new.png") repeat-x scroll 0 0 #FFFFFF;*/
  }

  div#nav div.wrapper ul li a {
    height: 26px;
    line-height: 26px;
    font-size: 12px;
  }

  div#nav div.wrapper ul li a span {
    display: none;
  }

  div#nav div.wrapper ul li.home span {
    display: block;
    background-position: center -115px;
  }

  /* Content */
  div.content {
    float: left;
    width: 100%;
  }

  /* Sideboxes */
  div.sidebar {
    float: left;
    padding: 2%;
    width: 96%;
  }

  /* Search */
  div.filter form div.display ul li label span,
  div#search div#article_search label span {
    display: none;
  }

  /* PDF Guides page */
  h1.pdf a {
    display: none;
  }

  /* Welcome centre thumbs */
  div.thumbs div {
    width: 32%;
    margin: 0px 1% 20px 0px;
  }

  div.thumbs div.even {
    float: left;
  }

  div.thumbs div a span {
    font-size: 15px;
  }

  /* Meet the team */
  div.team-member div.about,
  div.team-member span.quote {
    float: left;
    width: 64%;
  }

  div.department a.banner {
    display: none;
  }

  /* Your support site */
  div.three_columns div.left,
  div.three_columns div.right {
    width: 27%;
  }

  div.three_columns div.middle {
    width: 39%
  }

  /* Have your say page */
  div.right {
    float: left;
    width: 100%;
  }

  /* Welcome centre */
  div.welcome-intro {
    background-position: right top;
  }

  a.welcomebutton.right {
    float: left;
  }

  /* Domain health report */
  div#healthreportintro {
    margin-bottom: 20px;
  }
}

/* Mobile site */
@media only screen and (max-width : 770px),
only screen and (max-device-width : 770px) {

  /* General */
  h1, h2, h3, h4 {
    margin: 10px 0px;
  }

  h1 {
    margin-top: 0px;
    font-size: 22px;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 15px;
  }

  h4 {
    font-size: 13px;
    font-weight: bold;
  }

  body {
    background-position: 0px -40px;
  }

  /* Header */
  div#header div.wrapper {
    padding: 0px 1%;
  }

  div#header a.logo {
    background-image: url("https://help.fasthosts.co.uk/euf/assets/images_fasthosts/fh-white.png");
    background-size: 180px 32px;
    width: 180px;
    height: 42px;
    top: 5px;
  }

  div#header div.user {
    float: right;
    top: 0px;
    padding-right: 52px;
    line-height: 24px;
  }

  div#header div.user p span.resize {
    display: none;
  }

  div#header div.user p a {
    display: inline;
  }

  div#header div.selectmenu {
    display: block;
  }

  /* Navigation */
  div#nav {
    display: none;
    height: auto;
    background-image: none;
  }

  /*margin-bottom: 10px; */
  /* Uncomment if no header background */
  ul#navtabs {
    display: none;
  }

  div#nav.visible {
    display: block;
  }

  div#nav div.wrapper ul {
    padding: 0px;
    width: 100%;
  }

  div#nav div.wrapper ul li {
    width: 50%;
  }

  div#nav div.wrapper ul li.no_mobile {
    display: none;
  }

  div#nav div.wrapper ul li.odd.last {
    width: 100%;
  }

  div#nav div.wrapper ul li.selected {
    background: linear-gradient(to bottom, #8F9AB0 0%, #313B54 100%) repeat scroll 0 0 transparent;
  }

  div#nav div.wrapper ul li a, div#nav div.wrapper ul li a:hover {
    /*border-bottom: solid 1px #0A202F;

		border-top: solid 1px #3d5565;
		*/
    border-bottom: solid 0px #999999;
    border-top: solid 1px #cccccc;
    height: 28px;
    line-height: 28px;
  }

  div#nav div.wrapper ul li.selected a {
    background: #09f;
    border-color: #ccc;
  }

  div#nav div.wrapper ul li a:active {
    background: #144A91;
    color: #ffffff;
  }

  div#nav div.wrapper ul li a.first {
    border-top: 0px;
  }

  div#nav div.wrapper ul li a.last {
    border-bottom: 0px;
  }

  div#nav div.wrapper ul li.odd a {
    /*background: url("/euf/assets/images_fasthosts/nav_bg_new.png") repeat-x scroll 0 0 #FFFFFF;*/
    border-left: 0px;
  }

  div#nav div.wrapper ul li.even a {
    border-right: 0px;
    /*background: url("/euf/assets/images_fasthosts/nav_bg_new.png") repeat-x scroll 0 0 #FFFFFF;*/
  }

  div#nav div.wrapper ul li:hover {
    background-image: none;
  }

  div#nav div.wrapper ul li:hover ul {
    display: none;
    visibility: hidden;
  }

  div#nav div.wrapper ul li.home span {
    text-indent: 0px;
    width: auto;
    /*background-position: 0px -114px;

		padding-left: 18px;
		*/
  }

  div#nav div.wrapper ul li a span.status {
    background: none transparent;
    position: static;
    margin-left: 5px;
    top: auto;
    right: auto;
  }

  /* Page */
  div#page div.wrapper {
    padding-top: 0px;
  }

  /* Search / product box */
  div#search {
    margin-top: 10px;
    /* Remove if no header background */
    margin-bottom: 30px;
  }

  div#search div#article_search {
    width: 100%;
    padding: 0px;
  }

  div#search div#article_search label {
    display: none;
  }

  div#search div#product_search {
    display: none;
  }

  div#search div#article_search {
    background: #ffffff;
  }

  div#search div#article_search input[type="text"] {
    float: left;
    width: 97.6%;
  }

  div.box div.content div.column {
    width: 100%;
    padding: 20px 0px 0px 0px;
  }

  div.box div.content div.column h3 {
    margin: 10px 2% 0px 2%;
  }

  div.box div.content div.column.first {
    padding: 0px;
  }

  /* Advanced search options */
  div#search div.mainSearchBoxAdvancedNew {
    width: 100%;
    padding: 1% 0%;
  }

  /* Footer */
  div#footer {
    /*background-image: none;*/
  }

  div#footer ul {
    display: none;
  }

  /* Tab boxes */
  div.boxes {
    margin: 0px;
  }

  div.boxes div.box:after {
    display: none;
  }

  div.box ul.tabs li span.icon {
    display: none;
  }

  div.box, div.box.one {
    width: 96%;
    padding: 2%;
    margin: 10px 0px 0px 0px;
  }

  div.box.one ul.tabs li a {
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    font-weight: normal;
  }

  div.box.one ul.tabs li a img {
    display: none;
  }

  /* Account overview */
  #rn_SearchControls .rn_KeywordText label {
    display: none;
  }

  /* Article page */
  div.content.article h1 {
    padding: 0px;
  }

  div.content.article h4 {
    margin-bottom: 10px;
  }

  div.content.article ul.sharing {
    position: static;
    float: left;
    width: 100%;
    margin: 0px 0px 20px 0px;
  }

  div.rating form textarea {
    width: 96.5%;
  }

  /* Time / pre-requisites box */
  #rn_AnswerText div.time div {
    width: 96%;
  }

  /* Search results */
  div.filter {
    margin-top: 0px;
  }

  div.filter form div.product,
  div.filter form div.display {
    width: 96%;
    padding: 2%;
  }

  div.filter form div.display {
    padding-top: 0px;
  }

  div.filter form div.display span {
    width: 22%;
  }

  div.filter form div.display ul {
    padding-left: 1%;
  }

  div.filter form div.buttons {
    padding-bottom: 3%;
  }

  /* Article list */
  div.article_list ul li h3 span {
    top: 100%;
    margin-top: 5px;
  }

  /* Welcome centre thumbs */
  div.thumbs div {
    width: 49%;
    margin-left: 0px;
    margin-bottom: 3%;
  }

  /*div.thumbs div.odd {

		margin-right: 2%;


	}
	*/
  /* Domain health report */
  div.filter form div.doctor {
    display: none;
  }

  div.content.dhr p {
    float: none;
    width: 100%;
  }

  div.filter form div.dhr label {
    width: 100%;
    height: auto;
    line-height: normal;
  }

  div.filter form div.dhr .textbox {
    float: left;
    width: 96%;
  }

  #dhr-results ul.dhr li a.title {
    background-image: none;
    width: 98%;
    padding-right: 2%;
  }

  #dhr-results ul.dhr li a.title span {
    font-size: 11px;
    padding-left: 2%;
    padding-right: 6%;
  }

  #dhr-results ul.dhr li div {
    padding: 1%;
    width: 96%;
  }

  /* Meet the team */
  div.team-member img,
  div.team-member.odd img,
  div.team-member.even img {
    float: left;
    width: 100%;
    margin-bottom: 10px;
  }

  div.team-member h3,
  div.team-member div.about,
  div.team-member span.quote {
    float: left;
    width: 100%;
  }

  div.team-member h3 span {
    display: block;
    padding: 0px;
    font-size: 11px;
  }

  ul.departments li {
    width: 100%;
  }

  ul.departments li a {
    padding: 2%;
    width: 96%;
    border-top: solid 1px #ffffff;
    border-bottom: solid 1px #cccccc;
  }

  ul.departments li.selected a {
    border-bottom: solid 1px #12b9ff;
  }

  ul.departments li a img {
    float: left;
    height: 40px;
    width: 40px;
  }

  ul.departments li a span {
    float: left;
    height: 40px;
    padding: 0px 2%;
    font-size: 11px;
  }

  ul.departments li.selected a:after {
    display: none;
  }

  /* Your support site */
  div.two_columns div.left,
  div.two_columns div.right,
  div.three_columns div.left,
  div.three_columns div.middle,
  div.three_columns div.right,
  div.three_columns.images div.left,
  div.three_columns.images div.middle,
  div.three_columns.images div.right {
    width: 100%;
    margin-right: 0%;
  }

  div.two_columns div.right span,
  div.three_columns div.left span,
  div.three_columns div.middle span,
  div.three_columns div.right span,
  div.features div ul li {
    font-size: 12px;
  }

  div.two_columns div.right span strong,
  div.three_columns div.left span strong,
  div.three_columns div.middle span strong,
  div.three_columns div.right span strong,
  div.features div ul li strong {
    font-size: 13px;
  }

  div.features div.left, div.features div.right {
    float: left;
    width: 100%;
  }

  /* Welcome centre */
  div.welcome-intro {
    background-image: none;
  }

  div.welcome-intro p {
    max-width: none;
  }

  /* Old style accordion */
  div.accordion h2,
  div.accordian h2,
  div.pledge h2 {
    font-size: 12px;
  }

  div.accordion h2 a span,
  div.accordian h2 a span,
  div.pledge h2 a span {
    background-position: right 3px;
  }

  div.accordion h2 a span em,
  div.accordian h2 a span em {
    font-size: 10px;
  }

  div.accordion h2 a:hover span,
  div.accordian h2 a:hover span,
  div.pledge h2 a:hover span {
    background-position: right -20px;
  }

  div.accordion h2.open a span,
  div.accordian h2.open a span,
  div.pledge h2.open a span {
    background-position: right -41px;
  }

  div.accordion h2.open a:hover span,
  div.accordian h2.open a:hover span,
  div.pledge h2.open a:hover span {
    background-position: right -65px;
  }

  /* Charter */
  table.pledge {
    display: none;
  }

  /* Finding help */
  .findinghelp a,
  .findinghelp a#step2,
  .findinghelp a#step3,
  .findinghelp div#step3,
  .findinghelp div#step4,
  .findinghelp a,
  .findinghelp div {
    padding: 2%;
    background-image: none;
  }

  .findinghelp a h2,
  .findinghelp div h2 {
    font-size: 16px;
  }

  .findinghelp.contact {
    padding-bottom: 0px;
  }

  .findinghelpthumbs div {
    float: left;
    width: 100%;
    margin: 10px 0px 0px 0px;
  }

  .findinghelpthumbs.two div {
    width: 49%;
    margin: 10px 0px 0px 2%;
  }

  .findinghelpthumbs div.first,
  .findinghelpthumbs.three div.first,
  .findinghelpthumbs.two div.first {
    margin: 10px 0px 0px 0px;
  }

  .findinghelpthumbs div a {
    background-image: none;
  }

  .findinghelpthumbs div a h3 {
    margin: 0px;
    font-size: 14px;
  }

  /* Marketing pages */
  div.white-label-layout {
    width: 100%;
  }

  /* Popup dialogue */
  .popup, .yui-dialog {
    position: absolute;
    border: 0px;
    border-radius: 20px;
  }

  /* Chat */
  /*.chatintro {

		width: 100%;


	}

	.chatimg {

		display: none;


	}

	.rn_ChatForm {

		width: 100%;

		padding-top: 10px;


	}

	.openinghours {

		float: left;

		width: 100%;

		padding-bottom: 20px;


	}
	*/
  .rn_Live {
    display: none;
  }

  .rn_Chat_Mobile {
    display: block;
  }

  div#marketingbox, div#RSSbox {
    display: none;
  }

  div.sysstatus ul li:first-child {
    display: block;
  }

  /* System status */
  #systemstatusbuttons {
    background-image: none;
  }

  /* Domain health report */
  div#healthreportintro {
    background: none;
  }

  div#healthreportintro h1,
  div#healthreportintro p {
    max-width: none;
  }

  /* Contact page */
  .chatbanner {
    display: none;
  }

  .contactForm .ContactFormHeader h3 {
    font-size: 13px;
  }

  .contactForm .ContactFormMain,
  .contactForm .ContactFormMain.textarea {
    height: auto;
    overflow: visible;
  }

  .contactForm .ContactFormMain label,
  .contactForm .ContactFormMain .label,
  .contactForm .textarea label {
    width: 96%;
    height: 20px;
    text-align: left;
  }

  .contactForm .ContactFormMain .rn_FileAttachmentUpload label {
    display: none;
  }

  .rn_DisplayButton,
  .contactForm .ContactFormMain textarea,
  .contactForm .ContactFormMain input,
  .contactForm .ContactFormMain select {
    width: 75%;
  }

  .rn_FileAttachmentUpload ul {
    padding: 2% 2% 2% 6%;
    width: 92%;
    margin-top: 5px;
  }

  #contactTelNumberMobile {
    display: block;
  }

  p.contactTelNumber {
    display: none;
  }

  #contactTelNumberMobile p.contactTelNumber {
    display: block;
  }

  /* Articles and guides */
  .guidesbanner {
    display: none;
  }

  .rn_ResultInfo {
    position: static;
    width: 100%;
  }

  .rn_ResultInfo .rn_Results {
    float: left;
  }

  .rn_Paginator {
    font-size: 12px;
    margin-top: 10px;
  }

  /* Articles page */
  #rn_mostpopular .mainContentBox .mainContentHeader h2 {
    font-size: 14px;
  }

  #rn_mostpopular .mainContentBox h3 {
    font-size: 12px;
  }

  #rn_mostpopular .mainContentBox .mainContentBox-leftContent {
    width: 96%;
  }

  #rn_mostpopular .mainContentBox .mainContentBox-rightContent {
    display: none;
  }

  /* Categories popup list */
  div.additionalArticleDetails div.additionalDetailsContentBox,
  div.additionalArticleDetails div.ADCBLast {
    float: left;
    width: 100%;
  }

  div.additionalArticleDetails div.additionalDetailsContentBox {
    padding-bottom: 20px;
  }

  /* Guides page */
  div.guidesLeftCol,
  div.guidesRightCol {
    width: 100%;
  }

  div.masterclass ul li {
    float: none;
    width: auto;
    padding-left: 40px;
  }

  /* Meet the team */
  div.meetteamintro div.intro {
    width: 100%;
    padding: 0px;
  }

  div.meetteamintro div.image {
    width: 100%;
    padding: 0px;
    margin-top: 10px;
  }

  .welcomeimagetable img {
    width: 50%;
    height: 50%;
  }

  ul.teamthumbs li {
    width: 50%;
  }

  ul.teamthumbs li a img {
    width: 25%;
    max-width: 100%;
  }

  ul.teamthumbs li a span {
    clear: none;
    width: 70%;
    padding: 0px 0px 0px 2%;
  }

  ul.teamthumbs li a:after {
    display: none;
  }
}

/* Mobile site (smaller) */
@media only screen and (max-width : 442px),
only screen and (max-device-width : 442px) {

  /* Navigation */
  div#nav div.wrapper ul li {
    width: 100%;
  }

  div#nav div.wrapper ul li a {
    border-left: 0px;
    border-right: 0px;
  }

  /* Welcome centre thumbs */
  div.thumbs div {
    width: 100%;
    height: auto;
    background-image: none;
    border-bottom: 0px;
  }

  div.thumbs div.odd {
    margin-right: 0%;
  }

  div.thumbs div a, div.thumbs div a:hover,
  div.thumbs div.welcome a,
  div.thumbs div.articles a,
  div.thumbs div.guides a,
  div.thumbs div.forums a,
  div.thumbs div.dhr a,
  div.thumbs div.contact a,
  div.thumbs div.resources a,
  div.thumbs div.support a,
  div.thumbs div.support a,
  div.thumbs div.scope a,
  div.thumbs div.team a,
  div.thumbs div.say a,
  div.thumbs div.community a,
  div.thumbs div.help a,
  div.thumbs div.training a,
  div.thumbs div.webinars a,
  div.thumbs div.econsultancy a,
  div.thumbs div.blog a,
  div.thumbs div.rss a,
  div.thumbs div.twitter a,
  div.thumbs div.facebook a,
  div.thumbs div.linkedin a {
    background: none transparent;
    border: 0px;
  }

  /* Domain health report tables */
  #dhr-results ul.dhr li div table tr th,
  #dhr-results ul.dhr li div table tr td {
    font-size: 9px;
    padding: 2px 0px;
  }

  /* Finding help */
  .findinghelpthumbs div {
    width: 100%;
    margin: 10px 0px 0px 0px;
  }

  /* Meet the team */
  ul.teamthumbs li {
    width: 100%;
  }
}