/** CSS for CloudFORCE */
/** Created by www.WebITServices.ie November 2011 */

/******** Clear border **********/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,

del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,l

abel,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	border		: 0;
	outline		: 0;
	font-size	: 100%;
	vertical-align : baseline;
	margin		: 0;
	padding		: 0;
}
body{
	background-color: #666666;
	text-align	: center; /** IE Bug - needed for margin-left, right: auto; settings to work for #Page */
}

/** FONTS */
h1{
	font-family	: Arial, Helvetica, sans-serif;
	font-size	: 18px;
	text-decoration:none;
	color		: #043c97;
	padding		: 20px;
}
p, a{
	font-family	: Arial, Helvetica, sans-serif;
	font-size	: 14px;
	text-decoration:none;
	color		: #646262;
	text-align	: justify;
	line-height	: 20px;
}
/** END OF FONTS */

/** PAGE */
#page{
	background-color: #fff;
	height		: auto;/*1350px*/
	width		: 969px;
	margin-left	: auto;
	margin-right: auto;
	margin-top	: 45px;
	margin-bottom: 0px;
	text-align	: left;
	-moz-box-shadow: 0 0 13px 0px #000;
	-webkit-box-shadow: 0 0 13px 0px #000;
	box-shadow: 0 0 13px 0px #000;
	border-radius:1em;
}
/** END OF PAGE */

/** HEADER */
#header{
	background-color: #ffffff;
	height		: 115px;
	width		: 969px;
	border-top-left-radius:1em;
	border-top-right-radius:1em;
}
#logo{
	position	: relative;
	background	: #fff url('../images/logo.png') no-repeat;
	height		: 100px;
	width		: 272px;
	left		: 50px;
	top			: 0px;
}
#clientportal{
	position	: relative;
	background	: #fff url('../images/clientportal.png') no-repeat;
	height		: 31px;
	width		: 136px;
	left		: 611px;
	top			: -30px;
}
.socialmedialink{
	position	: relative;
	height		: 30px;
	width		: 30px;
}
#facebook{
	background	: #fff url('../images/facebook.png') no-repeat;	
	left		: 771px;
	top			: -61px;
}
#twitter{
	background	: #fff url('../images/twitter.png') no-repeat;	
	left		: 806px;
	top			: -91px;
}
#linkedin{
	background	: #fff url('../images/linkedin.png') no-repeat;	
	left		: 841px;
	top			: -121px;
}
#youtube{
	background	: #fff url('../images/youtube.png') no-repeat;	
	left		: 877px;
	top			: -151px;
}
/** ! END OF HEADER ! */

/** MENU */
#menu{
	background	: #fff url('../images/menuCloud.jpg') no-repeat;
	height		: 46px; /*36*/
}
#menu p{
	padding-top	: 10px;	
}
#menu a{			
	font-weight	: bold;
	font-size	: 21px;
	color		: #6a6767;
	margin-left	: 30px;
	margin-right: 30px;
	text-shadow	: 0.1em 0.1em 0.2em #fff;
}
#menu a:hover{
	color		: #5d96f4;
	text-shadow	: #ffffff 0.1em 0.1em 0.2em;
}
#menu a.current{
	color		: #043c97;
	text-shadow	: #ffffff 0.1em 0.1em 0.2em;
}
/** END OF MENU */

/** CONTENT - TEMPLATE  */
#contentarea{
	position	: relative;
	width		: 969px;
	height		: auto; /*1099px*/
}
	/** homepage */
#banner{
	position	: relative;
	height		: 300px;
	width		: 969px;
	overflow	: hidden;
}
#bannerone{
	position	: absolute;
	left		: 1px;
	height		: 275px;
	width		: 600px;
}
#bannertwo{
	position	: absolute;
	width		: 369px;
	height		: 275px;
	left		: 603px;
	background	: #fff url('../images/cloudintro.png') no-repeat;
}
#content{
	position	: relative;
	height		: 720px;
	padding		: 0px 20px;
}
#content p{
	color		: #646262;
}
#content h1{
	text-align	: center;
	padding-top	: 0px;
}
#floatpic{
	background	: url('../images/cloudpic.png') no-repeat;
	position	: absolute;
	top			: 90px;
	right		: -58px;
	height		: 448px;
	width		: 487px;
	z-index		: 100;
}
	/** The Cloud */
#cloudcontent {
	padding		: 0px 60px;
}
	/** contact */
#panelarea{
	height		: 577px;
}
.panel{
	position	: absolute;
	width		: 484px;
	height		: 577px;
}
#areaone{left	: 0px;}
#areatwo{right	: 0px;}
#areaone p {
	padding-left: 60px;
}
#areatwo p{
	text-align	: center;
}
#map{
	position	: relative;
	left		: 30px;
	margin		: 60px 0px;
	height		: 350px;
	width		: 425px;
	overflow	: hidden;
}
/** END OF CONTENT */

/** FOOTER */
#footer{
	background-color: #fff;
	height		: 87px;
	width		: 969px;
	margin-left	: auto;
	margin-right: auto;
	margin-bottom: 0px;
	text-align	: left;
	border-bottom-right-radius:1em;
	border-bottom-left-radius:1em;
}
#shadow{
	background	: url('../images/footershadow.png') no-repeat;
	position	: relative;
	top			: 0px;
	left		: 0px;
	width		: 969px;
	height		: 13px;
}
#footertext{
	position	: relative;
	top			: 15px;
	left		: 20px;
	width		: 350px;
	height		: 40px;
}
#footertext  p, a{
	color		: #81819d;
}
#partners{
	position	: relative;
	left		: 573px;
	top			: -39px;
	width		: 365px;
	height		: 73px;
}
/** END OF FOOTER */

/** Auto Scroll Slider from http://flowplayer.org/tools/index.html */
.scrollable {
    height: 73px;
    overflow: hidden;
    position: relative;
    width: 365px;
}
.scrollable .items {
    clear: both;
    position: absolute;
    width: 20000em;
}
.items div {
    float: left;
    width: 680px;
}
.scrollable img {
    border: 1px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
    float: left;
    height: 53px;
    margin: 3px 1px 0px 21px;
    padding: 2px;
    width: 87px;
	-moz-box-shadow: 7px 3px 6px -2px #000000;
	-webkit-box-shadow: 7px 3px 6px -2px #000000;
	 box-shadow: 7px 3px 6px -2px #000000;
}
.scrollable .active {
    border: 2px solid #000000;
    cursor: default;
    position: relative;
}