﻿/*** Nipissing SMS CSS
     2009 Marjorie Lazaro
**************** CSS RESETS *********************************/
body {
	line-height: 1em;
	width: 100%;
	font-size: 71%; /* Resets 1em to 12px */
	font-family: "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
	color: #000;
	margin: 0 auto;
	background-color: #fff 
}

a:link { color: #2044a5; cursor: pointer; text-decoration: underline }
a:visited { color: #2044a5; cursor: pointer;  text-decoration: underline }
a:visited:hover { color: #000; cursor: pointer;  text-decoration: underline }
a:hover { color: #000; text-decoration: underline; cursor: pointer }
a:active { color: #2044a5; cursor: pointer;  text-decoration: underline }

hr { clear: both; width: 100%; border: 0; border-top: 1px solid #035b89 }
/* hack IE6 */ *html hr { height: 1px; margin-top: -7px }
/* hack IE7 */ *:first-child+html hr { height: 1px; margin-top: -7px }

p {	font-size: 1em; line-height: 1.4em;	margin: 5px 0 15px;	text-align: justify }

h1 { font-size: 2.5em; margin-top: 8px }
h2 { font-size: 2em; font-weight: bold; line-height: 1em }
h3 { font-size: 1.2em; margin: 10px 0 15px; text-align: left; line-height: 1.2em }
h4 { font-size: 1em; margin: 15px 0 5px 0; line-height: 1em }

ul { list-style: none; margin: 0; padding: 0 }
ol { list-style: decimal; margin: 0 0 0 20px; padding: 0 0 10px }
ol li { margin: 0 0 10px; line-height: 1.2em }

ul.col { float: left; width: 150px; margin-left: 15px }

caption, th, td { font-weight: normal }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q {	quotes: "" ""; }

.sep { height: 10px }

img.float-left { padding-right: 15px }
img.float-right { padding-left: 15px }


/* HEADER */
#header { height: 145px }
#header .wrapper-top { background-color: #dedede; height: 30px; width: 100%; text-align: center; color: #000 }
#header .wrapper-bottom { background: #002e5c url(img/bg_header.jpg) 50% 0 no-repeat; height: 115px; width: 100%; text-align: center; padding: 15px 0 0 }
/* hack IE6 */ *html #header .wrapper-bottom { height: 100px; padding: 8px 0 0 0 }
#header .wrapper-bottom .logo { float: left }
#header .top { padding: 10px 0 0 }
#header .top .time { float: left }
#header .top ul { float: right; list-style-type: none; text-align: right; margin: -2px 0 0 0; padding: 0 }
/* hack Safari */ html* #header .top ul { margin-top: -1px }
/* hack IE6 */ *html #header .top ul { margin-top: -3px }
/* hack IE7 */ *:first-child+html #header .top ul { margin-top: -3px }

#header .top ul li { float: right; padding-left: 15px; text-align: right }
#header .top ul li a { text-decoration: none; color: #2b529a }
#header .top ul li a:hover { text-decoration: none; color: #000 }
#header .bottom .leaderboard-ad { float: left }
#header .bottom .leaderboard-ad img { float: left; padding: 0 }

.logo { position: relative; top: 2px;  }

/* WRAPPER */
#wrapper { margin: 20px auto 30px; background: #fff url(img/bg_wrapper.gif) 0 0 no-repeat }

/* 2 cols layout */
#wrapper .twoCols-first ul { list-style-type: disc; padding: 0 0 0 12px; margin: 0 }
#wrapper .twoCols-first ul li a { text-decoration: none  }

#wrapper .twoCols-second img.bottomSpacing { margin-bottom: 20px; }

#wrapper .twoCols-second .sponsors {
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid #bc0a39;
    border-bottom: 1px solid #bc0a39
}
#wrapper .twoCols-second .sponsors img.noborder { border-left: 0!important; }
#wrapper .twoCols-second .sponsors img { border-left: 1px dotted #dedede!important; padding: 0 30px }

#wrapper .twoCols-first center { margin:10px 0px 20px 0px}
#wrapper .twoCols-first center a { clear:left;margin-bottom:20px; }

/* 3 cols layout */
#wrapper .threeCols-first ul { list-style-type: disc; padding: 0 0 0 12px; margin: 0 }
#wrapper .threeCols-first a:link, #wrapper .threeCols-first a:visited, 
#wrapper .threeCols-first a:active { text-decoration: none }

#wrapper .threeCols-third-small img.skyscraper-ad { border: 1px solid #bc0a3a }
#wrapper .threeCols-third-big .bigbox-ad { border: 0 }


/* FOOTER */
#footer .wrapper-copyright { background-color: #2b529a; height: 60px; width: 100%; text-align: center; color: #2b529a; padding: 10px 0 0 }
#footer .wrapper-links { background-color: #ccc; height: 30px; width: 100%; text-align: center }
#footer .links ul, #footer .about ul li { list-style-type: disc; color: #2b529a }
#footer .links ul li a:link, #footer .links ul li a:visited, #footer .links ul li a:active,
#footer .about ul li a:link, #footer .about ul li a:visited, #footer .about ul li a:active { text-decoration: none; color: #2b529a  }
#footer .links ul li a:hover, #footer .about ul li a:hover { color: #000 }
#footer .copyright { color: #fff }
#footer .copyright a:link, #footer .copyright a:visited, #footer .copyright a:hover, #footer .copyright a:active { color: #fff }
#footer .about ul { margin-left: 520px }

/* specific tags */
table.data tr td table.table-page-nav tr td a { border: 1px solid #000; color: #bc0a3a }
table.data tr td table.table-page-nav tr td a:hover { color: #000; background-color: #f0f0f0 }

/* home */
.splash { text-align: center; margin: 0 auto; width: 200px; height: 378px; background: #bec6de url(img/splash.jpg) 0 0 no-repeat; color: #fff; padding: 10px 10px 10px 580px }
.registerToPlay { background-color: #bec6de; font-size: 12px; line-height: 16px }
.registerToPlay h3 { color: #2044a5 }

.about .col1, .about .col2, .about .col3 { float: left; width: 230px; text-align: left; height: 100px }
.about .col2 { width: 270px; margin: 0 15px; padding: 0 15px; border-right: 1px solid #2d6d98; border-left: 1px solid #2d6d98 }
.about h3 { margin: 0 0 10px 0; font-size: 12px; color: #2d6d98 }

label { float: left; display: block; width: 215px; text-align: right; padding: 12px 20px }
input, textarea, select { border: 1px solid #aeaeae; margin: 8px 0 }



/* registration page */
.registration input, .password input { float: left; width: 220px }
.registration label, .password label { width: 150px }
input.btn {
    width: 150px;
    height: 44px;
    color: #2d6d98;
    font-weight: bold; 
    text-align: center; 
    padding: 2px 15px;
    background: #b0b0b0 url(img/bg_btn.jpg) 0 0 repeat-x;
    border: 1px solid #b0b0b0;
    cursor: pointer
}
label.field-checkbox { margin: -24px 0 0 130px; width: 380px; float: left }
/* hack IE6 */ *html label.field-checkbox { margin-left: 43px }
.inputCheckbox { margin: 40px 0 0 130px; float: left; width: 15px }
/* hack IE6 */ *html .inputCheckbox { margin-left: 65px }
.inputCheckbox input { width: 15px; margin: 3px 0 0 0 }
.registration input.margin-btn { margin-left: 130px } 
/* hack IE6 */ *html .registration input.margin-btn { margin-left: 50px }

.password input.margin-btn { margin-left: 190px } 
/* hack IE6 */ *html .password input.margin-btn { margin-left: 175px } 
/* hack IE7 */ *:first-child+html .password input.margin-btn { margin-left: 175px } 

/* Contact support */
.websitetitle { font-weight: bold; font-size: 1.2em; position: relative; top: 11px }

/* captcha */
label.captcha-label { position: relative; top: 3px }
input.captcha-input { position: relative; top: 3px; width: 100px }
.captcha { margin-top: 5px }

ul li { line-height: 1.4em }
.alt { background-color: #f0f0f0 }


/* NAVIGATION */
.wrapper-navigation { margin: 0; padding: 0; background: #002e5c url(img/bg_header.jpg) 50% 100% no-repeat; height: 29px; width: 100%; text-align: center }
/* hack IE6 */ *html .wrapper-navigation { margin: -7px 0 0 0; padding: 0 }

#navigation { height: 32px; position: relative; top: 0; z-index: 500 }
/* hack IE6 */ *html #navigation { height: 29px }
#navigation ul { list-style-type: none; margin: 0; padding: 0 }
#navigation ul li {
    float: left; 
    display: block;
    height: 29px; 
    margin-right: 1px;
    position: relative
}

#navigation ul li a {
    display: block; line-height: 29px; padding: 0 0 0 15px; text-decoration: none; 
    background: #fff url(img/bg-nav-left.jpg) no-repeat 0 0 }
#navigation ul li a b {
    display: block; line-height: 29px; padding: 0 15px 0 0; height: 29px; 
    background: #fff url(img/bg-nav-right.jpg) repeat-x 100% 0 }
/* hack IE6 */ *html #navigation ul li a b { width: 10px; white-space: nowrap }

#navigation ul li:hover a, #navigation ul a:hover { background: #ffffff url(img/bg-nav-left-hover.jpg) no-repeat 0 0 }
#navigation ul li:hover a b, #navigation ul a:hover b { background: #fff url(img/bg-nav-right-hover.jpg) no-repeat 100% 0 }

#navigation ul li.current a { color: #5791ce; background: #fff url(img/bg-nav-left-current.jpg) no-repeat 0 0 }
#navigation ul li.current a b { color: #5791ce; background : #fff url(img/bg-nav-right-current.jpg) no-repeat 100% 0 }

#navigation ul li a:link, #navigation ul li a:visited, #navigation ul li a:active { color: #255f9d }
#navigation ul li a:hover { color: #5791ce }

#navigation ul li:hover ul { width: 148px }
#navigation ul li:hover ul li a, #navigation ul li:hover ul li a b { background-image: none }


#navigation a, #navigation a:visited { display: block }

/* hide the sub levels and give them a positon absolute so that they take up no room */
#navigation ul ul {
    display: table;
    visibility: hidden; 
    position: absolute; 
    width: 150px;
    top: 29px; 
    left: 0; 
    width: auto; 
    margin: 0;
    background-color: #f4f4f4; 
}

#navigation ul ul li { margin: 0 }
#navigation ul li:hover ul li a, #navigation ul a:hover ul li a {
    background-color: #f4f4f4; 
    background-image: none; 
    border: 1px solid #255f9d; 
    border-top: 0
}
/* hack IE6 */ *html .navigation ul :hover ul { width: 150px }
/* hack IE6 */ *html #navigation ul li:hover ul li a { border-bottom: 0 }
/* hack IE6 */ *html #navigation ul a:hover ul li a { border-bottom: 0 }
/* hack IE6 */ *html #navigation ul a:hover ul li a.last { border-bottom: 1px solid #255f9d }


#navigation table { position: absolute; top: 0; left: 0; border-collapse: collapse; width: 0; height: 0 }

#navigation ul ul a, #navigation ul ul a:visited { padding: 2px 10px; width: 148px }

#navigation li :hover ul li a:hover, #navigation ul li:hover ul li:hover a { color: #5791ce; background-color: #fff }
#navigation :hover > a, #navigation ul ul :hover > a { color: #255f9d; background-color: #fff }

#navigation ul li:hover ul, #navigation ul a:hover ul { visibility: visible }


/* LOGIN PAGE */
body.login-page {
    font-family: Helvetica, Arial, sans-serif; 
    background: #005c8b url(img/bg_page_login.jpg) top left repeat-x; 
    margin: 0 auto;
    padding: 0 auto;
    text-align: center 
}

body.login-page .secure { background-color: #ffffcd; color: #666; width: 99%; text-align: left; padding: 4px 0 0 10px; height: 15px }

body.login-page .login {
    padding: 20px;
    width: 392px;
    height: 250px;
    text-align: center;
    margin: 160px auto;
    background: transparent url(img/bg_login.jpg) 0 0 no-repeat;
}
/* hack for IE6 */ *html body.login-page .login { height: 120px }

body.login-page .login .form { width: 150px; text-align: left }
/* hack for IE6 */ *html body.login-page .login .form { margin-left: 50px } 

body.login-page .login table { margin: 95px auto 0; padding: 0 auto; text-align: center }
/* hack for IE6 */ *html body.login-page .login table { margin-top: 114px } 
/* hack for IE7 */ *:first-child+html body.login-page .login table { margin-top: 120px } 

body.login-page .login .firstInput { margin-left: 0 }
body.login-page .login .secondInput { margin: -8px 0 0 }
/* hack for IE6 */ *html body.login-page .login input { width: 140px; margin: 4px 0; padding: 0 } 
/* hack for IE7 */ *:first-child+html body.login-page .login .clear-left { margin: 0; padding: 0 } 
/* hack for IE7 */ *:first-child+html body.login-page .login input { width: 140px; margin: 5px 0; padding: 0 } 

body.login-page .links { position: relative; top: -7px; margin-left: -130px }
/* hack for IE6 */ *html body.login-page .links { top: 5px; float: left; margin-left: -80px } 
/* hack for IE7 */ *:first-child+html body.login-page .links { top: 5px; float: left; margin-left: -100px }

body.login-page .links ul { list-style-type: disc; padding: 0; margin: 0  }
body.login-page .links ul li { float: left; padding: 5px 15px 0 0; margin: 0 5px 0 0  }
body.login-page .links ul li.first { list-style-type: none; padding-left: 0  }
body.login-page .links ul li a { text-decoration: none  }

body.login-page .chk-box input { float: left; margin: 0; border: 0 }
/* hack for IE6 */ *html body.login-page .chk-box input { width: 15px } 
/* hack for IE7 */ *:first-child+html body.login-page .chk-box input { width: 15px } 
body.login-page .chk-box label { margin: 0; width: 100px; padding: 2px 0 0 5px; text-align: left; float: left }
/* hack for IE6 */ *html body.login-page .chk-box label { padding-top: 11px } 
/* hack for IE7 */ *:first-child+html body.login-page .chk-box label { padding-top: 11px } 

body.login-page input.btnGreen {
    color: #fff; font-weight: bold; font-size: 11px; padding: 2px 8px;
    background-color: #68c22d; 
    border-top: 2px solid #89e14f;
    border-right: 2px solid #3b7916;
    border-bottom: 2px solid #3b7916;
    border-left: 2px solid #89e14f;
    margin-left: -40px
}
/* hack for IE6 */ *html body.login-page input.btnGreen { margin-left: -60px }  
/* hack for IE7 */ *:first-child+html body.login-page input.btnGreen { float: left }  


/* FAQs */
.wrapper_tabs { border-bottom: 1px solid #035b89 }
ul.tabs a:hover { color: #000 }
ul.tabs li.active-server a { color: #000; border: 1px solid #035b89; border-bottom: 1px solid #fff }
ul.tabs a.active { color: #035b89; border: 1px solid #035b89; border-bottom: 1px solid #fff }
ul.tabs a { color: #000 }

/* Admin */
.progress { color:#bc0a3a }
.modalPopup { background-color:#f1f1f1; border-color:#bc0a3a }

/* accordeon */
.accordionHeader { border: 1px solid #bc0a3a; color: #000; background-color: #f1f1f1 }
#master_content .accordionHeader a { color: #fff }
.accordionHeaderSelected { border: 1px solid #bc0a3a; color: #fff; background-color: #bc0a3a }
#master_content .accordionHeaderSelected a { color: #fff }
.accordionContent { background-color: #fff;  border: 1px solid #bc0a3a }