text:
<!doctype html>

		<meta charset="utf-8">

		<title>Study Session | Reading 33 | Commodity Forwards and Futures</title>

		<meta name="description" content="Chartered Financial Analyst Level 3 study materials">
		<meta name="author" content="MacLane Wilkison">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/default.css" id="theme">

		<link rel="stylesheet" href="lib/css/zenburn.css">

Reading 33

Commodity Forwards and Futures

						Created for Alchemists Academy by MacLaneWilkison

Introduction

F0,T = S0e(r-q)T

Forward curve/forward strip

Contango

Backwardation

						The forward curve is the set of prices for different expiration dates for a given commodity. Contango refers to an upward-sloping forward curve. Backwardation refers to a downward-sloping forward curve.

Equilibrium Pricing

Synthetic commodities

Long forward/long bond: ST - F0,T + F0,T = ST

F0,T = E0(ST)e(r-a)T

						We can enter into a long forward contract and go long a zero-coupon bond with a payoff of the futures price in order to create a synthetic commodity. We can also derive the equation for the forward price which is the discountd expected spot price (where r is the risk-free rate and a is the commodity discount rate)

Lease Rate

Compensation required by an investor in exchange for lending a commodity (cost of borrowing)

F0,T = S0e(r-q)T

q = r - (1/T)ln(F0,T/S)

1 = (1 + r)/(F0,T/S)1/T - 1

						The lease rate is comparable to the dividend yield on financial assets but it isn't directly observable and must be estimated from the observed forward price.

Cash-and-Carry Arbitrage

Reverse Cash-and-Carry Arbitrage

Carry/Storage Costs

Sell today or sell tomorrow?

Compare PV of selling at time T with spot price

Indifference point: S0 = e-rT[F0,T - λ(0,T)]

F0,T ≥ S0erT + λ(0,T)

F0,T = S0e(r+λ)T + λ(0,T)

						S0 = revenue from selling today; F - λ(0,T) = net revenue from selling at time T; λ(0,T) = future value of storage costs. Effectively, this is compensation for the cost of holding a commodity

Convenience Yield

Definition: Extra nonmonetary return that is generated by holding an asset

Business reasons for holding a commodity

No-arbitrage region

S0e(r+λ)T ≥ F0,T ≥ S0e(r+λ-c)T

						For example, business reasons for holding a commodity may include insurance against a potential disruption in supply. In some cases, there may be no way for an investor to earn the convenience yield (they don't have a business reason for holding an asset and are unable to sell it to someone who does), thus leading to a no-arbitrage region rather than a single point.

Commodity Spreads

Commodities are often used as inputs in the creation of other commodities

Soybeans -> soybean meal/oil (crush spread)

Crude oil -> petroleum products (crack spread)

Hedging Strategies

Basis risk

Strip hedge

Stack hedge

						Basis risk arises when the derivative contract used for hedging purposes does not exactly match what is being hedged (this could be due to differences in delivery location/date or grade of deliverable, among other variables). For example, airlines often use crude oil futures to hedge jet fuel prices. A strip hedge is created by matching individual obligations with a futures contract of matching maturity and quantity. A stack hedge is created by entering futures contracts with a single maturity structured to offset changes in the PV of future obligations. Combining a series of stack hedges is referred to as a stack-and-roll.

THE END

AlchemistsAcademy.com


text:
package com.bitdubai.fermat_p2p_api.layer.all_definition.communication.commons.contents;

import com.bitdubai.fermat_p2p_api.layer.p2p_communication.commons.contents.FermatPacket;
import com.bitdubai.fermat_p2p_api.layer.p2p_communication.commons.enums.FermatPacketType;
import com.google.gson.Gson;

import java.io.Serializable;
import java.util.Objects;
import java.util.UUID;

/**
 * The Class com.bitdubai.fermat_p2p_api.layer.all_definition.communication.cloud.FermatPacketCommunication implements
 * the package to transport the data
 *

 *
 * Created by Roberto Requena - (rart3001@gmail.com) on 02/09/15.
 *
 * @version 1.0
 */
public class FermatPacketCommunication implements FermatPacket, Serializable {

    /**
     * Represent the serialVersionUID
     */
    private static final long serialVersionUID = 1L;

    /**
     * Represent the id
     */
    private UUID id;

    /**
     * Represent the sender
     */
	private String sender;

    /**
     * Represent the destination
     */
	private String destination;

    /**
     * Represent the fermatPacketType
     */
	private FermatPacketType fermatPacketType;

    /**
     * Represent the messageContent
     */
	private String messageContent;

    /**
     * Represent the signature
     */
	private String signature;

    /**
     * Constructor
     */
    public FermatPacketCommunication() {
        this.id = UUID.randomUUID();
        this.destination = null;
        this.sender = null;
        this.fermatPacketType = null;
        this.messageContent = null;
        this.signature = null;
    }

    /**
     * Constructor with parameters
     *
     * @param destination
     * @param sender
     * @param fermatPacketType
     * @param messageContent
     * @param signature
     */
    public FermatPacketCommunication(String destination, String sender, FermatPacketType fermatPacketType, String messageContent, String signature) {
        this.id = UUID.randomUUID();
        this.destination = destination;
        this.sender = sender;
        this.fermatPacketType = fermatPacketType;
        this.messageContent = messageContent;
        this.signature = signature;
    }

    /**
     * (non-Javadoc)
     * @see FermatPacket#getId()
     */
    @Override
    public UUID getId() {
        return id;
    }

    /**
     * (non-Javadoc)
     * @see FermatPacket#getDestination()
     */
    @Override
    public String getDestination() {
        return destination;
    }

    /**
     * Set the destination of the packet
     *
     * @param destination
     */
    public void setDestination(String destination) {
        this.destination = destination;
    }

    /**
     * (non-Javadoc)
     * @see FermatPacket#getFermatPacketType()
     */
    @Override
    public FermatPacketType getFermatPacketType() {
        return fermatPacketType;
    }

    /**
     * Set the fermatPacketType of the packet
     *
     * @param type
     */
    public void setFermatPacketType(FermatPacketType type) {
        this.fermatPacketType = type;
    }

    /**
     * (non-Javadoc)
     * @see FermatPacket#getSignature()
     */
    @Override
    public String getSignature() {
        return signature;
    }

    /**
     * Set the signature of the packet
     *
     * @return String
     */
    public void setSignature(String signature) {
        this.signature = signature;
    }

    /**
     * (non-Javadoc)
     * @see FermatPacket#getSender()
     */
    @Override
    public String getSender() {
        return sender;
    }

    /**
     * Set the sender of the packet
     *
     * @param sender
     */
    public void setSender(String sender) {
        this.sender = sender;
    }

    /**
     * (non-Javadoc)
     * @see FermatPacket#getMessageContent()
     */
    @Override
    public String getMessageContent() {
        return messageContent;
    }

    /**
     * Set the message Content of the packet
     *
     * @param messageContent
     */
    public void setFermatMessage(String messageContent) {
        this.messageContent = messageContent;
    }

    /**
     * (non-Javadoc)
     * @see FermatPacket#toJson()
     */
    public String toJson(){

        Gson gson = new Gson();
        return gson.toJson(this);
    }

    /**
     * (non-Javadoc)
     * @see FermatPacket#fromJson(String)
     */
    @Override
    public FermatPacket fromJson(String json){

        Gson gson = new Gson();
        return gson.fromJson(json, FermatPacketCommunication.class);

    }

    /**
     * (non-Javadoc)
     * @see Object#equals(Object)
     */
    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (!(o instanceof FermatPacketCommunication)) return false;
        FermatPacketCommunication that = (FermatPacketCommunication) o;
        return Objects.equals(getId(), that.getId()) &&
                Objects.equals(getSender(), that.getSender()) &&
                Objects.equals(getDestination(), that.getDestination()) &&
                Objects.equals(getFermatPacketType(), that.getFermatPacketType()) &&
                Objects.equals(getMessageContent(), that.getMessageContent()) &&
                Objects.equals(getSignature(), that.getSignature());
    }

    /**
     * (non-Javadoc)
     * @see Object#hashCode()
     */
    @Override
    public int hashCode() {
        return Objects.hash(getId(), getSender(), getDestination(), getFermatPacketType(), getMessageContent(), getSignature());
    }

    /**
     * (non-Javadoc)
     * @see Object#toString()
     */
    @Override
    public String toString() {
        return "FermatPacketCommunication{" +
                "destination='" + destination + '\'' +
                ", id=" + id +
                ", sender='" + sender + '\'' +
                ", fermatPacketType=" + fermatPacketType +
                ", messageContent=" + messageContent +
                ", signature='" + signature +
                '}';
    }
}

redpajama_set_name: RedPajamaGithub


text:
import * as Lint from 'tslint';
import * as ts from 'typescript';
import { NgWalker } from './angular/ngWalker';
import { ComponentMetadata, DirectiveMetadata } from './angular/metadata';
export declare class Rule extends Lint.Rules.AbstractRule {
    static metadata: Lint.IRuleMetadata;
    static INJECTABLE_FAILURE_STRING: string;
    apply(sourceFile: ts.SourceFile): Lint.RuleFailure[];
}
export declare class ClassMetadataWalker extends NgWalker {
    private rule;
    className: string;
    isInjectable: boolean;
    constructor(sourceFile: ts.SourceFile, rule: Rule);
    visitNgInjectable(classDeclaration: ts.ClassDeclaration, decorator: ts.Decorator): void;
    protected visitNgDirective(metadata: DirectiveMetadata): void;
    protected visitNgPipe(controller: ts.ClassDeclaration, decorator: ts.Decorator): void;
    protected visitNgComponent(metadata: ComponentMetadata): void;
    protected visitNgInput(property: ts.PropertyDeclaration, input: ts.Decorator, args: string[]): void;
    protected visitNgOutput(property: ts.PropertyDeclaration, input: ts.Decorator, args: string[]): void;
    protected visitNgHostBinding(property: ts.PropertyDeclaration, decorator: ts.Decorator, args: string[]): void;
    protected visitNgHostListener(method: ts.MethodDeclaration, decorator: ts.Decorator, args: string[]): void;
    protected visitNgContentChild(property: ts.PropertyDeclaration, input: ts.Decorator, args: string[]): void;
    protected visitNgContentChildren(property: ts.PropertyDeclaration, input: ts.Decorator, args: string[]): void;
    protected visitNgViewChild(property: ts.PropertyDeclaration, input: ts.Decorator, args: string[]): void;
    protected visitNgViewChildren(property: ts.PropertyDeclaration, input: ts.Decorator, args: string[]): void;
    private generateFailure(start, width, failureConfig);
}


text:
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,
button,
input,
select,
textarea {
  color: #222;
}
.mainbackgroundcolor {
  background-color: #2d2d2d;
  background: -prefix-linear-gradient(top, #0f0f0f, #2d2d2d);
  background-image: linear-gradient(top, #0f0f0f, #2d2d2d);
  background-image: -webkit-linear-gradient(top, #0f0f0f, #2d2d2d);
  background-image: -moz-linear-gradient(top, #0f0f0f, #2d2d2d);
  background-image: -ms-linear-gradient(top, #0f0f0f, #2d2d2d);
  background-repeat: no-repeat;
}
.maroongradient {
  background-color: #330000;
  background: -prefix-linear-gradient(top, #330000, #990000, #330000);
  background-image: linear-gradient(top, #330000, #990000, #330000);
  background-image: -webkit-linear-gradient(top, #330000, #990000, #330000);
  background-image: -moz-linear-gradient(top, #330000, #990000, #330000);
  background-image: -ms-linear-gradient(top, #330000, #990000, #330000);
}
.redgradient {
  background-color: #330000;
  background: -prefix-linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: -webkit-linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: -moz-linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: -ms-linear-gradient(top, #ff0000 0, #990000, #ff0000);
}
.creamgradient {
  background-color: #F5B483;
  background: -prefix-linear-gradient(top, #f5b483, white);
  background-image: linear-gradient(top, #f5b483, white);
  background-image: -webkit-linear-gradient(top, #f5b483, white);
  background-image: -moz-linear-gradient(top, #f5b483, white);
  background-image: -ms-linear-gradient(top, #f5b483, white);
}
html {
  background-color: #2d2d2d;
  background: -prefix-linear-gradient(top, #0f0f0f, #2d2d2d);
  background-image: linear-gradient(top, #0f0f0f, #2d2d2d);
  background-image: -webkit-linear-gradient(top, #0f0f0f, #2d2d2d);
  background-image: -moz-linear-gradient(top, #0f0f0f, #2d2d2d);
  background-image: -ms-linear-gradient(top, #0f0f0f, #2d2d2d);
  background-repeat: no-repeat;
}
/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
img {
  vertical-align: middle;
}
/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== *50
.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
@font-face {
  font-family: bodytextFont;
  src: url("../fonts/GILC____.ttf");
}
@font-face {
  font-family: openingFont;
  src: url("../fonts/HARLOWSI.ttf");
  font-weight: regular;
}
@font-face {
  font-family: buttonFont;
  src: url("../fonts/BERNHC.ttf");
}
@font-face {
  font-family: buttonFontIE;
  src: url("../fonts/Rokkitt.otf");
}
@font-face {
  font-family: openingFontIE;
  src: url("../fonts/AlexBrush-Regular-OTF.otf");
}
@font-face {
  font-family: bodytextFontIE;
  src: url("../fonts/NixieOne-Regular.otf");
  font-size: 0.5em;
  font-weight: bold;
}
/* Area */
.headerarea {
  position: fixed;
  top: 0px;
  background-image: url("../img/hatsornament-bg.png"), url("../img/zigzag-bg.png");
  background-repeat: repeat-x, repeat-x;
  background-position: 10px 70px, 0px 0px;
  background-size: 15em, 1em;
  margin: 0px;
  height: 130px;
  width: 100%;
  z-index: 100;
}
.contentwrap {
  width: 100%;
}
.content {
  min-width: 320px;
  max-width: 920px;
  padding-top: 160px;
  margin: 0px auto;
}
.content p {
  margin: 0;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}
.mainnavigation {
  height: 35px;
}
.footerarea {
  position: fixed;
  bottom: 0px;
  background-image: url("../img/footer-bg.png");
  background-repeat: repeat-x;
  width: 100%;
  height: 47px;
}
#loaderwrap {
  margin-top: 140px;
  height: 300px;
}
#gallery,
#tryit,
#loaderwrap {
  display: none;
}
.subnavbar {
  clear: both;
  height: 25px;
  padding-top: 4px;
  padding-bottom: 8px;
  border-top: solid 1px grey;
  margin-top: 10px;
  margin-bottom: 10px;
  vertical-align: middle;
}
#opening {
  display: none;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
#opening p {
  color: #ffffff;
  font-family: "Times New Roman", "Georgia", serif;
  line-height: 1.5em;
  font-style: italic;
  font-size: 1.3em;
}
/*Objects*/
.dialog-box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  background-color: #F5B483;
  background: -prefix-linear-gradient(top, #f5b483, white);
  background-image: linear-gradient(top, #f5b483, white);
  background-image: -webkit-linear-gradient(top, #f5b483, white);
  background-image: -moz-linear-gradient(top, #f5b483, white);
  background-image: -ms-linear-gradient(top, #f5b483, white);
  border: solid 2px #f5b483;
  box-shadow: rgba(0, 0, 0, 0.6) 5px 5px 10px;
}
.dialog-box p {
  font-size: 0.8em;
  padding: 0;
  margin: .4em;
}
.dialog-box img {
  margin: 0px auto;
}
.titlebutton,
.linkbutton {
  display: block;
  width: 120px;
  height: 30px;
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 2px 4px 2px 4px;
  border: solid 1px black;
  font-family: buttonFont, buttonFontIE, serif;
  font-size: 1.5em;
}
.titlebutton {
  background-color: #330000;
  background: -prefix-linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: -webkit-linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: -moz-linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: -ms-linear-gradient(top, #ff0000 0, #990000, #ff0000);
}
.linkbutton {
  background-color: #330000;
  background: -prefix-linear-gradient(top, #330000, #990000, #330000);
  background-image: linear-gradient(top, #330000, #990000, #330000);
  background-image: -webkit-linear-gradient(top, #330000, #990000, #330000);
  background-image: -moz-linear-gradient(top, #330000, #990000, #330000);
  background-image: -ms-linear-gradient(top, #330000, #990000, #330000);
  margin-top: -30px;
}
.linkbutton:hover {
  background-color: #330000;
  background: -prefix-linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: -webkit-linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: -moz-linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: -ms-linear-gradient(top, #ff0000 0, #990000, #ff0000);
}
.titlebutton:before,
.titlebutton:after {
  display: block;
  margin-top: 5px;
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("../img/button-end.png");
  background-repeat: no-repeat;
}
.titlebutton:before {
  float: left;
  margin-left: -15px;
}
.titlebutton:after {
  float: right;
  margin-right: -15px;
}
.linkbutton:before {
  display: inline-block;
  margin-top: -10px;
  margin-left: -80px;
  content: "";
  width: 80px;
  height: 30px;
  background-image: url("../img/pointerfinger.png");
  background-repeat: no-repeat;
}
#hatsbase {
  float: left;
  width: 200px;
  height: 220px;
  margin-left: 20px;
  background-color: white;
  background-image: url("../img/face-front-bald.jpg");
  background-repeat: no-repeat;
  background-position: 32px 26px;
  border: solid 2px black;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
#dropbox {
  position: absolute;
  width: 200px;
  height: 110px;
  background-image: url("../img/hatpattern.png");
  background-repeat: no-repeat;
  background-size: cover;
}
#dropbox img {
  max-width: 100%;
  max-height: 100%;
}
#dropboxtitlebar {
  position: absolute;
  display: block;
  width: 200px;
  height: 30px;
  background-color: black;
  color: white;
  text-align: center;
  text-overvlow: ellipsis;
  top: 190px;
  font-size: 1.2em;
}
#hatrack {
  position: fixed;
  bottom: 0px;
  width: 146px;
  height: 400px;
  z-index: 200;
}
#loader {
  display: none;
  margin: 240px auto;
}
#logo {
  padding-top: 10px;
}
.hattiles,
.hatlist {
  float: left;
  width: 840px;
  padding: 0px 0px 50px 20px;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 1.1em;
}
.hatlist {
  padding-left: 10px;
}
.hatlist > li {
  float: none;
  margin: 8px;
  padding: 0 0 10px 0;
  height: 50px;
  border-bottom: dotted 2px white;
}
.hatlist > li > img:hover {
  -webkit-transform: scale(1.1, 1.1);
  -webkit-transition: all 0.1s linear;
  -moz-transform: scale(1.1, 1.1);
  -moz-transition: all 0.1s linear;
  -ms-transform: scale(1.1, 1.1);
  -ms-transition: all 0.1s linear;
}
.hatlist > li > img {
  background-color: #F5B483;
  background: -prefix-linear-gradient(top, #f5b483, white);
  background-image: linear-gradient(top, #f5b483, white);
  background-image: -webkit-linear-gradient(top, #f5b483, white);
  background-image: -moz-linear-gradient(top, #f5b483, white);
  background-image: -ms-linear-gradient(top, #f5b483, white);
  float: left;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: solid 2px #990000;
  border-radius: 8px;
  cursor: pointer;
}
.hatlist > li > p {
  position: absolute;
  color: white;
  margin: 0px 0px 0px 100px;
  padding-top: 2px;
  text-align: left;
  line-height: 1em;
  text-overflow: ellipsis;
}
.hatthumbs {
  float: left;
  max-width: 122px;
  padding-left: 0px;
  overflow: hidden;
}
.hatthumbs > li {
  background-color: #F5B483;
  background: -prefix-linear-gradient(top, #f5b483, white);
  background-image: linear-gradient(top, #f5b483, white);
  background-image: -webkit-linear-gradient(top, #f5b483, white);
  background-image: -moz-linear-gradient(top, #f5b483, white);
  background-image: -ms-linear-gradient(top, #f5b483, white);
  float: left;
  margin: 4px 4px 0px 4px;
  padding: 0px;
  border: solid 1px #990000;
  border-radius: 2px;
  width: 50px;
  height: 40px;
}
.hattiles > li {
  background-color: #F5B483;
  background: -prefix-linear-gradient(top, #f5b483, white);
  background-image: linear-gradient(top, #f5b483, white);
  background-image: -webkit-linear-gradient(top, #f5b483, white);
  background-image: -moz-linear-gradient(top, #f5b483, white);
  background-image: -ms-linear-gradient(top, #f5b483, white);
  float: left;
  margin: 20px 40px 0px 10px;
  padding: 0px;
  border: solid 2px #990000;
  border-radius: 6px;
  width: 150px;
  height: 130px;
}
.hattiles > li > img,
.hatthumbs > li > img {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.hatthumbs > li:hover {
  -webkit-transform: scale(1.1, 1.1);
  -webkit-transition: all 0.1 linear;
  -moz-transform: scale(1.1, 1.1);
  -moz-transition: all 0.1 linear;
  -ms-transform: scale(1.1, 1.1);
  -ms-transition: all 0.1 linear;
}
.hatthumbs > li > img {
  cursor: move;
}
.hattiles > li > p {
  float: left;
  display: block;
  background-color: #560808;
  color: white;
  border: solid 1px black;
  margin: 5px 0 0 -15px;
  width: 175px;
  height: 30px;
  padding: 2px;
  text-align: center;
  text-overflow: ellipsis;
}
.hattiles > li:before,
.hattiles > li:after {
  position: relative;
  display: block;
  content: "";
  width: 15px;
  height: 0px;
  border: solid 1px red;
}
.hattiles > li:before {
  top: 90px;
  left: -30px;
  border-width: 15px 13px 0px 0px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.hattiles > li:after {
  top: -10px;
  left: 152px;
  margin-right: 0px;
  border-width: 15px 0px 0px 13px;
  border-color: transparent transparent transparent black;
}
.hattiles > li:hover {
  -webkit-transform: scale(1.1, 1.1);
  -webkit-transition: all 0.1s linear;
  -moz-transform: scale(1.1, 1.1);
  -moz-transition: all 0.1s linear;
  -ms-transform: scale(1.1, 1.1);
  -ms-transition: all 0.1s linear;
}
.nav {
  background-color: #330000;
  background: -prefix-linear-gradient(top, #330000, #990000, #330000);
  background-image: linear-gradient(top, #330000, #990000, #330000);
  background-image: -webkit-linear-gradient(top, #330000, #990000, #330000);
  background-image: -moz-linear-gradient(top, #330000, #990000, #330000);
  background-image: -ms-linear-gradient(top, #330000, #990000, #330000);
  color: white;
  padding: 4px;
  border: solid 1px black;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
  box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 6px;
}
#gallerywrap,
#tryitwrap {
  height: 100px;
  margin: 0px auto;
  padding: 0px;
}
#tryitwrap {
  width: 400px;
  padding-top: 20px;
}
.prev-next-btn {
  background-color: #330000;
  background: -prefix-linear-gradient(top, #330000, #990000, #330000);
  background-image: linear-gradient(top, #330000, #990000, #330000);
  background-image: -webkit-linear-gradient(top, #330000, #990000, #330000);
  background-image: -moz-linear-gradient(top, #330000, #990000, #330000);
  background-image: -ms-linear-gradient(top, #330000, #990000, #330000);
  margin: 0px;
  width: 24px;
  height: 60px;
  border: solid 1px black;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.6) 2px 2px 6px;
  padding: 6px !important;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1.8em;
  margin-top: 110px;
}
.prev-next-btn:hover {
  background-color: #330000;
  background: -prefix-linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: -webkit-linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: -moz-linear-gradient(top, #ff0000, #990000, #ff0000);
  background-image: -ms-linear-gradient(top, #ff0000 0, #990000, #ff0000);
}
.next-btn {
  border-radius: 0px 12px 12px 0px;
}
.prev-btn {
  border-radius: 12px 0px 0px 12px;
}
/* Positions */
.center {
  display: block;
  margin: 0px auto;
}
.right {
  display: block;
  float: right;
}
.left {
  display: block;
  padding: 0;
  float: left;
}
/* Texts */
.bodytext {
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: #000 2px 2px 4px;
}
.textright {
  text-align: right;
}
.resize-this {
  width: 300px;
  height: 300px;
  border: solid #9f9292;
  overflow: auto;
  resize: both;
}
.stop-scrolling {
  height: 100%;
  overflow: hidden;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Image replacement
 */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}
.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}
/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
  display: none !important;
  visibility: hidden;
}
/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
  visibility: hidden;
}
/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.clearfix:after {
  clear: both;
}
/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
  *zoom: 1;
}
/* iPad */
@media only screen and (max-width: 1024px) {
  #hatrack {
    display: none;
  }
}
/* Samsung Galaxy S3 */
@media only screen and (max-width: 640px) {
  .prev-next-btn {
    margin-top: 20px;
  }
  .content {
    padding-top: 120px;
  }
  .dialog-box {
    height: 100%;
    width: 100%;
  }
  .headerarea {
    position: absolute;
    top: 0px;
    background-position: 10px 55px, 0px 0px;
    background-size: 10em, .8em;
    height: 120px;
    width: 100%;
  }
  .footerarea {
    display: none;
  }
  #gallerywrap,
  #tryitwrap {
    max-width: 320px;
  }
  #tryitwrap {
    width: 95%;
    padding-top: 8px;
    padding-left: 0px;
    min-width: 285px;
    margin: 0px auto;
  }
  .hattiles,
  .hatlist {
    width: 260px;
    padding-left: 40px;
  }
  .hatlist {
    padding-left: 0px;
  }
  .hatlist p {
    width: 150px;
  }
  .hatthumbs {
    float: left;
    width: 75%;
    max-width: 500px;
    min-width: 240px;
    padding-bottom: 10px;
  }
  #hatsbase {
    margin-left: 15%;
  }
  .subnavbar {
    padding-left: 10px;
    padding-right: 10px;
  }
  #logo {
    margin-top: -20px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    -ms-transform: scale(0.6);
    transform: scale(0.6);
  }
}
/* iPhone 8 */
@media only screen and (max-width: 480px) {
  .mainnavigation {
    width: 320px;
  }
  .mainnavigation li {
    padding: 0px 10px 0px 10px;
  }
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}
/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
   * Don't show links for images, or javascript/internal links
   */
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
    /* h5bp.com/t */
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}