/* kimnotist.css */

/*normalizez margin, padding*/
body, div, dl, dt, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

/*normalizes font-size for headers*/
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

/*Removes list-style from lists*/
ol, ul {
	list-style: none;
}

/*Normalizes font-style and font-weight to normal*/
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

/*Removes border from fieldset and img*/
fieldset, img {
	border: 0;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX GENERAL LAYOUT XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

body {
	background-color: #363636;/*deep grey*/
}

/*container of page*/
div#container {
	position: relative;
	width: 640px;
	margin: 0 auto;
	background-color: #7d97a3;/*greyish blue*/
}

/**********************************************start HEADER start*************************************/
/*container of header with bg tile*/
div#container div#header {
	position: fixed;
	top: 0px;
	width: 640px;
	height: 128px;
	background: url(../assets/headerBg.png) 0 0 repeat-x;
	z-index: 10;
}

/*places logo centrally within header*/
div#container div#header img {
	position: absolute;
	top: 5px;
	left: 198px;
}

/*<h1>replacement placing image replacement centrally within header, beneath the logo*/
div#container div#header h1 {
	position: relative;
	top: 68px;
	left: 220.5px;
	background: url(../assets/kimRobinsondch.png) 0 0 no-repeat;
	text-indent: -2700px;/*moved <h1>text*/
}

				/********************start NAVIGATION start********************/

/*position of <ul> relative(after) to <h1>*/
div#container div#header ul#menu {
	position: relative;
	width: 640px;
	height: 27px;
	background-color: #b3cf7a;/*pea greenish*/
	top: 81px;
	border-top: 1px solid #959595;/*middish grey*/
	border-bottom: 1px solid #445715;/*deep green*/
	
}

/*set float positioning of <li>'s*/
div#container div#header ul#menu li {
	float: left;
	height: 27px;
	
}

/*sets font colour, etc, of <li>'s <a>'s*/
div#container div#header ul#menu li a {
	font: 14px/28px Tempus Sans ITC, Papyrus, Tahoma, sans serif;
	color: #1c1c1c;/*deep grey*/
	margin-left: 7px;
	text-decoration: none;
}

div#container div#header ul#menu li a:hover {
	color: #c8dfe9;/*light blue*/
}

				/********************end NAVIGATION end********************/

/**********************************************end HEADER end*************************************/

/**********************************************start FOOTER start*************************************/

/*placing <div#footer> always at the base of the viewport*/
div#container div#footer {
	width: 640px;
	height: 60px;
	background: url(../assets/footer_tile.png);
	position: fixed;
	z-index: 5;
	bottom: 0px;
	border-top: 1px solid #445715;/*deep green*/
}

/*subtext image placed as backgroundImage beneath copyright*/
div#container div#footer div#subtxt {
	width: 640px;
	height: 60px;
	background: url(../assets/footer_subtxt.png) 0 -37px no-repeat;
}

/*placing <p> with copyright info and contact email, central to the footer*/
div#container div#footer p {
	text-align: center;
	margin-top: -50px;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #333;/*mid-grey*/
}

/*<a> setup for copyright and contact email*/
div#container div#footer p a {
	color: #333;/*mid-grey*/
	text-decoration: none;
	font: 9px/16px Verdana, Arial, Helvetica, sans-serif;
}

/*<b> text for contact email*/
div#container div#footer p a b {
	text-decoration: underline;
	font-size: 11px;
}

/*<a:hover> setup for copyright and contact email*/
div#container div#footer p a:hover {
	color: #c8dfe9;/*light blue*/
	border-bottom: 1px dotted #c8dfe9;/*light blue*/;
}

/*setup ICH logo, right of footer*/
div#container div#footer div#ich_logo {
	position: absolute;
	right: 40px;
	bottom: 10px;
}

/*setup ICH logo, right of footer*/
div#container div#footer div#ich_logo a:link img {
	border: 2px solid transparent;
}

/*setup ICH logo, right of footer*/
div#container div#footer div#ich_logo a:hover img {
	background-color: #c8dfe9;/*light blue*/;
	border: 2px solid #7d97a3;/*deep grey blue*/;
}

/*<ul> container for credits of designer and photographer*/
div#container div#footer ul#design {
	position: absolute;
	top: 33px;
	left: 80px;
	height: 60px;
	width: 650px;
	
}

/*floating <li>'s*/
div#container div#footer ul#design li {
	float: left;
}

/*The floated <li>'s to be either side of copyright*/
div#container div#footer ul#design li a {
	font: 9px Verdana, Arial, Helvetica, sans-serif;
	margin-right: 160px;
	color: #333;/*mid-grey*/
	text-decoration: none;
}

div#container div#footer ul#design li a:hover {
	font: 9px Verdana, Arial, Helvetica, sans-serif;
	margin-right: 160px;
	color: #c8dfe9;/*light blue*/
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX MAIN(SCROLLING) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/**********************************************start MAIN start*************************************/

/*set <div#main> below <div#header> so it can contain all the scrolled sections*/
div#container div#main {
	position: relative;
	width: 640px;
	height: 3600px;
	background-color: #7d97a3;/*deep grey blue*/
	top: 128px;
}

										/*start ANCHORS start*/
/*this empty container holds the anchor to bring slide scrolling to the top of home section(above images)*/
div#container div#main div#home {
	position: absolute;
	top: -130px;
}

/*this empty container holds the anchor to bring slide scrolling to the top of home section(above images)*/
div#container div#main div#hyp-do {
	position: absolute;
	top: 550px;
}

/*this empty container holds the anchor to bring slide scrolling to the top of home section(above images)*/
div#container div#main div#achieve {
	position: absolute;
	top: 1228px;
}

/*this empty container holds the anchor to bring slide scrolling to the top of home section(above images)*/
div#container div#main div#how-long {
	position: absolute;
	top: 1905px;
}

/*this empty container holds the anchor to bring slide scrolling to the top of home section(above images)*/
div#container div#main div#faq {
	position: absolute;
	top: 2582px;
}
										/*end ANCHORS end*/

/******************************start <ul> for <li>IMAGES that will settle beneath Nav menu start**********************************/
div#container div#main ul#images1 {
	position: relative;
	width: 640px;
	height: 77px;
	margin-top: 0px;
	border-bottom: 1px solid #445715;/*deep green*/
}

div#container div#main ul#images1 li {
	float: left;
	width: 160px;
	height: 77px;
}

div#container div#main ul#images1 li#book {	
	background: url(../assets/bk_cover.png);
}

div#container div#main ul#images1 li#page {
	background: url(../assets/pg_txt.png);
}

div#container div#main ul#images1 li#topfob {
	background: url(../assets/top_watch.png);
}

div#container div#main ul#images1 li#fullfob {
	background: url(../assets/full_watch.png);
}

/*set up <ul#images2> so they but up with the <h2#do>*/
div#container div#main ul#images2 {
	position: relative;
	width: 640px;
	height: 77px;
	margin-top: 230px;/*adjusts the position of images and so the whole section e.g.What does the hypnotist do?*/
	border-bottom: 1px solid #445715;/*deep green*/
}

div#container div#main ul#images2 li {
	float: left;
	width: 160px;
	height: 77px;
}

div#container div#main ul#images2 li#foblid {
	background: url(../assets/foblid.jpg);
}

div#container div#main ul#images2 li#hammond {
	background: url(../assets/hammond.jpg);
}

div#container div#main ul#images2 li#fing {
	background: url(../assets/fingchain.jpg);
}

div#container div#main ul#images2 li#smile {
	background: url(../assets/smile.jpg);
}

/*set up <ul#images3> so they but up with the <h2#achieve>*/
div#container div#main ul#images3 {
	position: relative;
	width: 640px;
	height: 77px;
	margin-top: 230px;/*adjusts the position of images and so the whole section e.g.What can we achieve?*/
	border-bottom: 1px solid #445715;/*deep green*/
}

div#container div#main ul#images3 li {
	float: left;
	width: 160px;
	height: 77px;
}

div#container div#main ul#images3 li#sidefob {
	background: url(../assets/sidefob.jpg);
}

div#container div#main ul#images3 li#c_eyes {
	background: url(../assets/chain_eyes.jpg);
}

div#container div#main ul#images3 li#intro {
	background: url(../assets/intro.jpg);
}

div#container div#main ul#images3 li#f_detail {
	background: url(../assets/fobdetail.jpg);
}

/*set up <ul#images4> so they but up with the <h2#take>*/
div#container div#main ul#images4 {
	position: relative;
	width: 640px;
	height: 77px;
	margin-top: 230px;/*adjusts the position of images and so the whole section e.g.What can we achieve?*/
	border-bottom: 1px solid #445715;/*deep green*/
}

div#container div#main ul#images4 li {
	float: left;
	width: 160px;
	height: 77px;
}

div#container div#main ul#images4 li#curve {
	background: url(../assets/curve.jpg);
}

div#container div#main ul#images4 li#chain {
	background: url(../assets/chain.jpg);
}

div#container div#main ul#images4 li#slicefob {
	background: url(../assets/slicefob.jpg);
}

div#container div#main ul#images4 li#spine {
	background: url(../assets/spine.jpg);
}

/*set up <ul#images4> so they but up with the <h2#take>*/
div#container div#main ul#images5 {
	position: relative;
	width: 640px;
	height: 77px;
	margin-top: 230px;/*adjusts the position of images and so the whole section e.g.What can we achieve?*/
	border-bottom: 1px solid #445715;/*deep green*/
}

div#container div#main ul#images5 li {
	float: left;
	width: 160px;
	height: 77px;
}

div#container div#main ul#images5 li#intro {
	background: url(../assets/intro.jpg);
}

div#container div#main ul#images5 li#book {	
	background: url(../assets/bk_cover.png);
}

div#container div#main ul#images5 li#page {
	background: url(../assets/pg_txt.png);
}

div#container div#main ul#images5 li#spine {
	background: url(../assets/spine.jpg);
}

/******************************end <ul> for <li>IMAGES that will settle beneath Nav menu end**********************************/

/******************************start <div#text> start**********************************/

/*container of the main text and image within it*/
div#container div#main div.text {
	width: 640px;
	height: 370px;
	background-color: #c8dfe9;/*light blue...round corners created in 'pageElements.js'*/
}

                                              /*******start <h2> start**********/
/*set up for <h2#home>*/
div#container div#main div.text h2#home {
	width: 640px;
	height: 25px;
	background: #b3cf7a url(../assets/home.png) 0px 3px no-repeat;/*pea greenish*/
	text-indent: -2000px;
	border-bottom: 1px solid #959595;/*middish grey*/
}

/*set up for <h2#do>*/
div#container div#main div.text h2#hyp {
	width: 640px;
	height: 25px;
	background: #b3cf7a url(../assets/the_hyp.png) 0px 3px no-repeat;/*pea greenish*/
	text-indent: -2000px;
	border-bottom: 1px solid #959595;/*middish grey*/
}

/*set up for <h2#achieve>*/
div#container div#main div.text h2#work {
	width: 640px;
	height: 25px;
	background: #b3cf7a url(../assets/work.png) 0px 3px no-repeat;/*pea greenish*/
	text-indent: -2000px;
	border-bottom: 1px solid #959595;/*middish grey*/
}

/*set up for <h2#take>*/
div#container div#main div.text h2#visit {
	width: 640px;
	height: 25px;
	background: #b3cf7a url(../assets/visit.png) 0px 3px no-repeat;/*pea greenish*/
	text-indent: -2000px;
	border-bottom: 1px solid #959595;/*middish grey*/
}

/*set up for <h2#take>*/
div#container div#main div.text h2#faq {
	width: 640px;
	height: 25px;
	background: #b3cf7a url(../assets/faq.png) 0px 3px no-repeat;/*pea greenish*/
	text-indent: -2000px;
	border-bottom: 1px solid #959595;/*middish grey*/
}
                                              /*******end <h2> end**********/
											  
											   /*******start <h3> start**********/
											   
/*placing <h3> that heads the Home section of the scrolling page*/
div#container div#main div.text h3 {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	margin-top: 5px;
}	

div#container div#main div.text h3 span#light {
	color: #888;
}

div#container div#main div.text h3 span#mid {
	color: #555;
	border-bottom: 2px dotted #888;/*pea greenish*/
}

/*places solid border under 'CAN' word*/
div#container div#main div.text h3 span#dark {
	color: #000;
	border-bottom: 2px solid #333;
}

/*to remove dotted border (opposite to 'WANT' word)*/
div#container div#main div.text h3 span#light + span#mid {
	border-bottom: 0px dotted #555;
	font-size: 14px;
}											   
											   
											   
											    /*******end <h3> end**********/

/*********************************************start text column layouts start*******************************************************/
/*left column for main text*/
div#container div#main div.text div.col_1 {
	float: left;
	width: 288px;
	height: 280px;
	padding: 15px 19px 0 15px;
	/*border:1px dotted #f00;*/
}

/*right column for main text*/
div#container div#main div.text div.col_2 {
	float: left;
	width: 288px;
	height: 280px;
	padding: 15px 5px 0 15px;
	/*border:1px dotted #f00;*/
}



/*borders for all images on site*/
div#container div#main div.text div.col_2 img, div#container div#main div.text div.col_1 img {
	border: 2px solid #7d97a3;/*deep grey blue*/
}

/*giving space between <p>'s*/
div#container div#main div.text p {
	font: 11px/15px Verdana, Arial, Helvetica, sans-serif;
	margin-bottom: 10px;
}
/*********************************************end text column layouts end*******************************************************/

/*******************************************************start 'Home' section's start**************************************************/

/*settings for text <li> in 'Home' section*/
div#container div#main div.text ul li.txt {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
}

									/*********************start <div#colhome_1><div#colhome_2> start************************/
/*left column for main text*/
div#container div#main div.text div#colhome_1 {
	float: left;
	width: 288px;
	height: 240px;
	margin-right: 16px;/*TO BE SORTED OUT*/
	padding: 15px 19px 0 5px;
	/*border:1px dotted #f00;*/
}

/*right column for main text*/
div#container div#main div.text div#colhome_2 {
	float: left;
	width: 288px;
	height: 240px;
	padding: 15px 5px 0 19px;
	/*border:1px dotted #f00;*/
}

/*borders for all images on site*/
div#container div#main div.text div#colhome_1 img, div#container div#main div.text div#colhome_2 img {
	border: 2px solid #7d97a3;/*deep grey blue*/
}



/*positioning 'stress' image to centre over text below it*/
div#container div#main div.text div#colhome_1 ul li#stress img {
	margin-left: 53px;
}



/*positioning 'crowd' image to centre over text below it*/
div#container div#main div.text div#colhome_1 ul li#crowd img {
	margin-top: 33px;
	margin-left: 55px;
}

/*adjusting the text to images 'head_stress.jpg' and 'croed.jpg'*/
div#container div#main div.text div#colhome_1 ul li.txt {
	margin-left: -80px;
}

/*positioning 'cigarettes' image to centre over text below it*/
div#container div#main div.text div#colhome_2 ul li#cigs img {
	margin-left: 130px;
}

/*positioning 'drinker' image to centre over text below it*/
div#container div#main div.text div#colhome_2 ul li#drink img {
	margin-top: 10px;
	margin-left: 146px;
}

/*positioning 'drinker' image to centre over text below it*/
div#container div#main div.text div#colhome_2 ul li.txt {
	margin-left: 80px;
}
									/********************end <div#colhome_1><div#colhome_2> end************************/

/*placing div#enjoy central for the image 'Enjoy your life'*/
div#container div#main div.text div#enjoy {
	position: absolute;
	width: 150px;
	top: 100px;
	left: 245px;
}

/*centrering the text for the image 'Enjoy your life' in fact centres both <li> for text and image*/
div#container div#main div.text div#enjoy ul li {
	text-align: center;
	font: 16px Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-variant: small-caps;
	margin-bottom: 5px;
}

div#container div#main div.text div#enjoy ul li img {
	border: 2px solid #7d97a3;/*deep grey blue*/
}



/* centres text in <p> at the bottom of 'Home' section*/
div#container div#main div.text p#home {
	text-align: center;
	margin-top: 280px;
}
/**********************************************************end 'Home' section's end******************************************************/

/**********************************************************start 'The Hypnotist' section's start**********************************************/
/*positioning <img> of Kim Robinson, relaxed*/
div#container div#main div.text div.col_1 img {
	margin-top: 5px;
	margin-left: 268.5px;
}

/*placing col_1 <p> evenly beside col_2 <p>*/
div#container div#main div.text div.col_1 p#thehyp1 {
	margin-top: 13px;
}

/*placing col_2 <p> evenly beside col_1 <p>*/
div#container div#main div.text div.col_2 p#thehyp2 {
	margin-top: 150px;
}

/**********************************************************end 'The Hypnotist' section's end**********************************************/

/***************************************start 'What happens when I visit a Hypnotist' section's start**************************************/
/*font and colour of bullet list*/
div#container div#main div.text div.col_2 ul#visit {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #555;/*mid grey*/
}

div#container div#main div.text div.col_2 h3 {
	margin-left: -45px;
}

div#container div#main div.text div.col_2 ul#visit li {
	margin-top: 10px;
	list-style-type: disc;
}

/***************************************start 'What happens when I visit a Hypnotist' section's start**************************************/

/***************************************start 'faq' section's start**************************************/
/*placing <h3> over to left of col_1*/
div#container div#main div.text div.col_1 h3 {
	margin-left: -105px;
}

/*setting font for <ul#faq> and distance down from <h3>*/
div#container div#main div.text div.col_1 ul#faq {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	margin-top: 5px;
	margin-left: 5px;
}

/*setting font for <ul#faq>*/
div#container div#main div.text div.col_2 ul#faq {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
}

/*colouring the <p> font as a contrast to the preceeding italics question*/
div#container div#main div.text div.col_1 ul#faq li p, div#container div#main div.text div.col_2 ul#faq li p {
	color: #555;
}

/*setting img in <col_2>*/
div#container div#main div.text div.col_2 img {
	margin-left: 92.5px;
	margin-top: -5px;
}

/*text in <p> at the bottom of 'faq' section*/
div#container div#main div.text p#faq {
	margin-top: 312px;
	margin-left: 30px;
	font-size: 9px;
	width: 391px;
	padding: 0px 2px;
	border: 1px solid #555;
}

/***************************************end 'faq' section's end**************************************/

/******************************end <div#text> end**********************************/

/**********************************************end MAIN end*************************************/