/*
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 */
#wrapper {
  padding: 30px 35px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  background: url(../images/bg.png);
  width: 584px;
  height: 292px;
}

/* 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(http://imediautama.com/templates/imedia-vcard/white/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 {
}
#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;
	background: url(../images/im-hover.png) left no-repeat;
}
#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;
}
.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%;
  background: url(../images/divider.jpg) top left repeat-x;
  margin: 5px 0;
  padding-top: 8px;
}
.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 {
  background: transparent;
  margin-left: 26px;
  float: left;
  width: 150px;  
}
/* Logo */
#logo {
  width: 125px;
  margin-top: 5px;
  margin-left:  auto;
  margin-right:  auto;
  display: block;
  text-align: center;
}
#logo h1 {
  line-height: .3;
  font-size: 2.4em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
#logo h1 span {
  letter-spacing: .2em;
  font-size: 50%;
  text-transform: uppercase;
  color: #858585;
}
.logodivider {
  height: 20px;
  background: url(../images/logodivider.jpg) 60% 50% no-repeat;
}
/* Contact Detail */
.contactinfo {
  margin: 10px 0;
  text-align: center;
}
.contactinfo li {
  font-size: 1.3em;
  color: #777777; 
  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 {
  margin-top: 10px;
  list-style: none;
}
.content li ul#serviceslist li { 
  display: block;
  width: 190px;
  float: left;
  margin-right: 10px;
}
.content li ul#serviceslist li p {
  margin-bottom: 10px;
  color:#969696;
}
.content li ul#serviceslist li h3 {
  margin-bottom: 5px;
  font-size: 1.6em;
}
.content li ul#serviceslist li img {
  margin-top:0;
  margin-right:10px;
  margin-bottom:50px; 
}

/* -----------------------  PORTFOLIO PAGES -----------------------*/
.content li ul#portfolio li {
  display: inline-block;
  float: left;
  margin-bottom: 10px;
  width: 408px;
}
.boxgrid{
  margin-right: 10px;
  margin-bottom: 8px;  
	width: 120px; 
	height: 70px;
	float:left; 
	background:#ffffff; 
	border: solid 1px #eeeeee; 
	overflow: hidden; 
	position: relative;    	
	padding: 2px;
	display: block;
}
.boxgrid img{ 
	position: absolute; 
	top: 2px; 
	left: 2px; 
	border: 0; 
	display: block;
}
.boxgrid p { 
	margin: 10px; 
	color:#ffffff; 
	font-weight:normal; 
	font-size: 1.2em;
}
.boxgrid a:hover {
	color:#ffffff; 
}	
.boxcaption{ 
  display: block;
	float: left; 
	position: absolute; 
	background: #000; 
	height: 72px; 
	width: 120px; 
}
.captionfull .boxcaption {
		top:74px;
		left: 2px;
		bottom: 2px;
	}
.content li ul#portonav{
  position: absolute;
  top: 10px;
  right: 0;
  display: block;
}
.content li #portonav li {
  margin-right:10px; 
  float:left;
  display: block;
}
.hide {
  display: none;
}
.pp_inline p {
  color: #353535;
}
.pp_inline strong {
  font-weight: normal;
  font-size: 1.4em;
}

/* -----------------------  CONTACT PAGES -----------------------*/
#maincontactform {
  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: 16px;
  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
} 

/* 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; }