/*

Oh Hi there stylesheet visitor. Welcome to the CSS.
Hopefully you're here to see how I did something right and not how I made a complete mess of something on your screen!
If the former, then feel free to browse and learn by don't just steal...why not get me to help you? I'm easy to contact and approachable!
If the latter...well go ahead and have a good laugh at my stupidity!
Have a nice day.


This be: www.technikal.net/style.css
Hand crafted with pleasure and some pain by: Alex McIlwaine (hello at technikal.net)
May 2009
*/

/*
***************************************
Resets
***************************************
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

.alignright { float:right; }
.padding30 { padding: 30px 0; }

.hide { text-indent:-9999em; outline: none; }

#tooltip
{
	position:absolute;
	border:1px solid #ddd;
	background:#fafafa;
	padding:5px;
	color:#000;
	display:none;
	font-size: 1.2em;
}


/*
***************************************
Body, Text, Links, Custom Stuff
***************************************
*/

body 
{
	background: #fafafa url(images/body_bg.jpg) top left repeat-x;
	font: normal 62.5% Tahoma,Verdana,Arial,sans-serif; 
	color: #644C18;
	text-align: left;
}

#content a:link, #content a:visited, #content a:active 
{
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	color: inherit;
}

#content a:link:hover, #content a:link:focus, #content a:visited:hover, #content a:visited:focus, #content a:active:hover, #content a:active:focus 
{
	color: #000;
}

h1#logo a 
{
	float: left;
	text-indent: -500em;
	overflow: hidden;
	width: 292px;
	height: 51px;
	background: url(images/technikal.jpg) top left no-repeat;
	display: block;
}
	
h1#logo a:hover 
{
	background: url(images/technikal_hover.jpg) top left no-repeat;
}

#section1 h2
{
	font: normal 80px Helvetica,Arial,sans-serif;
	line-height: 90px;
	text-align: left;
	padding: 0;
	color: #D7D7DB;
}

.column h3, .column_last h3 
{
	margin: 20px 0;
	font: bold 14px Tahoma,Helvetica,Arial,sans-serif;
	color: #1779A6;
}

.showcase_info h4
{
	font: normal 20px Tahoma,Arial,sans-serif;	
	text-align: justify;
	letter-spacing: 1px;
	margin: 0 0 10px 0; 
	color: #003B55;
}

#footer .column_base h3, #footer .column_base_last h3 
{
	margin: 20px 0;
	font: bold 12px Tahoma,Verdana,Arial,sans-serif;
	color: #868686;
}




#intro p, #aboutalex p, .showcase p
{
	font: 16px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, arial, sans-serif;  
	line-height:24px; 
	text-align: justify;
	margin: 0 0 20px 0; 
	color: #195163;
}

.column p, .column_last p
{
	font-size: 1.2em;
	line-height: 1.4em;
}

#footer .column_base p, #footer .column_base_last p
{
	font-size: 1.2em;
	line-height: 1.4em;
	color: #9C9C9C;
}

p.latest a 
{
	color: #000;
	font-size: 1.2em; 
	text-decoration: none;
}

p.latest a:hover 
{
	color: #646464;	 
	text-decoration: none;
}

#fav li, .showcase_info li
{
	font-size: 1.2em;
}

.showcase_info li
{
	margin: 0 0 5px 0;
	padding: 5px 0;
	line-height: 1.4em;
	border-bottom: 1px solid #dfdfdf;
}

.title
{
	font-weight: bold;
	color: #666;
}

.why
{
	color: #1981AF;
}


.services_btn 
{
	background:url(images/viewservices.jpg) 0 0 no-repeat;
	width:110px;
	height:34px;
	display:block;
	border:0;
	text-indent:-1000em;
	margin:0 0 0 -20px;
}

.pricing_btn 
{
	background:url(images/viewpricing.jpg) 0 0 no-repeat;
	width:110px;
	height:34px;
	display:block;
	border:0;
	text-indent:-1000em;
	margin:0;
}

.contact_btn 
{
	background:url(images/contactme.jpg) 0 0 no-repeat;
	width:110px;
	height:34px;
	display:block;
	border:0;
	text-indent:-1000em;
	margin:0;
}

.services_btn:hover, .pricing_btn:hover, .contact_btn:hover
{
	background-position: 0 -34px;
}


/*
***************************************
Structure
***************************************
*/

#wrapper
{
	width: 960px;
	margin: 0 auto;
}

#header
{
	height: 80px;
	margin-top: 70px;
}

#nav {list-style: none; width: 560px !important;}
	#nav li {float: left; margin: 0 0 0 30px; }
	
		#nav a {background:url(images/nav.jpg) no-repeat 0 0; display: block; height:25px;}
	
		#nav #nav_home {background-position:0 0; width:62px;}
		#nav #nav_home:hover {background-position:0 -25px;}
		#home #nav #nav_home{background-position:0 -50px;}
			
		#nav #nav_about {background-position:-62px 0; width:76px;}
		#nav #nav_about:hover {background-position:-62px -25px;}
		#about #nav #nav_about {background-position:-62px -50px;}
		
		#nav #nav_services {background-position:-138px 0; width:97px;}
		#nav #nav_services:hover {background-position:-138px -25px;}
		#services #nav #nav_services {background-position:-138px -50px;}
			
		#nav #nav_works {background-position:-235px 0; width:80px;}
		#nav #nav_works:hover {background-position:-235px -25px;}
		#works #nav #nav_works {background-position:-235px -50px;}
			
		#nav #nav_contact {background-position:-315px 0; width:95px;}
		#nav #nav_contact:hover {background-position:-315px -25px;}
		#contact #nav #nav_contact {background-position:-315px -50px;}


#content 
{
	width: 960px;
}




#section1, #section2, #footer
{
	clear: both;
	position: relative;
	width: 960px;
}

.column 
{
	width: 285px;
	height: 220px;
	float: left;
	margin: 0 45px 20px 0;
	border-top: 5px solid #eee;
	display: block;
}

.column_last 
{
	width: 285px;
	height: 220px;
	float: left;
	margin: 0;
	border-top: 5px solid #eee;
}

.column_base
{
	width: 285px;
	height: 150px;
	float: left;
	margin: 0 45px 20px 0;
	border-top: 5px solid #eee;
	display: block;
}

.column_base_last 
{
	width: 285px;
	height: 150px;
	float: left;
	margin: 0;
	border-top: 5px solid #eee;
}





#tag
{
	width: 960px;
	height: 70px;
	margin-bottom: 20px;
}

#intro
{
	width: 600px;
	float: left;
	margin: 20px 0;
	clear: both;
}

#laptop
{
	width: 360px;
	float: left;
	margin: 0 0 20px 0;
}

#aboutalex
{
	width: 640px;
	float: left;
	margin: 20px 0;
	clear: both;
}

#pic
{
	width: 320px;
	float: left;
	margin: 0 0 20px 0;
}

.showcase
{
	width: 960px;
	float: left;
	margin: 20px 0;
	clear: both;
}

.showcase_pic
{
	float: left;
	width: 600px;
	height: 280px;
	margin: 0 0 0 -20px;
}

.showcase_info
{
	float: right;
	width: 350px;
}







#whatido, #pricing
{
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

#whatido li
{
	padding: 0 0 10px 20px;
	background-image: url(images/check.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	font-size: 1.2em;
}

#pricing li, #contactme li
{
	padding: 0 0 10px 0;
	font-size: 1.2em;
}

.nobg
{
	padding: 0 0 10px 0px;
	background-image: none;
	font-size: 1.2em;
}

#latest, #fav
{
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

#latest li, #fav li
{
	padding: 0 0 10px 0;
}











#top-link	
{ 
	display:none; 
	position:fixed; 
	right:5px; 
	bottom:5px; 
	color: #000; 
	font-weight:bold;
	font-size: 12px;
	text-decoration:none; 
	border:1px solid #ddd; 
	background: #eee; 
	padding:10px; 
}