/* BODY */

html		    {height:100%; min-width:1150px;}
body			{height:100%; width:100%; margin:0; background-color:#ffffff; font-family:'Calibri', sans-serif; font-size:12px;}
@media (min-device-width:320px) and (max-device-width:768px) 
    {
        body    {font-family:sans-serif; font-size:11px;}
    }

a:link          {color:#FFFFFF; text-decoration:none;}
a:active        {color:#FFFFFF; text-decoration:none;}
a:visited       {color:#FFFFFF; text-decoration:none;}
a:hover         {color:#FFFFFF; text-decoration:underline;}

h1		        {margin-top:-5px;}
img             {border-width: 0;}


/* STRUCTURAL ELEMENTS */

#outerContainer         {position:relative; min-height:100%;}
#container              {margin:auto; position:relative; padding-bottom:120px;}
#header                 {margin:0 auto; position:relative; width:1050px; height:70px; margin-top:-70px;}
#footer                 {height:120px; position:absolute; background-color:black; width:100%;  left: 0; bottom: 0; }
#content                {width:1050px; margin:0 auto; overflow:auto;}

/* HEADER */

#headerGreyBar                  {width:100%; height:33px; background:#555555;}
#headerWhiteBar                 {width:100%; height:37px; background:#FFFFFF;}
#logoHolder                     {background-image:url('/Images/header_logo.png'); width:156px; height:95px; position:absolute; top:0px; left:-10px;}
.headerContactDetails           {font-weight:bold; color:#FFFFFF; font-size:1.5em; height:33px; position:absolute; top:5px; right:5px;}
.headerContactDetails a:hover   {color:#CF941B; text-decoration:none;}
.headerContactDetails a         {color:#FFFFFF; text-decoration:none;}
#headerNavContainer             {height:37px; width:800px; position:absolute; top:33px; right:0px;}
.headerNavItem, 
.headerNavItem:link,                 
.headerNavItem:visited,
.headerNavItem:active           {height:37px; color:#555555; float:left; padding:0px 9px 0px 9px; font-weight:bold; font-size:1.3em; line-height:37px; border-right:1px solid lightgrey;}
.headerNavItemActive:link,
.headerNavItemActive:visited,
.headerNavItemActive:active     {background:#555555; color:#FFFFFF;}
.headerNavItem:hover            {background:#DBDBDB; text-decoration:none;}
.headerNavItemActive:hover      {text-decoration:none; background:#555555; color:#FFFFFF;}

/* BANNER */

#banner             {width:100%; height:203px; background-repeat:repeat-x;}
#bannerContent      {margin:0 auto; height:203px; width:1050px; position:relative;}
.bannerTitle        {font-size:3em; color:#FFFFFF; font-weight:bold; font-family:Arial; position:absolute; top:25px; left:0px;}
.bannerSubTitle     {font-family: 'Handlee', cursive; font-size:2.6em; font-style:italic; color:#FFFFFF; position:absolute; top:70px; left:0px;}

/* SIDE NAV */

#sideNav                      {width:160px; float:left; margin-top:10px;}
.sideNavItem                  {padding:5px 5px 5px 0px; text-align:right; width:160px; color:#555555; float:left; font-size:1.5em;}
.sideNavItem:visited,
.sideNavItem:link,
.sideNavItem:active           {color:#555555;}
.sideNavItemActive            {background-image:url(/Content/Images/banner_bgnd_orange.png); background-position-y:-100px; background-repeat:repeat-x; color:#FFFFFF;}
.sideNavItemActive:link,
.sideNavItemActive:visited,
.sideNavItemActive:active     {color:#FFFFFF;}
.sideNavItem:hover            {background:#DBDBDB; text-decoration:none;}
.sideNavItemActive:hover      {text-decoration:none; background-image:url(/Content/Images/banner_bgnd_orange.png); background-position-y:-100px; background-repeat:repeat-x;}

/* HOMEPAGE */

.homePageContent        {margin:0 auto; margin-top:20px; width:1050px;}
.websiteIntroduction	{font-size: 16px;font-weight: bold;}
.websiteDescription		{font-size: 14px;font-weight: bold;}
.websiteDescription a	{color:#000000; text-decoration:underline;}

.homePageTitleContainer {margin:0 auto; width:540px;}
.homePageTitle          {font-size:3.2em;}
.homePageTitleOrange    {color:#CF941B;}
.homePageSubTitle       {font-size:1.8em;}
.homePageList           {width:500px; margin:0 auto;}
.homePageList ul        {list-style-image:url(/Content/Images/bullet.png); font-size:1.7em; width:550px; margin:0 auto; margin-left:-40px;}

.homeBannerHolder           {background:url(/Content/Images/Home/home_datacentre_banner.png); width:1048px; height:329px; margin-bottom:20px; position:relative;}
    .homeBannerHolder a     {width:1048px; height:329px; position:absolute;}
    .homeBannerHolder h1    {font-family: 'Lato', sans-serif; color:#FFFFFF; font-size:85px; margin:0; margin-top:-31px; margin-left:10px;}
    .homeBannerHolder h2    {font-family: 'Lato', sans-serif; color:#e63416; font-size:20px; margin:0; margin-top:-10px; margin-left:15px;}

.homeItemContainer          {width:1048px; margin-top:50px;}
.homeItemDivider            {width:1px; height:280px; background:#888888; float:left;}
.homeItem                   {width:261px; height:280px; text-align:center; float:left; padding-top:20px; position:relative;}
    .homeItem h3            {font-size:2em; margin-top:-20px; white-space:nowrap; overflow:hidden;}
    .homeItem ul            {color:#555555; position:absolute; top:115px; font-size:18px; text-align:left;}
.homeItemDomains            {background:url(/Content/Images/Home/home_ad_domains.png); background-position:top; background-repeat:no-repeat;}
    .homeItemDomains h3     {color:#97557e;}
    .homeItemDomains ul     {left:0px; top:125px;}
.homeItemFirewall           {background:url(/Content/Images/Home/home_ad_firewall.png); background-position:top; background-repeat:no-repeat;}
    .homeItemFirewall h3    {color:#e08831;}
    .homeItemFirewall ul    {left:35px;}
.homeItemBackups            {background:url(/Content/Images/Home/home_ad_backups.png); background-position:top; background-repeat:no-repeat;}
    .homeItemBackups h3     {color:#779e3d;}
    .homeItemBackups ul     {left:10px;}
.homeItemESET               {background:url(/Content/Images/Home/home_ad_eset.png); background-position:top; background-repeat:no-repeat;}
    .homeItemESET h3        {color:#54b7c6;}
    .homeItemESET ul        {left:25px;}


.scrollable                 {position:relative; overflow:hidden; width:715px; height:224px;}
    .scrollable .items      {width:2000000em; position:absolute;}
.items div                  {float:left;}

.homeButtonBlue             {background-image:url(/Content/Images/Home/blue_button.png); left:34px; width:170px;}
.homeButtonPurple           {background-image:url(/Content/Images/Home/purple_button.png); left:34px; width:170px;}
.homeButtonGreen            {background-image:url(/Content/Images/Home/green_button.png); left:34px; width:170px;}
.homeButtonOrange           {background-image:url(/Content/Images/Home/orange_button.png); left:34px; width:170px;}
.homeButton                 {display:inline-block; background-repeat:repeat-x; height:29px; line-height:29px; border-radius:4px; padding-left:10px; padding-right:10px; font-size:1.2em; font-weight:bold; color:#FFFFFF; letter-spacing:0.05em; position:absolute; top:240px; white-space:nowrap; overflow:hidden;}
    .homeButton:hover       {cursor:pointer; text-decoration:none;}

/* BREADCRUMB */

.breadcrumb		            {font-size:1.2em; float:right; margin:5px 0px;}
.breadcrumbItem:hover       {color:#000000; text-decoration:underline}
.breadcrumbItem:active,
.breadcrumbItem:link,
.breadcrumbItem:visited     {color:#000000;}
.breadcrumbItem		        {font-weight:bold; margin:0px 8px;}


/* RIGHT CONTENT */

#rightContent           {float:right; width:860px; padding:10px 0px 30px 20px; font-size:1.3em; -ms-overflow-style:none;}

#rightContent a:link, 
#rightContent a:visited, 
#rightContent a:active, 
#rightContent a:hover                 {color:#000000; text-decoration:underline;}
#rightContent ul        {list-style-image:url(/Content/Images/bullet.png);}
.productFeatureBoxLeft  {width:400px; float:left; margin-left:0px; margin-bottom:20px; overflow:visible;}
.productFeatureBoxRight {width:400px; float:right; margin-bottom:20px; margin-left:20px;}
.productFeature         {float:left; margin-bottom:20px;}
.productFeatureTitle    {font-size:1.3em; font-weight:bold; float:left;}
.productFeatureBoxRight h1,
.productFeatureBoxLeft h1  {margin-bottom:30px;}
.productFeatureText       {margin-top:35px; clear:both; width:400px; font-size:1em;}
.productFeatureIconTick   {float:left; width:30px; height:27px; margin-right:10px; background-image:url('/Content/Images/Hosting/green_tick_icon.png');}
.productFeatureIconPlus   {float:left; width:22px; height:22px; margin-right:10px; margin-top:4px; background-image:url('/Content/Images/Hosting/plusicon.gif');}
.productFeatureIconInfo   {float:left; width:22px; height:22px; margin-right:10px; margin-top:4px; background-image:url('/Content/Images/Hosting/infoicon.gif');}


/* HOSTING OPTION */

.hostingOptionContainer {float:left; width:850px;}
.hostingOptionItem      {float:left; text-align:center; width:385px; padding:20px;}
    .hostingOptionItem img  {margin:0 auto; margin-bottom:20px; display:block;}
    .hostingOptionItem p    {margin-left:120px; text-align:left;}
    .hostingOptionItem b    {margin-left:-10px;}



/* FOOTER */

#footerOrangeBar        {width:100%; height:4px; background:#CF941B;}
#footerDarkGreyBar      {width:100%; height:5px; background:#4D4D4D;}
#footerGreyBar          {width:100%; height:90px; background:#555555;}
#footerBlackBar         {width:100%; height:20px; background:#000000; }
#footerGreyBarContent   {color:#FFFFFF; width:1050px; height:90px; margin:0 auto;}
#footerBlackBarContent  {margin:0 auto; height:20px; margin-top:0px; width:1050px; line-height:11px; text-align:center; color:#e8e8e8;}
.footerSection          {height:90px; float:left; font-size:1.2em; margin-top:5px; line-height:1.4em;}
.footerSection2         {width:200px;}
.footerSection3         {width:200px;}
.footerSection4         {width:200px;}
.footerSection5         {width:200px;}
.footerSection6         {width:250px;}
#footerGreyBarContent .footerSection .footerTelephone        {color:#CF941B; font-size:2.5em; font-weight:bold; margin:0px 0px 0px 0px; line-height:normal; float:right;}
#footerGreyBarContent .footerSection .footerTelephone a      {color:#CF941B;}
.footerEmail            {color:#FFFFFF; font-size:1.4em; float:right;}
#footer a:link, 
#footer a:visited, 
#footer a:hover, 
#footer a:active        {color:#FFFFFF;} 


/* MISCELLAENOUS ELEMENTS STYLING */
	
.clearBoth		        {clear:both;}

.button:link, 
.button:visited, 
.button:active      {color:#FFFFFF; text-decoration:none;}
.button:hover       {color:#FFFFFF; text-decoration:underline;}
.noUnderline        {text-decoration:none;}