@charset "UTF-8";
/* CSS Document */


html, body {
	height: 100%;
	
	
/*	background-image: url("../media2020/bg_watermark.jpg"); /*VARIOUS BACKGROUNDS NOT USED - IF REIINTRODUCED, SEE MEDIA QUERIES BELOW FOR ADJUSTMENTS REQUIRED*/
/*	background-repeat: no-repeat;
	background-position: center top;
  background-color: #d2e4ea;
	background-attachment: fixed;
		
	background-image: url("../media2020/solodesco_bg_gradient.jpg");
	background-repeat: repeat-y;
	background-position: center top;
  background-color: #d2e4ea;
	background-attachment: fixed;
	
	background-image: url("../media2020/bg_vertical_gradient.jpg");
	background-repeat: repeat-x;
	background-position: center top;
  background-color: #d2e4ea;
	background-attachment: fixed;*/	
}


body {
max-width: 1000px;  /*width of text column in centre was 600*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;        /*prevents gap at top*/
	margin-bottom: 0;
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	background-color: #d2e4ea;
}


#pagecontainer {
	text-align: left;	
}


#fixed-nav-bar { /*top bar with logo and menu is static*/
	width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
margin: 0px auto;
	padding: 0px;
background-image: url("../media2020/navbar_white_fade.jpg");
	background-repeat: no-repeat;
	background-position: center bottom;
  background-color: #d2e4ea;
}


#logoandmenucontainer {
max-width: 1000px;
	margin: 20px auto 20px auto;
		
}

#logocontainer {text-align: left;
	float: left;
	padding: 0px 0px 0px 40px;
	margin: 0;
}



#strapline { 
	
	line-height: 0; /*this prevents a white gap at bottom of div, can also use font size 0 but that can impact others*/
    text-align: left;
	margin: 90px 0px 20px 0px;   /*top margin required as nav bar is fixed position*/	
	padding: 10px 0px 0px 40px;
	background-color: #FFFFFF;
}

#introtext {
	text-align: left;
	margin: 27px 0px;     
	padding: 20px 30px 20px 40px;
	background-color: #6fb0c5; /*GREEN grey ORIGINAL #6fb0c5*/
	color: #FFFFFF;
}

#subsectiondesigns {
	background-color: #d2e4ea;/*limegreen d2e094*/
	padding: 20px 40px 10px 40px;
	margin: 0 0px 27px 0px;   /*bottom margin after white frame*/
 	border-style: solid;
	border-width: medium;
	border-color: #FFFFFF;
	/*background-image: url("../media2020/bg_grad_greengrey.jpg");
	background-repeat: repeat-x;
	background-position: left bottom;*/
}



#subsectionclients {
	background-color: #6fb0c5;
	padding: 20px 40px;
	margin: 0 0px 27px 0px;
	
}

#subsectioncontact {
	background-color: #FFFFFF; /*d2e4ea;*/
	padding: 20px 40px;
	margin: 0 0px 27px 0px;
	/*border-style: solid;
	border-width: medium;
	border-color: #FFFFFF;*/
}

#subsectionblank { 
	padding: 100px 40px;           /****FOR PERSONAL PORTFOLIO PDF LINK****/
	margin: 0 0px 27px 0px;
	text-align: center;

}

#feedbackbox {background-color: #d2e4ea;
	max-width: 927px;
	padding: 5px 40px;
	margin: 0 0px 25px 0px;
	/*border-style: solid;
	border-width: medium;
	border-color: #FFFFFF;*/

}

#testarea {                  /*for testing client work*/
		margin: 50px auto 50px auto;
	padding: 50px 0px;
	background-color: #FFFFFF;
	text-align: center;

}

.visuals img {
	max-width: 100%; /*this keeps images at original size, else fills width*/
	height: auto;	
}

.img {
		display: inline-block;
}
	

.center {display: block;
  margin-left: auto;
  margin-right: auto;
  }

.right-align {  /*for up arrows*/
	text-align: right;
	padding: 0px 6px 1px 0px;
}

.center-align {    /*for facebook and web links*/
	text-align: center;
	font-size: 20px;
}


/**************MAIN MENU***************/

#menu-container
{	
	text-align: right;
	padding: 37px 12px 0px 0px;
	margin: 0;
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 15px;
	letter-spacing: 1px;
	overflow: hidden;
	white-space: nowrap;
/*	background: rgba(255,255,255,0);*/

}


#menu-container ul {
/*display: inline-block;*/
	list-style-type: none;	
	text-align: right;
	padding: 0px;
	margin: 0px;
}


#mainmenu a {
	text-decoration: none;
	text-transform: uppercase;
	color: #000000;
	text-align: center;
	padding-top: 0px;
	padding-right: 16px;
	padding-bottom: 0px;
	padding-left: 16px;
	border-left-style: solid;
	border-right-style: solid;
	border-top-style: none;
	border-bottom-style: none;
	border-right-width: 1px;
	border-right-color: #000000;
	border-left-width: 0px;
	border-left-color: #000000;
	
}


 li {
	display: inline-block;
	text-transform: uppercase;	
}



#mainmenu a.right-no-line {border-right-width: 0px;  /*for right hand side menu item no border*/
}
#mainmenu a:link {color: 000000;}
#mainmenu a:visited {color: #999999;}

#mainmenu li:hover a,
#mainmenu a:focus {color: #cc33cc;
}

#mainmenu a:active {color: #cc33cc;}



/********end main menu******/





 /*linked text not in menu or footer*/
a:link {color: darkmagenta; text-decoration: none;}
a:visited {color: #666666;}
a:hover {color: #006ca5; font-weight: normal;}
a:focus {color: #006ca5; font-weight: normal;}
a:active {color: #006ca5; font-weight: normal;}


/*linked text in footer*/

#footer a:link 	{color: #99FFFF; text-decoration: none; }
#footer	a:visited {color: #666666;}
#footer a:hover {color: #FFFFFF;font-weight: normal}
#footer a:focus {color: #FFFFFF;}
#footer a:active {color: #FFFFFF;}


/*HEADERS AND PARAS FOR PC BROWSER - see below for headers for TABLET AND MOBILE.*/

h1
{
	color: #006ca5; 	/*Bold blue header*/
	font-size: 30px;
	font-weight: bold;
	text-align: left;
	padding-top: 10px;
	padding-left: 7%;
	padding-right: 7%;
	padding-bottom: 10px;
	margin: 0px;
	
	}


p {font-size: 18px;
	font-weight: normal;
	line-height: 24px;
	text-align: left;
	padding: 10px 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	color: 000000;  }

.whitetext {
	color: #FFFFFF;
}

.darkgreentext {
	color: #4b8ba0;
}
	
/***********************************************************SLIDESHOW RESPONSIVE*************/

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

div#slider { overflow: hidden;
max-width: 927px; /*CF added*/
/*float:left; /*CF added to make room for button*/
}


div#slider figure img
{ width: 20%; float: left; }


div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slidy infinite; /*speed of slideshow*/
}





/*TABLET VERSION - specifically iPad as it does not allow fixed position of background image*/


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
{
/*	html, body {   /********HIDE BACKGROUND IMAGE OF WHOLE PAGE*******/
	/*height: 100%;
	background-image: none;}*/
	
	p {font-size: 21px;
	font-weight: normal;
	line-height: 27px;
	text-align: left;
	padding: 10px 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	color: 000000;  }
	

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
	/*html, body {   /********HIDE BACKGROUND IMAGE OF WHOLE PAGE*******/
/*height: 100%;
	background-image: none;}*/
	
	p {font-size: 21px;
	font-weight: normal;
	line-height: 27px;
	text-align: left;
	padding: 10px 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	color: 000000;  }
	

}





/**********************MOBILE SCREEN VERSION*************************/


@media (max-width: 650px)/******landscape mobile THIS DOES NOT WORK -KNOWN ERROR, NO SOLUTION, BUT CHOOSE WHICH MOBILE QUERY IS MORE IMPORTANT AND PLACE IT BELOW THIS - THE 2ND QUERY SEEMS TO WORK************/
{
	/*html, body {   /********HIDE BACKGROUND IMAGE OF WHOLE PAGE*******/
/*	height: 100%;
	background-image: none;}*/
		
p {font-size: 12px;        
	line-height: 17px;
	text-align: left;}
		
} /*end landscape mobile*/



@media (max-width: 480px)/****************portrait mobile THIS DOES WORK IF BELOW ABOVE MEDIA*************/
	
{
/*	html, body {   /********HIDE BACKGROUND IMAGE OF WHOLE PAGE*******/
/*	height: 100%;
	background-image: none;}*/
	
	
/*HIDE MENU FOR MOBILE PORTRAIT SCREENS*/	
	


#menu-container
	{	visibility: hidden;}

	#menu-container ul 
	{	visibility: hidden;}


	
p {font-size: 18px;   /****************portrait mobile*************/
	line-height: 25px;
	text-align: left;}
/*	padding-right: 6%;
	padding-left: 6%;
	padding-top: 10px;
	padding-bottom: 20px;
	margin-top:0px;
		margin-bottom: 0px;}*/
	
	}  /*end MEDIA FOR portrait PHONES*/





/*When trying to nest divs where a containing div has a background colour and borders, it doesn't work. The fix below FORCES THE CONTENT-AREA TO EXTEND THE HEIGHT OF THE LONGEST DIV CONTAINED WITHIN IT.*/


				.clearfix:after {
					content: ".";
					display: block;
					height: 0;
					clear: both;
					visibility: hidden;
					}
					
					
					.clearfix {display: inline-block;}  /* for IE6 Mac */
					
				.clearfix { height: 1%;} /* for IE7 */