/* --- Rich container Pattern --- 
@Modele : It's a block who contains media and a text. The img is float to the left by defaults
@Options :  -- Add .imgRight to the container to put the img on the right
            -- Add .imgWrap to the container to put the text above the image
@exemple : <div class="richcontainer">
                <a href="#" class="img"><img src="http://static3.viadeo-static.com/v_img/navigation/logoviaducblanc.png" /></a>
                <div class="bd">
                    example content text
                </div>
           </div>
*/

.richcontainer .bd:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
.richcontainer .bd {display:table-cell; zoom:1;}
.richcontainer .bd > :first-child{margin-top:0;}
.richcontainer .bd > :last-child{margin-bottom:0;}
.richcontainer .img{float:left;}
/*Options*/
.richcontainer .imgRight{float:right;}
.small .img {margin-right:5px;}
.medium .img {margin-right:10px;}
.large .img {margin-right:15px;}
.xlarge .img {margin-right:20px;}


/* --- BTN Pattern --- 
@Modele : pattern for all the action boutton
@Options : ---
@exemple : <div class="btn socialAction">
                <span><input type="submit" value="Envoyer" /></span>
           </div>
           
           or 
           <a class="btn socialAction" href="#">
                <span>Envoyer le message</span>
           </a>
           <div class="btn socialAction">
                <span><button>Envoyer le message</button></span>
           </div>
*/

/* --- Structure Class --- */
.btn {display:inline-block; border:1px solid #CEB530; display:-moz-inline-stack; *display:inline; height: 23px; line-height:21px; //line-height:22x; vertical-align:middle; zoom:1; vertical-align:middle; zoom:1;text-decoration:none !important;cursor:pointer; white-space:nowrap;text-align:center; padding: 5px 10px 0; -webkit-border-radius: 3px;-moz-border-radius: 3px; border-radius: 3px;background: url("../v_img/bg-buttons.png");}
.btn span input,
.btn span button {display:inline; border:none; padding:0; line-height:21px; //line-height:22px;background:none;text-align:center;padding:0; margin:0;cursor:pointer;font-family:inherit;font-size:inherit !important;} 
.btn span img{vertical-align:middle;}

/* --- border Class --- */
.bs1{border-style:solid; border-width:1px;}

/* --- Graphic Class --- */
.socialAction   {background-color: #94AA2F; border-color: #819621 !important;}
.socialAction span,
.socialAction span input,
.socialAction span button{color: #FFF !important; text-shadow:0 -1px 0 #70841A;}
.eventsAction   {background-color: #EDD032; border-color: #CEB530 !important;}
.eventsAction span , .eventsAction span input , .eventsAction span button{color: #333 !important;text-shadow:0 -1px 0 #ECDA77;}
.secEventsAction{background-color: #EFEFEF; border-color: #d5d5d5 !important;}
.secEventsAction span , .secEventsAction span input , .secEventsAction span button{color: #444 !important;text-shadow:0 -1px 0 #E7E7E7;}


.socialAction:hover   { border-color: #63770a !important; }
.eventsAction:hover   { border-color: #97820f !important; }
.secEventsAction:hover{ border-color: #999 !important; }