﻿/* ---[ common.css ]------------------------------------------------

SITE :
www.thesquarefoot.ca

RÉALISATION :
CAP (www.capprod.com)

CONTENU :
- Reset CSS
- Fonts
- Utils
- Links
- Forms
- Content (contenu du milieu du site)
- Lists
- Pagers

CODES COULEURS :
- liens bleu normal : #1F527B
- liens bleu visited : #4F85AE
- liens bleu speciaux (boutons, formulaires) : #0072ca
- texte principal, titres : #464646
- rouge : #DA252C


FONT :
- Général : verdana

----------------------------------------------------------------- */

/*** RESET CSS ***/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
a:focus {outline: dotted 1px;}
ol, ul {list-style: none;}
table {border-collapse: separate; border-spacing: 0;}
table * {vertical-align:middle;}
caption, th, td {text-align: left; font-weight: normal;}
hr {display:none;}


/*** FONTS - relative 62.5% = 10 px ***/

body {font:11px aial, verdana,helvetica,arial,sans-serif; color:#464646;}
table {font-size:inherit; font:100%}
select,input,button,textarea {font:99% arial,helvetica,clean,sans-serif}
pre,code,kbd {font:115% monospace; word-spacing:1px; letter-spacing:1px; font-size:100%}
h1,h2,h3,h4,h5,h6 {font-size:100%}
::selection { background: #4F85AE; color: #fff; /* Safari */ }
::-moz-selection { background: #4F85AE; color: #fff; /* Firefox */ }


/*** UTILS ***/

a.externalLink, span.externalLink {background:transparent url(../images/utils_external.gif) center right no-repeat; padding: 2px 12px 2px 0; margin-right:4px;}
.externalLink_tip {color:#fff; padding:2px 4px; font-weight:bold; opacity: 0.95; filter:alpha(opacity=95); max-width:200px;background:#666;}
.clearFix {font-size:0; width:100%; height:0; clear:both;}
.breakItem {border-bottom:solid 1px #ddd; margin:0 30px; width:auto;}
.defaultTip {background:#555; color:#fff; padding:2px 4px; font-weight:bold; max-width:250px;opacity:0.9; filter:alpha(opacity=90);}
.lock_tip {color:#fff; padding:4px 6px; font-weight:bold; opacity: 0.95; filter:alpha(opacity=95);background:#666; font-family:Arial; font-size:1em;}
.loading {background: url(../images/utils_spinner.gif) center left no-repeat; padding:0 0 0 20px; margin:8px 0; display:inline-block;}


/*** LINKS ***/

a {text-decoration:none; color:#1F527B}
a:hover {text-decoration:underline}
a.chevrons, .chevrons a {background:transparent url(../images/utils_chevrons.gif) left 6px no-repeat; padding: 2px 0 2px 11px;}
a.goBack, .goBack a {background:transparent url(../images/utils_goBack.gif) left 5px no-repeat; padding: 2px 0 2px 15px;}
a.more, .more a {background:transparent url(../images/utils_more.gif) left 6px no-repeat; padding: 3px 0 3px 12px; color:#4F85AE;}
a.view, .view a {background:transparent url(../images/utils_view.gif) left 4px no-repeat; padding: 3px 0 3px 20px; color:#4F85AE;}
.imgLink a img {border:solid 1px #999;}
.imgLink a:hover img{ border:solid 1px #DA252C;}


/*** FORMS ***/

.form input[type=text],.form input[type=password] {padding: 3px; color:#666; font-size:1.1em; border: solid 1px #ccc;}
.form input[type=text]:focus, .form input[type=password]:focus {border: solid 1px #ccc; outline: solid 1px #0072ca;}
.form textarea {padding: 3px; color:#666; font-size:1.1em;border: solid 1px #ccc;}
.form textarea:focus {border: solid 1px #ccc; outline:solid 1px #0072ca;}
.form select {padding: 0; color:#333; font-size:1.1em; border:solid 1px #B2B3B5;}
.form select:focus {border:solid 1px #0072ca;}
.form input[type=submit] {padding: 3px 6px; color:#454545 !important; font-size:1.1em; font-weight:bold;}
.form fieldset {background:#eee; border:solid 1px #ccc; padding:5px 10px; margin:0 0 10px;}
a.button {padding:3px 15px; border:solid 1px #ccc; background:#fff; color:#454545; font-weight:bold; font-size:1.1em; display:inline-block;}
a.button:hover {background-color:#4F85AE; color:#fff; text-decoration:none;}
a.button:focus {border: solid 1px #ccc; outline: solid 1px #0072ca;}
.form_alert, .form_valid, .form_info {vertical-align:top; cursor:help;}
.form_alert_tip, .form_valid_tip, .form_info_tip {color:#fff; padding:2px 4px; font-weight:bold; opacity:0.8; filter:alpha(opacity=80); max-width:200px;}
.form_alert_tip {background:#cc0000;}
.form_valid_tip {background:#cc0000;}
.form_info_tip {background:#4F85AE;}


/*** LABELS ***/

.label_alert{background:#efcbcb url(../images/label_alert.png) no-repeat 5px 5px;border:1px solid #eea1a1;margin:10px 0;padding:10px 10px 10px 40px; display:block; color:#333 !important; font-size:1.2em;}
.label_valid{background:#e0ecb4 url(../images/label_valid.png) no-repeat 5px 5px;border:1px solid #bbd167;margin:10px 0;padding:10px 10px 10px 40px; display:block;  color:#333 !important; font-size:1.2em;}
.label_info{background:#a2cfe6 url(../images/label_info.png) no-repeat 5px 5px;border:1px solid #469bc6;margin:15px 0;padding:10px 10px 10px 40px; display:block; color:#333 !important; font-size:1.2em;} 


/*** BUTTON ***/

.button {margin:12px 0 0;}
.button a {background:url(../images/bt_right.gif) no-repeat right 0; padding:0 2px 0 18px; position:relative; display:inline-block; color:#464646; font-family:Arial, sans-serif; font-weight:bold;}
.button a .icon { height:18px; top:0; left:0; position:absolute;background-repeat: no-repeat ; background-position:left top;}
.button a .text {padding:2px 6px 3px 2px; display:inline-block;background: url(../images/bt_background.gif) repeat-x; text-shadow: 0 0 2px #fff;}
.button a:hover {text-decoration:none; color:#4F85AE; cursor:pointer;}
.button a:hover .icon {background-position: left -18px;}


/*** ACTION BUTTON ***/

.actionButton {background:url(../images/actionButton_background.gif) repeat-x; color:#333 !important; font-weight:bold; text-shadow: 0 1px 2px #fff; font-size:1.3em; padding:7px 9px 6px 34px; display:inline-block; position:relative; border-left:solid 1px #c7c7c7;border-right:solid 1px #c7c7c7;}
.actionButtonInproved {padding:0 10px 0 0 !important; border:0 !important;}
.actionButton nobr {background:url(../images/actionButton_left.gif) no-repeat; padding:7px 0 6px 35px; display:inline-block;}
.actionButton:hover, .actionButton:focus, .actionButton:active {text-decoration:none; color:#555 !important; background-position: left -32px; cursor:pointer;}
.actionButton:active {background-position: left -64px;}
.actionButton .right {position:absolute;background:url(../images/actionButton_right.gif) no-repeat; width:2px; height:30px; top:0; right:0;}
.actionButton .icon {position:absolute;background:url(../images/actionButton_icon_default.gif) no-repeat; width:30px; height:30px; top:0; left:0;}
.actionButton:hover .icon, .actionButton:focus .icon, .actionButton:active .icon {opacity:0.8; filter:alpha(opacity=80);}
/* specific */
.actionButton_newMember .icon {background:url(../images/actionButton_icon_newMember.gif) no-repeat;}
.actionButton_login .icon {background:url(../images/actionButton_icon_unlock.gif) no-repeat;}
.actionButton_icon_ok .icon {background:url(../images/actionButton_icon_ok.gif) no-repeat;}


/*** CONTENT ***/

#content .toolBox {margin:2px 0; height:16px; clear:both;}
#content .toolBox li {display:inline;}
#content .toolBox a {cursor:pointer; color:#4F85AE;}
#content .toolBox .print {background: url(../images/utils_print.gif) no-repeat 0 1px; padding:1px 0 1px 19px; margin:0; float:left;}
#content .toolBox .addthis_separator {display:none;}
#content .toolBox .addthis_button_expanded {display:none;}
#content .head { border-top: dashed 1px #ddd; margin:10px 0; padding:10px 0 0; clear:both;}
#content .head h2 {font-weight:bold; font-size:2em;margin:0 0 15px;  text-shadow: 0 0 2px #ccc;}
#content .content {margin:0 0 15px; font-size:1.1em;}
#content .content a {color:#EB2026}
#content .content a.externalLink {background:transparent url(../images/utils_external_red.gif) center right no-repeat;}
#content .foot {padding:10px 0 5px; clear:both;color:#777; font-size:0.9em;}
#content .foot strong {font-weight:bold;}


/*** LISTS ***/

.list li {padding:0 0 4px; margin:0 0 14px; clear:both;}
.list li .category {color:#DA252C; font-size:1.3em; font-family:'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;}
.list li h3 { font-size:1.7em; color:#666; margin:0 0 6px;}
.list li h3 .lock {height:15px; vertical-align:baseline; cursor:help; margin:0 6px 0 0;}
.list li a.thumbnail {float:left; margin:0 10px 10px 0; border: solid 1px #555 !important;}
.list li a.thumbnail:hover {border: solid 1px #4F85AE !important;}
.list li a.thumbnail img {width:126px;}
.list li .detail {min-width:120px; margin:0 0 10px;}
.list li .excerpt {margin:0 0 6px; font-size:1.1em;}
.list li .excerpt br {font-size:0;}
.list li .excerpt p {margin:0;}
.list li .excerpt strong {font-weight:bold;}
.list li .excerpt em { font-style: italic;}
.list li .date {font-size:0.9em; color:#777;}
.list li .clickToAction a .icon {background-image:url(../images/bt_more.gif); width:18px;}


/*** QUICK LISTS ***/

.quickList h5 {text-transform:uppercase; font-size:1.2em; margin:0 0 5px;}
.quickList li {background:url(../images/utils_bullet.gif) no-repeat left 11px; padding:6px 0 6px 15px;clear:both;}
.quickList li a:visited {color:#1F527B}
.quickList h4, .googleReader .i {font-size:1.2em; margin:0 0 2px;}
.quickList h4 .lock {height:11px; vertical-align:baseline; cursor:help; margin:0 4px 0 0; }
.quickList li a.thumbnail {float:left; margin:2px 7px 7px 0; border: solid 1px #555 !important;}
.quickList li a.thumbnail:hover {border: solid 1px #4F85AE !important;}
.quickList li a.thumbnail img {width:70px;}
.quickList .category {color:#DA252C; font-size:1em; font-family:'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;}
.quickList .view {font-weight:bold; padding:6px 0;}
.quickList .text {display:inline;}
.quickList .date {display:inline; font-size:0.95em; color:#777; margin:2px 0 0;}
.googleReader .f {display:none;}


/*** PAGER ***/

.pager {text-align:center; width:100%; clear:left; font-size:1.1em;}
.pager .navigation {padding:5px 0;}
.pager .description {margin:2px 0 0; color:#999;}
.pager .selectedPrevNext {display:none;}
.pager a.unselectedPrevNext {padding:3px 6px;border:solid 1px transparent;_border:solid 1px #fff;}
.pager a:hover.unselectedPrevNext {padding:3px 6px; border:solid 1px #BBB; background-color:#4F85AE; color:#fff; text-decoration:none;}
.pager a:focus.unselectedPrevNext {outline: solid 1px #4F85AE;border: solid 1px #bbb;}
.pager .selectedPage {padding:3px 7px; background-color:#fff;font-weight:bold;}
.pager a.unselectedPage {padding:3px 6px; border:solid 1px #BBB; background-color:#fff;}
.pager a:hover.unselectedPage {padding:3px 6px; border:solid 1px #BBB; background-color:#4F85AE; color:#fff; text-decoration:none;}
.pager a:focus.unselectedPage {outline: solid 1px #4F85AE;border: solid 1px #bbb;}


/*** SQUEEZE BOX ***/

#sbox-overlay{position:absolute;background-color:#000;left:0;top:0;}
#sbox-window{position:absolute;background-color:#fff;text-align:left;overflow:visible;padding:10px;-moz-border-radius:3px;-webkit-border-radius:3px;}
#sbox-btn-close{position:absolute;width:30px;height:30px;right:-15px;top:-15px;background:url(../images/squeezebox_closebox.png) no-repeat center;border:none;}
.sbox-window-ie6 #sbox-btn-close{background-image:url(../images/squeezebox_closebox.gif);}
.sbox-loading #sbox-content{background-image:url(../images/utils_spinner.gif);background-repeat:no-repeat;background-position:center;}
#sbox-content{clear:both;overflow:auto;background-color:#fff;height:100%;width:100%;}
#sbox-image{display:block;}
.sbox-content-image img{display:block;width:100%;height:100%;}
.sbox-content-image#sbox-content,.sbox-content-iframe#sbox-content{overflow:visible;}

/* Hides flash (Firefox problem) and selects (IE) */
.body-overlayed{overflow:hidden;}
.body-overlayed embed,.body-overlayed object,.body-overlayed select{visibility:hidden;}
#sbox-window embed,#sbox-window object,#sbox-window select{visibility:visible;}

/* Shadows */
.sbox-bg{position:absolute;width:33px;height:40px;}
.sbox-bg-n{left:0;top:-40px;width:100%;background:url(../images/squeezebox_bg_n.png) repeat-x;}
.sbox-bg-ne{right:-33px;top:-40px;background:url(../images/squeezebox_bg_ne.png) no-repeat;}
.sbox-bg-e{right:-33px;top:0;height:100%;background:url(../images/squeezebox_bg_e.png) repeat-y;}
.sbox-bg-se{right:-33px;bottom:-40px;background:url(../images/squeezebox_bg_se.png) no-repeat;}
.sbox-bg-s{left:0;bottom:-40px;width:100%;background:url(../images/squeezebox_bg_s.png) repeat-x;}
.sbox-bg-sw{left:-33px;bottom:-40px;background:url(../images/squeezebox_bg_sw.png) no-repeat;}
.sbox-bg-w{left:-33px;top:0;height:100%;background:url(../images/squeezebox_bg_w.png) repeat-y;}
.sbox-bg-nw{left:-33px;top:-40px;background:url(../images/squeezebox_bg_nw.png) no-repeat;}

/* Contenu des popups */
#footline {background:#17264f; color: #fff; padding:8px 0; font-size:1.1em;}
#footline small {padding:0 10px;}
#footline a {color:#fff; font-weight:bold;}

