////////////////////// STYLES

$.fn.qtip.styles.step_1 = { // Last part is the name of the style
   width: 450,
   background: '#D5FF6F',
   color: 'black',
   border: { width: 2, color: '#999', radius: 3},
   
   name: 'dark', // Inherit the rest of the attributes from the preset dark style
   tip: { corner: 'bottomLeft' }
}

////////////////////// END OF STYLES


$(".tooltip_step1").qtip({
   content:'<div style="font-size:12px; text-align:left;"><h2>STEP 1: Discovery</h2> <p><b>Detailed discussions</b> - We analyze your requirements in depth and detail where our expertise is applicable. We will confirm this where necessary through on-site meetings, email and telephone.</p> <p><b>Fixed-price quote</b> - We will give you a no-obligation, fixed quote, and furnish you with a full description of the work required.</p></div>',
   
   style: {  name: 'step_1', background: '#013300', color: '#FFF'},
	
	position: {
      corner: { target: 'topLeft', tooltip: 'bottomLeft'}  
	},
	
   show: { delay: 50 }
});




$(".tooltip_step2").qtip({
   content: '<div style="font-size:12px; text-align:left;"><h2>STEP 2: Design</h2> <p><b>First installment</b> - At this stage we will require a deposit of 50% of the agreed fee.</p> <p><b>Design</b> - We will present website drafts for your perusal through a non-public Internet address. You can easily request changes.</p> <p><b>Approval</b> - We will implement any changes you request and send you a second draft. Once you are fully happy with the overall design, we will freeze it.</p></div>',
   
   style: { name: 'step_1', background: '#286577', color: '#FFF' },

  	position: {
      corner: { target: 'topLeft', tooltip: 'bottomLeft'}  
	},

   show: { delay: 50 }
});


$(".tooltip_step3").qtip({
   content:'<div style="font-size:12px; text-align:left;"><h2>STEP 3: Site Build</h2> <p><b>Website building</b> - Once you have approved the overall design, we will start to build your website.</p> <p><b>Second installment </b> - second 50% of the cost needs to be covered at this stage.</p> <p><b>Content provision</b> - If you need assistance with drafting and/or writing text for your website, we can refer you to one of our professional copywriters. (We strongly advise that you ensure the text on your website is of professional quality and uses copywriting techniques to optimize the response from your visitors.</p><p><b>Testing</b> - Once your website is complete, we test it for broken links, web browser functionality and coding.</p></div>',
   
 
 
 style: {  name: 'step_1', background: '#5F4865', color: '#FFF' },
	
	position: {
      corner: { target: 'topLeft', tooltip: 'bottomLeft'}  
	},
	
   show: { delay: 50 }
});




$(".tooltip_step4").qtip({
   content:'<div style="font-size:12px; text-align:left;"><h2>STEP 4: Launch</h2> <p><b>Website launch</b> - Congratulations ... your website is live ...</p> <p><b>Free updates</b> - For 2 weeks after website launch we provide free minor website updates if needed.</p></div>',
   
   style: {  name: 'step_1', background: '#4D6541', color: '#FFF' },
	
	position: {
      corner: { target: 'topLeft', tooltip: 'bottomLeft'}  
	},
	
   show: { delay: 50 }
});