Using franklin gothic bold

Hi,
Franklin Gothic bold is not an option in my InDesign CC
If I use Franklin Gothic for my book I'll need Bold.
What is the answer?
Thanks,
Michael

It's perfectly OK to mix complementary fonts on the same page. Traditionally, it's more common to use a serif for text and a sans (like Franklin) for headings, but the opposite isn't in any way forbidden, as long as you do it with some thought.
You might find some inspiration here:
Search Results for “franklin” - Fonts In Use

Similar Messages

Typekit - i want to use Franklin Gothic in Muse

i have a paid kit with Fonts like Franklin Gothic at typekit, just linked to the adobe id.
i thought to use my kit in Muse, specially the fraklin gothic font.
But i dont find the font. The library is still the unpaid one.
Still not possible?

Hello,
Currently, you can only use and preview the free and open-source Typekit fonts in Muse.
You can still use Franklin Gothic on your website, though; the font just won't show up in the font menu or in the Muse preview. The Muse Insider wrote a post on how to insert the Typekit embed code from the Muse interface:
http://museinsider.com/how-to-add-typekit-fonts-to-your-muse-site.html
Or you can add the Typekit embed code to the Page Properties dialog within Muse, which will include it in the <head> of the page when you export your website. The embed code help page shows how to find the embed code in your Kit Editor. The fonts will be displayed when you view your site on the live server or on a localhost website.
I hope that this helps; let me know if you have any other questions. Best,
-- liz

Firefox drops letters when using Franklin Gothic webfont, but not Safari

I have bought the web version of Franklin Gothic Book, Medium and Demi from MyFont - and started to use these in my new site in development.
We have hit a few problems which has caused me to have to reconsider the whole issue - unless help us at hand:
Problem 1 - Firefox drops several letters/characters and so is no use to me at all as it is.
The problem doesn't happen in Safari.
Problem 2 - Font looks poor at about 20px size - in any browser on Windows XP - see attached 3
I would really like to have the fonts on my new site - and wasn't anticipating any problems bearing in mind the publicity fonts on sites has been getting over the last 12 months. However, I may need to ask for my money back unless we can get this version of Franklin Gothic Book, Medium and Demi to work.
Screenshots and urls available on request

It's a problem with the font.
The font has the ligature characters removed, but the ligature tables are still there. MyFonts says you should be able to regenerate the font with the full character set:
''You should be able to log in to your account, Access your 'Order History', select the appropriate purchase, then select 'Webfont Kit Builder', just to the right of 'Easy', and 'Desktop Font Downloads'. If you click on the Font sample (the quick brown fox), you will see advanced character options. Please choose Keep Open Type Layout (complete character set will be automatically selected) and download the kit. ***(If this option is available for your font you will want to select the font under 'Available Webfonts' on the 'Webfont Kit Builder' page, then, under 'Selected Webfonts -> OpenType Layout', check the 'Keep All OpenType Layout.' option.)***''
If the problem persists, or if you can't regenerate the webfont, and you only need to support Firefox 4+, you can work around the problem by adding -moz-font-feature-settings: "calt=0,liga=0"; to your @font-face.
If you also need to support Firefox 3.6, you can use text-rendering:optimizeSpeed; as an alternative workaround.
Thanks to Ted Mielczarek and Jonathan Kew for their troubleshooting help.

Franklin Gothic URW won't sync

I have been using the font Franklin Gothic URW through Typekit on a project. However, now the font won't sync to my computer, but all my other Typekit fonts do. There is a perpetual loading cycle next to the font in my creative cloud manager. I really need this font to finish a project due this week! Please help!

Hi Madison,
I'm sorry that you ran into trouble with this. I've confirmed that the new font selections are added to your Typekit account correctly.
If you haven't done so already, would you please try turning off font sync in the Creative Cloud application, wait a moment, and then turn it back on? The option to do this is under the gear icon:
Sometimes the app just needs a fresh session for the fonts to appear again.
If that doesn't help, please send your sync logs from today and yesterday to [email protected] I'll include the information on how to do that at the end of this post.
We will take a look at the log files, and see if anything is blocking the fonts from syncing to your computer. Thank you,
-- liz
On OS X:
* Open the Finder
* under the Go menu, select "Go To Folder"
* in the window that opens, type: /Users/(username)/Library/Application Support/Adobe/CoreSync/
Or if you are comfortable working from the Terminal:
cd $HOME/Library/Application Support/Adobe/CoreSync/
On Windows:
C:\Users\(username)\AppData\Roaming\Adobe\CoreSync\
Attach the recent CoreSync-yyyy-MM-dd.log files to an email. Please don't send a zip file, as they often get flagged as spam.

Franklin Gothic Demi not installing in FontBook

Hello all,
I am using Mac OX 10.4.11, Processor: Dual 2GHz, Power PC G5. InDesign CS3 5.0.2
My problem is, that I am trying to make small changes, to what I believe is a InDesign CS2 file. I have all the art and fonts in a packaged folder. The font in the folder is Franklin Gothic. All the fonts load into Font book with the exception of Franklin Gothic Demi Condensed. I noticed there is a font file with the extension .scr. I believe it is a Screen font. I am still waiting to here the the person that gave me the file as to what software and hardware he is using.
Another strange occurrence in the file is that some of the type has been turned into text boxes.
Any suggestions would be appreciated.
Tom

You wont be able to much with a screen font (or font book for that matter).
You might try Linotype Font Explorer, which is free and comes highly recommended by me and many others on this forum. I'm a smart guy, but found font book infuriating: is the font open or closed? why do some fonts which load fine in the fonts folder not load through font book? are they damaged? how exactly do you close a font?
Font managers' should be simple business, in my mind. Fonts themselves, on the other hand...
It does sound like you don't have the printer font, and only the screen version - .scr (which is useless to you). If you're in contact with the artist, you should be in luck. Ask him to package the job again (checking before to make sure all fonts are loaded), and then just send you a ZIP archive of the "fonts" folder from that package.
J

Font copperplate gothic bold is not shown correctly in my webssite

index page font= copperplate gothic bold is not shown in firefox.
In IE it functions okay

Doesn't look like I have a ttf available, hmm...
~ fc-list | grep -i 'DejaVu Sans Mono'
/usr/share/fonts/t1-dejavu-ib/DejaVuSansMono-Bold.pfb: DejaVu Sans Mono:style=Bold
/usr/share/fonts/t1-dejavu-ib/DejaVuSansMono-Oblique.pfb: DejaVu Sans Mono:style=Oblique
/usr/share/fonts/t1-dejavu-ib/DejaVuSansMono-BoldOblique.pfb: DejaVu Sans Mono:style=Bold Oblique
/usr/share/fonts/t1-dejavu-ib/DejaVuSansMono.pfb: DejaVu Sans Mono:style=Regular

Using GREP to bold Date and Event Name

Hi
I am stumped at how to properly apply a bold style to a combination of dates and event names using GREP. I am including three examples below. I do have Paragraph and Characters styles set up. The area I would like to effect the change is in all caps. I am trying to add a bold style only to the dates and the title of the event with out changing the rest of the information.
I started of with this GREP Style:
\d{1,2}\/\d{1,2}|\d\-?\s|\u
It is bolding the dates and the name of the event. But it's not bolding the small dash between events that have a beginning and end dates or the en dash. It is randomly bolding other numbers and capital letters that it should not. Very frustrating. Each time I alter the GREP Style above, it makes it worse. This is as close as I got to the desired effect. Any ideas how to fix this?
12/6-8 — HEALING WEEKEND AT TRUE NORTH HOLISTIC CENTER. Friday 11am-5pm. Private Integrated Healing sessions, Friday 6:30pm-Sunday noon. “Blue Christmas” Retreat: Coping with Sadness at the Holidays; Sunday 3-7pm. Public Integrated Reiki™ clinic. Hubbardston, MA www.truenorthholisticcenter.org. (978) 820-1139.
12/6-12/8 — READ AND PLAY MUSIC IN A WEEKEND! World famous seminars turns beginners into musicians, revitalizes and inspires even pro musicians. 169 Mass Ave, Boston. (781) 599-1476 or http://signup.understandingofmusic.com or [email protected]
12/7 — REIKI CERTIFICATION. Wilton, NH. Libby Barnett, MSW. 32 years experience. Reiki Energy Medicine author. Notebook, pin, certificate awarded. Credit cards accepted. CEU’s/contact hours. Call (603) 654-2787 or www.reikienergy.com. Reiki II: 12/8

Thanks! That works. I am using a paragraph style for the body and have a bold character style for the information that needs to be bolded. I notice there are some listings that uses a colon and the bolding continued into the description where the first period appears (see samples below). I added a colon (to the shorter GREP style you suggested) in addition to the perod and excalamation point to search for.. Now the bolding stops at the colon but does not include up to the word "CARRY" (see first example). The second example, the bolding should stop after "FAIRE" but cotinues to the word Wisdom because of the period.
I wish there was a option in the GREP drop menu to search for All Caps only and not Any Uppercase Letter. Is it a case were I need to manually edit those instances so it conforms to the norm? Or is there away to modify the GREP expression ^.+?[.!] to also include other instance like the example below?
I alread try to add an additional rule using the Postive Look Ahead and nothing. And using the Any Uppercase Letter option, either forces the text back to the begining looking unstylized or it forces any capital letters to be bolded.
12/8-12/13 — WESTERN REIKI MASTERS: BE ATTUNED TO CARRY Japan’s Gendai Reiki lineage: Usui Mikao-Kan’Ichi Taketomi-Kimiko Koyama-Hiroshi Doi-Audrey Pearson. Learn to teach all 4 levels of Japan’s Gendai Reiki Ho. www.yogapathways.com. (508) 740-9870 or Facebook: ‘Gendai Reiki America’
11/23 — PSYCHIC AND HOLISTIC FAIRE at Women of Wisdom. North Easton, MA. Psychics, angel readings, mediums, crystal healings, Gaiadon Heart, chair massage, Reiki and more! Sign yourself up for a few appointments and bring your friends! www.womenofwisdominc.com (508) 230-3680.

Which Sync Device is used by BlackBerry Bold 9700 ?

pls advice @ work we have Novell GroupWise Mobile Server, I am linking my work GroupWise to Mobile Server & have 4 options to choose from 1. Pocket PC Handheld (Pocket PC 2003 or 2002 devices) 2. Palm OS - Based Handheld (Palm OS - Based Devices running OS 3.5 or higher) 3. Symbian OS - Based Mobile Phone (Symbian OS devices) 4. Smartphone OS - Based Mobile Phone (Microsoft Smartphone OS devices

Hello,
You don't...DTM is not a replacement for your PC-based PIM. Rather, it is a conduit for synchronizing data between your BB and your PC-based PIM. See this KB:
KB17022 How to configure organizer applications for synchronization using BlackBerry Desktop Manager
Good luck!
Occam's Razor nearly always applies when troubleshooting technology issues!
If anyone has been helpful to you, please show your appreciation by clicking the button inside of their post. Please click here and read, along with the threads to which it links, for helpful information to guide you as you proceed. I always recommend that you treat your BlackBerry like any other computing device, including using a regular backup schedule...click here for an article with instructions.
Join our BBM Channels
BSCF General Channel
PIN: C0001B7B4 Display/Scan Bar Code
Knowledge Base Updates
PIN: C0005A9AA Display/Scan Bar Code

Added Styles to BC Module Stylesheet, Firebugg shows correct style but not affecting on display?

I have set up a style on the BC module style sheet (on bottom of sheet) for my blog, the issue is specifically for the blog body text. Trying to get the text to display in white. When I update the style sheet and view the site in firefox and then inspect the body of the blog, the style I made is showing correctly IN firebug but the text is still black. It is not changing color. Here's my style code:
.post-body {
    color: #fff;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    font-size: 16px;
    line-height: 1.2;
    word-wrap: break-word;
    text-rendering: optimizelegibility;
All my other styles for heading, details, sidebar, etc are working as intended. Just can't get the body font color and size to change. Another wierd thing, when I change the font size px for the style it changes the line spacing NOT the font size. Any one have a clue what is going on here? Here's the custom styles I have added to the module style sheet:
/* My BC Template*/
.blog-container h1{
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
    font-size: x-large;
    color: #F9D100;
.post-title H2{
    font-family: Arial Black, sans-serif;
    font-size: medium;
    color: #F9D100;
.side-panel H4{
    font-family: Arial Black, sans-serif;
    font-size: medium;
    color: #F9D100;
.post-body {
    color: #fff;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    font-size: 16px;
    line-height: 1.2;
    word-wrap: break-word;
    text-rendering: optimizelegibility;

This answer from Support cured the problem...
Gaurav Sharma (Adobe Business Catalyst Support)
Feb 20 04:12 (EET)
Thank you for contacting us!
I just see your online shop purchase form, which contains update credit card fields,
http://screencastmb.worldsecuresystems.com/img/2013-02-20_1309.png
As per the field description, it's used fo rupdating CC details, not for purchases.
Remove that system field and reinsert the form, and it should then work
Kind Regards

Spacing menu links [subject edited by moderator]

Starting from the basic initial setup, I am trying to move the sample Links so that they are underneath the title and side by side. Now they are almost all side by side, but the extra Links I added are dangling below the initial four Links. How do I space it properly? [content edited by moderator]
Here's what I'm looking at. I'm trying to get them all side-by-side, and would also like to get it below "Guitar Site".

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #B4B3AF;
margin: 0;
padding: 0;
color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
background-color: #A2A0A0;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #6E6C64;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ This fixed width container surrounds all other blocks ~~ */
.container {
width: 960px;
background-color: #A79E9F;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #0A5BD8;
/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
header {
background-color: #ADB96E;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the block elements. The elements within these blocks have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the block itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the block element and place a second block element within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a block set to float right). Many times, padding can be used instead. For blocks where this rule must be broken, you should add a "display:inline" declaration to the block element's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar blocks could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the blocks around in the HTML source.
.sidebar1 {
float: right;
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
.content {
padding: 10px 0;
width: 780px;
float: right;
color: #000000;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
nav ul{
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
nav a, nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background-color: #C6D580;
nav a:hover, nav a:active, nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background-color: #ADB96E;
color: #FFF;
/* ~~ The footer ~~ */
footer {
padding: 10px 0;
background-color: #CCC49F;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, article, figure {
display: block;
h1,h2,h3,h4,h5,h6 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
h1 {
font-size: 36mm;
color: #FB1C20;
</style></head>
<body class="container">
<div class="container">
<h3>
    <header>
      <a href="#"><img src="../../Misc/PlayingGuitar.jpg" alt="Insert Logo Here" width="946" height="359" id="Insert_logo" style="background-color: #C6D580; display:block;" /></a>
    </header>
</h3>
<div class="body">
    <nav>
    <ul class="content">
      <li><span class="sidebar1"><a href="#">Lessons</a></span></li>
      <li><span class="sidebar1"><a href="#">Tips on Buying</a></span></li>
      <li><span class="sidebar1"><a href="#">Reviews</a></span></li>
      <li><span class="sidebar1"><a href="#">Community</a></span></li>
      <li><span class="sidebar1"><a href="#">About</a></span></li>
    </ul>
    </nav>

<span style="text-align: center"></span></div>
<article class="content">
    <h1>Guitar Core</h1>
    <section>
     <h2>Headline 1</h2>
      <p> </p>
    </section>
    <section>
      <h2>Clearing Method</h2>
      <p> </p>
      <p>Because all the columns are floated, this layout uses a clear:both declaration in the footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect. </p>
    </section>
    <section>
      <h2>Logo Replacement</h2>
      <p>An image placeholder was used in this layout in the header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
      <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
      <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
    </section>
    <section>
      <h2>Backgrounds</h2>
      <p>By nature, the background color on any block element will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content block will always contain more content, you can place a border on the .content block to divide it from the column.</p>
    </section>
    </article>
<footer>
    <p>This footer contains the declaration position:relative; to give Internet Explorer 6 hasLayout for the footer and cause it to clear correctly. If you're not required to support IE6, you may remove it.</p>
    <address>
      Address Content
    </address>
</footer>
</div>
</body>
</html>

How to get rid of a CSS style instance that is effecting the wrong page

I am new to CSS and I am working in Dreamweaver CC. I am mostly designing in the large screen view and then making my changes to the tablet and phone later.
I have the large screen design finished, and now am making changes to the tablet size. I am working on the footer (for example) and when I change the margins and sizes of the elements in the footer, it is changing the large screen version as well. It is almost like the CSS instance for the footer is overriding my Global CSS for the footer on the large screen version.
This is so confusing to me, I thought I could make changes in the tablet version and it wouldn't effect the other screens.
What do I do to get the tablet CSS to stop effecting my large screen?
thank you

@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 9;
dw-num-cols-desktop: 13;
dw-gutter-percentage: 20;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
.fluid {
clear: both;
width: 100%;
float: left;
display: block;
.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
#top {
.tagline {
width: 100%;
clear: both;
margin-left: 0;
/* [disabled]margin-top: 50px; */
/* [disabled]top: 50px; */
position: static;
display: block;
float: left;
text-align: left;
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
font-style: italic;
#mainNav {
background-color: #30434D;
width: 100%;
background-repeat: repeat-x;
float: none;
clear: both;
height: 35px;
#navMenu {
clear: none;
margin-left: 0;
position: static;
#menuChoices {
clear: both;
margin-left: 0;
width: 100%;
position: static;
height: auto;
#menuChoices a:hover{
background-color: #3192D8;
display: block;
#menuChoices a:link{
color: #FFFFFF;
text-decoration: none;
.menuItem {
color: #FFFFFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: small;
font-weight: lighter;
padding-top: 0px;
padding-bottom: 0px;
width: 100%;
clear: both;
margin-left: 0;
background-size: auto 35px;
display: block;
#div2 {
display: block;
#SubHead {
clear: none;
float: left;
position: static;
height: auto;
width: 100%;
#mainSubHead {
text-align: center;
width: 100%;
clear: none;
margin-left: 0;
position: static;
height: auto;
#div3 {
width: 100%;
#promoBlocks {
#div4 {
clear: both;
margin-left: 0;
width: 100%;
#PromoBlocks {
display: block;
text-align: center;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
padding-bottom: 50px;
position: static;
height: auto;
width: 100%;
.PromoItem {
width: 100%;
clear: both;
margin-left: 0;
.PromoButtons {
color: #FFFFFF;
font-size: small;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
display: block;
height: 30px;
background-color: #3192D8;
line-height: 30px;
clear: both;
margin-left: 0;
width: 100%;
#mainContent {
background-color: #30434D;
color: #FFFFFF;
width: 100%;
clear: both;
float: left;
position: static;
height: auto;
margin-left: 0;
background-repeat: repeat;
background-image: url(../grayTexture2.png);
.content {
.contentStyle {
padding-left: 30px;
width: 85%;
padding-right: 20px;
margin-left: 0;
#mainAside {
width: 350px;
float: left;
clear: right;
position: static;
height: auto;
margin-left: 0;
padding-left: 25px;
#mainFooter {
float: left;
clear: both;
background-color: #3192D8;
width: 100%;
display: block;
#footerLogo {
width: 250px;
padding-top: 15px;
padding-left: 30px;
#footerInfo {
width: 500px;
float: left;
clear: right;
color: #FFFFFF;
font-style: normal;
font-weight: 200;
font-family: source-sans-pro;
margin-top: 70px;
margin-left: 0px;
#asideBrochure {
width: 100%;
margin-left: 0;
clear: both;
#asideVideo {
width: 100%;
margin-left: 0;
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 100%;
padding-left: 0%;
padding-right: 0%;
clear: none;
float: none;
margin-left: auto;
#top {
.tagline {
width: 100%;
clear: both;
margin-left: 0;
#mainNav {
background-color: #30434D;
background-repeat: repeat-x;
#navMenu {
clear: both;
margin-left: 0;
position: static;
#menuChoices {
margin-left: 0;
clear: both;
width: 100%;
position: static;
height: auto;
.menuItem {
width: 13%;
margin-left: 1.8867%;
text-align: center;
float: left;
clear: none;
height: 35px;
vertical-align: middle;
display: block;
#div2 {
#SubHead {
position: static;
height: auto;
width: 100%;
#mainSubHead {
clear: both;
margin-left: 0;
position: static;
height: auto;
width: 100%;
#div3 {
width: 100%;
#promoBlocks {
#div4 {
clear: both;
margin-left: 0;
width: 100%;
#PromoBlocks {
float: left;
display: block;
text-align: center;
position: static;
height: auto;
width: 100%;
margin-left: 0;
.PromoItem {
clear: both;
display: block;
text-align: center;
padding-left: 0px;
float: left;
margin-left: 25%;
width: 400px;
.PromoButtons {
display: block;
height: 30px;
background-color: #3192D8;
line-height: 30px;
clear: both;
margin-left: 0;
width: 100%;
#mainContent {
width: 100%;
clear: both;
margin-left: 0;
float: left;
position: static;
height: auto;
.content {
.contentStyle {
width: 88.6792%;
margin-left: 0;
#mainAside {
width: 100%;
margin-left: 0;
position: static;
height: auto;
#mainFooter {
#footerLogo {
#footerInfo {
margin-left: 25px;
#asideBrochure {
width: 32.0754%;
margin-left: 1.8867%;
clear: right;
float: left;
#asideVideo {
width: 43.3962%;
margin-left: 0;
.hide_tablet {
display: none;
.zeroMargin_tablet {
margin-left: 0;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
    width: 100%;
max-width: 1920px;
padding-left: 0;
padding-right: 0;
margin: auto;
clear: none;
float: none;
margin-left: auto;
#top {
.tagline {
width: 79.3103%;
margin-left: 1.2987%;
clear: none;
#mainNav {
background-color: #30434D;
background-repeat: repeat-x;
#navMenu {
margin-left: 1.2987%;
clear: none;
position: static;
#menuChoices {
display: block;
height: auto;
clear: both;
margin-left: 0;
width: 100%;
position: static;
.menuItem {
width: 14.2857%;
margin-left: 1.2987%;
clear: none;
height: 30px;
line-height: 35px;
text-align: center;
background-size: auto 35px;
display: block;
padding: 0px;
#top img {
text-align: left;
background-repeat: no-repeat;
float: left;
margin-left: 10px;
#div2 {
#SubHead {
position: static;
margin-left: auto;
height: auto;
/* [disabled]width: 1000px; */
top: 586px;
left: 0px;
#mainSubHead {
margin-left: 0;
clear: both;
position: static;
height: auto;
width: 100%;
#div3 {
width: 100%;
#promoBlocks {
#div4 {
margin-left: 1.2987%;
clear: none;
width: 29.8701%;
#PromoBlocks {
margin-left: 0;
position: static;
height: auto;
width: 100%;
.PromoItem {
width: 29.8701%;
margin-left: 1.2987%;
clear: none;
.PromoButtons {
display: block;
height: 30px;
background-color: #3192D8;
line-height: 30px;
width: 100%;
margin-left: 0;
#mainContent {
clear: both;
margin-left: 0;
position: static;
height: auto;
width: 100%;
.content {
.contentStyle {
width: 45%;
margin-left: 0;
#mainAside {
width: 37.6623%;
position: static;
height: auto;
margin-left: 0;
#mainFooter {
#footerLogo {
#footerInfo {
line-height: 30px;
display: block;
height: 30px;
float: none;
clear: none;
#asideBrochure {
width: 100%;
margin-left: 0;
clear: both;
#asideVideo {
width: 100%;
margin-left: 0;
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;
.mainSubHead {
color: #FFFFFF;
background-color: #F60;
display: block;
font-family: questrial;
font-size: 30px;
margin: auto;
height: 40px;
line-height: 40px;
font-style: normal;
font-weight: 400;
.mainSubHead {
color: #FFFFFF;
background-color: #F60;
display: block;
font-family: questrial;
font-size: 30px;
margin: auto;
height: 80px;
line-height: 40px;
font-style: normal;
font-weight: 400;
.PromoButtons a:link {
color: #FFFFFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-decoration: none;
.PromoButtons a:hover {
color: #FFFFFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
text-decoration: none;
background-color: #30434D;
display: block;
background-size: auto 30px;
Yes, I am using one CSS file for all three media queries... Is this wrong?

How do I set my background for a website banner in these colours?

Hi guys, I am a complete beginner when it comes to Photoshop and I have just downloaded Adobe Photoshop CC 2014.
If you please refer to the picture I have uploaded, I want my website banner to be these shades of green. I do not want the white writing in it. So how would I create a website banner with the background as these shades of green without the writing?
PS I did not choose pick these colours, it was mum who want's the website created

You're looking for a Gradient
Photoshop Help | Gradients
Honestly, I would use a CSS Gradient instead of an actual image. Why? Because a CSS Gradient is Responsive (scalable) in % width layouts. And the code takes up very little bandwidth which is kinder & gentler to mobile data plans.
Your HTML & CSS code would look something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Your Site Name</title>
<style>
header {
    margin: 0;
    padding: 0;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
    font-size: 32px;
    min-height: 150px;
    text-align: center;
    color: #FFF;
    text-shadow: 4px 3px 3px #666;
/**CSS Gradient**/
    background-color: #00a855;
    background: -moz-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #00a855), color- stop(100%, #bcd800));
    background: -webkit-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
    background: -o-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
    background: -ms-linear-gradient(-45deg, #00a855 0%, #bcd800 100%);
    background: linear-gradient(135deg, #00a855 0%, #bcd800 100%);
</style>
</head>
<body>
<header>
<h1>Your Awesome Headline</h1>
</header>
</body>
</html>
Nancy O.

Media Query not working...

My media query for screen size of a minimum of 480 px is not working. The Global CSS takes over. I can't find the reason why.
It seems the brackets are in place correctly. Can anyone see where the problem might be? All the other queries work.
thanks
____________________ sorry, it is a long CSS file
@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:        5;
    dw-num-cols-tablet:        9;
    dw-num-cols-desktop:    13;
    dw-gutter-percentage:    20;
    Inspiration from "Responsive Web Design" by Ethan Marcotte
    http://www.alistapart.com/articles/responsive-web-design
    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
.fluid {
    position: relative;
.fluidList {
    list-style: none;
    list-style-image: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    clear: none;
    float: none;
#top {
    float: left;
    text-align: left;
.tagline {
    width: 100%;
    clear: both;
    margin-left: 0;
    /* [disabled]margin-top: 50px; */
    /* [disabled]top: 50px; */
    position: static;
    display: block;
    float: left;
    text-align: left;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
    font-style: italic;
#mainNav {
    width: 100%;
    float: left;
    display: block;
    background-color: #30434D;
#navMenu {
    clear: none;
    margin-left: 0;
    position: static;
    background-color: #30434D;
    font-style: normal;
    font-weight: 400;
    font-family: questrial;
    font-size: 18px;
#menuChoices {
.menuItem {
    color: #FFFFFF;
    font-family: questrial;
    font-size: 24px;
    font-weight: 400;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 100%;
    clear: both;
    margin-left: 0;
    display: block;
    font-style: normal;
    height: 40px;
    line-height: 40px;
    float: left;
#SEHCMbutton a:link {
    background-color: #FC6719;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
#SEHCMbutton {
    float: left;
    background-color: #FC6719;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 30px;
    display: block;
    width: 95%;
#SEHCMbutton a:visited {
    background-color: #FC6719;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
#SCVHpdfList {
    float: none;
.fluid.SCVHsubMenuItems a:link {
    color: #303E48;
    background-color: #CED1D3;
    display: block;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
.fluid.SCVHsubMenuItems a:hover {
    color: #FFFFFF;
    background-color: #303E48;
    display: block;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
#div2 {
    display: block;
    clear: both;
    position: relative;
    float: left;
    width: 100%;
    background-color: #FC6719;
#SubHead {
    clear: both;
    float: left;
    position: relative;
    width: 100%;
    background-repeat: repeat-x;
    background-color: #FC6719;
    text-align: center;
#mainSubHead {
    text-align: center;
    width: 100%;
    clear: none;
    margin-left: 0;
    position: static;
    color: #FFFFFF;
    font-style: normal;
    font-weight: 400;
    font-family: questrial;
    font-size: 25px;
#div3 {
width: 100%;
#div4 {
clear: both;
margin-left: 0;
width: 100%;
#mainContent {
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    font-size: 15px;
    text-align: left;
    width: 65%;
    float: left;
    clear: both;
    padding-left: 25px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-bottom: 25px;
    margin-top: 0px;
    padding-top: 25px;
.content {
.contentStyle {
    padding-left: 30px;
    width: 85%;
    padding-right: 20px;
    margin-left: 0;
#mainAside {
    clear: none;
    position: static;
    height: auto;
    margin-left: auto;
    float: none;
    margin-right: auto;
#mainFooter {
    float: left;
    clear: both;
    background-color: #06A7E2;
    display: block;
    position: relative;
    width: 100%;
#footerLogo {
    padding-top: 15px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
#footerInfo {
    float: none;
    clear: none;
    color: #FFFFFF;
    font-style: normal;
    font-weight: 200;
    font-family: source-sans-pro;
    margin-left: auto;
    margin-right: auto;
    padding-top: 15px;
    text-align: center;
    font-size: 12px;
#asideBrochure {
    width: 100%;
    margin-left: 0;
    clear: both;
    text-align: center;
#asideVideo {
    width: 100%;
    margin-left: 0;
    text-align: center;
.lightLinks {
    color: #FFFFFF;
    font-style: normal;
    font-weight: 400;
    font-family: questrial;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
.lightLinks a:link{
    color: #FFFFFF;
    font-style: normal;
    font-weight: 400;
    font-family: questrial;
    font-size: 18px;
    text-decoration: none;
.lightLinks a:hover{
    color: #3192D8;
    font-style: normal;
    font-weight: 400;
    font-family: questrial;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
#thermalDiffLabel {
#thermDiffLabel {
    color: #30434D;
    font-style: normal;
    font-weight: 400;
    font-family: source-sans-pro;
    padding-top: 10px;
    padding-bottom: 0px;
    font-size: 16px;
#thermDiffPict {
#atuLabel {
    color: #30434D;
    font-style: normal;
    font-weight: 400;
    font-family: source-sans-pro;
    font-size: 16px;
    padding-top: 10px;
#atuPict {
#digitalLabel {
    color: #30434D;
    font-style: normal;
    font-weight: 400;
    font-family: source-sans-pro;
    font-size: 16px;
    padding-top: 10px;
#digitalPict {
#navChoices {
#navList {
    float: left;
    clear: both;
#PAnav {
    background-color: #30434D;
    width: 100%;
    display: block;
    clear: none;
#PAchoices {
#PAList {
    float: left;
    background-color: #30434D;
    color: #FFFFFF;
    font-style: normal;
    font-weight: 400;
    font-family: questrial;
    font-size: 18px;
    text-align: center;
    position: relative;
    width: 100%;
.PAmenuItem {
    display: block;
    height: 35px;
    line-height: 35px;
    letter-spacing: 0.3px;
.PAmenuItem a:link {
    display: block;
    height: 35px;
    line-height: 35px;
    color: #FFFFFF;
    text-decoration: none;
.PAmenuItem a:visited {
    display: block;
    height: 35px;
    line-height: 35px;
    color: #FFFFFF;
    text-decoration: none;
.PAmenuItem a:hover {
    display: block;
    height: 35px;
    line-height: 35px;
    color: #FFFFFF;
    text-decoration: none;
    background-color: #06A7E2;
.PAmenuItem a:active {
    display: block;
    height: 35px;
    line-height: 35px;
    color: #FFFFFF;
    text-decoration: none;
    background-color: #06A7E2;
.SubPageContentArea {
    color: #FFFFFF;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    font-size: 14px;
    text-align: left;
    letter-spacing: 0.06em;
#topContent {
    width: 100%;
    color: #30434D;
    font-style: normal;
    font-weight: 200;
    font-family: source-sans-pro;
    font-size: 14px;
#pageContent {
    width: 100%;
    display: block;
    clear: both;
#asideNavArea {
    color: #FCFDFF;
    width: 30%;
    float: left;
    clear: right;
    padding-left: 15px;
    margin-left: 5px;
    margin-top: 25px;
    margin-bottom: 15px;
    background-color: #CED1D3;
#bottomContentArea {
    background-image: url(/images/grayTexture2.png);
    background-repeat: repeat;
    width: 100%;
    display: block;
    clear: both;
.bottomContent {
    color: #FFFFFF;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    font-size: medium;
    padding-left: 15px;
    display: block;
#aboutPict {
#sectionPict {
    width: 100%;
#sideNavHolder {
    width: 200px;
    height: 300px;
    background-color: #B6C4CE;
    -webkit-box-shadow: 3px 3px 5px #303E48;
    box-shadow: 3px 3px 5px #303E48;
#bottomContentText {
#sectionPict img {
    width: 100%;
#greenMemLog img {
#indexContentArea {
    float: left;
    width: 100%;
    display: block;
#asideArea {
    width: 100%;
    float: left;
    background-color: #CED1D3;
    height: 200px;
    clear: both;
#mainAnim {
    width: 100%;
    display: block;
    float: left;
    clear: both;
    height: 200px;
    margin-bottom: 15px;
#slideShow {
    width: 100%;
#bottomContent {
    clear: none;
    background-image: url(images/grayTexture2.png);
    background-repeat: repeat;
    display: block;
    width: 100%;
    padding-top: 25px;
    padding-bottom: 25px;
    float: left;
#sectionPhoto {
#sectionPhoto img {
    width: 100%;
    display: block;
    clear: both;
#bottomContent2 {
    width: 250px;
    display: block;
    float: left;
    clear: left;
    margin-left: auto;
    margin-right: auto;
#bottomContent1 {
    width: 90%;
    clear: none;
#sectionVideo {
    width: 95%;
    float: left;
    margin-left: 15px;
    text-align: left;
    margin-top: 15px;
    display: block;
#sectionVideo img {
    display: block;
    float: left;
    width: 100%;
#Thermalnav {
    width: 0px;
.Thermalmenuitem {
    display: block;
    background-color: #06A7E2;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    height: 30px;
    padding-left: 15px;
    border-color: #FFFFFF;
    border-bottom-width: thin;
    border-bottom-style: dotted;
.Thermalmenuitem a:hover {
    display: block;
    background-color: #FC6719;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    height: 30px;
    padding-left: 15px;
.Thermalmenuitem a:link {
    display: block;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    height: 30px;
    padding-left: 15px;
.Thermalmenuitem a:visited {
    display: block;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    height: 30px;
    padding-left: 15px;
.Thermalmenuitem a:active {
    display: block;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    height: 30px;
    padding-left: 15px;
    background-color: #303E48;
#ThermalList {
#thermalLinks {
    margin-top: 15px;
    display: block;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
#ThermalLinks {
    display: block;
    margin-top: 20px;
    clear: both;
    text-align: center;
    margin-bottom: 20px;
    float: left;
    width: 100%;
#SquareIcon {
    clear: both;
    width: 125px;
    float: left;
#LinearIcon {
    width: 140px;
    clear: none;
    float: left;
    margin-left: 20px;
#mainParagraph {
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    text-align: left;
    float: left;
    clear: both;
    width: 98%;
    margin-top: 15px;
    margin-bottom: 20px;
#leftSpacer {
    width: 10%;
    height: 500px;
    display: block;
    float: left;
#ThermalVideo {
    float: left;
    width: 100%;
    border: thin solid #000000;
#ThermalChoose {
    text-align: left;
    background-color: #FC6719;
    color: #FDFDFD;
    display: block;
    height: 35px;
    line-height: 35px;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    width: 100%;
    float: left;
    padding-left: 10px;
#SquareDiffuserSection {
    width: 100%;
    background-color: #06A7E2;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    text-align: left;
    display: block;
    height: 35px;
    float: left;
#SquareDiffText {
    float: left;
    width: 90%;
    margin-left: 15px;
    margin-top: 20px;
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    margin-bottom: 25px;
    text-align: left;
#squareDiffuserPicts {
    width: 100%;
    clear: both;
#SCVH {
    float: none;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    clear: none;
    display: block;
.Labels   {
    color: #06A7E2;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    vertical-align: bottom;
#SCAH   {
    float: none;
    clear: none;
    display: block;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
#brochureThumb   {
    visibility: hidden;
#SquareDiffSectTitle   {
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    padding-left: 15px;
#SquarePict   {
    clear: left;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
#brochureLink   {
    visibility: hidden;
#bottomContent3   {
    float: left;
    width: 90%;
.zeroMargin_mobile   {
margin-left: 0;
.hide_mobile   {
display: none;
#SCAHbutton {
    float: left;
    width: 100%;
    clear: both;
    margin-bottom: 10px;
#SCVHbutton {
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 10px;
#SCbutton {
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 10px;
#SCVHbuttText {
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    width: 90%;
    clear: left;
    float: left;
    margin-left: 10px;
    text-align: center;
#SCbuttText {
    position: relative;
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    width: 90%;
    float: left;
    clear: left;
    margin-left: 15px;
    text-align: center;
#SC {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    clear: none;
    display: block;
#SCAHbuttText {
    width: 90%;
    float: left;
    clear: left;
    margin-left: 15px;
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    text-align: center;
#sqDiffPict {
    width: 150px;
    margin-top: 20px;
#LAD {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    display: block;
#LADbuttonText {
    float: left;
    clear: left;
    width: 90%;
    text-align: center;
#VAC {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    display: block;
#VACbuttonText {
    float: left;
    clear: left;
    width: 95%;
    text-align: center;
#VACH {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    display: block;
#VACHbuttonText {
    float: left;
    clear: left;
    width: 95%;
    text-align: center;
#LADbutton   {
    width: 100%;
#VACbutton {
    width: 100%;
    float: left;
    clear: left;
#VACHbutton {
    float: left;
    clear: left;
    width: 100%;
#LinearDiffusers {
    color: #FC6719;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    margin-bottom: 12px;
    padding-left: 15px;
#LinearDiffPict {
    margin-left: 5px;
    float: right;
    width: 45%;
#SquareDiffPict {
    float: right;
    color: #06A7E2;
    width: 40%;
#SquareDiffPict img {
    width: 170px;
#LinearDiffPict img {
    width: 175px;
#PHseries {
    width: 200px;
    float: left;
    clear: none;
    margin-bottom: 15px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
#AirTerminalPicts {
    float: left;
    clear: both;
    background-color: #E6EBEE;
    display: block;
    width: 100%;
#PTseries {
    width: 200px;
    float: left;
    clear: left;
    margin-right: auto;
    margin-bottom: 25px;
    margin-top: 20px;
    margin-left: auto;
#ATUpicts {
    text-align: center;
    padding-left: 10px;
    margin-bottom: 20px;
#PHbuttonText {
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    text-align: left;
    padding-left: 12px;
#PTbuttonText {
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    padding-left: 12px;
    text-align: left;
#ModelPhSeries {
    padding-left: 5%;
    color: #FC6719;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
#ATUVideo {
    width: 95%;
    margin-bottom: 20px;
    float: left;
    display: block;
    clear: both;
#mainParagraphATU {
    float: none;
    width: 95%;
    padding-bottom: 15px;
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
#ATUsectionVideo {
    margin-top: 35px;
    margin-left: 10px;
    width: 100%;
    float: left;
#mainParagraphPH {
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    margin-bottom: 15px;
#PHatuSeries {
    float: right;
#ATUSectTitle {
    padding-left: 10px;
    width: 95%;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 30px;
#ATUplace {
    width: 100%;
#ATUSection {
    float: left;
    width: 100%;
    background-color: #06A7E2;
#PHDuct {
    margin-top: 35px;
    float: left;
    display: block;
    width: 100%;
#PHductSection {
    float: left;
    background-color: #E6EBEE;
    clear: left;
    width: 100%;
#PHductCaption {
    float: left;
    clear: left;
    color: #FFFFFF;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    width: 100%;
    background-color: #303E48;
    line-height: 50px;
#PHaccessText {
    margin-top: 20px;
    float: left;
    width: 100%;
#PHdownloadTitle {
    background-color: #FC6719;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    line-height: 35px;
    font-size: 18px;
#PHpdfList {
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
    line-height: 50px;
#PHdownloads {
    float: left;
    clear: right;
    width: 100%;
    margin-top: 35px;
    margin-bottom: 20px;
#Ductpict {
    float: left;
    display: block;
    width: 100%;
.PHdata a:active {
    color: #06A7E2;
    text-decoration: none;
#PHaccessories {
    float: left;
.PHdata a:visited {
    color: #303E48;
    text-decoration: none;
.PHdata a:hover {
    color: #06A7E2;
    text-decoration: none;
.PHdata a:link {
    color: #303E48;
    text-decoration: none;
.PHdata {
    border-bottom: 6px solid #E6EBEE;
    background-color: #FFFFFF;
#PHimage {
    width: 150px;
#PTseries2 {
    float: right;
#Ductpict2 {
    width: 510px;
    float: left;
#PHductCaption2 {
    width: 510px;
    float: left;
    background-color: #303E48;
    height: 40px;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    font-size: 22px;
#DigitalContent {
    text-align: left;
    margin-top: 20px;
    background-color: #E6EBEE;
    float: left;
    width: 90%;
#digiPicts {
    background-color: #E6EBEE;
    display: block;
    clear: left;
    width: 300px;
#SEHCMbutton a:hover {
    background-color: #06A7E2;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    display: block;
#EdgeSVCH {
    float: left;
    margin-left: 10px;
#SCVHanim   {
    float: left;
    margin-top: 35px;
    width: 95%;
    margin-bottom: 10px;
#SVCHanimPict {
    float: left;
    width: 100%;
#SCVHhowToButt {
    float: left;
.fluid.SCVHsubMenuItems {
    color: #303E48;
    background-color: #CED1D3;
    display: block;
    width: 100%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
#SCVHsub {
    margin-bottom: 10px;
.fluid.SCVHsubMenuItems2 {
    background-color: #CED1D3;
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    height: 30px;
    display: block;
.fluid.SCVHsubMenuItems2 a:link {
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    line-height: 30px;
    display: block;
.fluid.SCVHsubMenuItems2 a:hover {
    background-color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    line-height: 30px;
    display: block;
    color: #FFFFFF;
.fluid.SCVHsubMenuItems2 a:visited {
    background-color: #CED1D3;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    line-height: 30px;
    display: block;
    color: #303E48;
.SCVHlist a:link {
    color: #303E48;
    text-decoration: none;
    display: block;
    background-color: #FFFFFF;
    height: 30px;
    line-height: 30px;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    border-bottom: medium solid #E6EBEE;
.SCVHlist a:hover {
    color: #FFFFFF;
    background-color: #06A7E2;
    display: block;
.SCVHlist a:visited {
    color: #303E48;
    background-color: #FFFFFF;
    display: block;
#SCVHchartPict {
    float: left;
    text-align: center;
    width: 300px;
#SCVHdata {
    margin-top: 25px;
    text-align: left;
    width: 90%;
    float: left;
#SCVHbottomData {
    margin-top: 15px;
    width: 300px;
    float: left;
#SCVHchartPict img {
#SCVHchartGraphic {
    width: 100%;
#SCVHdimGraphic {
    width: 100%;
#SCVHdimenPict {
    margin-top: 20px;
    width: 300px;
#SCVHvideo {
    width: 95%;
#LADimages {
    float: right;
    width: 200px;
    margin-left: 20px;
#LAD3D {
    float: right;
#LADusePict {
    float: right;
    clear: right;
    margin-top: 50px;
#MidContent {
    float: left;
    text-align: left;
    margin-top: 20px;
#CoAnda {
    margin-top: 25px;
    border: thin solid #FFFFFF;
    float: left;
    width: 300px;
    padding-left: 15px;
#VACinduction {
    float: right;
    margin-left: 10px;
#PAproducts {
    width: 100%;
    clear: both;
    display: block;
    float: left;
#SlideShow {
    width: 100%;
    float: left;
    height: 400px;
    display: block;
#ProductWrapper {
    width: 300px;
    display: block;
    clear: both;
    float: left;
.fluid.PromoBlocks {
    width: 225px;
    display: block;
    clear: both;
#SQdiffPict {
    width: 100%;
#ATUpict {
    width: 100%;
#DigiDiffPict {
    width: 100%;
@media only screen and (min-width:480px){
#PAproducts {
    width: 100%;
    clear: both;
    display: block;
    float: left;
#mainAnim {
    width: 100%;
    display: block;
    float: left;
    clear: both;
    height: 270px;
    margin-bottom: 15px;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 600px) {
.fluid.SCVHsubMenuItems2 a:link {
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    line-height: 30px;
    display: block;
.fluid.SCVHsubMenuItems2 a:hover {
    background-color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    line-height: 30px;
    display: block;
    color: #FFFFFF;
.fluid.SCVHsubMenuItems2 {
    background-color: #CED1D3;
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    height: 30px;
    display: block;
    padding-left: 10px;
    font-size: 13px;
    width: 240px;
    float: left;
    clear: right;
#DigitalPicts {
    float: left;
    display: block;
#SEHCMbutton {
    float: left;
    margin-left: 15px;
    background-color: #FC6719;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    display: block;
    width: 62%;
.gridContainer {
    width: 100%;
    padding-left: 0%;
     padding-right: 0%;
    clear: none;
    float: none;
    margin-left: auto;
#top {
    text-align: left;
    float: left;
.tagline {
width: 100%;
clear: both;
margin-left: 0;
#menuChoices {
#div2 {
    width: 100%;
    background-color: #FC6719;
    height: 380px;
#SubHead {
    position: static;
    height: 40px;
    width: 100%;
#mainSubHead {
    clear: both;
    margin-left: 0;
    position: static;
    height: 40px;
    width: 100%;
    line-height: 40px;
#div3 {
width: 100%;
#div4 {
clear: both;
margin-left: 0;
width: 100%;
#mainContent {
.content {
.contentStyle {
    width: 88.6792%;
    margin-left: 0;
#mainAside {
    margin-left: auto;
    position: static;
    height: auto;
    display: block;
    width: 700px;
    margin-right: auto;
#mainFooter {
#footerLogo {
    margin-left: 25px;
    text-align: left;
#footerInfo {
    margin-left: 25px;
    text-align: left;
    width: 400px;
#asideBrochure {
    clear: both;
    float: left;
#asideVideo {
    margin-left: 0;
    float: left;
    text-align: center;
.lightLinks {
    text-align: center;
    line-height: 16px;
#thermalDiffLabel {
#thermDiffLabel {
    width: 330px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
#thermDiffPict {
#atuLabel {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    width: 330px;
#atuPict {
#digitalLabel {
    width: 330px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
#digitalPict {
.mainSubHead {
    color: #FFFFFF;
    background-color: #F60;
    display: block;
    font-family: questrial;
    font-size: 30px;
    margin: auto;
    height: 80px;
    line-height: 40px;
    font-style: normal;
    font-weight: 400;
#navList {
#PAnav {
#PAchoices {
#PAList {
    position: relative;
    margin-left: auto;
    margin-right: auto;
.PAmenuItem {
    float: left;
    position: relative;
    display: block;
    width: 115px;
    clear: right;
    font-size: 13px;
    padding-left: 10px;
.SubPageContentArea {
    padding-bottom: 20px;
    text-align: left;
#topContent {
#pageContent {
    width: 100%;
#asideNavArea {
#bottomContentArea {
.bottomContent {
#aboutPict {
#sectionPict {
#sideNavHolder {
#bottomContentText {
#indexContentArea {
#asideArea {
    line-height: 30px;
    width: 150px;
    height: 700px;
    float: left;
    clear: none;
#mainAnim {
    height: 425px;
    width: 100%;
    float: left;
#bottomContent {
#sectionPhoto {
#bottomContent2 {
    float: left;
    clear: left;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
#bottomContent1 {
    float: left;
    width: 575px;
    margin-left: 5px;
#sectionVideo {
    width: 580px;
    float: left;
    margin-left: 15px;
.mainParagraphs {
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    font-size: 15px;
    text-align: left;
#ThermalList {
#thermalLinks {
#ThermalLinks {
    float: left;
    clear: both;
    width: 150px;
    margin-bottom: 10px;
#SquareIcon {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    float: none;
#LinearIcon {
    float: none;
    width: 120px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    clear: left;
#mainParagraph {
    float: left;
    clear: both;
    width: 98%;
    margin-top: 0px;
#leftSpacer {
#ThermalVideo {
    width: 70%;
    margin-top: 20px;
    margin-left: 15px;
    border-width: thin;
#ThermalChoose {
    margin-top: 0px;
    text-align: center;
    line-height: 1.5em;
    height: 50px;
#SquareDiffuserSection {
    height: 35px;
#SquareDiffText {
    width: 575px;
    margin-top: 20px;
    margin-bottom: 25px;
    margin-left: 15px;
    padding-left: 8px;
    text-align: left;
#squareDiffuserPicts {
    width: 600px;
    margin-top: 15px;
    margin-left: 15px;
#SCVH {
    display: block;
    width: 150px;
    float: none;
    margin-left: 0px;
    margin-right: 0px;
#SCVHanim   {
    float: left;
    margin-top: 35px;
    width: 50%;
.fluid.SCVHsubMenuItems {
    color: #303E48;
    background-color: #CED1D3;
    display: block;
    height: 30px;
    line-height: 30px;
    width: 220px;
    font-size: 14px;
    text-align: left;
    padding-left: 10px;
    float: left;
    clear: right;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
#SCVHdimGraphic {
    width: 600px;
#SCVHdimenPict {
    margin-top: 20px;
#SCAH {
    display: block;
    width: 150px;
    margin-left: 0px;
    margin-right: 0px;
#SCbutton {
    float: left;
    width: 175px;
    clear: right;
    position: relative;
    margin-left: 25px;
#PHDuct {
    margin-top: 35px;
    float: left;
    display: block;
#PHductCaption2 {
    width: 510px;
    float: left;
    background-color: #303E48;
    height: 40px;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    font-size: 22px;
#brochureThumb {
    visibility: visible;
#SquareDiffSectTitle {
    width: 500px;
    height: 35px;
    text-align: left;
    color: #FFFFFF;
    margin-left: 20px;
    line-height: 35px;
#SquarePict {
    width: 225px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    clear: left;
#LADbutton   {
    width: 175px;
    float: left;
#brochureLink {
    visibility: visible;
#bottomContent3 {
    width: 595px;
    float: left;
    clear: left;
    margin-left: 15px;
.hide_tablet {
display: none;
.zeroMargin_tablet {
margin-left: 0;
#SCVHbutton {
    float: left;
    width: 175px;
#SCVHbuttText {
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    width: 90%;
    float: left;
    clear: right;
    text-align: left;
#SCAHbuttText {
    float: left;
    clear: right;
    width: 90%;
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    position: relative;
    text-align: left;
#SCbuttText {
    position: relative;
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    width: 90%;
    float: left;
    clear: none;
    display: block;
    text-align: left;
#SC {
    width: 150px;
    float: none;
    margin-left: 0px;
    margin-right: 0px;
#SCAHbutton {
    float: left;
    width: 175px;
    clear: right;
    position: relative;
    margin-left: 25px;
    margin-bottom: 20px;
#sqDiffPict {
    width: 190px;
    margin-top: 20px;
#LinearDiffusers {
    color: #FC6719;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    padding-left: 15px;
    margin-bottom: 12px;
    float: left;
    width: 100%;
#VACbutton {
    width: 175px;
    float: left;
    clear: right;
    margin-left: 25px;
#VACHbutton {
    float: left;
    width: 175px;
    clear: right;
    margin-left: 25px;
#VACbuttonText {
    float: left;
    clear: left;
    width: 90%;
    padding-left: 10px;
    text-align: left;
#LADbuttonText {
    float: left;
    clear: left;
    width: 90%;
    padding-left: 10px;
    text-align: left;
#VACHbuttonText {
    float: left;
    clear: left;
    width: 90%;
    padding-left: 10px;
    text-align: left;
#LAD {
    width: 150px;
    margin-left: 0px;
#VAC {
    width: 150px;
    margin-left: 0px;
#VACH {
    width: 150px;
    margin-left: 0px;
#linearPict {
    float: left;
    clear: right;
    margin-left: 0px;
#linearPict img {
    width: 150px;
    display: block;
#SquareDiffPict {
    color: #06A7E2;
    float: right;
    text-align: center;
    width: 25%;
#LinearDiffPict {
    margin-left: 5px;
    float: right;
    width: 25%;
#ATUsectionVideo {
    margin-top: 35px;
    width: 95%;
    float: left;
    margin-left: 40px;
#ATUVideo {
    width: 62%;
    margin-bottom: 20px;
    float: left;
    clear: right;
    margin-left: 15px;
#mainParagraphATU {
    float: left;
    width: 200px;
#PHseries {
    width: 200px;
    float: left;
    margin-left: 10%;
    clear: none;
    margin-bottom: 25px;
    margin-top: 20px;
#PHductCaption {
    float: left;
    clear: left;
    color: #FFFFFF;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    width: 100%;
    background-color: #303E48;
    line-height: 50px;
#PHdownloads {
    float: left;
    clear: right;
    width: 250px;
    margin-left: 30px;
    margin-top: 35px;
#PHatuSeries {
    float: right;
#PHimage {
    width: 225px;
#PHaccessText {
    margin-top: 20px;
#ATUSectTitle {
    padding-left: 40px;
#PTseries2 {
    float: right;
#PTseries {
    width: 200px;
    float: left;
    clear: right;
    margin-right: auto;
    margin-bottom: 25px;
    margin-top: 20px;
    margin-left: 35px;
#digiPicts {
    float: right;
    background-color: #E6EBEE;
#DigitalContent {
    text-align: left;
    margin-top: 20px;
    background-color: #E6EBEE;
    margin-left: 30px;
#Ductpict {
    width: 511px;
    float: left;
    display: block;
    clear: right;
#Ductpict2 {
    width: 510px;
    float: left;
#DigitalPicts {
    float: right;
#SCVHsub {
    width: 100%;
    margin-bottom: 15px;
#EdgeSVCH {
    float: right;
    margin-left: 20px;
#SVCHanimPict {
    float: left;
    width: 100%;
#SCVHchartPict {
    float: right;
    margin-left: 20px;
    width: 350px;
#SCVHbottomData {
    margin-top: 15px;
    width: 600px;
    float: left;
    clear: both;
#SCVHvideo {
    width: 100%;
#CoAnda {
    margin-top: 25px;
    border: thin solid #FFFFFF;
    float: left;
    width: 500px;
    padding-left: 15px;
#SlideShow {
    width: 100%;
    height: 455px;
    float: left;
#ProductWrapper {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: block;
.fluid.PromoBlocks {
    width: 180px;
    float: left;
    margin-top: 20px;
    margin-left: 15px;
    clear: none;
    display: block;
#SQdiffPict {
    display: block;
#ATUpict {
    display: block;
#DigiDiffPict {
    width: 100%;
    display: block;
/* additional media query of min 600px*/
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width:800px){
.gridContainer {
    width: 100%;
    max-width: 1920px;
    padding-left: 0;
    padding-right: 0;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
#top {
    float: left;
.tagline {
width: 79.3103%;
margin-left: 1.2987%;
clear: none;
#mainNav {
.menuItem {
    clear: none;
    background-size: auto 40px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-top: 0px;
#top img {
    text-align: left;
    background-repeat: no-repeat;
    float: left;
    margin-left: 10px;
#SEHCMbutton {
    float: left;
    margin-left: 35px;
    background-color: #FC6719;
    color: #FFFFFF;
    font-family: questrial;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
    width: 62%;
#div2 {
    text-align: center;
    width: 100%;
    background-color: #FC6719;
    background-repeat: repeat-x;
    clear: both;
#SlideShow {
    width: 100%;
    height: 555px;
    float: left;
#SubHead {
    position: static;
    margin-left: auto;
    height: 45px;
    width: 100%;
    top: 586px;
    left: 0px;
    background-color: #FC6719;
#mainSubHead {
    margin-left: 0;
    clear: both;
    position: static;
    height: 45px;
    width: 100%;
    #SCVHsub {
    width: 100%;
    margin-bottom: 15px;
.fluid.SCVHsubMenuItems {
    color: #303E48;
    background-color: #CED1D3;
    display: block;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    text-align: left;
    padding-left: 15px;
    width: 250px;
    #SCVHlist a:link {
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
#SCVHpdfList {
    float: none;
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
#SCVHlist {
    height: 25px;
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    background-color: #FFFFFF;
    border-bottom-style: solid;
    border-bottom-color: #E6EBEE;
#SCVHanim   {
    float: left;
    margin-top: 35px;
    width: 511px;
#SCVHdimGraphic {
    float: right;
#SCVHdimenPict {
    margin-top: 20px;
    width: 800px;
    float: right;
#div3 {
width: 100%;
#div4 {
margin-left: 1.2987%;
clear: none;
width: 29.8701%;
#mainContent {
.content {
.contentStyle {
    width: 55%;
    margin-left: 0;
    float: left;
#mainAside {
    position: relative;
    width: 325px;
    float: left;
    clear: right;
    display: block;
    margin-left: 30px;
#mainFooter {
#footerLogo {
    margin-left: 25px;
#footerInfo {
    line-height: 30px;
    display: block;
    height: 30px;
    float: none;
    clear: none;
    text-align: left;
    width: 400px;
#asideBrochure {
    width: 325px;
    margin-left: 0;
    clear: none;
    float: left;
#asideVideo {
    width: 325px;
    margin-left: 0;
    float: left;
.mainSubHead {
    color: #FFFFFF;
    background-color: #F60;
    display: block;
    font-family: questrial;
    font-size: 30px;
    margin: auto;
    height: 40px;
    line-height: 40px;
    font-style: normal;
    font-weight: 400;
.lightLinks {
#thermalDiffLabel {
#thermDiffLabel {
    width: 280px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
#thermDiffPict {
#atuLabel {
    padding-top: 10px;
    /* [disabled]padding-right: 10px; */
    padding-bottom: 10px;
    padding-left: 10px;
    width: 280px;
#atuPict {
#digitalLabel {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    width: 280px;
#digitalPict {
    padding-bottom: 2px;
#navChoices {
#navList {
#PAnav {
    background-color: #30434D;
    display: block;
#PAchoices {
#PAList {
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: left;
.PAmenuItem {
    padding-left: 10px;
    width: 150px;
    font-size: 15px;
.mainSubHead {
    color: #FFFFFF;
    display: block;
    font-family: questrial;
    font-size: 30px;
    margin: auto;
    font-style: normal;
    font-weight: 400;
#AboutUsText {
    padding-left: 15px;
    width: 92%;
#pageContent {
#asideNavArea {
#bottomContentArea {
.bottomContent {
#aboutPict {
#sectionPict {
#sideNavHolder {
#bottomContentText {
#indexContentArea {
#asideArea {
    height: 725px;
    width: 275px;
    float: left;
    clear: right;
    padding-bottom: 25px;
#mainAnim {
    width: 100%;
    display: block;
    height: 555px;
    float: left;
#bottomContent {
#sectionPhoto {
#bottomContent1 {
    float: left;
    width: 800px;
    margin-left: 15px;
#bottomContent2 {
    clear: right;
    margin-left: 20px;
    float: left;
#sectionVideo {
    margin-left: 5%;
    width: 800px;
#ThermalList {
#thermalLinks {
#ThermalLinks {
    width: 200px;
    text-align: center;
#SquareIcon {
    margin-left: auto;
    margin-right: auto;
    width: 125px;
    display: block;
    float: none;
#LinearIcon {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 145px;
    float: none;
    clear: both;
#mainParagraph {
    color: #303E48;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 200;
    text-align: left;
    float: none;
    clear: both;
    width: 754px;
    margin-top: 10px;
    margin-bottom: 40px;
#leftSpacer {
#ThermalVideo {
    display: block;
    float: left;
    clear: right;
    margin-top: 20px;
    width: 534px;
    margin-left: 30px;
    margin-right: auto;
#ThermalChoose {
#SquareDiffuserSection {
    display: block;
    float: left;
    clear: both;
    width: 100%;
    padding-left: 5%;
    height: 35px;
#SquareDiffText {
    width: 750px;
    float: left;
    margin-left: 5%;
    margin-bottom: 30px;
    text-align: left;
#squareDiffuserPicts {
    margin-left: 5%;
    width: 800px;
    margin-bottom: 30px;
    clear:

Too much to check through but You are using the following conditionals:
1) Standard CSS.
This is the CSS that will load at any res. If you set a style here it will load in the two conditional's below as well.
2) @media screen and (min-width:990px)
     This is telling the browser to load these styles when the screen is over 990px's wide but you have not excluded anything using max-width so any styles from 1) will be carried over. You could try overwriting them with      !important but its messy and would make more sense to extract the styles from 1)
3) @media screen and (min-width:1100px)
     This is telling the browser to load these styles when the screen is over 1100px but like 2) you are not ignoring anything under this width so it will pick up your base styles as well as your conditional styles from 2)

Control a text field in Edge with external CSS

I have embedded an edge file in my html page.
Inside the edge file, a text field with a class name of "text"
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
#Stage .text     {
          color: #FFFFFF;
          font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
          text-align: center;
          font-size: 300px;
</style>
</head>
<body>
<object id="EdgeID" type="text/html" width="420" height="420" data-dw-widget="Edge" data="Untitled-1/Assets/Untitled-1.html">
</object>
</body>
</html>
Should this not make my text in EDGE appear in white once loaded in the html page?
Any help would be greatly appreciated, I know I have achieved this before but I cant remember how.
Steve

Wow! After all my searching and just after posting this I figured out the solution! I originally had { MERGEFIELD Field_Name \# # } But then I just removed everything after the field name, as is normal for any other text field, so not indicating it was
a number, and now it shows up correctly even if the number (from a Text formatted field in Excel) is longer than 15 digits. Hope this helps anyone else who has a problem. I did not use DDE to solve this problem.

Will type in an eps be smooth?

I sent a Photoshop pdf file to my customer's printer in India. I sent it as I usually send files to China, as a PDF/x-1a, compression zip. (I have been sending art to China this way and it has been coming out fine-they are small hang tags). However, the printer in India replied that the wording appears distorted and to send vector files. He said to send an eps file. Would making the original file into an eps file work? Would the type remain crisp? My Quark and Freehand apps are way out of date and I don't know Illustrator or InDesign (tho I have copies, just haven't learned them yet). Attached is the pdf file I sent. I'd appreciate your feedback as to what is wrong with it, and what I should do here. Thanks!

This glyph problem, and the fact that InDesign clears it up, is a little troubling.
I made a test file in Photoshop using the same fonts, Franklin Gothic Demi and Franklin Gothic bold. I saved as PDF/X-1a, prefighted in Acrobat and got the glyph error.
Then I saved as EPS, and distilled using PDF/X-1a. Very interesting result. No fonts at all - the fonts are converted to outlines.
So to answer the OP's original question, the type in the EPS is smooth, and the printer shouldn't have any font problems, because all the text will be outlined. To verify, open the EPS in Illustrator and view as outlines, all the text characters are shapes. Or distill the EPS, open the PDF in Acrobat. You will see there are no fonts, and zooming in, it's evident that the characters are smooth vector shapes.
I'm still not sure why Photoshop can't include a decent font output in a PDF (at least with these fonts), and I have no idea why InDesign clears it up.
One other thing I should mention about using fonts in Photoshop, and why the result is so different from fonts created in vector applications. As I stated earlier, with fonts in Photoshop the character fills are image pixels. This shouldn't really make a difference, but to a printer it makes a big difference when it comes to trapping. If the text characters need to be trapped to surrounding elements, it requires image to image trapping, which is not at all the same thing as image to vector trapping.
Most font output I receive originates from vector based applications. Every now and then I get a Photoshop PDF with fonts but it's a rarity. Usually the Photoshop designs are supplied as flat images.
Many times too, I see PSD or TIFF ads placed in InDesign. These have no vector content at all.
Since Photoshop fonts can be problematic, it may be an option for the OP to save out a flat image with no vector data. True, the fonts aren't crisp. But I proof and print flat image ads with text all the time, and the result on press is surprisingly good. How good depends on a lot of things - the font, type size, resolution of the Photoshop image, and the line screen used when printing. I am willing to bet that in certain cases, if the vector output and flat image output were printed side by side, it would be next to impossible to tell the difference.
With a flat image the type characters do not have as good appearance on-screen. But with a small job like the OP's hang tag, the PDF displays much larger than the print size. Differences between raster text and vector text can be somewhat deceiving. Something else with fonts in Photoshop - they don't display as vector in Photoshop. So a flat image output would actually be truer to the text appearance in Photoshop.
Back to the trapping. If it's a flat image, the printer will almost certainly not trap the text, because it's part of the image. But if the type is anti-aliased in Photoshop, the softer edges create a sort of natural trap. Furthermore if the type is by itself on a white background, the soft edges are much more forgiving when it comes to registration on press.
If the type is vector, the trapping is questionable. It will only be generated if the printer enables image to image trapping. If he doesn't, there could be a registration issue on press (depending on the colors used).
The biggest issue I see every day with text created in Photoshop is 4C black text. The OP may be aware of this problem. It's best if black text is 100K only. But if it is 4C black, registration is easier if the text is image instead of vector.
My apologies for rambling on. Mike or Marian may have more insight on some of these matters.

Using franklin gothic bold

Similar Messages

Maybe you are looking for