/* nicko.me */

/* colours 
orange: #ff8700
blue bgd: #00507e

*/

/*---------------------------------- common selectors ----------------------------------*/


body{ margin:0px; padding:0px; font-family:Helvetica, sans;font-size:12px; line-height:18px; color:#fff; text-align:center; background:#00507e;}

h1, h3, h5, h6 {font-family:cronoreg, Helvetica, Arial, sans;}

h1 {background: url(../images/nicko.png) no-repeat left top;
	margin: 0 0 0 0;
    height:48px ;
	width:150px  ;
	text-indent: -9000px;
	display:inline;
	float:left;
	border: solid 0px green;
}

h1.nickomail {background: url(../images/nickomail/nickomail.png) no-repeat left top;
	margin: 0 0 15px 0;
    height:47px ;
	width:201px  ;
	text-indent: -9000px;
	display:inline;
	float:left;
}

h2{font-family:cronoreg, font-size:20px; font-weight:normal; line-height:30px; text-align:left; padding-top:10px;}


#news h3{font-size:20px; font-weight:normal; text-align:left; padding-bottom:5px;}
#nickomail h3{font-size:25px; font-weight:normal; text-align:left; padding-bottom:20px;}


h4 {font-family: Helvetica, Arial, sans;font-size:30px; font-weight:normal; text-align:left; padding-bottom:30px;}

#skills h4{font-size:30px; font-weight:normal; text-align:left; padding-bottom:30px; margin-left:-20px;}

h4+h5 {margin-top:30px;}

h5 {font-size:14px; font-weight:normal; text-align:left; line-height:22px; text-transform:uppercase; background-color:#ff8700; letter-spacing:1px; padding:0 5px; width:150px; margin-bottom:5px; }

h6{font-size:14px;font-weight:normal; text-align:left; float:left;clear:both; color:#ff8700; text-transform:uppercase; line-height:20px;}

p{ font-family:Helvetica, sans;text-align:left; color:#fff; font-size:13px; float:left; clear:both; margin-bottom:10px;}

p.nofloat{float:none; }



#bottom p{position:absolute; right:150px; margin-top: 12px; font-size:10px;}

#contact #main_text p{font-size: 16px;line-height:20px;}
#nickomail  p.first{font-size: 16px;line-height:22px;}


p#prev_next {text-align:center; position:absolute; z-index:50; bottom:0; left:250px; display:inline-block; width:400px; height:20px; border:solid 0px red; }
p#prev_next a {text-align:center; background:url(../images/page_no_bgd.png) no-repeat right center ; padding:4px 1px 3px 5px; margin-right:0px;color:#fff;}
p#prev_next a:hover{text-align:center; background:url(../images/page_no_bgd_lgt.png) no-repeat right center ; padding-right:1px; padding-left:5px; margin-right:0px;color:#fff;}


/*---------------------------------- links ----------------------------------*/


a {text-decoration: none;}

a:link {text-decoration: none; color:#ff8700;}

a:visited {text-decoration: none; color:#ff8700;}

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

a:active {text-decoration: none; color: #ff8700;}


/*mail link finder and icon*/

a[href^="mailto:"]  {
	background: url(../images/mail_link.png) no-repeat right top;
	padding-right: 11px;
}

a[href^="mailto:info@nicko.me"], a[href^="mailto:nicko@daltons.net"]  {
	background: url(../images/mail_link_big.png) no-repeat right top;
	padding-right: 22px;

}



/*---------------------------------- layout ----------------------------------*/

#main{ width:900px; border:0px solid red; margin:0 auto; position:relative; }

#top{ width:900px; height:48px; border:0px solid blue; margin:80px 0 0 0; position:relative; }

#tab {position:absolute;right:0px; top:-20px; z-index:20; background-image:url(../images/tab.png); width:120px; height:20px; }
#tab p{font-size:10px; text-align:right;  float:right; padding-right:5px;}


#main_screen{ width:900px; height:auto; border:0px solid red; margin-top:30px; position:relative;/* height set for slideshow */
				background-image: url(../images/trans_bgd.png) !important;  /* Mozilla only */
    			background-color: transparent !important;           /* Mozilla only */
    			/*background-image: none;                             IE 7 and below only -  moved to own stylesheet */
    			/*background-color: #ffffff;                          IE 7 and below only -  moved to own stylesheet */
    			/*filter:alpha(opacity=20);                           IE 7 and below only -  moved to own stylesheet */
			}
	
#index #main_screen{ height:500px;}/* height set to fixed for home page */
	
#bottom {width:1196px; height:135px;margin-left:-146px;border:0px solid red; position:relative; display:inline-block;}

#overlay_screen{ width:900px; height:100px; border:0px solid red; position:absolute; top:0; left:0; z-index:30;
				background-image: url(../images/trans_blue_bgd.png) !important;  /* Mozilla only */
    			background-color: transparent !important;           /* Mozilla only */
   				/*background-image: none;                             IE 7 and below only -  moved to own stylesheet */
    			/*background-color: #ffffff;                          IE 7 and below only -  moved to own stylesheet */
    			/*filter:alpha(opacity=20);                           IE 7 and below only -  moved to own stylesheet */
			}
			


#text_area {position:relative; display:inline-block; width:820px; border: solid 0px green; } /* slideshow text area leaves 40px margins*/

#main_text{ position:relative; display:inline-block; width:820px; border: solid 0px green; margin-top:40px; }/* text area leaves 40px margins*/
#contact #main_text, #error404 #main_text  {  width:auto; float:left; margin-left:40px; }
#skills #main_text{  float:left; margin-left:40px; }


div.text_section{ position:relative; display:inline;  border: solid 0px red; float:left; width:550px;margin-right:20px;}
#skills div.text_section{ border: solid 0px red; float:left; width:460px;margin-right:20px;}


div.calendar{width:50px; height:auto; float:left; margin-right:20px;color:#000; clear:none; border:solid 0px red;}
div.calendar .month{width:50px; background-color:#ff8700; text-align:center;font-size:15px; text-transform:lowercase; font-weight:bold; padding:3px 0; margin-bottom:3px; }
div.calendar .date{width:50px;height:45px; background-color:#fff; text-align:center; font-size:32px; font-weight:bold; line-height:45px;  padding:3px 0;}/* ie8 color padding not working*/

div.clear_rule{ clear:both; width: 100%; padding:20px 0;background:url(../images/striped_line.png) repeat-x center;}
.clear{ clear:both; width: 100%;}


/*---------------------------------- menu (main and bottom)  ----------------------------------*/
.nav {
 	font-family:cronoreg;
	width:560px; border:0px solid #FF0000; 
	font-size:31px;
	letter-spacing:0.5px;
	font-weight:normal;
	margin:0 auto;
	color:#fff;
	position:absolute;
	bottom:0px;
	left:220px;
}

#bottom .nav {
	font-size:20px;
	top:35px;
	left:450px; /*to lign up with top nav 370px*/

			}

.nav ul{
	margin:0;
	padding:0;
	list-style-type:none;
}

.nav ul li{
	margin:0;
	padding:0;
	float:left;
	position:relative;
}

.nav ul li a{
	float:left;
	text-decoration:none;
	padding:0px 12px 0px 12px;
    margin:0;
	color:#fff; 
	cursor:pointer;
}

.nav ul li a:hover{
	float:left;
	text-decoration:none;
	padding:0px 12px 0px 12px;
    margin:0;
 	color:#ff8700;
	cursor:pointer;
}
	

.nav ul li a:hover{
	color:#ff8700;
}


.nav ul li a.active{
	float:left;
}

.nav ul li.current a{color:#ff8700;}



/*----------------------------------- images ----------------------------------*/

img.info {position:absolute;right:5px; top:5px; z-index:31;}

img.pause_button {position:absolute;left:5px; top:480px; z-index:50;}
img.play_button {position:absolute;left:5px; top:480px; z-index:50;}


img.left_button {position:absolute;left:-25px; top:250px; z-index:50;}
img.right_button {position:absolute;right:-25px; top:250px; z-index:50;}

img.news {width:auto; height:auto; border:0px solid purple; float:right;}
img.contact_img {border:0px solid purple; float:right;}

#skills #main_text img { border:0px solid red;float:right; padding-top:40px;}
#contact img#blue_env, #error404 img#blue_env  {border:0px solid red; float:right;}

.nickomaileg {
	float:left;
	padding:0 40px 0 0;
}

.nickomaileg.last {padding:0 0 40px 0;}




/*----------------------------------- images for slideshow 900px x 500px ----------------------------------*/

#slideshow{position:relative; float:left; display:inline; border:solid 0px green ; width:900px; height:500px;}