/*
 * Defaults for the whole widget.
 */
body{
    font-family: Verdana, Arial, sans serif;
    font-size: 12px;
    margin: 5px;
}

/*
 * CSS Rules for devices with screens larger than 400px in width AND height
 */
@media all and (min-device-width: 400px) and (min-device-height: 400px){
	body{
        background: transparent url("img/background.png") 0 0 no-repeat;
    }
}
/*
 * CSS Rules for devices with screens larger than 400px in width OR height
 */
@media all and (max-device-height: 400px){
    body{
        background: white;
    }
    #controls{
        display: none;
    }
}
@media all and (max-device-width: 400px){
	body{
        background: white;
    }
    #controls{
        display: none;
    }
}


/*
 * The Wrapper is meant only for devices with large screens, showing the widget in "Widget" mode.
 * The wrapper provides a rounded cornered box for the widget to display in.
 */

#wrapper{
    position: absolute;
    top: 5px; bottom: 5px; right: 5px; left: 5px;
    overflow: hidden;
    min-width: 215px;
    min-height: 180px;
}

/*
 * The Controls contains all possible UI controls for the widget while in "Widget" mode
 */

#controls{
    position: absolute;
    right: 3px;
}
#controls .close{
    margin: 2px 1px 0 0;
    padding: 0;
    height: 15px;
    width: 15px;
    border: none;
    background: transparent url("img/closeButton.png") 0 0 no-repeat;
}
#controls .close:hover{
    background-position: 0 50%;
}
#controls .close:active{
    background-position: 0 100%;
}

/*
  * The header provides information about the widgets name and purpose.
 */

#header{
    position: absolute;
    padding: 0 0 0 3px;
    height: 3em;
    width: 100%;
    width: 100%;
}
#header h1{
    font-size: 1.4em;
    margin: 3px 0 0 0;
}
#header h3{
    font-size: 0.8em;
    margin: 0;
}

/*
  * The content provides a list of feed titles
 */

#content{
    position: absolute;
    top: 3em; bottom: 1.2em; right: 3px; left: 0px;
    overflow: auto;
}
#content ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
#content li{
    margin: 3px 0;
    padding: 0 0 0 5px;
}
.odd{
    background: #def;
}
/*
  * The footer provides  copyright information
 */

#footer{
    position: absolute;
    bottom: 0px;
    height: 1.2em;
    width: 100%;
    padding: 0 0 0 5px;
    font-size: 0.8em;
}