/*
------------------------------------------------------------------------
Theme Name:Equilibrium
Theme URI:http://madebyon.com
Description:Magazine style WordPress theme. Visit <a href="http://equilibrium.madebyon.com"title="Equilibrium">http://equilibrium.madebyon.com</a> for more infomation.
Version:1.4
Author:Tudinh Duong
Author URI:http://madebyon.com
Remix Author: Gabriel Jorby
------------------------------------------------------------------------
*/
/*
-----------------------------------------
RESET
----------------------------------------- 
*/
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td{margin:0; padding:0}
table{border-collapse:collapse; border-spacing:0}
fieldset, img{border:0}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal}
ol, ul, li{list-style:none}
caption, th{text-align:left}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
q:before, q:after{content:''}

strong{font-weight:bold}
em{font-style:italic}
a img{border:none}

h1, h2, h3, h5, h5, h6{font-weight:bold}

/*
-----------------------------------------
SMOOTHING
----------------------------------------- 
*/
body { -webkit-text-stroke:1px transparent; }
@media only screen and (max-device-width:480px) {body{-webkit-text-stroke:0 black;}}


/*
-----------------------------------------
LAYOUT
----------------------------------------- 
*/
.aligncenter{display:block; margin:0 auto}
.alignleft{float:left}
.alignright{float:right}
.floatLeft{float:left}
.floatRight{float:right}
.clear{clear:both}

/*
-----------------------------------------
STRUCTURE
----------------------------------------- 
*/
html, body{height:100%}

body{font-size:62.5%; font-family: Droid Serif, Georgia, Times, Times New Roman, serif; color:#aaa; margin:0 auto -80px; text-align:center; background-color:#111;}

#page-wrap{width:960px; min-height:100%; height:auto !important; height:100%; margin:0 auto -80px; padding-left:10px; padding-right:10px; text-align:left;}

.content{width:680px; float:left}

.content-homepage{width:960px; float:left}

/*
-----------------------------------------
TYPOGRAPHY
----------------------------------------- 
*/
p{color:#fff; font-size:1.7em; line-height:1.8em; margin-bottom:2em; }

p a, p a:visited{border-bottom:1px dotted #dd4f00; color: #dd4f00; text-decoration:none}

p a:hover{border-bottom: 1px dotted #ff6d00; color: #ff6d00; text-decoration:none}

h1 {font-size:1.4em; font-weight:bold}

.post h2{text-transform:none; padding-bottom:0; border-bottom:0; margin-top:0;}

h2{font-size:1.8em; color:#fff; text-transform:uppercase; padding-bottom:4px; border-bottom: 4px solid #ff6d00; margin-top:28px; margin-bottom:28px; font-weight:normal}

h3{border-bottom: 4px solid #ff6d00; color: #fff; font-size:2.5em; font-weight:normal; margin-top:23.3px; padding-bottom:4px}

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

h4{color: #fff; font-size:1.5em; font-weight:normal; margin-top:5px; padding: 5px;}

.post ul,
.post ol {margin-bottom:3em;}

.post ul li, 
.post ol li{font-size:1.4em; color: #fff0e4; line-height:1.5em; list-style-type:square; margin:5px 0 15px 15px;}

.post li a,
.post li a:visited{border-bottom:1px dotted #dd4f00; color: #dd4f00; text-decoration:none;}

.post li a,
.post li a:hover{border-bottom: 1px dotted #ff6d00; color: #ff6d00; text-decoration:none;}

#reply{border-bottom:4px solid silver; color: silver; font-size:1.8em; margin-top:28px; margin-bottom:16px; padding-bottom:4px}

#relatedposts{border-bottom:4px solid silver; color: silver; font-size:1.8em; margin-top:28px; margin-bottom:16px; padding-bottom:4px}

.legende {font-size:0.8em; line-height:1.3em; font-style:italic; color:#333; margin-left:10px; padding-left: 10px; background: url(http://www.gabyu.com/blog/wp-content/uploads/bracket.gif) no-repeat;}

/*
-----------------------------------------
TOP
----------------------------------------- 
*/
#top{margin-top:55px; padding-bottom:70px}

h1.logo a{float:left; font-size:4em; font-weight:normal; color: #fff; text-transform:lowercase; text-decoration:none}

.bouton {background:transparent url(images/gabyu-logo.gif) no-repeat scroll 0 0; display:block; height:58px; overflow:hidden; text-indent:-999em; width:159px;}

#nav{float:right; margin-top:1.2em}



/*
-----------------------------------------
FEATURED
----------------------------------------- 
*/
.front-post{width:303px; margin-right:25px; float:left; background-color:#000;}

.front-post-last{width:303px; float:left; background-color:#000;}

.featured-content{position:relative; width:303px; padding-bottom:1.4em;}

.featured-content p{margin:0.5em 1em 0 1em; size:1em; color: #bbb; margin-bottom: 0;}

.featured-post{position:relative; width:303px; height:231px; margin-bottom:1.2em}

.featured-title h3 {border-bottom: none; margin:0; padding: 10px;}

.featured-title h3 a{display:block; color:#fff; ;text-decoration:none; border-bottom:0; text-transform: uppercase;
}

.featured-title h3 a:hover{color: #ffd800;}

/* My Comment */

/* My Comment */

.featured-title{background:#111; display:block; z-index:101; bottom:0; filter:alpha(opacity=80); -moz-opacity:.80; opacity:.80; position:absolute; z-index:2;}

.featured-image{position:absolute; z-index:1;}

.latest-title h4{margin:5px; text-transform:uppercase; size:0.8em;}

.latest-title h4 a{color:#ff6d00; text-decoration:none;}

.latest-title h4 a:hover {color: #ffd800;}

/*
-----------------------------------------
SIDEBAR
----------------------------------------- 
*/
#sidebar{float:right; width:260px; padding-left:20px; overflow:hidden}

#sidebar li a{display:block; width:260px; margin:0; padding:4px 0 4px 4px; list-style:none; border-bottom:1px dotted #333; font-size:1em; list-style-type:none; text-decoration:none; color:#666}

#sidebar a{color:#c9c9c9; text-decoration:none}

#sidebar a:hover{color:#fff; background-color:#282828}

#sidebar h2{font-size:1.8em; color:#ccc; text-align:right; text-transform:uppercase; border-bottom:4px solid #c9c9c9; margin-top:28px; margin-bottom:0}


/*
-----------------------------------------
SIDEBAR BOTTOM
----------------------------------------- 
*/
#sidebar-b1, #sidebar-b2, #sidebar-b3 {float:left; width:306px; padding-right:21px; overflow:hidden}

#sidebar-b3 {padding-right:0px;}

.sidebar-b li a{display:block; width:260px; margin:0; padding:4px; list-style:none; border-bottom:1px dotted #333; font-size:1em; list-style-type:none; text-decoration:none; color:#666}

.sidebar-b a{color:#c9c9c9; text-decoration:none}

.sidebar-b a:hover{color:#fff; background-color:#282828}

.sidebar-b h2{font-size:1.8em; color:#ccc; text-align:left; text-transform:uppercase; border-bottom:4px solid #c9c9c9; margin-top:28px; margin-bottom:0}



/*
-----------------------------------------
SIDEBAR TWITTER
----------------------------------------- 
*/
#twitter-tools li {border-bottom:1px dotted #333333; height:auto;
margin-bottom:1em; padding:4px;}

#twitter-tools li a{display:inline; text-decoration:none; color:#666; border:none;}

#twitter-tools div ul li a:hover{color:#fff; background:none;}



/*
-----------------------------------------
SIDEBAR FLICKRSS COLONNE 3
----------------------------------------- 
*/

#sidebar-b3 li a{display: inline; width:260px; margin:0; padding:0px; padding-right:1px; list-style:none; border-bottom:none; font-size:1em; list-style-type:none; text-decoration:none; color:#666}




/*
-----------------------------------------
LATEST
----------------------------------------- 
*/
#front-bottom{margin-top:36px}

#latest-wrap{float:left;}

.latest-post-wrap{float:left; width:163px; margin-right:1px; margin-bottom:1px; height:250px; padding:14px; background-color:#0A0A0A;}

.latest-post{position:relative; width:162px; height:118px}

.latest-image{position:absolute; z-index:1}

.latest-title h2{margin:8px 10px 7px; line-height:1.4em; font-size:1.1em; text-transform:none; padding-bottom:0; border-bottom:0}

.latest-title h2 a{display:block; color: #ff6d00; text-decoration:none}

.latest-title h2 a:hover{color:#fff}

.latest-title{background:#111; display:block; z-index:101; width:100%; top:0; filter:alpha(opacity=80); -moz-opacity:.80; opacity:.80; position:absolute; z-index:2}

.latest-content{position:relative; width:162px; height:200px; margin-bottom:20px}

.latest-content h2{margin-top:15px}
.latest-content h2 a{color:#ff6d00; text-decoration:none}
.latest-content h2 a:hover{color:#000}

.latest-content p{color: #b33f00; font-size:1.2em; line-height:1.5; margin-top:8px; margin-bottom:1.5em; text-align:left}

/*
-----------------------------------------
FOOTER
----------------------------------------- 
*/
#push{height:80px}

#footer{padding-top:15px; border-top:3px solid #666; width:960px; margin:150px auto 0; height:80px; color:#4d4d4d}

#footer p{font-size:1.2em; color:#4d4d4d; line-height:1.5em; margin-bottom:0; margin-top:0.6em}

#footer p a{border-bottom:1px dotted #333; color:#4d4d4d; text-decoration:none}

#footer p a:hover{border-bottom:1px dotted #c9c9c9; color:#ff6d00; text-decoration:none}

/*
-----------------------------------------
POSTMETA
----------------------------------------- 
*/
.postMeta{font-size:1.2em; margin-bottom:18px; margin-top:8px; padding-bottom:24px; border-bottom:1px solid #c9c9c9}

.postMeta-featured{margin-top:8px; font-size:1.2em; width:303px}

.postMeta-front{margin-top:8px; font-size:1.2em}

.postMeta-post{font-size:1.2em; margin-bottom:18px; margin-top:8px; border-bottom:1px solid #333; padding-bottom:10px}

.postMeta span.date, 
.postMeta-post span.date, 
.postMeta-featured span.date, 
.postMeta-front span.date{color:#8a8a8a; float:left}

.postMeta span.comments a, 
.postMeta span.date a, 
.postMeta-post span.comments a, 
.postMeta-post span.date a, 
.postMeta-featured span.comments a, 
.postMeta-featured span.date a, 
.postMeta-front span.comments a, 
.postMeta-front span.date a{float:left; color:#8a8a8a; text-decoration:none}

.postMeta span.comments, 
.postMeta-featured span.comments, 
.postMeta-post span.comments, 
.postMeta-front span.comments{float:right; background:url(images/comment.gif) no-repeat left center; padding-left:15px; margin-left:2px}

/*
-----------------------------------------
POSTS
----------------------------------------- 
*/
.post-category{color:#8a8a8a; float:left; margin-bottom:8px}

.post-tags{color:#8a8a8a; float:right}

.post-category p, 
.post-tags p{color:#8A8A8A; font-size:1em; line-height:1.5em; margin-bottom:0em; margin-top:0em; }


/* .post img{margin:0.5em 1em;} */
.post blockquote p{margin:0 2.6em; font-style:italic}

/*
-----------------------------------------
COMMENTS
----------------------------------------- 
*/
.comment-heading{margin-bottom:26px; text-transform:none; border:none}

.commentwrap{border-top:1px solid #444; padding-bottom:15px; padding-top:15px}

.commentpost{float:right; width:510px}

.commentpost p{margin-top:0}

.commentmetadata{float:left; width:20%; color:#2F2B23; line-height:1.5em; padding-right:20px; color:#999; font-size:1.1em}

.commentmetadata li{list-style-type:none; margin:0 .5em 0 0; color: #545454;}

.commentmetadata li a{border-bottom:1px dotted #ff6d00; color:#ff6d00; text-decoration:none}

.warning{padding:10px; background:#282828; border:1px solid #323232; ; margin-bottom:10px}

#comments label input{border:1px solid #E5E5E5; padding:5px 4px; margin-bottom:10px; width:160px}

#comments label span{line-height:27px}

#comments label{font-family:"Lucida Sans Unicode"; font-size:1.1em}

#comment_author{margin:20px 20px 20px 0px; padding:0px; width:150px; float:left}

#comments-content{display:block; border-bottom:1px solid #C9C9C9; margin:10px 0px 10px 0px; padding:0px}

#comments textarea{margin-top:10px; padding:4px 0px; width:100%; border:1px solid #E5E5E5}

.button{border:1px solid #E5E5E5; font-size:1.1em; font-weight:bold; height:25px; margin-top:10px; margin-bottom:10px; padding:0 8px; text-transform:uppercase}

.children {margin-left: 50px}

.children div {border:none}

.children .commentwrap {border-top: 1px solid #C9C9C9;}

.children .commentmetadata {padding-right:0px}

.children .commentpost {text-align:left; float:right; width:78%}


/*
-----------------------------------------
SEARCH
----------------------------------------- 
*/
#searchform{float:left; margin-top:1em; margin-bottom: 3em; height:2.3em}

#searchsubmit{border:1px solid #E5E5E5; font-size:1.1em; font-weight:bold; height:2.1em; padding:2px 8px; text-transform:uppercase; float:right; background-color:#F0F0F0}

#s{float:left; width:204px; margin-right:6px; padding-top:4px; padding-bottom:4px; padding-left:2px; padding-right:2px; border:1px solid #E5E5E5; font-size:1.1em}



/*
-----------------------------------------
MENU
----------------------------------------- 
*/

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.menu {width:450px; height:32px; font-size:0.85em; position:relative; z-index:100;}
/* hack to correct IE5.5 faulty box model */
* html .menu {width:450px; w\idth:450px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:149px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:149px;position:relative;}
/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:11px;text-decoration:none; color:#fff; width:138px; height:30px; background: #111; padding-left:10px; line-height:29px;
	border-top: 3px solid #ffe700;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background: orange url(/blog/wp-content/themes/Equilibrium/images/drop.gif) bottom right no-repeat;}
/* style the second level hover */
.menu ul ul a.drop:hover{background:#c9ba65 url(/blog/wp-content/themes/Equilibrium/images/drop.gif) bottom right no-repeat;}
.menu ul ul :hover > a.drop {background:#c9ba65 url(/blog/wp-content/themes/Equilibrium/images/drop.gif) bottom right no-repeat;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background: #444;}
/* style the third level hover */
.menu ul ul ul a:hover {background: #fefa00; color: #313131;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}
/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:31px;}

/* position the third level flyout menu */
.menu ul ul ul{left:149px; top:-1px; width:149px;}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-149px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#444; color:#ccc; height:auto; line-height:1em; padding:5px 10px; width:128px; border-width:0 1px 1px 1px;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#fff; background: purple;}
.menu :hover > a, .menu ul ul :hover > a {color:#000; background: #fefa00;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}


/* ================================================================ 
   This CSS is further CSS I have created specifically for Wordpress
   so that the current page is highlighted in two levels.
   If you want it in three levels let me know.

   Author: Isaac Rowntree
   Website: www.zackdesign.biz
=================================================================== */


.menu ul ul .current_page_item a {
  color: red;
  background: white;
  border-left: 1px solid black;
}

.menu .current_page_item a {
  color: black;
  background: #fefa00;
}

.menu ul .current_page_item ul a {
  color: white;
  font-weight: normal;
  background: black;
}

.menu ul .current_page_item ul a:hover {
  background: gray;
}

.menu .current_page_item a:hover {
  background: white;
}


/*
-----------------------------------------
PAGE2 MODEL FOR PORTFOLIO
----------------------------------------- 
*/
#main-portfolio {
background-color:#fff; padding:50px;
}

#main-portfolio p {
font-size: 1.5em; color: #222; line-height: 1.7em;
}


/*
-----------------------------------------
PAGE3 MODEL FOR PORTFOLIO
----------------------------------------- 
*/
.large960pic {
margin:0; padding:0;
}