/**** Feuille de style pour MC ****/

/** Global **/

body.main, html.main {
  margin: 0px; /* Pour avoir un rendu egal dans le body sur tous les browsers : on mets les marges + tard dans le maincontainer */
  padding: 0px; /* Comme ci-dessus */
}

body {
  line-height: 1em;
  background-image:url(/images/creamp.jpg);
  background-attachment:fixed;
  font-size: 0.9em;
  font-family: Arial, Helvetica, sans;
}

h2 {
  background-image:url(/images/creamp_light.jpg);
  background-repeat: repeat;
  border: 1px solid #d7d7d7;
  margin: 9px 0px 6px 0px;
 /** margin: 9px 0px 9px 0px; **/
  padding: 8px 0px 8px 0px;
}

em { color: red; }

.clear { clear: both; }

img { border-style: none; }
a img { border:0 }

hr {
  border: 0;
  color: #000000;
  background-color: #000000;
  height: 1px;
}

/** Liens par defauts **/
a:link {
  color: blue ;
  background-color: transparent ;
  text-decoration: none ;
} 

a:visited {
  color: blue ;
  background-color: transparent ;
  text-decoration: none ;
}   

a:hover {
  color: blue ;
  background-color: #CCCCFD ; /** #add8e6 ; **/
}

/** Liens menant vers l'externe **/
a[href^="http://"]:after, 
a[href^="https://"]:after {
    content: url(/images/Icon_External_Link.png);
    margin: 0 0 0 1px;
}

a[href*="sca.uqam.ca"]:after,
a[href*="meteoalerte"]:after,
a[href*="facebook.com"]:after,
a[href*="twitter.com"]:after,
a[href*="cafepress.ca"]:after {
  content: '';
  margin: 0;
}

/** legend **/

fieldset { 
  border:1px solid #000000 ;
}

legend {
  vertical-align : top ;
  padding-left : 0.5em ;
  padding-right : 0.5em ;
  padding-top : 0 ;
  padding-bottom : 0 ;
}

/** Image centrale **/

.main_img img {
  border: 1px solid #5076a6;
}


/** Info pour header top site **/

.topsection {
  width: 835px;
  background: #233e8d;
  border-left: 2px solid #000000;
  border-right: 2px solid #000000;
  border-bottom: 1px solid #000000;
  color: white;
  margin-top: 1px;
  margin-left: 1px;
  margin-right: 1px;
  float: left;
}

.topsection a:hover {
  background-color: transparent;
}

.topband {
    float:left;
    width: 100%;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background-color: #000000;
    font-size: 0.9em;
    font-family: Arial, Helvetica, Sans;
    color: #d7d7d7;
    min-width: 700px;
}

.topband a {
    color: #d7d7d7;
}

.topband a:hover {
    color: white;
    text-decoration: underline;
    background-color: black;
}

#topband-left {
   float: left;
   display: inline;
}

#topband-right {
  float: right;
  text-align: right; /* depends on element width */
  display: inline;
}

span.topinfo a:link {
  color: white;
  font-weight: bold; 
  text-decoration: none;
}

span.topinfo a:visited {
  color: white;
  font-weight: bold;
  text-decoration: none;
}

span.topinfo a:hover {
  color: white;
  font-weight: bold; 
  text-decoration: underline;
}  

#logocontainer {
   float: left;
   display: inline;
   clear: both;
}

#altlogocontainer {
   float: left;
   display: none;
   clear: both;
}

#mainlogo {
   float: left;
   display: inline;
}

#links {
   width: 565px;
   float: left;
   display: inline;
   clear: left;
}

#souslogo {
   float: left;
   display: inline;
}

#macontainer {
  float: right;
  display: inline;
  clear: right;
  padding: 2px;
}

.logo img {
  border: none;
}

.logo a:hover {
  background-color: transparent;
}

.maimg img {
  border: none;
}

#panimg {
  max-width: none;
}

span.infos {
  font-family: Arial, Helvetica, sans;
  font-size: 0.9em;
}

div .plusone, .twitter, .fb-like {
    font-size: 1px;
    display: inline-block;
}

div .fb_reset {
    display: inline;
} 

/* Infos meteo hier */

.maxt {
  color: white;
  font-family: Arial, Helvetica, Sans;
}

.mint {
  color: white;
  font-family: Arial, Helvetica, sans;
}

.p24h {
  color: white;
  font-family: Arial, Helvetica, sans;
}

/** Image du Header generique **/
.header_img {
  float: left;
  width: 555px;
  height: 36px;
  background: #233e8d;
  color: #d7d7d7;
  text-align: left;
  margin: 0px 0px 0px 1px;
  padding: 0px;
  border: 0px;
}

.header_img_mobile {
  float: left;
  width: 100%;
  height: 36px;
  background: #233e8d;
  color: #d7d7d7;
  text-align: center;
  padding: 0px;
  border: 0px;
}

/** Ligne footer **/
.footer {
  clear: left;
  max-width: 835px;
  background: #233e8d;
  color: #d7d7d7;
  text-align: center;
  padding: 2px 0;
  border: 1px solid #000000;
}

.footer a {
  color: #FFFF80;
}

/* Texte informatif footer */
.footerinfos {
  max-width: 835px;
  font-family: Arial, Helvetica, sans;
}

/* Titre des sections page principale */
span.title {
  font-weight: bold;
  border-style: none none solid solid ;
  border-width: 1px;
  padding: 0px 15px 0px 5px;
}

/* Liste dans page principale */
ul.contentcolumn {margin-left: 15px; padding-left: 5px;}
li { line-height: 1.25em; }

/* Formulaire sur une meme ligne que d'autres contenus */
.inline-form { display: inline-block;}

/* Recherche google */
#searchline { float: left; padding: 9px 0px 12px 0px; }

/* Reference Google+, Facebook et Twitter */
#referenceline {
  float: left;
  max-height: 21px;
  padding: 9px 2px 12px 2px;
}

/* Ligne de bienvenue */
#welcome { float: left; padding: 9px 0px 0px 0px;}

/* Containers et colonnes */
#maincontainer {
  padding-right: 160px;  /* RC width */
  margin: 8px;
  padding: 0px;
}

.innertube {
  margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
  margin-top: 0px;
}

/*** IE6 Fix ***/
* html #left { 
  left: 160px;           /* RC width */
} 

/* Contenu principal entre header et footer */
.contentwrapper {
  float: left;
  width: 100%;
}

.contentcolumn {
  margin: 0 160 0 0; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
  padding-top: 2px;
  padding-left: 2px;
  z-index: 50;
}

.contentcolumnleft {
  margin: 0 160 0 15%; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
  padding-top: 2px;
  padding-left: 2px;
  background: white;
}

.leftcolumn {
  float: left;
  width: 15%; /*Width of left column in percentage*/
  margin-left: -100%;
  padding-top: 5px;
  background: #5CA0CC;
  z-index: 0;
}

.rightcolumn {
  float: right;
  width: 160px; /*Width of right column in pixels*/
  margin-left: -160px; /*Set margin to -(RightColumnWidth)*/
  z-index: 0;
}

.column {
  position: relative;
  float: right;
}

/** Liens avec classe important **/
a:link.important {
  color: #000000 ;
  background-color: #D7D7D7  ;
  text-decoration: none ;
  border-style: solid ;
  border-width: 1px;
  padding: 2px 15px 2px 15px;
  font-family: Arial, Helvetica, Sans;
  font-size: 0.9em;
} 

a:visited.important {
  color: #000000 ;
  background-color: #D7D7D7 ;
  text-decoration: none ;
  border-style: solid ;
  border-width: 1px;
  padding: 2px 15px 2px 15px;
  font-family: Arial, Helvetica, Sans;
  font-size: 0.9em;
} 

a:hover.important {
  color: #000000 ;
  background-color: #FFFFFF ;
  border-style: solid ;
  border-width: 1px;
  font-family: Arial, Helvetica, Sans;
  font-size: 0.9em;
}

/* Blocs en ligne pour les menus des interfaces des cartes */
#block-left {
   float: left;
   display: inline;
   padding-right: 2px;
}

/** Mobile et petits ecrans **/
/*@media only screen and (max-device-width: 640px) {*/
@media only screen and (max-width: 640px) {

  body {
    -webkit-text-size-adjust: none;
    max-width: 100%;
  }

  #container {
    padding-right: 0px;
  }

  img {
    max-width: 100%;
  }

  #square {
    width: 300px;
    float: left;
    clear: both;
  }

  ul {
    margin-left: 7px;
    padding-left: 7px;
  }

  #panimg {
    max-width: 100%;
  }

  #maincontainer {
    padding-right: 160px;  /* RC width */
    margin: 0px;
    padding: 0px;
  }

  html, body {
    margin: 0;
    padding: 0;
  }

}

/*** Menus deroulants ***/

/* Pas de cesure et wrap dans les menus */
#menus {
  white-space: nowrap;
}

/* ================================================================
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/variable_dl.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menu {list-style-type:none;
font: 0.9em Arial, Helvetica, Sans;
padding:0;display:inline;}

#menu li {display:block; float:left; position:relative; margin-right:0px; margin-left:1px;}
#menu li span {display:block; background: black; padding: 2px 12px 2px 12px;}
#menu_nav {display:block; background:#d7d7d7; color:#d7d7d7; padding: 2px 12px 2px 12px;}
#menu li a, #menu li a:visited {display:block; padding:0;}

#menu dl {position:absolute; top:0; left:0; margin: 0; padding: 0; background: url(/css/transparent.gif)}
#menu dt {background: #000000; margin:0; float:left; z-index: 100; position: relative;border-top: 1px solid #000000}
#menu dd {display:none; background: transparent; clear:left; margin:0; padding:0; color: #d7d7d7; text-align:left; z-index: 110; position: relative;border-top: 1px solid #000000}

#menu dt a, #menu dt a:visited {display:block; color:#d7d7d7; padding: 2px 12px 2px 12px; text-decoration:none;}
#menu dd a, #menu dd a:visited {background:#233e8d; color:#d7d7d7; text-decoration:none; display:block; padding: 2px 12px 2px 12px;}

#menu li a:hover {border: 0;}

#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu dd a:hover {background: #d7d7d7; color:black;}
#menu li:hover dt a, #menu li a:hover dt a {background: #233e8d; color: #d7d7d7;}

/************************************/
/*** Menus deroulants pour MOBILE ***/
/************************************/

.clearfix:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { zoom: 1; }
*:first-child+html .clearfix{ zoom: 1; }

nav, #nav > ul, #nav li ul
{
    font-size: 100%;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
}

#nav
{
    font: 0.9em Arial, Helvetica, Sans;
/*    width: 60em; */ /* 1000 */
/*    font-family: 'Open Sans', sans-serif; */
 /*   font-weight: 400; */
 /*   position: static; */
/*     top: 25%;
    left: 50%; */
 /*   margin-left: -30em;  *//* 30 480 */
}
#nav > a
{
    display: none;
}
#nav li
{
    position: relative;
    display: block;
}
#nav li a
{
    color: #fff;
    display: block;
}
#nav li a:active
{
    background-color: #d7d7d7 !important;
    background: #233e8d; color: #d7d7d7;
}
#nav span:after
{
    width: 0;
    height: 0;
    border: 0.313em solid transparent; /* 5 */
    border-bottom: none;
    border-top-color: white; /*#efa585;*/
    content: '';
    vertical-align: middle;
    display: inline-block;
    position: relative;
    right: -0.313em; /* 5 */
    }

/* first level */
#nav > ul
{
    /*height: 3.75em; */ /* 60 */
    background-color: #000000 /*#e15a1f;*/
    }
#nav > ul > li
{
    width: 10%;
    height: 100%;
    float: left;
    border-top: 1px solid #000000;
    }
#nav > ul > li > a
{
    height: 100%;
    font-size: 1.2em; /*1.5em; */ /* 24 */
    line-height: 2.5em; /* 60 (24) */
    text-align: center;
    }
#nav > ul > li:not( :last-child ) > a
{
    border-right: 1px solid #d7d7d7;
    }
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
{
    background-color: #233e8d; /*#cc470d;*/
    }

/* second level */
#nav li ul
{
    background-color: #233e8d; /*#cc470d;*/
    display: none;
    position: absolute;
    top: 100%;
    }
#nav li:hover ul
{
    display: block;
    left: 0;
    right: 0;
    }
#nav li:not( :first-child ):hover ul
{
    left: -1px;
    }
#nav li ul a
{
    font-size: 1.0em;/* 1.25em; */ /* 20 */
    border-bottom: 1px solid #000000; /*#e15a1f;*/
    padding: 0.75em; /* 15 (20) */
    }
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
    background-color: #d7d7d7; /*#e15a1f;*/
    color:black;
    }

@media only screen and ( max-width: 1200px ) /* 640 */
{
    #nav
    {
	position: relative;
	top: auto;
	left: auto;
	}
    #nav > a
    {
	width: 3.125em; /* 50 */
	height: 36px ; /* 3.125em; */ /* 50 */
	text-align: left;
	text-indent: -9999px;
	background-color: black; /*#233e8d; /*#e15a1f;*/
	position: relative;
	}
    #nav > a:before,
    #nav > a:after
    {
	position: absolute;
	border: 2px solid #fff; 
	top: 35%;
	left: 25%;
	right: 25%;
	content: '';
	}
    #nav > a:after
    {
	top: 60%;
	}

    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type
    {
	display: block;
	}

    /* first level */
    #nav > ul
    {
	height: auto;
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	}
    #nav:target > ul
    {
	display: block;
	}
    #nav > ul > li
    {
	width: 100%;
	float: none;
	}
    #nav > ul > li > a
    {
	height: auto;
	text-align: left;
	padding: 0 0.833em; /* 20 (24) */
	}
    #nav > ul > li:not( :last-child ) > a
    {
	border-right: none;
	border-bottom: 1px solid #d7d7d7;
	/*border-bottom: none;
	margin-bottom:1px;*/
	}

    /* second level */
    #nav li ul
    {
	position: static;
	padding: 0.75em ; /*1.25em; */ /* 20 */
	padding-top: 0;
	}
}