/*-----------------------------------------------------------------------------------------------
Jarbain CSS Sheet  - 4th May 2010
By Adam Jozef Zygadlo - 07708 124 915 - www.jarbrain.com

/*-------------------------------------------------------------------------------------
  Container elements with background images  ------------------------------------------
-------------------------------------------------------------------------------------*/

/* Home page ------------------ */
#containerhome {	
					background-image: 		url('http://www.jarbrain.com/elements/backgrounds/background-home.jpg');
					background-repeat: 		no-repeat;	
					background-position:	center top;
					top: 					0px;
					width: 					1230px;
					height:					765px;
					margin-left: 			auto;
					margin-right: 			auto;	}

/* About page ------------------ */
#containerabout {
					background-image: 		url('http://www.jarbrain.com/elements/backgrounds/background-about.jpg');
					background-repeat: 		no-repeat;	
					background-position:	center top;
					top: 					0px;
					width: 					1230px;
					height:					765px;
					margin-left: 			auto;
					margin-right: 			auto;	}				

/* Showreel page ------------------ */
#containershowreel {
					background-image: 		url('http://www.jarbrain.com/elements/backgrounds/background_showreel.jpg');
					background-repeat: 		no-repeat;	
					background-position:	center top;
					top: 					0px;
					width: 					1230px;
					height:					765px;
					margin-left: 			auto;
					margin-right: 			auto;	}
				
/* Portfolio page ------------------ */
#containerportfolio {
					background-image: 		url('http://www.jarbrain.com/elements/backgrounds/background_portfolio.jpg');
					background-repeat: 		no-repeat;	
					background-position:	center top;
					top: 					0px;
					width: 					1230px;
					height:					765px;
					margin-left: 			auto;
					margin-right: 			auto;	}
				
/* Contact page ------------------ */
#containercontact {
					background-image: 		url('http://www.jarbrain.com/elements/backgrounds/background_contact.jpg');
					background-repeat: 		no-repeat;	
					background-position:	center top;
					top: 					0px;
					width: 					1230px;
					height:					765px;
					margin-left: 			auto;
					margin-right: 			auto;	}
		/* Online CV page ------------------ */
		#containeronlinecv {
					background-color: 		#444;
					top: 					0px;
					width: 					900px;
					height:					765px;
					margin-left: 			auto;
					margin-right: 			auto;	}
				
				
				
/* Error page ------------------ */
#containererror {
					background-image: 		url('http://www.jarbrain.com/elements/backgrounds/404_overlay.png');
					background-repeat: 		no-repeat;	
					background-position:	111px 35px;
					top: 					0px;
					width: 					1230px;
					height:					765px;
					margin-left: 			auto;
					margin-right: 			auto;	}

body.errorback{
					background-image: 		url('http://www.jarbrain.com/elements/backgrounds/background_404.jpg');
					background-repeat: 		repeat-x;	
					background-position:	center top;	}

	
/*-------------------------------------------------------------------------------------
  Master elements 		---------------------------------------------------------------
-------------------------------------------------------------------------------------*/
#header{	
					background-image: 		url('http://www.jarbrain.com/elements/buttons/jarbrain_top.png');
					background-repeat: 		no-repeat;	
					background-position:	22px 0px;
					height: 				78px;	
					padding-bottom: 		30px;	}
					
#headershort{	
					background-image: 		url('http://www.jarbrain.com/elements/buttons/jarbrain_top_short.png');
					background-repeat: 		no-repeat;	
					background-position:	22px 0px;
					height: 				78px;	
					padding-bottom: 		30px;	}					
					
#headerportfolio{	
					background-image: 		url('http://www.jarbrain.com/elements/buttons/jarbrain_top_short.png');
					background-repeat: 		no-repeat;	
					background-position:	22px 0px;
					height: 				78px;	
					padding-bottom: 		10px;	}					
				
#leftcolom{		
					top: 					0px;
					width: 					650px;
					height: 				515px;
					float:					left;
					line-height: 			100%;	}
					
#leftcolomport{		
					top: 					0px;
					width: 					750px;
					height: 				515px;
					float:					left;
					line-height: 			100%;	}
										
				
#rightcolom{	
					top: 					0px;
					width: 					575px;
					height: 				515px;
					float:					right;
					text-align: 			right;	}
				
#middlecolom{		
					text-align: 			center;		
					width: 					650px;
					height: 				400px;
					top: 					0px;
					margin-left: 			auto;
					margin-right: 			auto;	
					padding-top: 			4px; 
					padding-bottom: 		110px; 
}																				
	
.leftdot{
					padding: 				0px;
					margin: 				0px;	}
					
.latesttitle{
					padding-bottom:			5px;	}					

.star{
					float:					left;
					height: 				12px;
					width:					12px;	}

.starright{
					float:					right;
					height: 				12px;
					width:					12px;
					padding-right:			65px;	}				

.greetings{			height: 				32px;	}
.greetings img{ 	height: 				28px;	}
										
				
/* Footer element ------------------ */
#footer {
					text-align: 			center;
					width: 					100%;
					clear:					both;	
					padding-bottom: 		25px;	}				
					
#footer p{		
					padding: 				0px;
					margin: 				0px;
					font-size: 				0.9em;	}
				
#footer p#second{		
					padding-bottom: 		10px;
					margin: 				0px; 
					font-size: 				0.9em;	}
				
#footer a{
					color: 					#000;
					text-decoration: 		none;	}				

#footer a:hover{
					color: 					#2460bf;
					text-decoration: 		underline;	}
				
#footer .middledot {
					width: 					4px;
					height: 				4px;
					margin-left:			2px;
					margin-right:			2px;	
					margin-bottom:			2px;	}					
	
/*- Copyright -------------*/			
.copyright{		
					padding: 				0px;
					margin: 				0px;
					margin-bottom: 			20px;	}
					
					
/*-------------------------------------------------------------------------------------
  Latest elements     	 		---------------------------------------------------------------
-------------------------------------------------------------------------------------*/
* { 				margin:					0px; 
					padding:				0px; 	}

#latestarea{		
					padding-top: 			0px;
					padding-right: 			155px;	}

		#latest{ 
							width:					300px; 
							padding:				0px; 
							margin:					0px;
							height:					0px; 	}
		
		#latest a { 		
							text-decoration:		none; 	}
							
		#latest img { 		border: 				0px solid #fff; }

		.latest-jcarousellite { 
							text-align: 			right;
							width:					425px; 	}

		.latest-jcarousellite ul li{ 
							list-style:				none; 
							display:				block; 
							padding-bottom:			1px; 
							margin-bottom:			10px; 	}
		
		.latest-jcarousellite .thumbnail { 
							float:					right; 
							width:					305px; 	}									
		.latest-jcarousellite .thumbnail img{ 
							width:					305px;
							height: 				60px;	}
							
		.overlay{ 
					position:				relative;
					top: 					268px;
					right: 					-15px;
					z-index:				3000;
					float:					right;	}
															
.mask{	
					position: 				absolute;
					top:					395px;
					right: 					80px;	
					padding-top: 			0px;
					padding-right: 			160px;
					z-index:				10000; 	}															
															
/*-------------------------------------------------------------------------------------
  Network elements     	 		---------------------------------------------------------------
-------------------------------------------------------------------------------------*/
#network {		
					width: 					400px;	}

			#network ul{
							list-style: 			none;
							margin: 				0px;
							padding: 				0px;	}

			#network li{	
							display:			 	block;	}

			#network img{		
							border: 				0px; 	}

/*-------------------------------------------------------------------------------------
  Main bodycopy 		---------------------------------------------------------------
-------------------------------------------------------------------------------------*/
#bodycopyhome{	
					padding-left: 			155px;
					width: 					305px;
					font-size: 				0.85em;	
					text-align:				justify;	}

#bodycopyhome p{
					margin: 				0px;
					padding-top: 			0px;
					padding-bottom: 		12px;	}

#bodycopyhome a{
					font-weight: 			bold;
					color: 					#ffff19;
					text-decoration: 		none;	}

#bodycopyhome a:hover{
					color: 					#000;
					text-decoration: 		none;	}
				
/*---------------------------------------------				
 Bodycopy for About section			-----------
----------------------------------------------- 
Coloum One 	*/
#aboutleft{	
					position: 				relative;
					padding-top: 			7px;
					float:					left;
					left: 					155px;
					width: 					270px;
					font-size: 				0.8em;	
					text-align:				justify; 
					letter-spacing: 		0px; 
					line-height: 			15px;	}				

#aboutleft p{
					margin: 				0px;
					padding-top: 			0px;
					padding-bottom: 		10px;	}

#aboutleft a{
					font-weight: 			bold;
					color: 					#ffff19;
					text-decoration: 		none;	}
	
#aboutleft a:hover{
					color: 					#000;
					text-decoration: 		none;	}				

		#aboutleft a.last{
							font-weight: 			bold;
							color: 					#444;
							text-decoration: 		none;	}

		#aboutleft a:hover{
							color: 					#000;
							text-decoration: 		none;	}

#aboutleftskill{	
					position: 				relative;
					padding-top: 			7px;
					float:					left;
					left: 					155px;
					width: 					270px;
					font-size: 				0.8em;	
					text-align:				justify; 
					letter-spacing: 		0px; 
					line-height: 			14px;
					}	

#aboutleftskill p{
					margin: 				0px;
					padding-top: 			0px;
					padding-bottom: 		10px;	}

#aboutleftskill a{
					font-weight: 			bold;
					color: 					#ffff19;
					text-decoration: 		none;	
					}

#aboutleftskill a:hover{
					color: 					#000;
					text-decoration: 		none;	}

/* Coloum Two for About page 	*/
#aboutright{
					padding-top: 			39px;
					padding-right: 			30px;
					float:					right;
					width: 					270px;
					font-size: 				0.80em;	
					text-align:				justify;	
					letter-spacing: 		-0.1px; 
					line-height: 			15px;	}										
					
/* Coloum Two for Skill page 	*/
#skillright{
					padding-top: 			25px;
					padding-right: 			35px;
					float:					right;
					width: 					260px;
					font-size: 				0.80em;	
					text-align:				justify;	}					

#aboutright p{
					margin: 				0px;
					padding-top: 			0px;
					padding-bottom: 		13px;	}

#aboutright a{
					font-weight: 			bold;
					color: 					#ffff19;
					text-decoration: 		none;	}

#aboutright a:hover{
					color: 					#000;
					text-decoration: 		none;	}


#subbuttons{	
					padding-left: 			155px;
					width: 					570px;		}
					
					
#aboutrightskill{
					padding-top: 			39px;
					padding-right: 			30px;
					float:					right;
					width: 					270px;
					font-size: 				0.80em;	
					text-align:				justify;	
					letter-spacing: 		0px; 
					line-height: 			13.5px;	}

#aboutrightskill p{
					margin: 				0px;
					padding-top: 			0px;
					padding-bottom: 		13px;	}
					
#aboutrightskill p.end{
					margin: 				0px;
					padding-top: 			0px;
					padding-bottom: 		8px;	}

#aboutrightskill a{
					font-weight: 			bold;
					color: 					#ffff19;
					text-decoration: 		none;	}

#aboutrightskill a:hover{
					color: 					#000;
					text-decoration: 		none;	}		
					
#aboutrightskill img.linez{
					margin-top: 			2px;
					padding-bottom: 		4px;
					width:					273px; 
					height:					8px;  
					background-image: 		url('http://www.jarbrain.com/elements/buttons/dot_single.png');
					background-repeat: 		repeat-x	;	
					background-position:	center top;	}			
					
/*--------------------------------------------				
 Bodycopy for About section 		-----------
-------------------------------------------- */
#bodycopyskills{	
					padding-left: 			155px;
					width: 					570px;
					height:				 	285px;
					font-size: 				0.85em;	
					text-align:				left;	}

#bodycopyskills p{
					margin: 				0px;
					padding-top: 			0px;
					padding-bottom: 		20px;	}

#bodycopyskills a{
					font-weight: 			bold;
					color: 					#ffff19;
					text-decoration: 		none;	}

#bodycopyskills a:hover{
					color: 					#000;
					text-decoration: 		none;	}					
												
				
/*--------------------------------------------				
 Bodycopy for Contact section 		-----------
-------------------------------------------- */
#bodycopycontact{	
					padding-left: 			150px;
					width: 					450px;
					font-size: 				0.9em;	
					text-align:				justify;	}

#bodycopycontact p{
					margin: 				0px;
					padding-top: 			0px;
					padding-bottom: 		20px;	}

#bodycopycontact a{
					font-weight: 			bold;
					color: 					#ffff19;
					text-decoration: 		none;	}

#bodycopycontact a:hover{
					color: 					#000;
					text-decoration: 		none;	}				
								
.subtitle{
					padding-bottom: 		4px;	}

/*-------------------------------------------------------------------------------------
  Main Navigation Buttons 		-------------------------------
-------------------------------------------------------------------------------------*/
#mainnav {
					margin:					0px;
					padding-top:			13px;
					padding-left:			70px;	}
				
			#mainnav ul{
							list-style: 			none;	}
			
			#mainnav li{
							display:			 	inline;	}
			
			#mainnav a{
							text-decoration: 		none;	}
				
			#mainnav img{
							border: 				0px solid #fff;	}
			
#subnav {
					background-image: 		url('http://www.jarbrain.com/elements/buttons/sub_navigate.png');
					background-repeat: 		no-repeat;	
					background-position:	0px 0px;
					height: 				23px;
					margin: 				0px;
					margin-top: 			4px;
					margin-left: 			34px;
					padding-top:			4px;
					padding-left:			253px;	}
				
			#subnav ul{	
							list-style: 			none;	}
			
			#subnav li{
							display:			 	inline;	}			

			#subnav img{
							border: 				0px solid #fff;	}

.skilltitle{
							padding-bottom: 		2px; 
							font-size: 				1.05em;	}	

.skillwhite{
							color:					#fff;
							padding-bottom: 		2px; 
							font-size: 				1.05em;	}		

															
/*-------------------------------------------------------------------------------------
  Mini Navigation Buttons (on the footer section)		-------------------------------
-------------------------------------------------------------------------------------*/
#mininavigate{	
					text-align: 			center;
					font-size: 				0.75em;		}
				
			#mininavigate ul{
							list-style: 			none;	}
			
			#mininavigate li{
							display:			 	inline;
							padding-left: 			2px;
							padding-right: 			2px;	}
			
			#mininavigate a{
							color: 					#666;
							text-decoration: 		none;	}
			
			#mininavigate a:hover{
							color: 					#2460bf;
							text-decoration: 		none;	}
														
.yellow{}	
.yellow img{			
					width: 					8px;
					height: 				7px;
					margin-left: 			7px;
					margin-right: 			7px;
					margin-bottom: 			7px;	}
.yellsub{}	
.yellsub img{			
					width: 					8px;
					height: 				7px;
					margin-left: 			7px;
					margin-right: 			7px;
					margin-bottom: 			3px;	}
					
.yellowsub{}	
.yellowsub img{			
					width: 					8px;
					height: 				7px;
					margin-left: 			5px;
					margin-right: 			5px;
					margin-bottom: 			1px;	}

/*-------------------------------------------------------------------------------------
  Tooptips 												-------------------------------
-------------------------------------------------------------------------------------*/
a.info{
					position:				relative; 		/*this is the key*/
					z-index:				24; 	}

a.info:hover{		z-index:				25; 	}
a.info span{		display: 				none;	
z-index:				25; }

a.info:hover span{ 									/*the span will display just on :hover state*/
					display:				block;
					position:				absolute;
					font:					bold 12px Arial;
					bottom:					1.5em; 
					width: 					100px;
					left:					1em; 				
					padding-left: 			10px;
					padding-right: 			10px;
					background-color:		#fff; 
					color:					#000;
					text-align: 			center;	}
					
/*-------------------------------------------------------------------------------------
Tooptips for Latest section  							-------------------------------
-------------------------------------------------------------------------------------*/
a.latest{
					position:				relative; 		/*this is the key*/
					z-index:				24; 	}

a.latest:hover{		z-index:				25; 	}
a.latest span{		display: 				none;	}

a.latest:hover span{ 								/*the span will display just on :hover state*/
					display:				block;
					position:				absolute;
					font:					bold 12px Arial;
					bottom:					1em; 
					left:					0.8em; 				
					padding-left: 			10px;
					padding-right: 			10px;
					background-color:		#fff; 
					color:					#000;
					text-align: 			left;	}					
					

.clear { 			clear: 					both; }

/*-------------------------------------------------------------------------------------
  Sub buttons in About section										-------------------------------
-------------------------------------------------------------------------------------*/
.sections{
					width: 					260px;
					height: 				90px;
					margin: 				0px;
					padding: 				0px;
					float: 					left;	}				

			.sections ul{
							list-style: 			none;	}
											
			.sections li{
							padding-bottom:			6px;
							display:			 	block;
							text-decoration: 		none;	}
							
			.sections a{
							text-decoration: 		none;	}
							
			.sections img{
							color: 					#ffff19;
							border: 				0px; 
							text-decoration: 		none;	}
							
/*-------------------------------------------------------------------------------------
  CV buttons in About section										-------------------------------
-------------------------------------------------------------------------------------*/
.cvbuttons{
					margin: 				0px;
					padding: 				0px;
					padding-right: 			75px;
					float: 					right;
					width: 					200px;
					height: 				90px;
					text-align: 			right;	}
					
.cvlinez{
					padding-top: 			3px;
					width:					8px; 
					height:					46px;  
					background-image: 		url('http://www.jarbrain.com/elements/buttons/dot_single.png');
					background-repeat: 		repeat-y;	
					background-position:	center top;
}					

			.cvbuttons ul{
							list-style: 			none;	}
			
			.cvbuttons li{
							height: 				175px;
							display:			 	inline;
							padding-left: 			2px;
							padding-right: 			2px;	}
							
			.cvbuttons a{
							text-decoration: 		none;	}
							
			.cvbuttons img{
							color: 					#ffff19;
							border: 				0px; 
							text-decoration: 		none;	}
							
/*-------------------------------------------------------------------------------------
  Contacts section buttons										-------------------------------
-------------------------------------------------------------------------------------*/
/* LEFT column ------------------ */

.contactleft{ 
					float: 					left;
					height:					57px;	
					width: 					397px;	}
						
				.contactleft ul{
							list-style: 			none;	}
								
				.contactleft li{
							display:				block;
							height: 				17px;
							padding-bottom: 		10px;	}
							
				.contactleft a{
							color:					#000;
							text-decoration: 		none;	}

.contactnetwork{
					width: 					450px;
					height:					207px;
					margin-left: 			149px;			}						
				
				.contactnetwork ul{
							list-style: 			none;	}
							
				.contactnetwork li{
							margin-top: 			-5px;
							display:				block;
							float: 					left;	}
							
				.contactnetwork a{
							text-decoration: 		none;	}
							
				.contactnetwork img{
							height: 				50px;	
							width: 					50px;	
							border: 				0px; 
							text-decoration: 		none;	}				

.adam {
					padding-bottom:			3px;	}

.mail {				float:					left;
					margin-right: 			100px;
						}

.mob {				float:					left;
					margin-right: 			86px;	}

.link { 			float:					left;
					margin-right: 			50px;	}					



.portfoliobutton{
					background-image: 		url('http://www.jarbrain.com/elements/buttons/sub_navigate.png');
					background-repeat: 		no-repeat;	
					background-position:	0px 0px;
					width: 					1000px;
					height: 				23px;
					margin-top: 			7px;
					margin-left: 			38px;
					padding-top: 			3px;
					padding-left: 			250px;
					font-size: 				0.9em; 
					letter-spacing:			-0.01em;	
					color: 					#fff;
					}					

				.portfoliobutton ul{
							list-style: 			none;	}

				.portfoliobutton li{
							display:				inline;	}
								
				.portfoliobutton a{						
							color: 					#fff;
							text-decoration: 		none;	
							font-weight: 			500;	}
							
				.portfoliobutton a:hover{							
							color: 					#3366cc;	}
							
				.portfoliobutton img{
							border: 				0px; 
							text-decoration: 		none;	}
							
				.portfoliobutton img.details{
							padding-top: 			3px;
							border: 				0px; 
							text-decoration: 		none;	}
							
/* --- END --- */		
.qtime{ 			
						position: 				relative; 
						float: 					right;
						top: 					-12px;
						right: 					5px;	}

.qtime img{ 			
						border: 				0px solid #fff; }
						
						.PopBoxImageSmall
{
	border: none 0px #ffffff;
	cursor: url("elements/portfolio/photos/portrait-01.jpg"), pointer;
}
.PopBoxImageLarge
{
	border: solid 1px #999999;
	cursor: url("elements/portfolio/photos/portrait-01.jpg"), pointer;
}
.PopBoxImageShrink
{
	cursor: url("elements/portfolio/photos/portrait-01.jpg"), pointer;
}
.PopBoxImageLink
{
	cursor: pointer;
}
.PopBoxImageMove
{
	border: none 0px #ffffff;
	cursor: pointer;
}