@charset "utf-8";
/* Main CSS Document of Mathematics HTML Template */

/*0.1 TOC
----------------------------------------------------
I GLOBAL STYLES
----------------------------------------------------
1.0 Reset
1.1 Float and Clear
1.2 Body
1.3 Headlines
1.4 Text Elements
1.5 Links
1.6 Form Elements
1.7 Blockquote
1.8 Basic Box
1.9 Tables
1.10 Floated Images
1.11 List
1.12 Navigation
1.13 Pagination

----------------------------------------------------
II MAIN PAGE ELEMENTS
----------------------------------------------------
2.0 Header
2.1 Main Menu
2.2 Search
2.3 Main
2.4 Bottom
2.5 Footer
 
----------------------------------------------------
III SPECIFIC PAGES
----------------------------------------------------
3.0 Home Page
3.1 FAQs Page
3.2 Portfolio
3.3 Blog Page
3.4 Contact Page
*/

/* I GLOBAL STYLES
------------------------------------------------------------- */

/* 1.0 Reset
------------------------------------------ */
* {
	margin: 0;
	padding: 0;
}

#main img {
	margin-top:10px;
	margin-bottom:10px;
}

img, fieldset { 
	border: 0; 
}
ul li {
	list-style: none;
	padding: 0;
	margin: 0;
}
table { 
	border-collapse: collapse; 
	border-spacing: 0;
	text-align: left;
}
q:before, q:after {
	content:'';
}
a {
	outline: 0;
}

/* 1.1 Float and Clear 
------------------------------------------ */
.fl {
	float: left;
}
.fr {
	float: right;
}
.clear {
	clear: both;
}
.clearMT {
	margin-top: 0 !important;
}
.clearMR {
	margin-right: 0 !important;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}

/* 1.2 Body
------------------------------------------ */
body {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.0;
}

/* 1.3 Headlines
------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-family: "Arial Black", Gadget, Arial, Helvetica, sans-serif;
	margin-bottom: 12px;
}
h1 {
	font-size: 30px;
	line-height: 30px;
}
h2 {
	font-size: 22px;
	line-height: 22px;
}
h3 {
	font-size: 18px;
	line-height: 18px;
}
h4 {
	font-size: 14px;
	line-height: 14px;
}
h5 {
	font-size: 12px;
	line-height: 12px;
	font-weight: bold;
}
h6 {
	font-size: 11px;
	line-height: 11px;
	font-weight: bold;
}
.subHeadline {
	margin-top: 15px;
	margin-bottom: -8px;
}
.subHeadline2 {
	margin-bottom: -8px;
}
#secondaryContent h3 {
	font-size: 14px;
	line-height: 14px;
	padding: 5px 7px;
}

/* 1.4 Text Elements
------------------------------------------ */
p {
	line-height: 18px;
	margin-top: 12px;
}
address {
	font-style: normal;
	line-height: 22px;
	margin-top: 12px;
}

/* 1.5 Links
------------------------------------------ */
a {
	text-decoration: none;
}
a.more{
	text-transform: uppercase;
}

/* 1.6 Form Elements
------------------------------------------ */
form ul li {
	margin-top: 12px;
}
input, textarea {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 3px;
}
input.submit {
	padding: 3px 3px;
}

/* 1.7 Blockquote
------------------------------------------ */
blockquote p {
	font-style: italic;
	padding: 10px;
	padding-left: 60px;
	font-weight: bold;
	font-size: 13px;
	word-spacing: inherit;
	color: #666;
}

/* 1.8 Basic Box
------------------------------------------ */
.box {
	margin-bottom: 50px;
}
.paraBox { /* This box works as paragraph */
	margin-top: 15px;
}
.box185 { /* 1/4 width box */
	float: left;
	width: 185px;
	margin-right: 20px;
	margin-bottom: 50px;
}
.box390 { /* 1/2 width box */
	float: left;
	width: 390px;
	margin-right: 20px;
	margin-bottom: 50px;
}
.box253 { /* 1/3 width box */
	float: left;
	width: 253px;
	margin-right: 20px;
	margin-bottom: 50px;
}
.box360 { /* 2/5 width box */
	float: left;
	width: 360px;
	margin-right: 60px;
	margin-bottom: 50px;
}
.box170 { /* 1/2 in 2/5 width box */
	float: left;
	width: 170px;
	margin-right: 20px;
}
.box540 { /* 3/5 width box */
	float: left;
	width: 540px;
	margin-right: 60px;
	margin-bottom: 50px;
}
.box255 { /* 1/2 in 3/5 width box */
	float: right;
	width: 255px;
	margin-right: 30px;
}
.box714 { /* 3/4 width box */
	float: left;
	width: 714px;
	margin-right:30px;
}

#primaryContent { /* primary container of boxes */
	float: left;
	width: 610px;
	margin-right: 20px;
}
#secondaryContent { /* secondary container of boxes */
	float: left;
	width: 170px;
}

/* 1.9 Tables
------------------------------------------ */
th {
	text-align: left;
	font-size: 13px;
	font-weight: normal;
	line-height: 18px;
	width: 110px;
	padding: 5px 12px 5px 12px;
}
td {
	font-size: 12px;
	line-height: 18px;
	width: 110px;
	padding: 5px 12px 5px 12px;
}

/* 1.10 Floated Images
------------------------------------------ */
.imgLeft {
	float: left;
	margin-right: 10px;
}
.imgRight {
	float: right;
	margin-left: 10px;
}

/* 1.11 List
------------------------------------------ */
#primaryContent ul {
        margin:12px;
}
#primaryContent ol {
        margin:12px;
}
#primaryContent ol li { 
	list-style: decimal;
	line-height: 20px;
	margin-left: 17px;
	padding-left: 0;

}
#primaryContent ul li {
	line-height: 20px;
	padding-left: 12px;
        

}
ol li { 
	list-style: decimal;
	line-height: 20px;
	margin-left: 17px;
	padding-left: 0;

}
.list li {
	line-height: 20px;
	padding-left: 12px;

}
.checkList li {
	line-height: 20px;
	padding-left: 17px;
}
.discList li {
	list-style: disc;
	line-height: 20px;
	margin-left: 15px;
	padding-left: 0;
}
.squareList li {
	list-style: square;
	line-height: 20px;
	margin-left: 15px;
	padding-left: 0;
}
.circleList li {
	list-style: circle;
	line-height: 20px;
	margin-left: 15px;
	padding-left: 0;
}

/* 1.12 Navigation
------------------------------------------ */
.nav li a {
	font-size: 11px;
	line-height: 21px;
	display: block;
	padding: 5px;
	padding-left: 15px;
}
.nav li li a {
	margin-left: 15px;
}
.nav li li li a {
	margin-left: 30px;
}
.nav li li li li a {
	margin-left: 45px;
}
.imgNav li a{
	padding: 7px;
}
	
/* 1.13 Pagination
------------------------------------------ */
.pagination {
	margin-bottom: 50px;
}
.pagination li {
	font-size: 11px;
	float: left;
	margin-right: 5px;
}
.pagination li a {
	display: block;
	padding: 7px 3px;
}
.pagination li.current a {
	padding: 7px 8px;
}


/* II MAIN PAGE ELEMENTS
------------------------------------------------------------- */

/* 2.0 Header
------------------------------------------ */
#headerBackground {
	padding:0px 0;

}
#header {
	width: 800px;
	margin: 0 auto;
	text-align:right;
	font-size: 11px;
	line-height: 10px;
}
#header #logo {
	float: left;
	width: 314px;
	height: 112px;
}
#header .logoDesc {
	float: right;
	width: 290px;
	padding-right:20px;
	line-height: 22px;
}

/* 2.1 Main Menu
------------------------------------------ */
#menuBar {
	width: 800px;
	margin: 0 auto;
}
#mainMenu ul li { 
	font-size: 14px; 
	line-height: 14px;
	float: left;
	z-index: 99; 
	position: relative;
}
#mainMenu ul li a {
	display: block;
	padding: 13px 13px;
}
#mainMenu ul li .menuDesc {
	font-size: 10px;
	line-height: 10px;
}
#mainMenu ul li ul { 
	z-index: 99; 
	visibility: hidden; 
	position: absolute;
}
#mainMenu ul li ul {
	width: 190px;
}
#mainMenu ul li ul li {
	width: 190px;
}
#mainMenu ul li ul li a { 
	font-size: 12px;
	text-align: left;
	line-height: 14px;
	padding: 12px 15px; 
	width: 160px;
}
#mainMenu ul li ul li ul { 
	top: 0; 
	left: 190px;
}
#mainMenu ul li:hover ul ul { 
	visibility: hidden; 
}
#mainMenu ul li:hover ul, #mainMenu ul li ul li:hover ul { 
	visibility: visible; 
}

/* 2.2 Search
------------------------------------------ */
.searchForm {
	float: right;
	margin-top: 7px;
}
.searchFieldset {
	position: relative;
}
.searchInput {
	font-size: 12px;
	line-height: 12px;
	width: 150px;
	padding: 5px;
}
.searchButtom {
	position: absolute;
	top: 0;
	right: 0;
	width: 25px;
	height: 25px;
}


/* 2.3 Main
------------------------------------------ */
#main {
	width: 800px;
	margin: 0 auto;
	padding-top: 15px;
}


/* 2.4 Bottom
------------------------------------------ */
#bottom {
	width: 800px;
	margin: 0 auto;
	padding-top: 10px;
}
#bottom h4 {
	text-transform: uppercase;
}
#bottom .list {
	float: right;
	width: 100px;
	margin-right: 1px;
}
#bottom .date {
	text-align: center;
	float: left;
	padding: 2px 10px 2px 0;
	margin-right: 10px;
	margin-top: 0;
}
#bottom .date span {
	font-size: 20px;
	line-height: 20px;
}

/* 2.5 Footer
------------------------------------------ */
#footer {
	width: 800px;
	height: 70px;
	margin: 0 auto;
	font-size: 11px;
}
#footer address {
	line-height: 18px;
}

/* III SPECIAL PAGES
------------------------------------------------------------- */

/* 3.0 Home Page
------------------------------------------ */
#s3slider {
    width: 800px; /* important to be same as image width */
    height: 360px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
	margin-bottom: 50px;
}
#s3sliderContent {
    width: 800px; /* important to be same as image width or wider */
    position: absolute; /* important */
    top: 0; /* important */
    margin-left: 0; /* important */
}
.s3sliderImage {
    float: left; /* important */
    position: relative; /* important */
    display: none; /* important */
}
.s3sliderImage span {
    position: absolute; /* important */
    left: 0;
    font: 12px Arial, Helvetica, sans-serif;
    line-height: 22px;
    padding: 10px 15px;
    width: 930px;
    display: none; /* important */
    bottom: 0;
   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}
.s3sliderImage span strong {
	font-size: 18px;
	line-height: 28px;
	font-weight: normal;
	text-transform: uppercase;
	display: block;
}

/* 3.1 FAQs Page
------------------------------------------ */
.toggle p {
	margin: 12px 0;
}
.toggle h5 {
	font-weight: normal;
}
.q {
	font-weight: bold;
}

/* 3.2 Portfolio
------------------------------------------ */
.caption {
	display: none;
}
.folio p {
	text-transform: uppercase;
	margin-top: 2px;
	padding-left: 12px;
}

/* 3.3 Blog Page
------------------------------------------ */
.attr {
	margin-top: -5px;
}
.capitalize{
	text-transform: capitalize;
}
.comment {
	padding: 12px;
	padding-top: 1px;
}
#replyForm ul li label {
	display: block;
	margin-bottom: 3px;
}
.replyInput {
	width: 210px;
}
.replyTextarea {
	width: 528px;
}
#replyForm label.error {
	margin-left: 5px;
	width: auto;
	display: inline;
}

/* 3.4 Contact Page
------------------------------------------ */
#contactForm ul li label {
	display: block;
	margin-bottom: 3px;
}
.contactInput {
	width: 210px;
}
.contactTextarea {
	width: 528px;
}
#contactForm .hide {
	display: none;
}
#contactForm label.error {
	margin-left: 5px;
	width: auto;
	display: inline;
}
.social {
	margin-top: 12px;
}
.social li {
	float: left;
	padding-right: 10px;
}