/*

Title:		imedia-vCard CSS File 

Author:		imediapixel@gmail.com

*/



/* ----------------------- SUMMARY -----------------------



- GENERAL LAYOUT

  - BODY

  - WRAPPER

	- HEADINGS

	- TEXT TAGS

	- IMAGE ALIGNMENT & STYLING;



- LEFT COLUMN

  - LEFT COLUMN CONTAINER

  - MENU

  - MAIN CONTENT

  - SOCIAL LINKS

    

- RIGHT COLUMN

  - LOGO

  - CONTACT DETAIL    



- SERVICES PAGE



- CONTACT PAGE



- PORTFOLIO PAGE



- TIPSY (For Tooltip Styling)



*/



/* Import CSS Reset File */

@import url("reset.css");



/* ----------------------- GENERAL LAYOUT -----------------------*/

body {

  background : #F3F3F3 url(../images/bg.jpg) top left repeat-x;

  font: 62.5% Arial, Helvetica, sans-serif;

}

/* Wrapper */

#wrappermiik {

  background: url(../images/M%C3%A4kil%C3%A4_card_Miika.png);
 
 padding: 30px 35px;

  margin-left: auto;

  margin-right: auto;

  margin-top: 105px;

 width: 584px;

  height: 292px;
}


#box-link3 { 
		position: absolute; 
		top: 239px; 
		left: 436px; 
		width: 195px; 
		height: 14px; 
		background-color: transparent; 
		z-index: 100;}
		
		
#box-link4 { 
		position: absolute; 
		top: 278px; 
		left: 436px; 
		width: 195px; 
		height: 14px; 
		background-color: transparent; 
		z-index: 100;}
		
		


#wrapperpet {
 
 background-image: url(../images/M%C3%A4kil%C3%A4_card_Peter.png);
 
 padding: 30px 35px;

  margin-left: auto;

  margin-right: auto;

  margin-top: 105px;

 width: 584px;

  height: 292px; 

}

	
#box-link1 { 
		position: absolute; 
		top: 237px; 
		left: 447px; 
		width: 166px; 
		height: 12px; 
		background-color: transparent; 
		z-index: 100;
}
		
#box-link2 { 
		position: absolute; 
		top: 277px; 
		left: 447px; 
		width: 166px; 
		height: 27px; 
		background-color: transparent; 
		z-index: 100;
}

/* Heading */


h1, h2, h3, h4, h5, h6{

	font-weight:normal;

	color:#858585;

	text-transform: capitalize;

}



/* links */

a,a:link,a:visited {

  color:#858585; 

  text-decoration:none;

}

a:hover{

  color:#353535;

}

a img, img {

  border:none

}



/* paragraphs,blockquote,code */

p {

  font-size:1.1em;

  line-height:1.6em;

  margin-bottom:1.5em;

  color:#969696;

}

blockquote {

  margin: 10px 0 0 0;

  padding: 5px 0 5px 40px ;

  color: #858585;

  background: url(../images/quote.png) top left no-repeat;

  font-style: italic; 

  line-height: 1.4em; 

}

blockquote p {

  margin-bottom: 5px;

}



/* Images Alignment & Styling */

.alignleft {

  float: left;

  margin: 5px 10px 0 0;

}

.alignright {

  float: right;

  margin: 0 10px 10px 10px;

}

.aligncenter {

  margin-bottom: 10px;

  margin: 0 auto;

  display: block; 

}

.imgbox {

  padding: 2px;

  border: 1px solid #eee;

  background: #fff;

  display: inline;

}

.homeimage {

  margin-bottom: 5px;

}



/* -----------------------  LEFT COLUMN SECTION -----------------------*/

/* Left Column Container */

#leftcol {

  background: transparent;

  float: left;

  width: 408px;

}



/* Menu */

#menu {padding-top:5px;

}

#menu ul {

  margin: 0;

  padding: 0;

}

#menu li {

  margin:0;

  display: inline;

}

#menu li a {

  margin-right: 5px;

  float: left;

  text-indent:-9999px;

  width: 18px;

  height: 18px;

}

#menu li a.home {

  background: url(../images/home.png) left no-repeat;

}

#menu li a.about {

  background: url(../images/about.png) left no-repeat;

}

#menu li a.services {

  background: url(../images/services.png) left no-repeat;

}

#menu li a.portfolio {

  background: url(../images/portfolio.png) left no-repeat;

}

#menu li a.contact {

  background: url(../images/mail.png) left no-repeat;

}

#menu li a.download{

  background: url(../images/download.png) left no-repeat;

}

#menu li a.home:hover {

  background: url(../images/home-hover.png) left no-repeat;

}

#menu li a.about:hover {

  background: url(../images/about-hover.png) left no-repeat;

}

#menu li a.services:hover {

  background: url(../images/services-hover.png) left no-repeat;

}

#menu li a.portfolio:hover {

  background: url(../images/portfolio-hover.png) left no-repeat;

}

#menu li a.contact:hover {

  background: url(../images/mail-hover.png) left no-repeat;

}

#menu li a.download:hover{

  background: url(../images/download-hover.png) left no-repeat;

}



/* Main Content */

.content {

  height: 210px;

  margin-top: 10px;
padding-top:3px;
}

.content h1 {

  font-size: 2.4em;

  margin-bottom: 5px;

}

.content h2 {

  font-size: 2em;

  margin-bottom: 10px;

}

.content li {

  display: none;

}

/* Sociali Links */

.social-links {

  height: 1%;

 

  margin: 5px 0;

  padding-top: 12px;

}

.social-links li {

  margin: 2px;

  display: inline;

} 

.social-links li a img {

  margin: 0 8px 0 0;

  display: inline;

  border: none;

  background: none;

}



/* -----------------------  RIGHT COLUMN SECTION -----------------------*/

/* Right Column Container*/

#rightcol {

  position:absolute; top:35px; left:420px;
  
  background: transparent;

  margin-left: 26px;

  float: left;

  width: 150px;  
  
  

}

/* Logo */



#logo h1 {
  padding-top:8px;
 
  line-height: .3;

  font-size: 2.2em;
   
  text-transform: uppercase;

  margin-bottom: 10px;
 
  text-align:center;
  
  color: white;
  
}

#logo h1 span {

  letter-spacing: .2em;

  font-size: 55%;
  
  text-transform: uppercase;

  text-align:center;
  
  color: white;
  
  
  
}


/* Contact Detail */

.contactinfo {

  margin: 10px 0;

  text-align: center;

  color: white;
}

.contactinfo li {
  
  
  font-size: 1.5em;

  color: white;

  line-height: .5em;

}





/* -----------------------  ABOUT PAGE -----------------------*/

/* Check List */

.content li ul#checklist {

  margin: 0;

  padding: 0;

  list-style: none;

}

.content li ul#checklist li {

  width: 180px;

  float: left;

  display: block;

  font-size: 1.1em;

  margin: 2px 0; 

  padding-bottom: 2px;

  padding-left: 22px;  

  background: url(../images/check-box.png) 0 0 no-repeat;

  color:#969696;

}

.clear {

	clear: both;

}



/* -----------------------  SERVICES PAGES -----------------------*/




.content li ul#serviceslist li { 

  display:list-item;

  

  margin-right: 10px;

}



#serviceslist {

  color:#969696;
  line-height:145%;
  padding:5px;
  font-size: 1.7em;
  float:left;

}



/* -----------------------  CONTACT PAGES -----------------------*/

#maincontactform {
font:Helvetica, sans-serif;
  margin: 10px 0;

}

#maincontactform .leftform {

  float: left;

  width: 180px;

}

#maincontactform .rightform {

  margin-left: 10px;

  float: right;

  width: 215px;

}



#maincontactform label {

  font-size: 1.1em;

  color: #5a5a5a;

  width: 100px;

  float: left;

  font-weight: bold;

}

.textfield {

  float: left;

  margin-bottom: 10px;

  color: #8a8a8a;

  width: 160px;

  height: 26px;

  line-height: 20px;

  border: 1px solid #eee;

  font-size: 1.1em;

  padding: 4px;    

}

.textarea {

  float: left;

  margin: 0;

  padding: 3px ;

  color: #8a8a8a;  

  width: 200px;

  height: 140px;

  margin-bottom: 10px;

  border: 1px solid #eee;

  overflow: hidden

}

.buttoncontact {

  height: 25px;

  border: 1px solid #ddd;

  background:#fafafa;

  cursor: pointer;

  color: #666666;

  text-transform: uppercase;

  font-weight: bold;

  font-size: 1em;

}

.require {

  float: left;

  display: inline;

  color: #f00;

  font-weight: bold;

  margin-left: 2px;

}

.loading {

  background: url(../images/loading.gif) top left no-repeat;

  padding-left: 32px;

  font-size: 1.2em;

  color: #2C6D00;

}

.success {

  margin: 10px 0;

  font-size: 1.1em;

  color: #3F9153;  

  padding: 3px 5px 3px 23px;

  background: #D7F7DF url(../images/ok.png)  0 .3em no-repeat;

  border: 1px solid #A3F7B8

} 

cgcf

/* tipsy */

.tipsy { padding: 5px; font-size: 10px; background-repeat: no-repeat;  background-image: url(../images/tipsy.gif); }

  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }

  .tipsy-inner { }

  .tipsy-north { background-position: top center; }

  .tipsy-south { background-position: bottom center; }

  .tipsy-east { background-position: right center; }

  .tipsy-west { background-position: left center; }