/* @group Structure */
body {background: #346868 url(../img/body-bg.jpg) repeat-x; padding: 0 0 40px 0;}
#wrapper {background: #fff; padding: 0 0 65px 0;}
#header {padding: 50px 0 40px 0;}
#logo {text-indent:-9999px;}
#logo h1 a {display:block; width:515px; height:50px; background: url(../img/logo-culture-works.png) no-repeat;}

#left-column-front img { margin: 0 0 20px 0;}

#buttons { margin: 80px 0 60px 0;}

#left-button {text-indent:-9999px;}
#left-button a {display:block; width:325px; height:54px; background: url(../img/teacher-application-form.png) no-repeat;}

#right-button {text-indent:-9999px;}
#right-button a {display:block; width:325px; height:54px; background: url(../img/principal-job-listing.png) no-repeat;}

#footer { padding: 25px 0;}
/* @end */

/* @group Navigation */
#top-nav { margin: 15px 0 0 0; text-align:right;}
#top-nav span { margin: 15px 0 0 0; color:#6a9c9c;}
#top-nav a {margin: 0 5px 0 5px; font-size:16px; font-weight: bold; color:#6a9c9c; text-decoration:underline;}
#top-nav a:hover {color:#006666;}
#top-nav a.active {color:#006666; text-decoration:none;}
/* @end */

/* @group General Typography */
body {font-family: 'Trebuchet MS', Helvetica, sans-serif; color:#666;}

a {color:#669999; text-decoration:none;}
a:hover { color:#006666; }
a:focus {outline:none}/*this avoids having image replacement sections display a dotted outline*/

#left-column-front h2 { font-size:20px; margin: 0 0 20px 0; color:#006666;}
#left-column-front p  { margin: 0 0 15px 0; font-size:16px; line-height:24px;}

#right-column-front h3{ font-size:18px; margin: 0 0 15px 0; color:#006666;}

#right-column-front .box { padding: 20px; background:#6a9c9c;}
#right-column-front .box li {margin: 0 0 7px -40px; padding: 0 0 0 35px; font-size:14px; background:url(../img/arrow-black.png) no-repeat left 7px; color:#fff;}


#content h2 { font-size:20px; margin: 0 0 20px 0; color:#006666;}
#content h3 { font-size:16px; margin: 0 0 20px 0; color:#006666;;}
#content p  { margin: 0 0 15px 0; font-size:14px; line-height:20px;}

#content ul  {margin: 20px 0 15px -15px;}
#content li  {margin: 0 0 7px 0; padding: 0 0 0 15px; font-size:14px; background:url(../img/arrow-black.png) no-repeat left center;}

#content p.black { font-size:15px; color:#000;}

#footer p { font-size:12px; color:#fff;}
#footer a { color:#fff;}
#footer a:hover { color:#ddd; }

/* @end */

/* @group Various */
.left {float: left;}
.right {float: right;}

hr {border: none 0; border-bottom: 1px solid #e2e2e3; width: 100%; height: 1px; margin: 10px 0;}

/* @end */