@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@import url(http://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800);

.colorBlueLight {
	background-color: #638EBC;
	color: #FFFFFF;
}
.colorBlueDusty {
	background-color: #5E6A87;
	color: #FFFFFF;
}
.colorGreyDark {
	background-color: #4E5156;
	color: #FFFFFF;
}
.colorBluePale {
	background-color: #9CF;
	color: #FFFFFF;
}
.colorBlueMedium {
	background-color: #638EBC;
	color: #FFFFFF;
}
.colorBlueDarker {
	background-color: #456B9A;
	color: #FFFFFF;
}
.textColorBlueDusty {
	color: #5E6A87;
}

h4{
	font-weight:500!important;
	color:#EC6433;
}
#hdrlogotext {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #000080;
	padding-left: 10px;
	padding-top: 2px;
	float: left;
	font-size: x-large;
}

#page-toggle-two{display:none;}
#page-toggle-three{display:none;}
#page-toggle-four{display:none;}

.sidebar{
	position: fixed;
	overflow:hidden;
	z-index:9999;
	left:0px;
	top:0px;
	bottom:0px;
	width:0px;
	background-image:url(../images/sidebar-bg.png);
}

.sidebar-scroll{
	padding-top:20px;
	width:80px;
	overflow: scroll!important;
	overflow-x:hidden!important;
	-webkit-overflow-scroll:touch!important;	
	height:100%;
}

/*--- I had to add the "display, overflow and position parameters" because of the my-framework mod (I removed the global def for an "a" tag ----*/

.sidebar-scroll a{
	width: 55px;
	opacity: 1;
	background-repeat: no-repeat;
	background-size: 32px 32px;
	background-position: center top;
	padding-top: 29px;
	text-align: center;
	font-size: 9px;
	text-transform: uppercase;
	color: #FFFFFF;
	margin-bottom: 20px;
	display: block;
	overflow:hidden;
	position:relative;
}


.nav-home{		background-image:url(../images/misc/nav/home.png);}
.nav-about{		background-image:url(../images/misc/nav/about.png);}
.nav-settings{		background-image:url(../images/misc/nav/settings.png);}
.nav-listimage{		background-image:url(../images/misc/nav/listimage.png);}
.nav-download{     background-image:url(../images/misc/nav/download2.png);}
.nav-partners{     background-image:url(../images/misc/nav/link-shadow.png);}
.nav-upload{     background-image:url(../images/misc/nav/upload.png);}

.nav-gallery{	background-image:url(../images/misc/nav/folio.png);}
.nav-video{		background-image:url(../images/misc/nav/video.png);}
.nav-blog{		background-image:url(../images/misc/nav/blog.png);}
.nav-call{		background-image:url(../images/misc/nav/mobilephone.png);}
.nav-text{		background-image:url(../images/misc/nav/sms.png);}
.nav-mail{		background-image:url(../images/misc/nav/mail.png);}
.nav-coach{		background-image:url(../images/misc/nav/howto.png);}
.nav-car{       background-image:url(../images/misc/nav/car.png);}
.nav-creatwrite {background-image:url(../images/misc/nav/creatwrite.png);}
.nav-info       {background-image:url(../images/misc/nav/infoabout.png);}
.nav-link       {background-image:url(../images/misc/nav/link.png);}
.nav-paintbrush  {background-image:url(../images/misc/nav/paintbrush.png);}
.nav-signpost{  background-image:url(../images/misc/nav/signpost2.png);}
.nav-tools{     background-image:url(../images/misc/nav/tools.png);}


.nav-home-active{		background-image:url(../images/misc/nav/home-active.png); 	color:#FFFFFF!important;}
.nav-about-active{		background-image:url(../images/misc/nav/about-active.png);	color:#FFFFFF!important;}
.nav-gallery-active{	background-image:url(../images/misc/nav/folio-active.png);	color:#FFFFFF!important;}
.nav-video-active{		background-image:url(../images/misc/nav/video-active.png);	color:#FFFFFF!important;}
.nav-blog-active{		background-image:url(../images/misc/nav/blog-active.png);	color:#FFFFFF!important;}
.nav-call-active{		background-image:url(../images/misc/nav/call-active.png);	color:#FFFFFF!important;}
.nav-text-active{		background-image:url(../images/misc/nav/sms-active.png);	color:#FFFFFF!important;}
.nav-mail-active{		background-image:url(../images/misc/nav/mail-active.png);	color:#FFFFFF!important;}

.header-with-back-image{
	padding-top: 20px;
	display: block;
	height: 60px;
	background-image: url('../myimages/PinkCloudFogBanner.jpg');
	background-repeat: repeat-x;
	padding-left: 10px;
}
.header{
	padding-top: 20px;
	display: block;
	height: 60px;
	background-image: url('../myimages/blue-light-to-white-h60.png');
	background-repeat: repeat-x;
	padding-left: 10px;
}

.show-nav{
	float:left;
	background-image:url(../images/misc/deploy-menu.png);
	background-repeat:no-repeat;
	width:18px;
	height:12px;
	margin-top:4px;
	
}

.hide-nav{
	display:none;
	float:left;
	background-image:url(../images/misc/disable-nav.png);
	background-repeat:no-repeat;
	width:17px;
	height:17px;
	margin-top:2px;
	
}


.header img{
	float:right;
}

.shadow{
	text-shadow:0px 1px 0px #FFFFFF;
}

.heading-icon{
	padding-left:30px;
	margin-bottom:10px;
	background-image:url(../images/misc/heading.png);
	background-repeat:no-repeat;
}

.footer p{
	font-size:10px;
	text-transform:uppercase;
}


/*About Page*/

.page-toggle{
	width: 21%;
	margin-left: 2%;
	margin-right: 2%;
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: #EC6433;
	float: left;
	border-radius: 20px;
	font-size: 10px;
	color: #FFFFFF;
	text-align: center;
	text-transform: uppercase;
	border-bottom: solid 1px #FFFFFF;
}


.webapp{
	position:fixed;
	width:100%;
	bottom:-100px;
	z-index:99999;
	border:solid 1px #cacaca;
	margin-top:20px;
	padding-left:20px;
	padding-right:20px;
	padding-top:10px;
	padding-bottom:10px;
	background-image: linear-gradient(bottom, rgb(223,223,223) 33%, rgb(243,243,243) 50%);
	background-image: -o-linear-gradient(bottom, rgb(223,223,223) 33%, rgb(243,243,243) 50%);
	background-image: -moz-linear-gradient(bottom, rgb(223,223,223) 33%, rgb(243,243,243) 50%);
	background-image: -webkit-linear-gradient(bottom, rgb(223,223,223) 33%, rgb(243,243,243) 50%);
	background-image: -ms-linear-gradient(bottom, rgb(223,223,223) 33%, rgb(243,243,243) 50%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.33, rgb(223,223,223)),
		color-stop(0.5, rgb(243,243,243))
	);	
}

.webapp h5{
	margin-bottom:0px;
}

.webapp p{
	margin-top: 5px;
	line-height: 14px;
	color: #767676;
}

.close-webapp{
	background-image:url(../images/misc/close-webapp.png);
	background-repeat:no-repeat;
	width:15px;
	height:15px;
	float:right;
	margin-top:-18px;
}

.webapp img{
	width:50px;
	height:50px;
	border-radius:10px;
}

.myColorOrange {
	background-color: #EC6433;
	color: #FFFFFF;
}
.myColorGrayDark {
	background-color: #292926;
	color: #FFFFFF;
}
.myColorGrayMedium {
	background-color: #2C2C2C;
	color: #FFFFFF;
}
.myColorGraySilver {
	background-color: #606060;
	color: #FFFFFF;
}
.myHotTextBoxHolder {
	margin-right: 40px;
	margin-left: 40px;
	margin-bottom: 10px;
	width: auto;
	height: auto;
	clear: both;
	text-align: center;
}
.myHotTextBox {
	padding: 10px 5px 10px 5px;
	border: thin solid #FF6600;
	background-color: #424242;
	color: #CCCCCC;
	font-size: 12px;
	width: auto;
	height: auto;
	text-align: center;
}
.myHotTextBoxH1 {
	font-weight: bold;
	color: #FFFFFF;
	font-size: 12px;
}
.myImgRight {
	padding: 3px;
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
	border: thin solid #C0C0C0;
}
.my-list-faqs {
	padding-left: 10px;
	padding-top: 10px;
}
.my-list-faqs li {
	font-size: 8pt;
	padding-left: 5px;
	padding-bottom: 10px;
	color: #C0C0C0;
	list-style-type: none;
}
.my-list-faqs li a {
	font-size: 8pt;
	padding-left: 5px;
	padding-bottom: 10px;
	color: #C0C0C0;
	list-style-type: none;
	text-decoration: underline;
}
.my-list-faqs li a:hover {
	font-size: 8pt;
	padding-left: 5px;
	padding-bottom: 10px;
	color: #FF6600;
	list-style-type: none;
}