public/css/home.css
body {
background: #e0eff1 url('/image/dirty-grid.jpg');
border-top: 12px solid #680148;
font-family: Cambria, Georgia, 'New Century Schoolbook', 'Century Schoolbook L', 'Times New Roman', serif;
font-size: 13px;
margin: 0;}
a {
border-bottom: 1px dotted;
color: #e12a6d;
cursor: pointer;
text-decoration: none;}
a:hover,
a:focus,
a:active {
border-bottom-style: solid;}
#container {
margin: 0 auto;
width: 960px;}
#container .section {
border-top: 1px solid #680148;
padding: 10px 5px 0;}
#container .section:first-child {
border-top: none;}
#container #header {
font-family: 'Century Gothic', 'Tw Cen MT', Futura, 'URW Gothic L', Arial, sans-serif;
padding: 5px 5px 7px;}
#container #header .home-link {
border: none;
color: #222;
display: block;
float: left;
font-size: 2.5em;
margin: 0;
width: 400px;}
#container #header ul {
margin: 0 0 0 400px;
padding: 13px 0 5px;
text-align: right;}
#container #header li {
display: inline-block;
*display: inline;
list-style: none;
font-size: 1.4em;
margin-left: 15px;}
#container #introduction {
color: #628c9c;
padding-top: 50px;}
#container #introduction:after {
clear: both;
content: ' ';
display: block;}
#container.home #photo-container {
border: 7px solid white;
border-radius: 500px;
box-shadow: 2px 2px 5px #bbb;
float: right;
height: 300px;
margin: 20px;
overflow: hidden;
width: 300px;}
#container.home #photo-container img {
display: block;
margin: 0;}
#container #description {
float: left;
padding-bottom: 20px;
padding-top: 20px;
width: 65%;}
#container.home #description {
float: none;
padding-bottom: 10px;
padding-top: 40px;
width: 530px;}
#container #description h1 {
color: #7db4b5;
font-family: 'Century Gothic', 'Tw Cen MT', Futura, 'URW Gothic L', Arial, sans-serif;
font-size: 6em;
font-weight: normal;
margin: 0;}
#container.home #description h1 {
font-family: 'Monotype Corsiva', 'Brush Script MT', SnellRoundhand, 'Century Gothic', 'Tw Cen MT', Futura, 'URW Gothic L', Arial, sans-serif;
font-size: 10em;}
#container #description h3 {
font-size: 1.3em;
margin: 1.7em 0 0;}
#container #description p {
font-size: 1.5em;
line-height: 1.3em;
margin: 5px 0;}
#container.home #description p {
font-size: 1.9em;
line-height: 1.4em;}
#container.home #description em {
font-style: italic;
white-space: nowrap;}
#container.contact #description dl {
padding: 0;}
#container.contact #description dt {
color: black;
font-family: 'Century Gothic', 'Tw Cen MT', Futura, 'URW Gothic L', Arial, sans-serif;
font-size: 1.4em;
margin-top: 20px;
padding-left: 10px;}
#container.contact #description dt .message {
font-size: .6em;
font-style: italic;
padding-left: 20px;}
#container.contact #description dd {
margin: 0;}
#container.contact #description input,
#container.contact #description textarea {
border: 1px solid #7db4b5;
font-family: 'Century Gothic', 'Tw Cen MT', Futura, 'URW Gothic L', Arial, sans-serif;
font-size: 1.7em;
padding: 5px 10px;}
#container.contact #description input {
width: 350px;}
#container.contact #description textarea {
width: 380px;}
#container.contact #description input[type="submit"] {
background: #7db4b5;
color: white;
width: 200px;}
#container.contact #description input.error,
#container.contact #description textarea.error {
background: #f8bbd1;}
#container #sidebar {
background: #e0eff1;
color: black;
font-size: 1.2em;
margin-bottom: 15px;
margin-left: 66%;
margin-top: 65px;
padding: 10px 10px 20px;}
#container #sidebar h3 {
font-family: 'Century Gothic', 'Tw Cen MT', Futura, 'URW Gothic L', Arial, sans-serif;
font-weight: normal;
margin: .5em 0 1em;}
#container #sidebar dl {
margin-bottom: 0;
padding: 0;}
#container #sidebar dt {
font-weight: bold;
margin-top: 10px;}
#container #sidebar dd {
margin: 0;}
#container #sidebar ul {
margin-bottom: 0;
padding: 0 0 0 20px;}
#container #sidebar li {
line-height: 1.5em;
padding-left: 5px;
text-indent: -5px;}
#container #sidebar a {
border-bottom-style: none;}
#container #sidebar a:hover {
border-bottom-style: solid;}
#container #sidebar a .title {
border-bottom: 1px dotted;}
#container #sidebar a:hover .title {
border-bottom-style: none;}
#container #sidebar a .description {
font-size: .9em;
font-style: italic;
padding-left: 3px;}
#container.home #social-links {
clear: left;
padding: 0;}
#container.home #social-links:after {
clear: both;
content: ' ';
display: block;}
#container.home #social-links li {
display: inline-block;
*display: inline;
float: left;
list-style: none;
margin-right: 5px;}
#container.home #social-links li a {
background: url('/image/social-icons.png') no-repeat;
border-bottom: none;
display: block;
height: 60px;
overflow: hidden;
text-indent: -500px;
width: 60px;}
#container.home #social-links li.facebook a {
background-position: 0 3px;}
#container.home #social-links li.twitter a {
background-position: -70px 3px;}
#container.home #social-links li.linkedin a {
background-position: -137px 3px;}
#container.home #social-links li.facebook a:hover {
background-position: 0 -66px;}
#container.home #social-links li.twitter a:hover {
background-position: -70px -66px;}
#container.home #social-links li.linkedin a:hover {
background-position: -137px -66px;}
#container.home #blog-updates h3 {
color: #222;
float: left;
font-family: 'Century Gothic', 'Tw Cen MT', Futura, 'URW Gothic L', Arial, sans-serif;
font-weight: normal;
text-transform: uppercase;}
#container.home #blog-updates ul {
clear: left;
padding: 0;
text-align: center;}
#container.home #blog-updates ul:after {
clear: both;
content: ' ';
display: block;}
#container.home #blog-updates li {
background: #e0eff1;
clear: right;
display: inline-block;
*float: left;
list-style: none;
margin: 0 5px 15px;
padding: 10px 12px;
text-align: left;
width: 280px;
vertical-align: top;}
#container.home #blog-updates li:after {
clear: both;
content: ' ';
display: block;}
#container.home #blog-updates img {
border: 5px solid white;
box-shadow: 1px 1px 5px #ccc;
float: left;
margin-right: 10px;}
#container.home #blog-updates h5 {
font-size: 1.5em;
margin: 0;}
#container.home #blog-updates h5 a {
border-bottom: none;}
#container.home #blog-updates h5 a:hover {
border-bottom: 1px solid;}
#container.home #blog-updates p {
line-height: 1.3em;
margin: 1em 0 0;}
#container.home #blog-updates .read-more {
float: right;}
#container.home #blog-updates > .read-more {
margin-top: 17px;}
#container #bottom {
clear: both;
padding-bottom: 30px;}
#container #site-links {
float: left;
width: 45%;}
#container #activity-feed {
margin-left: 55%;}
#container #site-links h4,
#container #activity-feed h4 {
color: #222;
font-family: 'Century Gothic', 'Tw Cen MT', Futura, 'URW Gothic L', Arial, sans-serif;
font-size: 1.2em;
font-weight: normal;
margin: 1em 0;
text-transform: uppercase;}
#container #site-links ul,
#container #activity-feed ul {
padding-left: 20px;}
#container #site-links ul {
font-size: 1.1em;}
#container #activity-feed ul {
padding-right: 5px;}
#container #site-links li,
#container #activity-feed li {
margin-bottom: 6px;}
#container #site-links a {
border-bottom-style: none;}
#container #site-links a:hover {
border-bottom-style: solid;}
#container #site-links a .title {
border-bottom: 1px dotted;}
#container #site-links a:hover .title {
border-bottom-style: none;}
#container #site-links a .description {
font-size: .9em;
font-style: italic;
padding-left: 3px;}
#container #activity-feed .meta {
display: block;
font-style: italic;
margin-right: 10px;
text-align: right;}
#container #activity-feed .read-more {
float: right;}
#footer {
background: #680148;
font-family: 'Century Gothic', 'Tw Cen MT', Futura, 'URW Gothic L', Arial, sans-serif;
font-size: .9em;
margin-top: 20px;
padding: 7px 10px 10px;}
#footer #interior {
margin: 0 auto;
width: 950px;}
#footer #back-to-top {
color: #ccc;
float: right;}
#footer p {
margin: 0;}
#footer p,
#footer a {
color: white;}
@media all and (max-width: 960px) {
#container {
padding: 0 5px;
width: auto;}
#container #description h1 {
font-size: 5em;}
#container.home #description h1 {
font-size: 8em;}
#container #sidebar {
margin-top: 53px;}
#container.home #blog-updates li {
width: 28%;}
#footer #interior {
margin: 0;
width: auto;}
}
@media all and (max-width: 800px) {
#container #description {
width: 60%;}
#container #description h1 {
font-size: 4em;}
#container.home #description h1 {
font-size: 7em;}
#container #description h3 {
font-size: 1.2em;
margin: 1.5em 0 0;}
#container #description p {
font-size: 1.3em;}
#container.home #description p {
font-size: 1.5em;}
#container.contact #description dt {
font-size: 1.2em;}
#container.contact #description dt .message {
font-size: .9em;}
#container #sidebar {
margin-left: 62%;
margin-top: 38px;}
}
@media all and (max-width: 720px) {
#container #header .home-link {
font-size: 2em;
width: 300px;}
#container #header ul {
margin-left: 300px;
padding: 5px 0 5px;}
#container #introduction {
padding-top: 30px;}
#container.home #introduction {
padding-top: 40px;}
#container.home #photo-container {
height: 230px;
margin: 6px;
width: 230px;}
#container.home #photo-container img {
margin: -10px -40px;}
#container #description {
width: 55%;}
#container.home #description {
padding-bottom: 0;
padding-top: 30px;}
#container #description h1 {
font-size: 3em;}
#container.home #description h1 {
font-size: 5em;}
#container.home #description p {
font-size: 1.4em;
line-height: 1.2em;}
#container.contact #description dt {
font-size: 1.1em;}
#container.contact #description dt .message {
padding-left: 7px;}
#container.contact #description input {
width: 90%;}
#container.contact #description textarea {
width: 95%;}
#container #sidebar {
font-size: 1.1em;
margin-left: 58%;
margin-top: 20px;}
#container.home #blog-updates ul {
text-align: left;}
#container.home #blog-updates li {
clear: dunno;
width: auto;}
#container #site-links {
float: none;
width: auto;}
#container #activity-feed {
margin: 30px 0 0 0;}
}
@media all and (max-width: 600px) {
#container #header .home-link {
float: none;
width: auto;}
#container #header ul {
margin-left: 0;
padding: 10px 0 0;
text-align: left;}
#container #header li {
margin: 0 15px 0 0;}
#container #introduction {
padding-top: 15px;}
#container.home #introduction {
padding-top: 20px;}
#container.home #photo-container {
height: 180px;
margin: 0 10px;
width: 180px;}
#container.home #photo-container img {
margin: -35px -65px;}
#container #description {
float: none;
padding-top: 0;
width: auto;}
#container.home #description {
padding-top: 0;
width: auto;}
#container.home #description h1 {
font-size: 4em;}
#container.home #description p {
font-size: 1.3em;}
#container #sidebar {
margin-left: 0;}
#container #site-links a .description {
font-size: .8em;}
#footer #back-to-top {
color: #ccc;
display: block;
float: right;
margin-bottom: 10px;}
#footer p {
clear: right;}
}
@media all and (max-width: 450px) {
#container.home #photo-container {
float: none;}
}