﻿/*
 * HTML5 ✰ Boilerplate - uses normalize.css instead of reset.css
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 */

/* ==|== primary styles =====================================================
   Author: NXT Digital Solutions
   ========================================================================== */

@font-face {
    font-family: 'MuseoSlab500';
    src: url('/Assets/Fonts/Museo_Slab_500-webfont.eot');
    src: url('/Assets/Fonts/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Assets/Fonts/Museo_Slab_500-webfont.woff') format('woff'),
         url('/Assets/Fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
         url('/Assets/Fonts/Museo_Slab_500-webfont.svg#MuseoSlab500') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* TODO: Apply background to body */
body {  }

.h1Link { font-family: 'MuseoSlab500', Georgia, serif; text-decoration:none; }

#headerBarWrapper { background:#004B92; }
#headerBar { }
#headerBar .icons { float:right; margin:7px 0 7px 0; }
#headerBar .icons .icon { float:left; width:16px; height:16px; margin-right:5px; text-decoration:none; margin-top: 3px; }
#headerBar .icons .twitter { background: url(/Assets/Images/twitter.png) no-repeat; }
#headerBar .icons .facebook { background: url(/Assets/Images/facebook.png) no-repeat; }

#headerBar .icons .langSelect { border:1px solid #0394E7; background:#ffffff; width:172px; position: absolute; font-size:0.9em; margin:0; list-style:none; padding:0; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.2); }
#headerBar .icons .langSelect a { display:block; padding:4px 0 4px 37px; color:#0394E7; text-decoration:none; background-repeat:no-repeat; background-position:10px center; }

#selectedLanguage { float:left; text-decoration:none; color:#ffffff; padding:3px 0 0 38px; background-repeat:no-repeat; background-position:11px center; width:137px; background-color:#0376C5; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; height:18px; margin-right: 12px; font-size: 0.9em; margin-left:2px; }

#selectedLanguage span { display:block; background: url(/Assets/Images/white-down-arrow.png) no-repeat right center; margin-right: 9px; }

.english { background-image: url(/Assets/Images/icon-english.gif); }
.spanish { background-image: url(/Assets/Images/icon-spanish.gif); }
.chinese { background-image: url(/Assets/Images/icon-chinese.gif); }
.hindi { background-image: url(/Assets/Images/icon-hindi.gif); }
.portuguese { background-image: url(/Assets/Images/icon-portugues.gif); }
.german { background-image: url(/Assets/Images/icon-deutsch.gif); }
.turkish { background-image: url(/Assets/Images/icon-turkish.gif); }
.russian { background-image: url(/Assets/Images/icon-russian.gif); }
.french { background-image: url(/Assets/Images/icon-french.gif); }
.korean { background-image: url(/Assets/Images/icon-korea.gif); }
.japanese { background-image: url(/Assets/Images/icon-japanese.gif); }

#headerBar .icons .langSelect .selected { }
#headerBar .icons .langSelect .selected a { background-color:#0394E7; color:#ffffff; }
#headerBar .icons .langSelect li a:hover { background-color:#0394E7; color:#ffffff; }

/* Header */
[role="banner"] { margin-bottom: 0; background: #fff; }

/* Main Nav */
[role="navigation"] { float:right; margin:2em 0 0 0; }
[role="navigation"] ul { background: url(/Assets/Images/main-nav-left.png) no-repeat; padding-left:30px; }
[role="navigation"] ul li { background: url(/Assets/Images/main-nav.png); padding-left:3px; }
[role="navigation"] ul li.selected { background: url(/Assets/Images/main-nav-left-sel.png); padding-left:3px; }
[role="navigation"] ul li a { color:#ffffff; height:33px; padding:9px 18px 0 15px; }
[role="navigation"] ul li.selected a { background: url(/Assets/Images/main-nav-right-sel.png) right 0px; }
[role="navigation"] ul li.end { background: url(/Assets/Images/main-nav-right.png) right 0; width:30px; height:42px; padding-left:0px; }

#bluePanelWrapper { background: url(/Assets/Images/panel-repeat.gif) repeat-x; }
#bluePanel { background: url(/Assets/Images/panel-bg.gif) no-repeat; height:355px; }
#bluePanel .left { float:left; width:510px; padding-left:10px; }
#bluePanel .left h1 { float:left; color:#ffffff; margin:1.4em 0 1em 0; font-size:2.5em; }
#bluePanel .left ul { list-style:none; margin:0px; padding:0px; color:#ffffff; clear:left; }
#bluePanel .left ul li { float:left; background: url(/Assets/Images/tick.png) no-repeat; padding:4px 0px 4px 32px; width:220px; font-size:1em; }
#bluePanel .left .download { clear:left; float:left; margin-top:1em; width:199px; height:59px; background: url(/Assets/Images/download-btn.png) no-repeat; text-decoration:none; }

#bluePanel .right { float:right; padding-right:10px; }
#bluePanel .right .tv { overflow:hidden; width:415px; height:319px; background: url(/Assets/Images/computer.png) no-repeat; margin:32px 0 0 0; }
#bluePanel .right .tv .tv_movie { margin:14px 0px 0px 15px; }

.mainTitle { background:#01539C; margin:0; padding:15px 17px; color:#ffffff; }
#breadcrumbs { color:#01539C; background:#E5EEF5; margin:0; padding:9px 17px; }
#breadcrumbs a { color:#01539C; }

/* Main */
[role="main"] {  }
[role="main"] h1 { font-size: 2em; }
[role="main"] h2 { font-size: 1.5em; }
[role="main"] h3 { font-size: 1.17em; }
[role="main"] h4 { font-size: 1em; }
[role="main"] h5 { font-size: .83em; }
[role="main"] h6 { font-size: .67em; }

#container { margin-top:1.4em; }
#container .left { float:left; width:600px; margin-left:10px; background: url(/Assets/Images/divideline.png) no-repeat right center; }
#container .left .row { clear:left; float:left; margin-bottom:1em; }
#container .left .item { float:left; width:300px; }
#container .left .item .icon { float:left; width:75px; }
#container .left .item .content { float:left; width:200px; }
#container .left .item .content h2 { color:#01549D; margin:0; }
#container .left .item .content p { margin:0.8em 0; color:#3E3E3E; font-size:1em; }
#container .left .item .content a { color:#007FC5; background: url(/Assets/Images/blue-arrow.png) no-repeat 0 center; padding-left:10px; font-size:1em; }
#container .right { float:left; width:300px; margin:0 0 0 20px; }
#container .right h2 { color:#01549D; margin:0 0 10px 0; }
#container .right .quote { padding-left:40px; background: url(/Assets/Images/quotemarks.png) no-repeat 0 top; color:#0081C9; font-size:1.2em; line-height:1.4em; }
#container .right .quote a { color:#78CD00; text-decoration:none; }
#container .right .pcUtilities { margin:1em 0 0 1em; }
#container .right .smallCloudBuilder { margin: 1em 0 0 3.2em; }
#container .right .cnetDownloads { margin: 1em 0 0 3.5em; }
#container .right .reviewCentre { margin: 1em 0 0 4.5em; }
#container .right .which { margin: 1em 0 0 4.5em; }
#container .right .webUser { margin: 1em 0 0 5.5em; }
#container .right .techRadar { margin: 1em 0 0 5.0em; }
#container .right .vergeMagazine { margin: 2em 0 0 6em; }
#container .right .practical { margin: 2em 0 0 6em; }
#container .right .webHostingSearch { margin:0.5em 0 0 7em; }

#quoteFader { position:relative; }
#quoteFader .quoteItem { position:absolute; }


/* *** Competion section, do not delete */
#container2 { margin-top:2em; }
#container2 .left { width:433px; float:left; }
#container2 h2 { color:#01549D; margin-bottom:0.4em; }

#container2 .left { margin-left:10px; }
#container2 .left .blogItem { }
#container2 .left .blogItem .date { color:#626262; margin:0; }
#container2 .left .blogItem .title { color:#0489DC; margin:0.2em 0 0 0; font-size:1.2em; }
#container2 .left .blogItem .content { color:#3D3D3D; margin:0; }
#container2 .left .blogItem a { color:#0489DC; }

#container2 .right { margin-left:20px; float:left; padding:10px 27px 27px 27px; width:433px; }
#container2 .right .tweet { padding:4px 18px; background:#0489DC; color:#ffffff; }
#container2 .right .tweet .content { font-size:1em; }
#container2 .right .tweet .content a { font-size:1em; color:#ffffff; }
#container2 .right .tweet .by { font-size:0.9em; }
#container2 .right .tweet .by a { font-size:1em; color:#ffffff; }
#container2 .right .tweetClose { background: url(/Assets/Images/twitterbird.png) no-repeat right top; height:54px; display:block; text-decoration:none; }

.iPadWin { background:#05A1F8; height:122px; margin-bottom: 12px; margin-top: 9px; }
.iPadWin .left { float:left; position:relative; margin: -14px 0 0 10px; }
.iPadWin .mid { float:left; width: 350px; margin:18px 0 0 27px; }
.iPadWin .mid p { color:#ffffff; margin-top:0; font-size: 1.2em; line-height: 1.1em; }
.iPadWin .mid p a { font-weight:bold; color:#ffffff; text-decoration:none; background: url(/Assets/Images/comp-arrow-left.png) no-repeat 0 center; padding-left:16px; }
.iPadWin .mid p a:hover { text-decoration:underline; }
.iPadWin .right { float:right; position:relative; margin: -64px 10px 0 0; }

.winAnIPadLeft { }
.winAnIPadLeft .blueBox { background:#05A3FA; padding: 0 40px 20px 40px; margin-top:9px; }
.winAnIPadLeft .blueBox p { color:#ffffff; font-size: 1.2em; line-height: 1.1em; }
.winAnIPadLeft .blueBox p .link { font-weight:bold; color:#ffffff; text-decoration:none; background: url(/Assets/Images/comp-arrow-left.png) no-repeat 0 center; padding-left:16px; }
.winAnIPadLeft .blueBox p .link:hover { text-decoration:underline; }
.winAnIPadLeft .blueBox p.top { font-size: 1.2em; font-weight: bold; margin-top: -50px; }
.winAnIPadLeft .blueBox p a { font-weight:bold; color:#ffffff; text-decoration:none; }
.winAnIPadLeft .blueBox p a:hover { text-decoration:underline; }

.winAnIPadLeft .table { float:left; color:#ffffff; font-size:1.2em; clear:left; font-weight:bold; }
.winAnIPadLeft .table .tleft { float:left; width:104px; background: url(/Assets/Images/table-big-green.png) 0 0px; margin-right:1px; }
.winAnIPadLeft .table .tmid { float:left; width: 284px; background: url(/Assets/Images/table-big-green.png) 0 0px; margin-right:1px; }
.winAnIPadLeft .table .tright { float:left; width:230px; background: url(/Assets/Images/table-big-blue.png) 0 0px; }
.winAnIPadLeft .table .head { margin:0; padding: 0.7em 0; text-align:center; margin-bottom:1em; font-size:1em; color:#ffffff; }
.winAnIPadLeft .table .tleft .head { background:#016201; }
.winAnIPadLeft .table .tmid .head { background:#016201; }
.winAnIPadLeft .table .tright .head { background:#004990; }
.winAnIPadLeft .table .cell { padding-top:0em; padding-bottom:0em; margin:0 0 11px 0; }
.winAnIPadLeft .table .tleft .cell { text-align:center; }
.winAnIPadLeft .table .tmid .cell { padding-left:2em; }
.winAnIPadLeft .table .tright .cell { text-align:center; }
.winAnIPadLeft .table .last { padding-bottom:2.5em; }


/*
#container2 { margin-top:2em; }
#container2 .left { width:433px; float:left; }
#container2 h2 { color:#01549D; margin-bottom:0.4em; }

#container2 .left { margin-left:10px; }
#container2 .left .blogItem { }
#container2 .left .blogItem .date { color:#626262; margin:0; }
#container2 .left .blogItem .title { color:#0489DC; margin:0.2em 0 0 0; font-size:1.2em; }
#container2 .left .blogItem .content { color:#3D3D3D; margin:0; }
#container2 .left .blogItem a { color:#0489DC; }

#container2 .right { margin-left:20px; float:left; padding:10px 27px 27px 27px; width:433px; }
#container2 .right .tweet { padding:4px 18px; background:#0489DC; color:#ffffff; }
#container2 .right .tweet .content { font-size:1em; }
#container2 .right .tweet .by { font-size:0.9em; }
#container2 .right .tweetClose { background: url(/Assets/Images/twitterbird.png) no-repeat right top; height:54px; }
*/
#footerWrapper { background: url(/Assets/Images/footer-bg.gif); margin-top: 3em; }
#footer { height:214px; }
#footer h2 { color:#CEEAFE; font-size:1.2em; margin-top:30px; }

#footer .emailForm { }
#footer .emailForm p { color:#ffffff; font-size:0.85em; }
#footer .emailForm .submitForm { float:left; }
#footer .emailForm .submitForm .sub-email { background: url(/Assets/Images/submit-textbox.png) no-repeat; border:none; width:217px; height:25px; float:left; color:#697075; padding-left:3px; }
#footer .emailForm .unsubscribe { color:#71A8D3; clear:left; font-size:0.8em; float:left; }
#footer .emailForm .unsubscribe a { color:#71A8D3; }
#footer ul { list-style:none; padding:0; }
#footer ul li { background: url(/Assets/Images/footer-link-arrow.png) no-repeat 0 center; font-size: 1em; padding: 0.4em 0 0.4em 9px; }
#footer ul li a { color:#ffffff; text-decoration:none; }

.footerLinks { padding:1.7em 0; font-size:0.9em; }
.footerLinks .copy { color:#75C8F7; margin:0; }
.footerLinks .policyLinks { float:left; }
.footerLinks .policyLinks a { float:left; color:#049AF0; }
.footerLinks .policyLinks span { float:left; color:#049AF0; margin:0 1em 0 1em; }

/* Sidebar */
[role="complementary"] { background: #eee; }

/* Footer */
[role="contentinfo"] { background: #ccc; margin-top: 1em; overflow: hidden; }
[role="contentinfo"] #back-to-top { text-align: right; background: url(/Assets/Images/icon-top.png) no-repeat right top; padding-right: 2em; line-height: 24px; /* Height of image */ }
/* Might want to assign a class to the lists or their containers to avoid inheritance by all lists */
[role="contentinfo"] ul { padding-left: 0; }
[role="contentinfo"] footer { border-top: 1px solid #ddd; padding: 1em 0; }

/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}



/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* Text-alignment */
.tc {text-align: center !important; }
.tl { text-align: left !important; }
.tr { text-align: right !important; }

/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

