/*

Theme Name: Mangoco

Theme URI: http://mangoco.com/

Description: New Mangoco Theme.

Version: 2.0

Author: BECMEDIA

Author URI: http://becmedia.ro/

*/

@CHARSET "UTF-8";



/******[ Some generic rules ]*****************************************************************/

body,div,h1,h2,h3,h4,h5,h6,p,a,table,th,td {margin:0px; padding:0px; outline:none; -moz-outline:none; font-size:96.3%; font-family:Verdana, Geneva, Arial, sans-serif; }

body {width:100%}

img {border:none}

.alignleft {float:left}

.alignright{float:right;}

.clear{clear:both}



/******[ LAYOUT ]*****************************************************************************/



#index {width:100%; background:url('images/index_bg.jpg') repeat-x 0px 0px}

.wrapper { width:1000px; margin:0px auto;}

.wrapper_rel { width:1000px; margin:0px auto; position:relative}



/**- header -**/

#head {width:100%; height:107px; background:url('images/top_bg.jpg') repeat-x 0px 0px}

#head .logo {height:77px; padding:30px 0px 0px; width:500px; float:left;}

#head .email_phone {height:77px; padding:30px 0px 0px;  float:right;}



/**- menu -**/

#menu {width:100%; height:41px; background:url('images/menu_bg.jpg') repeat-x 0px 0px}

#nav { margin:0; padding:0; list-style:none; font-family:Arial; letter-spacing:-1px; font-size:12px;} 



    #nav li {  float:left; display:block;  position:relative; z-index:9900; margin:0 1px; background:#545454;}   

          

    /* this is the parent menu */   

    #nav li a { background:url('images/menu_bullet.jpg') no-repeat 0px 0px; display:block; height:28px; padding:12px 15px 0px 20px; color:#FFF; text-decoration:none; float:left; }

    #nav li a:hover { color:#fff;}   

    #nav li.page-item-23 a { background: none; padding-left:0px }

    #nav li.page-item-23 ul li {padding:0px 0px 0px 5px; width:170px}

    

    /* you can make a different style for default selected value */   

    #nav a.selected { color:#F80; }

	

        /* submenu, it's hidden by default */   

        #nav ul { position:absolute; left:0; display:none; margin:40px 0 0 -1px; padding:0; list-style:none; z-index:600}   

           

        #nav ul li { width:175px; float:left; }

		#nav ul li.end {width:175px; height:5px; background:transparent url('images/dropdown_bg.gif') no-repeat bottom center}   

           

        /* display block will make the link fill the whole area of LI */   

        #nav ul a { display:block;height:15px;padding: 8px 5px;color:#FFF; display:block; background:none;}   

           

        #nav ul a:hover {text-decoration:none; color:#F90}

  

/* fix ie6 small issue */   

/* we should always avoid using hack like this */   

/* should put it into separate file : ) */   

*html #nav ul {   

    margin:40px 0 0 -2px; 

}   



*html #nav li {  display:inline}



/**- banner -**/

#banner {width:100%; height:283px; background:#ed670e url('images/banner_bg.jpg') repeat-y center top; }

#banner h2 {font-family:Tahoma, Arial,Helvetica,sans-serif; font-weight:normal; color:#FFF; font-size:30px; padding-top:20px}

#banner p {color:#FFF; width:580px; line-height:1.5em; font-size:16px}

#banner p strong {font-weight:normal; background:#F83; padding:5px;}

#banner .content {width:100%; height:283px; background: url('images/banner_right.jpg') no-repeat right top}

#banner_sub {width:100%; height:14px; margin:2px 0px 0px 0px; background:url('images/top_bg.jpg')}

#banner #slide-box {position:absolute; right:13px; top:26px; width:278px; height:176px;}

#banner #slide-box img {border:none !important; padding:0px; margin:0px;}

/**- content -**/

#content {width:100%; }

#content #copy {width: 730px; float:left;  }



/**- sidebar -**/

#sidebar {width: 259px; float:left; font-family:Arial, Helvetica,sans-serif;}

#sidebar ul {padding:0px; margin:0px; list-style:none}

#sidebar ul li {padding:0px; margin:0px;}

#sidebar .testimonials {width:239px;background: #ed9e0e url('images/right_client_testimonials.jpg') no-repeat 0px 0px; color:#FFF; padding: 45px 10px 10px; float:left; font-size:14px;  line-height:18px}

#sidebar .testimonials .quotebox {width:60px; height:30px; float:left; }

#sidebar .testimonials a{color:#000; text-decoration:underline; font-size:11px;}

#sidebar .form {background: url('images/right_form_bg.jpg') repeat-x top; padding:50px 0px 0px; margin:0px;}

#sidebar .noform {background: url('images/right_noform_bg.jpg') repeat-x top; padding:50px 0px 0px}



/**- footer -**/

#footer_sup {width:100%; height:14px; margin:2px 0px; background:#ed670e url('images/banner_bg.jpg') repeat-y center top; font-size:1px; }

#footer {width:100%; background:#707070; padding-top:50px; color:#000}



#footer .bottom_links {margin:10px; padding: 0px 0px 10px; border-bottom:1px solid #CCC;  text-shadow: 0px 1px 0px #999; font-family:Arial}

#footer .bottom_links a{color:#000; text-decoration:none; text-transform:uppercase;}



#footer .copyright_left {width:300px; float:left; font-size:10px; color:#222; padding:0px 10px 50px; text-shadow: 0px 1px 0px #999; }

#footer .copyright_right {width:660px; float:left; text-align:right; font-size:10px; color:#222; padding:0px 10px 50px; text-shadow: 0px 1px 0px #999; }



#footer ul.box {width:320px;  float:left; padding:0px; margin:5px; list-style:none;}

#footer ul.box .top,

#footer ul.box .bottom {width:320px; height:5px; display:block; background:url('images/footer_box.jpg'); overflow:hidden; line-height:1px; font-size:0px;  }

#footer ul.box .bottom {background-position:0px -5px}

#footer ul.box .middle { color:#444; font-size:11px;height:160px;padding:10px; background:#FFF; margin:0px;}

#footer ul.box .middle a {color:#444; margin-top:5px; }



#footer ul.box .middle h3 {color:#F80; font-weight:normal; font-family:Verdana, Helvetica, sans-serif; font-size:18px;}

#footer ul.box .middle h5 {color:#444; font-weight:normal; font-family:Verdana, Helvetica, sans-serif; font-size:13px; padding:5px 0px 0px}

#footer ul.box .middle p {color:#444; font-size:11px; padding:1px 0px 5px; line-height:15px;}





/*****[ HOME STYLE ]*****************************************************************************/

.home {text-align: justify; line-height: 18px; font-family:Arial; color:#444; font-size:13px; padding:10px}

.home h1, .home h1 a {font-family:Tahoma; color:#F80; font-weight: normal; font-size:1.4em; color:#F80; text-decoration: none; letter-spacing:-1px; line-height:1.6em; padding:10px 0px}

.home p {padding:0 0 1em 0;}





/******[ PAGE STYLE ]*****************************************************************************/



.page {text-align: justify; line-height: 18px; font-family:Arial; color:#444; font-size:13px; padding:0px 10px}



.page p {margin:0px 0px 15px}

.page h2, .page h2 a {color:#fe9002; font-weight:normal; font-size:24px; padding:15px 0px 15px; text-decoration:none}

.page h3, .page h3 a {color:#555; font-weight:normal; font-size:20px; padding:10px 0px 10px; text-decoration:none}

.page h4, .page h4 a {color:#ed6a0e; font-weight:normal; font-size:18px; padding:10px 0px 10px; text-decoration:none}



.page a:link { color: #ec8b00; text-decoration:undeline;}

.page a:active { background: #ec8b00; color:#FFF !important; padding:3px 0px; text-decoration:undeline}

.page a:visited { color: #000; text-decoration:underline;}



/******[ CONTACT PAGE ]*****************************************************************************/

.page .contact_footer {padding:20px; margin:0px 40px 20px; font-size:15px; background:#EEE; border:1px solid #DDD; font-style:italic;}

.page .contact_footer .alignleft {width:49%; border-right:1px solid #CCC}



/******[ MANAGEMENT PAGE ]*****************************************************************************/

.page .management { float:left; width:100%;}

.management .person { background:url('images/blog_post_separator_bg.jpg') no-repeat left bottom	; padding:20px 0px; margin:0px; float:left; width:670px; }

.management .person img {float:left; margin: 0px 10px}

.management .person h2 {padding:0px 0px 5px; margin:0px;} 

.management .person p {padding:10px 0px 0px 0px} 



/******[ PORTFOLIO PAGE ]*****************************************************************************/



.porftolio {}



.portfolio a:hover {text-decoration:none !important}

.portfolio div#container {

	overflow: hidden;

	

}

.portfolio div.content {

	display: none;

	clear: both;

	

}



.portfolio div.content a, .portfolio div.navigation a {

	text-decoration: none;

	

}

.portfolio div.content a:hover, .portfolio div.content a:active {

	text-decoration: underline;

	

}



.portfolio div.navigation a.pageLink {

	height: 77px;

	

	

}



.portfolio div.controls {

	margin-top: 5px;

	height: 23px;

	

}

.portfolio div.controls a {

	padding: 5px;

}

.portfolio div.ss-controls {

	float: left;

}

.portfolio div.nav-controls {

	float: right;

}



.portfolio div.slideshow-container,

.portfolio div.loader,

.portfolio div.slideshow a.advance-link {

	width: 530px; /* This should be set to be at least the width of the largest image in the slideshow with padding */

	

}





.portfolio div.slideshow-container {

	position: relative;

	clear: both;

		

	height: 532px;

	width:100%;

}



.portfolio div.loader {}



.portfolio div.slideshow span.image-wrapper {

	display: block;

	position: absolute;

	width:100%;

	

}



.portfolio div.slideshow a.advance-link {

	display: block;

	width:100%;	

	text-align: center;

}



.portfolio  a:hover,

.portfolio a:active,

.portfolio a:visited {

	text-decoration: none;

	background:none !important;

}

.portfolio div.slideshow a.advance-link:focus {

	outline: none;

}



.portfolio div.slideshow img {

	margin:0px auto;

}

.portfolio div.caption-container {

	float: right;

	position: relative;

	margin-top: 30px;

}

.portfolio span.image-caption {

	display: block;

	position: absolute;

	top: 0;

	left: 0;

}



.portfolio div.caption-container, span.image-caption {

	width: 334px;

}



.portfolio div.caption {

	padding: 0 12px;

}



.portfolio div.image-title a:link,

.portfolio div.image-title a:visited,

.portfolio div.image-title a:active,

.portfolio div.image-title a:hover

{

	color:#000;

	font-size: 12px;

	font-weight:bold;

}



.selected a

{

	color:#f80 !important;

	

}

.portfolio div.image-desc {

	

	

}



.portfolio div.navigation-container {

	float: left;

	position: relative;

	left: 50%;

		

	

}

.portfolio div.navigation {

	float: left;

	position: relative;

	left: -50%;

	

}

.portfolio div.navigation a.pageLink {

	display: block;

	position: relative;

	float: left;

	margin:100px 0px; padding:10px;

	width:32px; height:32px;

	background-position:center center;

	background-repeat:no-repeat;

}

.portfolio div.navigation a.pageLink:focus {

	outline: none;

}



.portfolio ul.thumbs {

	position: relative;

	float: left;

	margin: 0;

	padding: 10px 20px;

	background:url('images/portfolio_plugins.jpg') no-repeat;

	width:760px;

	height:235px;

        

        overflow:hidden;

	

}

.portfolio ul.thumbs li {

	float: left;

	padding: 0;

	margin: 2px;

	list-style: none;

        font-size:10px;

        line-height:12px;

}

.portfolio a.thumb {

	padding: 1px;

	display: block;

}

.portfolio a.thumb:focus {

	outline: none;

}

.portfolio ul.thumbs img {

	border: none;

	display: block;

}







/******[ BLOG STYLE ]*****************************************************************************/

.blog a:link { color: #ec8b00; text-decoration:underline;}

.blog a:active { background: #ec8b00; color:#FFF !important; padding:3px 0px; text-decoration:undeline}

.blog a:visited { color: #000; text-decoration:underline;}



.blog {text-align: justify; line-height: 18px; font-family:Arial; color:#444; font-size:13px; padding:0px 10px}

.blog h2, 

.blog h2 a:link,

.blog h2 a:visited,

.blog h2 a:active {color:#ed710e; font-weight:normal; font-size:24px; padding:15px 0px 15px; text-decoration:none; text-align:left;}



.blog h3, 

.blog h3 a:link,

.blog h3 a:visited,

.blog h3 a:active {color:#555; font-weight:normal; font-size:20px; padding:10px 0px 10px; text-decoration:none; text-align:left;}



.blog h4, 

.blog h4 a:link,

.blog h4 a:visited,

.blog h4 a:active {color:#ed6a0e; font-weight:normal; font-size:18px; padding:10px 0px 10px; text-decoration:none; text-align:left;}





.blog .post_date {width: 79px; height:84px; float:left; background:url('images/blog_post_date_bg.jpg');}

.blog 		.post_date p {padding:18px 0px 0px !important; line-height:14px; font-size:13px; text-align:center; color:#FFF; width:100%;}

 

.blog .post_title {width: 575px; height:84px; float:left;}

.blog 		.post_title h2 {padding:5px 0px 0px 10px; text-align:left; line-height:30px;}

.blog 		.post_title .theauthor {padding:0px 10px; font-size:12px; font-weight:bold; color:#000;}



.blog .post_comments {width: 55px; height:84px; float:left; background:url('images/blog_comments_bg.jpg') no-repeat 10px 10px;}

.blog .post_comments p{margin:18px 2px 0px 10px; text-align:center;}

.blog .post_comments a{color:#FFF !important; text-decoration:none !important; font-size:22px; font-family:Arial, Helvetica, sans-serif;}



.blog .post_separator {width:100%; height:10px; margin:20px 0px 0px; float:left; background:url('images/blog_post_separator_bg.jpg') no-repeat left top; clear:both;}



.blog .navigation {width:100%; padding:20px 0px; }



.blog ol.commentlist {list-style:none; padding:0px; margin:0px;}

.blog ol.commentlist li {border:1px solid #DDD; background:#EFEFEF; padding:5px; margin:10px 0px}

.blog ol.commentlist cite {font-size:11px;}

.blog ol.commentlist .user .avatar {float:left; padding:0px 5px 0px 0px}

.blog ol.commentlist .user p {float:left;}



.blog .post p {padding:0px 0px 10px; }





/******[ MISC STYLE ]*****************************************************************************/



#breadcrumbs {width:100%;  background:#ed9e0e; color:#FFF; padding:5px 0px; font-size:11px; }

#breadcrumbs a {color:#000; text-decoration:none;}

#breadcrumbs span {color:#000;}



blockquote {font-style:italic; padding:10px; color:#666; font-size:11px;}



.narrowcolumn {

	float: left;

	padding: 0 0 20px 45px;

	margin: 0px 0 0;

	width: 450px;

	}



.widecolumn {

	padding: 10px 0 20px 0;

	margin: 5px 0 0 150px;

	width: 450px;

	}



.post {

	margin: 0 0 40px;

	text-align: justify;

	}



.post hr {

	display: block;

	}



.widecolumn .post {

	margin: 0;

	}



.narrowcolumn .postmetadata {

	padding-top: 5px;

	}



.widecolumn .postmetadata {

	margin: 30px 0;

	}



.widecolumn .smallattachment {

	text-align: center;

	float: left;

	width: 128px;

	margin: 5px 5px 5px 0px;

}



.widecolumn .attachment {

	text-align: center;

	margin: 5px 0px;

}



#searchform {

	margin: 10px auto;

	padding: 5px 3px;

	text-align: center;

	}



#sidebar #searchform #s {

	width: 108px;

	padding: 2px;

	}



#sidebar #searchsubmit {

	padding: 1px;

	}





h1.main_heading {width:100%; height:55px; background:url('images/inner_heading_bg.jpg') no-repeat; margin:0px; padding:35px 0px 0px 0px; font-size:28px; font-weight:normal; color:#333; }



/******[ FORM STYLE ]*****************************************************************************/



input.field, textarea.field {border:1px solid #CCC; padding:1px; background:#FFF}



.notification {border:1px solid #Fc0; background:#FFD; padding:5px; margin:10px 10px 20px; font-size:11px;}



.notification ul { padding:0px; margin:0px; list-style:none} 



ol.sidebarform {list-style:none; margin:0px; padding:20px;}

ol.sidebarform li {margin:0px; padding:0px;}

ol.sidebarform li.notification {margin:0px; padding:5px; border:1px solid #FC0; background:#FFD; font-size:11px; font-weight:bold; color:#000}

ol.sidebarform label {display:block; color:#4b4234; font-size:10px;}

ol.sidebarform .field {background:#FFF; border:1px solid #CCC; padding:3px; width:200px; margin:0px 0px 5px }



ol.contactform {list-style:none; margin:0px; padding:20px;}

ol.contactform li {margin:20px 0px; padding:0px;}

ol.contactform li.notification {margin:0px; padding:5px; border:1px solid #FC0; background:#FFD; font-size:11px; font-weight:bold; color:#000}

ol.contactform label {display:block; color:#4b4234; font-size:16px; font-weight:bold; padding:5px; float:left; width:200px; text-align:right;}

ol.contactform .field {background:#FFF; border:1px solid #CCC; padding:10px; width:200px; margin:0px 0px 5px; }

ol.contactform textarea.field {height:90px;} 

ol.contactform button {margin-left:215px}



ol.contactform input, ol.contactform textarea {font-size:16px; color:#F60; font-family:Arial, Helvetica, sans-serif}



.bottomform { width: 721px;  background:#e3e3e3 url('images/inner_form_bg.jpg') no-repeat; margin:20px 0px 0px;}

.bottomform_btm {  width: 721px; height:10px; background:url('images/inner_form_bg2.jpg') no-repeat top left; margin:0px 0px 20px;}

.bottomform h3 {  color: #ed7a30 ; font-size:18px; height:60px; font-family: Arial, Helvetica, sans-serif; t-weight:bold;  margin:0px; padding: 20px 20px 10px 110px}

.bottomform em {color:#000; font-style:italic,oblique;}



.blog #commentform {padding:5px 0px 20px 0px}

.blog #commentform input, .blog #commentform textarea {margin:3px 0px; border:1px solid #CCC; background:#FFF}

.blog #commentform textarea {width:100%}



/******[ COLUMNS & COLUMN CONTAINERS ]*****************************************************************************/



div.two-column-container {width:99%; }



div.two-column-container div {width:48%; padding:0px 0px 10px 10px; float:left; }



div.two-column-container  label {padding:0px 5px; float:left; display:block;}

div.two-column-container  input, 

div.two-column-container  textarea { padding:5px;}



/******[ BUTTONS ]*************************************************************************************************/



button { 

	position: relative;

	border: 0; 

	padding: 0;

	margin:0px;

	cursor: pointer;

	overflow: visible; /* removes extra side padding in IE */

}



button::-moz-focus-inner {

	border: none;  /* overrides extra padding in Firefox */

}



button span { 

	position: relative;

	display: block; 

	white-space: nowrap;	

}



@media screen and (-webkit-min-device-pixel-ratio:0) {

	/* Safari and Google Chrome only - fix margins */

	button span {

		margin-top: -1px;

	}

}



button.width-small {width:60px;}

button.width-medium {width:90px;}

button.width-big {width:120px;}

	

button.button-primary { background: transparent url(images/inner_form_button_bg2.jpg) no-repeat right 0px; }

button.button-primary span {	

	padding: 8px 8px 0 8px;

	margin-left:-3px; 

	height:25px; 

	background: transparent url(images/inner_form_button_bg1.jpg) no-repeat left top; 

	color:#fff; 

}



button.button-secondary { background: transparent url('images/button_bg2.jpg') no-repeat right 0px; }

button.button-secondary span {	

	padding: 3px 8px 0 8px;

	margin-left:-3px; 

	height:18px; 

	background: transparent url('images/button_bg1.jpg') no-repeat left top; 

	color:#fff; 

}

	





/******[ IMAGES ]**************************************************************************************************/

p img {

	padding: 0;

	max-width: 100%;

	}



/*	Using 'class="alignright"' on an image will (who would've

	thought?!) align the image to the right. And using 'class="centered',

	will of course center the image. This is much better than using

	align="center", being much more futureproof (and valid) */



img.centered {

	display: block;

	margin-left: auto;

	margin-right: auto;

	}



img.aligncenter{

        display: block;

	margin-left: auto;

	margin-right: auto;

}

img.alignright {

	padding: 4px;

	margin: 0 0 2px 7px;

	display: inline;

	}



img.alignleft {

	padding: 4px;

	margin: 0 7px 2px 0;

	display: inline;

	}

.content h2 { margin-bottom: 10px; }