@{
    ViewBag.Title = "Weather Icons";
    ViewBag.Description = "Weather Icons";
    Layout = "~/Views/Shared/_Default.cshtml";
}

<div class="row searchhelpbar">
    <div class="col-sm-8 help-box">
        <div class="alert alert-success alert-radius-bordered alert-shadowed">
            <p>Place weather icons just about anywhere with the <code>&lt;i&gt;</code> tag.</p>
            <p>
                <code>
                    <span class="nt">&lt;i</span>
                    <span class="na">class=</span><span class="s">"wi-day-rain-mix"</span><span class="nt">&gt;&lt;/i&gt;</span>

                </code>
            </p>
        </div>
    </div>
    <div class="col-sm-4 search-box">
        <div>
            <span class="input-icon">
                <input type="text" class="form-control" id="weathericon-search" placeholder="Search">
                <i class="glyphicon glyphicon-search circular success"></i>
            </span>
        </div>
    </div>
</div>
<div class="horizontal-space space-sm"></div>
<!--Row-->
<div class="row">
    <div class="col-sm-12">
        <div class="widget">
            <div class="widget-header bordered-top bordered-palegreen">
                <span class="widget-caption">Weather Icons</span>
                <div class="widget-buttons">
                    <a href="#" data-toggle="maximize">
                        <i class="fa fa-expand"></i>
                    </a>
                    <a href="#" data-toggle="collapse">
                        <i class="fa fa-minus"></i>
                    </a>
                    <a href="#" data-toggle="dispose">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body">
                <div class="row">
                    <div class="col-sm-12">
                        <h4>New in V1.2</h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-smoke"></i></div>
                            <div class="class">wi-smoke</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-dust"></i></div>
                            <div class="class">wi-dust</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-snow-wind"></i></div>
                            <div class="class">wi-snow-wind</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-snow-wind"></i></div>
                            <div class="class">wi-day-snow-wind</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-snow-wind"></i></div>
                            <div class="class">wi-night-snow-wind</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-snow-wind"></i></div>
                            <div class="class">wi-night-alt-snow-wind</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-sleet-storm"></i></div>
                            <div class="class">wi-day-sleet-storm</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-sleet-storm"></i></div>
                            <div class="class">wi-night-sleet-storm</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-sleet-storm"></i></div>
                            <div class="class">wi-night-alt-sleet-storm</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-snow-thunderstorm"></i></div>
                            <div class="class">wi-day-snow-thunderstorm</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-snow-thunderstorm"></i></div>
                            <div class="class">wi-night-snow-thunderstorm</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-snow-thunderstorm"></i></div>
                            <div class="class">wi-night-alt-snow-thunderstorm</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-solar-eclipse"></i></div>
                            <div class="class">wi-solar-eclipse</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-lunar-eclipse"></i></div>
                            <div class="class">wi-lunar-eclipse</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-meteor"></i></div>
                            <div class="class">wi-meteor</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-hot"></i></div>
                            <div class="class">wi-hot</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-hurricane"></i></div>
                            <div class="class">wi-hurricane          </div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-smog"></i></div>
                            <div class="class">wi-smog</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-alien"></i></div>
                            <div class="class">wi-alien</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-snowflake-cold"></i></div>
                            <div class="class">wi-snowflake-cold</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-stars"></i></div>
                            <div class="class">wi-stars</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-partly-cloudy"></i></div>
                            <div class="class">night-partly-cloudy</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-moon-full"></i></div>
                            <div class="class">wi-moon-full</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-moon-waxing-gibbous"></i></div>
                            <div class="class">wi-moon-waxing-gibbous</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-moon-waxing-quarter"></i></div>
                            <div class="class">wi-moon-waxing-quarter</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-moon-waxing-crescent"></i></div>
                            <div class="class">wi-moon-waxing-crescent</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-moon-young"></i></div>
                            <div class="class">wi-moon-young</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-moon-new"></i></div>
                            <div class="class">wi-moon-new</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-moon-old"></i></div>
                            <div class="class">wi-moon-old</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-moon-waning-crescent"></i></div>
                            <div class="class">wi-moon-waning-crescent</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-moon-waning-quarter"></i></div>
                            <div class="class">wi-moon-waning-quarter</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-moon-waning-gibbous"></i></div>
                            <div class="class">wi-moon-waning-gibbous</div>
                        </div>
                    </div>
                </div>
                <hr class="wide" />
                <div class="row">
                    <div class="col-sm-12">
                        <h4>Day / Sunny</h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-cloudy-gusts"></i></div>
                            <div class="class">wi-day-cloudy-gusts</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-cloudy-windy"></i></div>
                            <div class="class">wi-day-cloudy-windy</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-cloudy"></i></div>
                            <div class="class">wi-day-cloudy</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-fog"></i></div>
                            <div class="class">wi-day-fog</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-hail"></i></div>
                            <div class="class">wi-day-hail</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-lightning"></i></div>
                            <div class="class">wi-day-lightning</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-rain-mix"></i></div>
                            <div class="class">wi-day-rain-mix</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-rain-wind"></i></div>
                            <div class="class">wi-day-rain-wind</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-rain"></i></div>
                            <div class="class">wi-day-rain</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-showers"></i></div>
                            <div class="class">wi-day-showers</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-snow"></i></div>
                            <div class="class">wi-day-snow</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-sprinkle"></i></div>
                            <div class="class">wi-day-sprinkle</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-sunny-overcast"></i></div>
                            <div class="class">wi-day-sunny-overcast</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-sunny"></i></div>
                            <div class="class">wi-day-sunny</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-storm-showers"></i></div>
                            <div class="class">wi-day-storm-showers</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-day-thunderstorm"></i></div>
                            <div class="class">wi-day-thunderstorm</div>
                        </div>
                    </div>
                </div>
                <hr class="wide" />
                <div class="row">
                    <div class="col-sm-12">
                        <h4>Neutral / Cloudy</h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-cloudy-gusts"></i></div>
                            <div class="class">wi-cloudy-gusts</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-cloudy-windy"></i></div>
                            <div class="class">wi-cloudy-windy</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-cloudy"></i></div>
                            <div class="class">wi-cloudy</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-fog"></i></div>
                            <div class="class">wi-fog</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-hail"></i></div>
                            <div class="class">wi-hail</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-lightning"></i></div>
                            <div class="class">wi-lightning</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-rain-mix"></i></div>
                            <div class="class">wi-rain-mix</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-rain-wind"></i></div>
                            <div class="class">wi-rain-wind</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-rain"></i></div>
                            <div class="class">wi-rain</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-showers"></i></div>
                            <div class="class">wi-showers</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-snow"></i></div>
                            <div class="class">wi-snow</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-sprinkle"></i></div>
                            <div class="class">wi-sprinkle</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-storm-showers"></i></div>
                            <div class="class">wi-storm-showers</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-thunderstorm"></i></div>
                            <div class="class">wi-thunderstorm</div>
                        </div>
                    </div>
                </div>
                <hr class="wide" />
                <div class="row">
                    <div class="col-sm-12">
                        <h4>Night / Moons</h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-cloudy-gusts"></i></div>
                            <div class="class">wi-night-alt-cloudy-gusts</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-cloudy-windy"></i></div>
                            <div class="class">wi-night-alt-cloudy-windy</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-hail"></i></div>
                            <div class="class">wi-night-alt-hail</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-lightning"></i></div>
                            <div class="class">wi-night-alt-lightning</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-rain-mix"></i></div>
                            <div class="class">wi-night-alt-rain-mix</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-rain-wind"></i></div>
                            <div class="class">wi-night-alt-rain-wind</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-rain"></i></div>
                            <div class="class">wi-night-alt-rain</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-showers"></i></div>
                            <div class="class">wi-night-alt-showers</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-snow"></i></div>
                            <div class="class">wi-night-alt-snow</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-sprinkle"></i></div>
                            <div class="class">wi-night-alt-sprinkle</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-storm-showers"></i></div>
                            <div class="class">wi-night-alt-storm-showers</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-alt-thunderstorm"></i></div>
                            <div class="class">wi-night-alt-thunderstorm</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-clear"></i></div>
                            <div class="class">wi-night-clear</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-cloudy-gusts"></i></div>
                            <div class="class">wi-night-cloudy-gusts</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-cloudy-windy"></i></div>
                            <div class="class">wi-night-cloudy-windy</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-cloudy"></i></div>
                            <div class="class">wi-night-cloudy</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-hail"></i></div>
                            <div class="class">wi-night-hail</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-lightning"></i></div>
                            <div class="class">wi-night-lightning</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-rain-mix"></i></div>
                            <div class="class">wi-night-rain-mix</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-rain-wind"></i></div>
                            <div class="class">wi-night-rain-wind</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-rain"></i></div>
                            <div class="class">wi-night-rain</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-showers"></i></div>
                            <div class="class">wi-night-showers</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-snow"></i></div>
                            <div class="class">wi-night-snow</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-sprinkle"></i></div>
                            <div class="class">wi-night-sprinkle</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-storm-showers"></i></div>
                            <div class="class">wi-night-storm-showers</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-thunderstorm"></i></div>
                            <div class="class">wi-night-thunderstorm</div>
                        </div>
                    </div>
                </div>
                <hr class="wide" />
                <div class="row">
                    <div class="col-sm-12">
                        <h4>Miscellaneous Weather </h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-celsius"></i></div>
                            <div class="class">wi-celcius</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-cloud-down"></i></div>
                            <div class="class">wi-cloud-down</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-cloud-refresh"></i></div>
                            <div class="class">wi-cloud-refresh</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-cloud-up"></i></div>
                            <div class="class">wi-cloud-up</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-cloud"></i></div>
                            <div class="class">wi-cloud</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-degrees"></i></div>
                            <div class="class">wi-degrees</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-down-left"></i></div>
                            <div class="class">wi-down-left</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-down"></i></div>
                            <div class="class">wi-down</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-fahrenheit"></i></div>
                            <div class="class">wi-fahrenheit</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-horizon-alt"></i></div>
                            <div class="class">wi-horizon-alt</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-horizon"></i></div>
                            <div class="class">wi-horizon</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-left"></i></div>
                            <div class="class">wi-left</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-lightning"></i></div>
                            <div class="class">wi-lightning</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-night-fog"></i></div>
                            <div class="class">wi-night-fog</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-refresh-alt"></i></div>
                            <div class="class">wi-refresh-alt</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-refresh"></i></div>
                            <div class="class">wi-refresh</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-right"></i></div>
                            <div class="class">wi-right</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-sprinkles"></i></div>
                            <div class="class">wi-sprinkles</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-strong-wind"></i></div>
                            <div class="class">wi-strong-wind</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-sunrise"></i></div>
                            <div class="class">wi-sunrise</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-sunset"></i></div>
                            <div class="class">wi-sunset</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-thermometer-exterior"></i></div>
                            <div class="class">wi-thermometer-exterior</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-thermometer-internal"></i></div>
                            <div class="class">wi-thermometer-internal</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-thermometer"></i></div>
                            <div class="class">wi-thermometer</div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-tornado"></i></div>
                            <div class="class">wi-tornado</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-up-right"></i></div>
                            <div class="class">wi-up-right</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-up"></i></div>
                            <div class="class">wi-up</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-wind-east"></i></div>
                            <div class="class">wi-wind-east</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-wind-north-east"></i></div>
                            <div class="class">wi-wind-north-east</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-wind-north-west"></i></div>
                            <div class="class">wi-wind-north-west</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-wind-north"></i></div>
                            <div class="class">wi-wind-north</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-wind-south-east"></i></div>
                            <div class="class">wi-wind-south-east</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-wind-south-west"></i></div>
                            <div class="class">wi-wind-south-west</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-wind-south"></i></div>
                            <div class="class">wi-wind-south</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-wind-west"></i></div>
                            <div class="class">wi-wind-west</div>
                        </div>
                        <div class="weathericons">
                            <div class="icon"><i class="wi wi-windy"></i></div>
                            <div class="class">wi-windy</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--Row Ends-->

@section PageScripts{
    <script>
    /*WeatherIcon Search*/
    $("#weathericon-search")
        .keyup(function () {
            var term = $.trim(this.value);
            if (term === "") {
                $(".weathericons")
                    .show();
            } else {
                $('.weathericons')
                    .hide();
                $('.weathericons i[class*="' + term + '"]')
                    .parent()
                    .parent()
                    .show();
            }
        });
</script>

}