/* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800,800italic); @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700); @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,700italic,900,900italic); /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ /* Color Key Burgundy: #63151E Gold: #F0932c OLDER COLORS, PROBABLY WON'T USE: Orinch: #d53d24 Dark Gray: #404552 Light Blue-Gray: #d4e6ea */ html { font-size: 62.5%; } body { font-size: 100%; font-family: 'Open Sans', sans-serif; background: #ddd url('../images/bg-gray.png') } p, li { font-size: 1.4rem; } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; } a, a:visited { text-decoration: none; color: #A0202F; font-weight: 600; } a:hover { color: #F0932c; } ul { list-style:disc inside; } cite { font-style: italic; } p.clear { visibility: visible; overflow: auto; clear: both; display: block; width: 100%; margin: 10px 0; height: auto; } h1.clear, h2.clear, h3.clear, h4.clear, h5.clear, h6.clear { visibility: visible; overflow: auto; clear: both; display: block; width: 100%; margin: 10px 0; height: auto;} .note { color: red; } a.button { font-size: 2.25rem; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; } input[type=submit], input[type=reset] { font-size: 2.5rem; margin: 20px 10px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700;} .container { background: white; width:100%; max-width: 1024px; margin: 20px auto; padding: 20px 0; border-radius: 20px; } /* Structure ================================================== */ header { width: 96%; max-width: 960px; margin: 0 auto 10px; display:block; } nav { background: #ccc; width: 100%; max-width: 960px; margin: 0 auto 50px; display:block;} #content { width: 96%; max-width: 960px; margin: 0 auto 10px; display:block;} #responsive-menu { width: 100%; max-width: 960px; margin: 0 auto; display:block; display: none;} footer { width: 100%; max-width: 960px; margin: 0 auto; display:block; clear: both; } /* Header Styles ================================================== */ header h1 { width: 50%; float:left; display: block; width: 50%; height: 90px; margin-bottom: 20px;} header h1 a { background: url('../images/fws-logo-415x83.png') no-repeat; display:block; width: 420px; height: 85px; text-indent: -9999px; } header a#header-asjadotorg-link { width: auto; float: right; display: block; margin: 15px 0 0 0; } header a#header-asjadotorg-link span.header-asjadotorg-link-text { font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; font-size: 1.75rem; float: left; text-align: right; margin-right: 10px; max-width: 150px;} header a#header-asjadotorg-link span.header-asjadotorg-link-icon { float: right; height: 40px; font-size: 2.25rem; padding-top: 12px; } nav { clear: both; } /* Home Page Styles ================================================== */ #main-headline { position: relative; } .content-index h2 { background: #63151E url('../images/bg-home-fws-basic-transparent2.gif'); padding: 10px 175px 10px 20px; border-radius: 20px; color: white; text-align: center; font-size: 2.5rem; line-height: 3.5rem; margin:20px 0 40px;} .content-index span.tablet-image { float: right; width: 130px; height: 130px; position: absolute; top: -15px; right: 35px; text-indent: -9999px; background: url('../images/home-tablet.png') no-repeat; } .content-index h3 { color: #404552; text-align: center; font-size: 2rem; line-height: 2.75rem; margin: 0 0 35px; } #home-fws-main-options { position: relative; z-index: 0; } #home-fws-options-fws-basic-container { background: #D86A75 url('../images/bg-home-fws-basic-container-transparent2.gif'); width: 46%; padding: 10px; float: left; border-radius: 20px; position: relative; z-index: 0; margin-bottom: 40px; } #home-fws-options-fws-premium-container { background: #F5B46C url('../images/bg-home-fws-premium-container-transparent.png'); width: 46%; padding: 10px; float: right; border-radius: 20px; position: relative; z-index: 0; margin-bottom: 40px; } #home-fws-options-fws-basic { background: #63151E url('../images/bg-home-fws-basic-transparent2.gif'); border-radius: 20px; padding: 15px; position: relative; z-index: 1; color: white; text-align: left;} #home-fws-options-fws-premium { background: #F0932c url('../images/bg-home-fws-premium-transparent.png'); border-radius: 20px; padding: 15px; position: relative; z-index: 1; color: white; text-align: left; } #home-fws-options-fws-basic p, #home-fws-options-fws-premium p { font-size: 1.7rem; line-height:2.75rem; margin-bottom: 0;} #home-fws-options-fws-basic p { padding: 0 30px 0 0; max-width: 300px; } #home-fws-options-fws-premium p { padding: 0 0 0 110px; } #home-fws-options-fws-basic a, #home-fws-options-fws-premium a { color: white; text-transform: uppercase; font-weight: bold; } #home-fws-options-fws-basic h4 a { /* background: url('../images/home-fws-basic-icon.png') no-repeat left center; */ height: 45px; padding: 15px 0 0 0px; } #home-fws-options-fws-premium h4 a { /* background: url('../images/home-fws-premium-icon.png') no-repeat left center; */ height: 45px; padding: 15px 0 0 110px; } #home-fws-options-fws-basic h4 a, #home-fws-options-fws-premium h4 a { color: white; font-size: 4rem; margin:0 0 10px 0; display: block; } #home-fws-options-fws-basic .fws-options-button, #home-fws-options-fws-premium a.fws-options-button { padding: 5px 10px; margin: 8px 0 0 0; display:inline-block; font-family: "Open Sans Condensed", sans-serif; text-shadow: 1px 1px 2px #222; border-radius: 10px; box-shadow: 3px 3px 5px #222; } #home-fws-options-fws-basic a.fws-options-button { background: #F0932C; } #home-fws-options-fws-basic a.fws-options-button:hover { color:#F0932C; text-shadow: none; background: #FFF; } #home-fws-options-fws-premium a.fws-options-button { background: #63151E; } #home-fws-options-fws-premium a.fws-options-button:hover { color: #63151E; text-shadow: none; background: #FFF; } #home-fws-options-center-graphic span.writers-image { background: url('../images/home-fws-options-writers.png') no-repeat center; display: block; position: absolute; z-index: 10; float: none; left: 37%; min-width: 250px; height: 250px; } .home h5 { text-align:center; color: #333333; margin: 30px 0 40px; font-size: 2rem; line-height: 3.15rem; overflow: visible; } /* different styling options for types of work list... .home #types-of-work { background: #ccc; overflow: auto; padding: 10px; border-radius: 20px; } .home #types-of-work p { font-family: 'Open Sans Condensed', sans-serif; font-size: 2rem; text-align: center; margin: 10px 0 30px; } .home #types-of-work ul { width: 100%; list-style: none; text-align: center; } .home #types-of-work ul li:before { list-style-type: none; font-family: 'FontAwesome'; content: '\f061'; margin:0 5px 0 0px; color: #63151E; } .home #types-of-work ul li { display: inline-block; float: left; margin: 0 20px 20px; font-family: 'Open Sans Condensed', sans-serif; font-size: 1.75rem; } .home #types-of-work2 { background: #ccc; overflow: auto; padding: 10px; border-radius: 20px; } .home #types-of-work2 p { font-family: 'Open Sans Condensed', sans-serif; font-size: 2rem; text-align: center; margin: 10px 0 30px; } .home #types-of-work2 .table { display: table; /* Allow the centering to work */ /* margin: 0 auto; } .home #types-of-work2 ul#horizontal-list { width: 100%; list-style: none; padding-top: 20px; } .home #types-of-work2 ul#horizontal-list li { display: inline; margin: 0 20px 20px; padding: 0 10px; font-family: 'Open Sans Condensed', sans-serif; font-size: 1.75rem; } .home #types-of-work2 ul#horizontal-list li:before { list-style-type: none; font-family: 'FontAwesome'; content: '\f061'; margin:0 5px 0 0px; color: #63151E; } */ .home #types-of-work { background: #ccc url('../images/bg-gray.png'); overflow: auto; padding: 10px; border-radius: 20px; } .home #types-of-work p { font-family: 'Open Sans Condensed', sans-serif; font-size: 2rem; text-align: center; margin: 10px 0 30px; } /* more different styling options for types of work list... .home #types-of-work ul { list-style:none; width: 22.5%; float: left; padding: 0 2.333% 0 0;} .home #types-of-work ul li { width: 100%; padding: 0 1% 10px; font-family: 'Open Sans Condensed', sans-serif; font-size: 1.85rem; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit * / -moz-box-sizing: border-box; /* Firefox, other Gecko * / box-sizing: border-box; /* Opera/IE 8+ * / } .home #types-of-work ul li:before { list-style-type: none; font-family: 'FontAwesome'; content: '\f061'; margin:0 5px 0 0px; color: #63151E; } */ .home #types-of-work ul { text-align: center; margin-bottom: 0; } .home #types-of-work ul li { display: inline-block; margin: 0 -1px 20px -2px; padding: 0 30px 10px; font-family: 'Open Sans Condensed', sans-serif; font-size: 1.75rem; border-bottom: 1px solid #bbb; } .home #types-of-work ul li:before { list-style-type: none; font-family: 'FontAwesome'; content: '\f05d'; margin:0 5px 0 0px; color: #63151E; } /* Form Styles ================================================== */ form { } form p { width: 100%; max-width: 960px; background: #ddd url('../images/bg-gray.png'); padding:10px 0 5px 10px; margin: 0 0 10px; border-radius: 15px; overflow: auto; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */} form p span.form-label { float: left; width: 50%; padding: 0; margin: 0; } form p input[type=text], form p input[type=password], form p input[type=email], form p text-area, form p select { padding: 5px; margin: 0 0 8px; width: 48%; height: 25px; font-size: 2.25rem; font-family: 'Open Sans', sans-serif; border-radius: 10px; box-shadow: 1px 1px 5px #999 inset;} form p select { min-height: 40px; } form p input[type=text].phone-number-part.area-code { width: 10%; float: left; } form p span.phone-number-slash { float: left; margin: 0 0 0 6px; } form p input[type=text].phone-number-part.prefix { width: 10%; float: left; margin-left: 10px; } form p span.phone-number-dash { float: left; margin: 0 4px 0 4px; } form p input[type=text].phone-number-part.phone-number { width: 20%; margin-left: 10px; } form p textarea { width: 48%; border-radius: 10px; box-shadow: 1px 1px 5px #999 inset; } /* form p.long-form-label span.form-label { width: 50%; } */ form p input[type=radio] { margin-bottom: 25px; } form select.job-expire-year { width: 10%; margin: 0 10px 0 0; float:left; } form select.job-expire-month { width: 20%; margin: 0 10px 0 0; float:left; } form select.job-expire-day { width: 10%; } p.responsive-job-listings-table-notice { display:none; } table.job-listings-table { width: 100%; text-align: left; font-size: 1.5rem; margin: 20px 0 50px 0; } table.job-listings-table th { font-weight: bold; border-bottom: 1px solid #ccc; padding-bottom: 10px; width: 20%; } table.job-listings-table td { padding: 5px 0 10px; width: 20%; } /* #Page Styles ================================================== */ section article header { background: none; margin: 0 0 10px 0; } header h2 { border-bottom: 1px solid #ccc; margin: 0 0 15px 0; padding: 0 0 10px 0; } .hiring-a-writer-faq_content h3 { font-size: 2.25rem; margin: 35px 0 5px 0; padding: 0 0 5px 0; border-bottom: 1px dotted #ccc; } .hiring-a-writer-faq_content h3:before { font-family: 'FontAwesome'; content: '\f059'; margin:0 10px 0 0px; color: #63151E; } .setting-fees_content h3 { font-size: 2.25rem; margin: 35px 0 5px 0; padding: 0 0 5px 0; border-bottom: 1px dotted #ccc; } .setting-fees_content h3:before { font-family: 'FontAwesome'; content: '\f059'; margin:0 10px 0 0px; color: #63151E; } #sample-job-listing-details { border: 1px solid #ccc; padding: 20px; } #sample-job-listing-details p { margin: 0 0 10px 0; padding: 0 0 5px 0; border-bottom: 1px solid #eee; } #sample-job-listing-details p:last-child { border-bottom: 0px; } #sample-job-listing-details h3 { margin-top: 20px; } /* #Footer Styles ================================================== */ footer { text-align: center; font-size: 1.25rem; margin: 30px 0 15px; width: 96%; max-width: 960px; } /* #Media Queries ================================================== */ @media only screen and (max-width:55em) { /* .container { background: red; } */ .container { margin: 0; border-radius: 0; } .content-index h2 { margin: 20px 0px; } .content-index h3 { margin: 0 0 25px; } #home-fws-options-fws-basic p { max-width: 230px; font-size: 1.75rem; line-height: 2.5rem; } #home-fws-options-fws-premium p { padding: 0 0 0 110px; max-width:240px; font-size: 1.75rem; line-height: 2.5rem;} #home-fws-options-fws-basic h4 a { font-size: 3.5rem; } #home-fws-options-fws-premium h4 a { padding: 15px 0 0 110px; font-size: 3.5rem; } #home-fws-options-center-graphic span.writers-image { background: url('../images/home-fws-options-writers.png') no-repeat center; left: 35%; max-height: 250px; min-width: 250px; } form p span.form-label { float: left; width: 100%; padding: 0; margin: 0; } form p input[type=text], form p input[type=password], form p input[type=email], form p text-area, form p select { width: 96%;} form p textarea { width: 96%; } form select.job-expire-month { width: 20%; } form select.job-expire-year { width: 15%; } } @media only screen and (max-width:48em) { /* .container { background: orange; } */ #home-fws-options-fws-basic-container { width: 96%; float: none; margin: 0 auto 30px; } #home-fws-options-fws-basic p { max-width:370px; padding: 0; } #home-fws-options-fws-premium-container { width: 96%; float: none; margin: 0 auto; } #home-fws-options-fws-premium p { padding: 0; max-width:370px; } #home-fws-options-fws-premium h4 a { padding: 0; } #home-fws-options-center-graphic span.writers-image { background: url('../images/home-fws-options-writers.png') center no-repeat; top: 100px; left: 60%; min-width: 250px; height: 250px; } form select.job-expire-year { width: 15%; } form select.job-expire-month { width: 25%; } form select.job-expire-day { width: 10%; } p.responsive-job-listings-table-notice { display: inherit; } table.job-listings-table { display:none; } } /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 40em) { /* .container { background: green; } */ header h1 { width: 100%; margin-bottom: 0px;} header h1 a { background: url('../images/fws-logo.svg') no-repeat center; display:block; width: 100%; text-indent: -9999px; } header a#header-asjadotorg-link { width: 100%; } header a#header-asjadotorg-link span.header-asjadotorg-link-text { min-width: 93%; text-align: right; } header a#header-asjadotorg-link span.header-asjadotorg-link-icon { padding-top: 0px; width: 4%; } .content-index h2 { padding: 10px 20px 10px 20px; margin: 20px 0 } .content-index span.tablet-image { display:none; } #home-fws-options-fws-basic-container { width: 70%; float: none; margin: 0 0 20px; } #home-fws-options-fws-premium-container { width: 70%; float: none; margin: 0 0 20px;} #home-fws-options-center-graphic span.writers-image { background: url('../images/home-fws-options-writers-med.png') center no-repeat; width: 175px; height: 175px; min-width: 175px !important; top: 130px; left: 65%; } form p input[type=text], form p input[type=password], form p input[type=email], form p text-area, form p select { width: 95%;} form p input[type=text].phone-number-part.area-code { width: 15%; } form p input[type=text].phone-number-part.prefix { width: 15%; } form p input[type=text].phone-number-part.phone-number { width: 25%; } form select.job-expire-year { width: 25%; } form select.job-expire-month { width: 35%; } form select.job-expire-day { width: 15%; } } @media only screen and (max-width: 29em) { /* .container { background: purple; } */ a.button { font-size: 1.5rem; } input[type=submit], input[type=reset] { font-size: 2rem; } header h1 { width: 100%; float:left; display: block; margin: 0px;} header h1 a { background: url('../images/fws-logo-small.png') no-repeat center; width: 100%; margin: 0; } header a#header-asjadotorg-link { width: 100%; margin: 10px 0 0;} header a#header-asjadotorg-link span.header-asjadotorg-link-text { min-width: 90%; text-align: right; } header a#header-asjadotorg-link span.header-asjadotorg-link-icon { padding-top: 0px; width: 6.5%; } #home-fws-options-fws-basic-container { width: 92%; } #home-fws-options-fws-premium-container { width: 92%;} #home-fws-options-fws-basic-container { width: 94%; float: none; margin: 0 auto 20px; } #home-fws-options-fws-premium-container { width: 94%; float: none; margin: 0 auto 20px;} #home-fws-options-center-graphic span.writers-image { display: none; } #home-fws-options-fws-basic h4 a, #home-fws-options-fws-premium h4 a { font-size: 3.1rem; margin:0; } form p input[type=text], form p input[type=password], form p input[type=email], form p text-area, form p select { width: 90%;} form p textarea { width: 92%; } form select.job-expire-year { width: 27%; } form select.job-expire-month { width: 45%; } form select.job-expire-day { width: 18%; } } @media only screen and (max-width: 15em) { /* .container { background: gray; } */ } /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) {} /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) {} /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {}