﻿/*
#Category Image

|Locations Used|
|-----|
|Category list|

|Classes|
|-----|
|outline|

```
<a href="/product/power/novum-advanced-power/digital-pol/ndm2z-series">
    <img class="outline" src="/products/image/getproductimage/168036?typecode=m&amp;width=229" alt="NDM2Z Series" style="background-color:#ffffff">
</a>
```

#Product Image

|Locations Used|
|-----|
|Product Page|

|Classes|
|-----|
|prod-img|


```
<div class="unit size1of2 prod-img">
    <img src="/products/image/getproductimage/168035?typecode=m" alt="NDM2P Series">
</div>
```


#Product Image - Industry Page

|Locations Used|
|---------|
|Industry Pages|

|Classes|
|---------|
|app-img|

```
<div class="unit size1of4">
    <img class="app-img" src="/products/image/getimage/1314" alt="Encapsulated Ac-Dc Modules">
</div>
```

#Accessory List

|Locations Used|
|-------|
|Product Page|

|Classes|
|----|
|hide-for-print|
|article-link|

```
<article class="unit size1of4 hide-for-print">
    <!-- start accessories section -->
    <section> 
        <div class="content hide-for-print">
                <h4 class="underline">Accessories</h4>
                <div class="line">
                        <div class="article-link underline">
                            <a href="/product/components/encoders/encoder-accessories/amt-cables/cui-3131-6ft">                                            
                                <div class="media">
                                    <div class="line">
                                        <div class="unit size1of3 img">
                                            <div class="accesory-img">
                                                <img src="/products/image/getimage/418" alt="CUI-3131-6FT">
                                            </div>
                                        </div>
                                        <div class="unit size2of3 bd">
                                            <p>Cable w/ 5 Pin Connector, 5 Conductor Shielded Round 24 AWG Twisted Pair Cable</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="article-link underline">
                            <a href="/product/components/encoders/encoder-accessories/amt-cables/cui-3132-1ft">
                                            
                                <div class="media">
                                    <div class="line">
                                        <div class="unit size1of3 img">
                                            <div class="accesory-img">
                                                <img src="/products/image/getimage/423" alt="CUI-3132-1FT">
                                            </div>
                                        </div>
                                        <div class="unit size2of3 bd">
                                            <p>Cable w/ 5 Pin Connector, 5 Individual Discrete 22 AWG Wires</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="article-link underline">
                            <a href="/product/components/encoders/encoder-accessories/cui-3620-6ft">
                                            
                                <div class="media">
                                    <div class="line">
                                        <div class="unit size1of3 img">
                                            <div class="accesory-img">
                                                <img src="/products/image/getimage/421" alt="CUI-3620-6FT">
                                            </div>
                                        </div>
                                        <div class="unit size2of3 bd">
                                            <p>Cable w/ 5 Pin Connectors on Both Ends, 5 Conductor Shielded Round 24 AWG Twisted Pair Cable</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="article-link underline">
                            <a href="/product/components/encoders/encoder-accessories/amt-cables/cui-3934-6ft">
                                            
                                <div class="media">
                                    <div class="line">
                                        <div class="unit size1of3 img">
                                            <div class="accesory-img">
                                                <img src="/products/image/getimage/420" alt="CUI-3934-6FT">
                                            </div>
                                        </div>
                                        <div class="unit size2of3 bd">
                                            <p>Cable w/ 5 Pin, Right-Angle Connector, 5 Conductor Shielded Round 24 AWG Twisted Pair Cable</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="article-link underline">
                            <a href="/product/components/encoders/encoder-accessories/amt-cables/cui-4138-6ft">
                                            
                                <div class="media">
                                    <div class="line">
                                        <div class="unit size1of3 img">
                                            <div class="accesory-img">
                                                <img src="/products/image/getimage/419" alt="CUI-4138-6FT">
                                            </div>
                                        </div>
                                        <div class="unit size2of3 bd">
                                            <p>5 Pin Polarized Finger-Latching Connector to 5 Pin Locking Connector w/5 Conductor Shielded Round Twisted Pair 24 AWG Cable</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="article-link underline">
                            <a href="/product/components/encoders/encoder-accessories/amt-cables/cui-434-1ft">
                                            
                                <div class="media">
                                    <div class="line">
                                        <div class="unit size1of3 img">
                                            <div class="accesory-img">
                                                <img src="/products/image/getimage/425" alt="CUI-434-1FT">
                                            </div>
                                        </div>
                                        <div class="unit size2of3 bd">
                                            <p>Cable w/ 5 Pin, Right-Angle Connector, 4 Individual Discrete 22 AWG Wires</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="article-link underline">
                            <a href="/product/components/encoders/encoder-accessories/amt-cables/cui-435-1ft">
                                            
                                <div class="media">
                                    <div class="line">
                                        <div class="unit size1of3 img">
                                            <div class="accesory-img">
                                                <img src="/products/image/getimage/41" alt="CUI-435-1FT">
                                            </div>
                                        </div>
                                        <div class="unit size2of3 bd">
                                            <p>Cable w/ 5 Pin, Right-Angle Connector, 5 Individual Discrete 22 AWG Wires</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="article-link underline">
                            <a href="/product/components/encoders/encoder-accessories/cui-576-6ft">
                                            
                                <div class="media">
                                    <div class="line">
                                        <div class="unit size1of3 img">
                                            <div class="accesory-img">
                                                <img src="/products/image/getimage/422" alt="CUI-576-6FT">
                                            </div>
                                        </div>
                                        <div class="unit size2of3 bd">
                                            <p>Cable w/ 5 Pin Connectors on Both Ends, 5 Conductor Shielded Round 24 AWG Twisted Pair Cable</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                </div>
        </div>
    </section>
</article>
```

#Image with text below - Homepage News & Resources

|Locations Used|
|---------|
|Homepage|

|Classes|
|---------|
|article-underline|
|media|

```
<div class="article-underline " onmouseover="$(this).css('border-color' , '#1C5A7C')" onmouseout="$(this).css('border-color' , '#ddd')" style="border-color: rgb(195, 195, 195);">
    <a href="/News/CombinedNews/GetNews/111?newsType=pressrelease" data-eventaction='News' data-eventlabel='Open Frame Power Supplies Ranging from 30~85 W are Efficient and...'>
	    <div class="media">
		    <div class="line">
			    <div class="unit size1of1 img">
				    <img src="/products/image/getimage/1837?typecode=m&amp;width=226" alt="Open Frame Power Supplies Ranging from 30~85 W are Efficient and...">
			    </div>
			    <div class="unit size1of1 bd">
				    <p><small>5/13/2014</small></p>       
				    <p>Open Frame Power Supplies Ranging from 30~85 W are Efficient and...</p>
			    </div>
		    </div>
	    </div>
    </a>
</div>
```

|Locations Used|
|---------|
|Homepage|

|Classes|
|---------|
|media|
|line|

```
<div class="media">
	<div class="line">
		<div class="unit size1of1 center">
			<img src="/products/image/getimage/1809?typecode=m" alt="" style="max-height:103px;">
		</div>
		<div class="unit size1of1 bd">
			<p class="center"><strong>Breaking the 100A Barrier in POL Converters Requires Fresh Thinking</strong></p>       
			<p></p><p><span>In this article published by&nbsp;</span><em>EE Times</em><span>, CUI’s Director of...</span></p>
		</div>
	</div>
</div>								
```

#Image with text below - Landing Pages

|Locations Used|
|-------|
|Landing Pages|

|Classes|
|-------|
|app-img-small|

```
<div class="unit size1of2">
    <div class="content">
        <div class="unit size1of1">
            <img class="app-img-small" src="/products/image/getimage/1312" alt="Internal Ac-Dc Medical Power Supplies">
            <h5>Internal Ac-Dc Medical Power Supplies</h5>
        </div>

        <ul>
                <li class="bulletli">20 W ~ 400 W</li>
                <li class="bulletli">60601-1 3<sup>rd</sup> edition certified</li>
                <li class="bulletli">Power densities as high as 19 W per in³</li>
                <li class="bulletli">No load power consumption as low as 0.3 W</li>
                <li class="bulletli">Open frame, metal enclosed, encapsulated packages</li>
        </ul>     
        <div>
            <a class="learn-more" href="/Internal-Ac-Dc-Medical-Power-Supplies">
                <span class="underline">Learn More</span>&nbsp;<span class="black-arrow">►</span>
            </a>
        </div>
    </div>
</div>
```

#Image with text below - AC-DC & Dc-Dc landing pages

|Locations Used|
|----|
|landing page|

|classes|
|-----|
|landing-img|

```
<article class="unit size1of4">
    <div class="content">
        <div class="line underline clearfix">
            <div class="unit size1of1">
                <a href="/catalog/power/dc-dc-converters/isolated">
                    <img class="landing-img" src="/products/image/getcategoryimage/299?typecode=m&amp;width=118" alt="Isolated">
                </a>
            </div>
            <div class="unitRight size1of1">
                <h4 class="sub-category-title"><a href="/catalog/power/dc-dc-converters/isolated">Isolated</a></h4>
            </div>
        </div>
        <p class="sub-cat-text">Our diverse line of isolated dc-dc converters, spanning over 1000 models, provides a range of power, package, input voltage, output voltage, and isolation voltage options. <a class="learn-more" href="/catalog/power/dc-dc-converters/isolated"><span class="underline">Learn More</span>&nbsp;<span class="black-arrow">►</span></a></p>
    </div>
</article>
```

#Image with text below - DC-DC Product
|Locations Used|
|-----|
|category pages|

|Classes|
|----|
|content|
|prod|

```
<div class="unit size1of3 listing">
    <div class="content">
        <a href="/catalog/power/dc-dc-converters/non-isolated/0.5-a-output-current">
            <img class="outline" src="/products/image/getcategoryimage/126?typecode=m&amp;width=229" alt="0.5 A Output Current" style="background-color:#ffffff">
        </a>
        <h4 class="center"><a href="/catalog/power/dc-dc-converters/non-isolated/0.5-a-output-current">0.5 A Output Current</a></h4>
    </div>
</div>
```

```
<div class="unit size1of3 listing">
    <div class="content">
        <div class="prod">
            <a href="/product/power/dc-dc-converters/non-isolated/0.5-a-output-current/p7805-s-series">
                <img class="outline" src="/products/image/getproductimage/168347?typecode=m&amp;width=229" alt="P7805-S Series" style="background-color:#ffffff">
            </a>
            <h4 class="center"><a href="/product/power/dc-dc-converters/non-isolated/0.5-a-output-current/p7805-s-series">P7805-S Series</a></h4>
            <p class="center"><small>500 mA Output Current, 4.75~32 Vdc Input, 3 Pin SIP, Non-Isolated, Dc-Dc Converter</small></p>
        </div>
    </div>
</div>
```

#Image with text below - Resource hub (right bar)
|Locations Used|
|-------|
|Resource hub|

|Classes|
|-----|
|line|
|center|

```
<div class="unit size1of1">    
    <article class="line" style="padding:6% 10%;">
        <a href="/resources/product-resources/intermediate-bus-dc-dc-converters---apec-2013" target="_blank" class="resource-Video  resource-link" data-eventaction='' data-eventlabel='Intermediate Bus Dc-Dc Converters – APEC 2013'>
                                    
            <div class="center">
                <div style="padding-top:1%;">
                    <img src="/products/image/getimage/1575?typecode=m" alt="Intermediate Bus Dc-Dc Converters – APEC 2013">
                </div>                                        
            </div>   
			<div class="unit size1of1 bd"> 
                <p style="line-height: 17px;padding-left:2%;padding-top:2%;">
                                       
					<span class="video-name"> Intermediate Bus Dc-Dc Converters – APEC 2013</span>
                </p>                                            
            </div>                                 
        </a>
    </article>
</div>
```

#Stock Check and 3D Catalog Preview - In Table

|Locations Used|
|-----|
|Stock Check|
|3D Catalog|

|Classes|
|-----|
|modelnumber|
|outline|

```
<td class="modelnumber">  <img src="/Products/Image/GetProductImage/308?typeCode=M&amp;width=40" class="outline">  </td>
```

#Stock Check and 3D Catalog Preview - On Top

|Locations Used|
|-----|
|Stock Check|
|3D Catalog|

|Classes|
|-----|
|modelnumber|
|outline|

```
<img src="/Products/Image/GetProductImage/168797?typeCode=M&amp;width=40" style="float:left;background:white;margin-top: 0.2%;" class="outline">
```

#Parametric Search Images

|Locations Used|
|-------|
|Parametric search results|

|Classas|
|-----|
|productLink|

```
<a class="productLink" href="/Product/components/buzzers/audio-transducers/magnetic/CC-0601">
    <img class="outline whitebackground" src="/products/image/getproductimage/66?typecode=m&amp;width=60" alt="CC-0601">
</a>
```

#Resource Hub Images

|Locations Used|
|------|
|Resource Hub|

|Classes|
|-------|
|img|
|unit|

```
<div class="unit img" style="max-width:20%;padding-top:1%;">
    <img src="/products/image/getimage/1692?typecode=m" alt="Power Quick Guide">
</div>
```

#News and Events - Latest


|Locations Used|
|-----|
|News & Events|

|Classes|
|--------|
|img|

|Note|
|-----|
|Changed class size1of1 to size1of4 so image wouldn't appear so big here.  On News page it is wrapped in an element with class size1of4|

```

<div class="unit size1of4 img">
	<img src="/images/APEC-2014.jpg" alt="APEC 2014" style="width:100%;">
</div>
```

#News and Events - All News

```
<div style="float:left;padding-right:1%;">
	<img src="/products/image/getimage/1837?typecode=m&amp;width=60" alt="Open Frame Power Supplies Ranging from 30~85 W are Efficient and Economical">
</div>
```

#Parametric Search Landing

|Locations Used|
|----|
|Parametric-search|

|Classes|
|----|
|mediav |
|content |
|parasearch-cat|

```
<article class="unit size1of3">
    <div class="mediav content parasearch-cat">
        <img src="/products/image/getcategoryimage/1?typecode=ps" alt="Power">
   
    </div> <!-- end media block -->
</article>
```

#Search Results Image

|Locations Used|
|-----------|
|Parametric Search Results|

|Classes|
|-------|
|productLink|
|outline|

```
<td style="min-width:105px; text-align: center;" class=" ">
						<a class="productLink" href="/Product/power/ac-dc-power-supplies/internal/1~50-w/VSK-S1-Series/VSK-S1-3R3U">
							
                        </a>
						<br>
                        <a class="productLink" href="/Product/power/ac-dc-power-supplies/internal/1~50-w/VSK-S1-Series/VSK-S1-3R3U">
                            <img class="outline whitebackground" src="/products/image/getproductimage/167454?typecode=m&amp;width=60" alt="VSK-S1-3R3U">
						</a>
                </td>
```

#RFQ Image

|Locations Used|
|------|
|RFQ page|

|Classes|
|-----|
|unit|
|size1of6|

```
<section class="wrapper"> <!-- This will be several parent elements up from the image, here for correct sizing -->
    <div class="unit size1of6">
	    <img style="width:90%;background:white;" class="outline" src="/products/image/getproductimage/168607?typecode=m" alt="Product Image">
    </div>
</section>
```

#Hero Images

|Locations Used|
|------|
|Landing Pages|
|Industry Pages|

|Classes|
|------|
||

```
<img src="/images/Efficiency-Standards_hero.jpg" alt="Efficiency Standards" style="width:100%">
<img src="/products/image/getimage/1228?typecode=m" alt="Medical">
<img src="/products/image/getimage/1227?typecode=m" alt="Industrial">
<img src="/products/image/getimage/1229?typecode=m" alt="Networking">

```

#Resources Link

|Locations Used|
|------|
|Category pages|
|Product pages|
|landing pages|

|Classes|
|------|
||

```
<img src="/images/modernicons/media-on.png" alt="Novum® Advanced Power Resources">
<img src="/images/resource-bttn-plain.png" alt="Power Resources">
```
*/

.sub-cat-img
{
    width: 50%;
    margin: 0 auto;
}

.media .img
{
    float: left;
}

.mediav .img
{
    margin: 0 auto;
    clear: both;
}

.media .img img
{
    display: block;
}

.mediav .img img
{
    display: block;
    margin: 0 auto;
    padding: 10px 0 20px;
}

.logo
{
    line-height: .8;
}

.logo .img img
{
    padding: auto 0;
}
.video-playlist img {
    max-width: 80px;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
    max-width: 100%;
    display: block;
}
.prod-img {
    margin: 0 auto;
    padding: 0 auto;
    text-align: center; 
}

.prod-img img
{
    max-width: 100%;
}

.landing-img {
    width: 50%;
    margin: 0 auto;
    padding-left: 25%;
}

.app-img {
    width: 50%;
}

.app-img-small {
    width: 25%;
}

.landing-img-large {
    width: 70%;
    margin: 0 auto;
    padding-left: 15%;
}
.accesory-img {
    padding-right: 10px;
    margin-top: 6%;
}

.accesory-img img {
    background: white;
}
/* *******************************************************************
**
** Styles for the Product pages
**
******************************************************************** */
.prod-resources-img {
    max-width: 25px;
    max-height: 25px;
}

/* *******************************************************************
**
** Styles for the Company pages
**
******************************************************************** */
.community img {
    padding-top: 10px;
}
.cui img {
    border: 1px solid #585858;
    margin: 10px 0;
}
/* *******************************************************************
**
** Styles for the Product Landing Pages
**
******************************************************************** */
.prod-landing-img {
    margin: 0 auto;
    padding-top: 20px;
}

.centerimg {
    display: block;
    margin: 0 auto;
    padding: 0 auto;
}


.tradeshow-image
{
    width: 231px; float:left; padding-right: 40px;
}

.ProductResource-FeaturedImage
{
    width: 100%;
}

.dash-box > div img
{
    width: 75%;
}

.img-gray
{
    background: #e6e6e6;
    margin: 4%;
    margin-top: 0px;
}

.dash-box > div .img-gray img
{
    width: 50%;
}


.resource-hub-image {
    height: 200px;
}

@media (min-width: 1400px) {
    .resource-hub-image {
        height: 160px;
    }
}

@media (min-width: 1300px) {
    .resource-hub-image {
        height: 140px;
    }
}

@media (min-width: 992px) {
    .resource-hub-image {
        height: 115px;
    }
}


    
