/* CSS Document */

/* Reset */
*										{ margin: 0; padding:0; }
img, img a								{ outline: none; border: none; }
body									{ background-color: #fff; color: #575757; font: 81.3% "Georgia", times, serif; margin: 0; padding: 0; }
a,a:visited								{ outline: none; color: #4086c6; text-decoration: none; }
a:hover									{ text-decoration: underline; }

/* HTML5 Fix */
header, section, footer, aside, nav, article 	{ display: block }

/* Base Structure */
.bodywidth								{ width: 960px; margin: 0 auto; clear: both; }

/* General Type */
h1,h2,h3,h4,h5,h6						{ color: #2f2f2f; font-family: "Ubuntu", arial; }
.bold									{ font-weight: bold; }
.blue									{ color: #4086c6; }

/* Header */
#headerwrap								{ width: 100%; background: url('images_faq/headerbg.jpg') repeat-x 0 0; height: 117px;  }
#mainheader								{ padding: 35px 0 0 0; color: #2f2f2f; text-shadow: 0px 0px 1px #fff; }
.logo									{ float: left; margin: 0 10px 0 0; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out; }
.logo:hover								{ cursor: pointer; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); }
#websitetitle							{ float: left; margin: -8px 0 0 0; }
#websitetitle h1						{ font-size: 2.538em; font-weight: normal; padding: 14px 0 0 6px}
#websitetitle h2						{ font: 1.462em "Georgia"; font-style: italic; font-weight: normal; margin: -3px 0 0 0; }
#mainheader nav							{ float: right; font: 1.615em "Ubuntu", arial,; font-weight: bold; margin: 8px 0 0 0; }
#mainheader nav li						{ list-style-type: none; display: inline; margin: 0 0 0 165px; }
#mainheader a,#mainheader:visited		{ color: #2f2f2f; }
#mainheader a:hover						{ text-decoration: none; color: #7e7e7e; }

/* Intro */
#introduction							{ margin-top: 25px; }
#introduction h2						{ font-size: 3.231em; font-weight: bold; margin: 0 0 5px 0; }
#introduction p							{ font-size: 1.154em; line-height: 140%; }
#introleft								{ float: left; width: 540px; margin: 0 0 25px 0; }
#introquote								{ float: right; font-style: italic; font-size: 1.15em; width: 335px; background: url('images_faq/leftquotemark.png') no-repeat 0 0; padding: 28px 0 0 45px; margin: 20px 0 25px 0; }
#introduction .quotename				{ float: right; height: 27px; background: url('images_faq/rightquotemark.png') no-repeat right top; margin: 10px 0 0 0; padding: 0 50px 0 0; font: 0.9em "Ubuntu"; color: #4086c6; }
a.findoutmore,a.findoutmore:visited		{ padding: 10px; font: 0.9em "Ubuntu", arial; font-weight: bold; color: #fff; text-shadow: 0px 0px 1px #1e5298; background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.12, rgb(109,171,229)),color-stop(0.56, rgb(59,126,189))); background-image: -moz-linear-gradient(center bottom,rgb(109,171,229) 12%,rgb(59,126,189) 56%); background-color: #468ac9; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin: 13px 0 0 0; float: left; }
a.findoutmore:hover						{ background-color: #2f2f2f; background-image: none; text-shadow: 0px 0px 1px #000; text-decoration: none; }

/* Main Content */
#maincontent							{ border-top: 1px #dbdbdb solid; padding: 25px 0 0 0; overflow: hidden; }
#aboutleft								{ float: left; width: 540px; }
#aboutleft h3							{ font-size: 1.5em ; font-weight: bold; margin: 0 0 15px 0; }
#aboutleft h4							{ font-size: 1.3em; font-weight: bold; margin: 0 0 15px 0; }
#aboutleft p							{ line-height: 135%; margin: 0 0 15px 0; }
#aboutleft li							{ line-height: 135%; margin: 0 0 15px 15px; }
#articlesright							{ float: right; width: 380px; }
#articlesright article					{ clear: both; margin: 0 0 20px 0; overflow: hidden; }
#articlesright figure					{ padding: 5px; border: 1px #dbdbdb solid; float: left; width: 100px; height: 100px; margin: 0 15px 0 0; } 
#articlesright p						{ line-height: 135%; }
#articlesright h5						{ font-size: 1.3em; margin: 0 0 6px 0; color: #4086c6; }
/* #articlesright h5:hover					{ color: #2f2f2f; } */
a.readmore,a.readmore:visited			{ padding: 4px; font: 0.9em "Ubuntu", arial; font-weight: bold; color: #fff; text-shadow: 0px 0px 1px #1e5298; background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.12, rgb(109,171,229)),color-stop(0.56, rgb(59,126,189))); background-image: -moz-linear-gradient(center bottom,rgb(109,171,229) 12%,rgb(59,126,189) 56%); background-color: #468ac9; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin: 10px 0 0 0; float: left; }
a.readmore:hover						{ background-color: #2f2f2f; background-image: none; text-shadow: 0px 0px 1px #000; text-decoration: none; }

/* Footer */
#footerwrap								{ width: 100%; height: 78px; background: #2d2d2d url('images_faq/footerbg.jpg') repeat-x 0 0; margin: 20px 0 0 0; }
#mainfooter								{ padding: 30px 0 0 0; text-shadow: 0px 0px 1px #000; }
#mainfooter nav							{ float: left; font-style: italic; font-size: 1.1em; width: 60%; }
#mainfooter li							{ list-style-type: none; float: left; margin: 0 35px 0 0; }
#mainfooter a,#mainfooter a:visited		{ color: #fff; }
.copyright								{ float: right; color: #b8b8b8; }

/* MEDIA QUERIES */

/* Under 960px */
@media only screen and (max-width: 980px) and (min-width: 821px) {
.bodywidth								{ width: 800px; }
#mainheader nav							{ font-size: 1.4em; }
#mainheader nav li						{ margin: 0 0 0 50px; }
#introleft								{ width: 470px; }
#introquote								{ width: 270px; }
#introduction h2						{ font-size: 2.85em; }
#aboutleft								{ width: 450px; }
#articlesright							{ width: 324px; }
#articlesright article					{ font-size: 0.95em; }
#mainfooter								{ font-size: 0.9em; }
#mainfooter li							{ margin: 0 25px 0 0; }
}

/* Under 800px */
@media only screen and (max-width: 820px) and (min-width: 621px) {
.bodywidth								{ width: 600px; }
#mainheader								{ padding: 40px 0 0 0; }
#mainheader nav							{ font-size: 1.1em; margin: 12px 0 0 0; }
#mainheader nav li						{ margin: 0 0 0 25px; }
.logo									{ width: 40px; height: 40px; }
#websitetitle h1						{ font-size: 2.3em; }
#websitetitle h2						{ font-size: 1.2em; }
#introleft								{ width: 600px; }
#introquote								{ display: none; }
#aboutleft								{ width: 400px; }
#articlesright							{ width: 170px; }
#articlesright figure					{ padding: 5px; border: 1px #dbdbdb solid; float: left; width: 100px; height: 100px; margin: 0 15px 0 0; } 
#mainfooter								{ font-size: 0.8em; }
#mainfooter li							{ margin: 0 15px 0 0; }
}

/* Under 600px */
@media only screen and (max-width: 620px) and (min-width: 501px) {
.bodywidth								{ width: 480px; }
#mainheader								{ padding: 25px 0 0 0; }
#mainheader nav							{ float: left; font-size: 1.1em; margin: 18px 0 0 0; }
#mainheader nav li						{ margin: 0 30px 0 6px; }
.logo									{ width: 40px; height: 40px; }
#websitetitle h1						{ font-size: 2.0em; }
#websitetitle h2						{ font-size: 1.0em; }
#introleft								{ width: 480px; }
#introduction h2						{ font-size: 2.7em; }
#introquote								{ display: none; }
#aboutleft								{ width: 310px; font-size: 0.9em; }
#articlesright							{ width: 150px; }
#articlesright article					{ font-size: 0.9em; }
#articlesright figure					{ padding: 5px; border: 1px #dbdbdb solid; float: left; width: 100px; height: 100px; margin: 0 15px 0 0; } 
#mainfooter								{ font-size: 0.8em; padding: 20px 0 0 0; }
#mainfooter nav							{ width: 100%; }
#mainfooter li							{ margin: 0 15px 0 0; }
.copyright								{ float: left; color: #b8b8b8; margin: 8px 0 0 0; }
}

/* Under 480px */
@media only screen and (max-width: 500px) and (min-width: 341px) {
.bodywidth								{ width: 320px; }
#mainheader								{ padding: 8px 0 0 0; }
#mainheader nav							{ float: left; font-size: 1.1em; margin: 18px 0 0 0; }
#mainheader nav li						{ margin: 0 30px 0 6px; }
.logo									{ display: none; }
#websitetitle h1						{ font-size: 2.0em; }
#websitetitle h2						{ font-size: 1.0em; }
#introleft								{ width: 320px; font-size: 0.8em }
#introduction h2						{ font-size: 2.3em; }
#introquote								{ display: none; }
#aboutleft								{ width: 320px; font-size: 0.9em; }
#articlesright							{ width: 320px; float: left; border-top: 1px #dbdbdb solid; padding: 20px 0 0 0; margin: 10px 0 0 0; }
#articlesright article					{ font-size: 0.9em; }
#articlesright figure					{ padding: 5px; border: 1px #dbdbdb solid; float: left; width: 100px; height: 100px; margin: 0 15px 0 0; } 
#mainfooter								{ font-size: 0.8em; padding: 20px 0 0 0; }
#mainfooter nav							{ width: 100%; }
#mainfooter li							{ margin: 0 6px 0 0; }
.copyright								{ float: left; color: #b8b8b8; margin: 8px 0 0 0; }
}

/* Under 320px */
@media only screen and (max-width: 340px) and (min-width: 5px)  {
.bodywidth								{ width: 300px; }
#mainheader								{ padding: 8px 0 0 0; }
#mainheader nav							{ float: left; font-size: 0.9em; margin: 15px 0 0 0; }
#mainheader nav li						{ margin: 0 30px 0 6px; }
.logo									{ display: none; }
#websitetitle h1						{ font-size: 2.0em; }
#websitetitle h2						{ font-size: 1.0em; }
#introleft								{ width: 300px; font-size: 0.8em }
#introduction h2						{ font-size: 2.3em; }
#introquote								{ display: none; }
#aboutleft								{ width: 300px; font-size: 0.9em; }
#articlesright							{ width: 300px; float: left; border-top: 1px #dbdbdb solid; padding: 20px 0 0 0; margin: 10px 0 0 0; }
#articlesright article					{ font-size: 0.9em; }
#articlesright figure					{ padding: 5px; border: 1px #dbdbdb solid; float: left; width: 100px; height: 100px; margin: 0 15px 0 0; } 
#mainfooter								{ font-size: 0.7em; padding: 20px 0 0 0; }
#mainfooter nav							{ width: 100%; }
#mainfooter li							{ margin: 0 6px 0 0; }
.copyright								{ float: left; color: #b8b8b8; margin: 8px 0 0 0; }
}