div.courses.index,
div.courses.view {
    position: relative;
    padding: 10px;
    padding-bottom: 0;
}

div.courses.index .header .week {
	float: left;
}

div.courses.index .spacer,
div.courses.view .spacer {
	height: 5px;
}

div.courses.index .course {
	border-bottom: 1px solid #CACACA;
	padding: 5px 15px;
	cursor:pointer;
}

div.courses.index .course.first {
	border-top: 1px solid #CACACA;
}

div.courses.index .course:hover {
	padding: 5px 12px;
	border-left: 3px solid #FFCF01;
	border-right: 3px solid #FFCF01;
}

div.courses.index .header .buttons {
	position: absolute;
    top: 10px;
    right: 10px;
}

div.courses.index .header,
div.courses.view .header {
	padding-bottom: 2px;
}

div.courses.index .header .title,
div.courses.view .header .title {
	float: left;
    font-size: 12px;
	font-weight: bold;
}

div.courses.index .spots,
div.courses.view .spots {
	float:right;
}

div.courses.index .label,
div.courses.view .label {
	float: right;
	margin-left: 2px;
	padding: 1px 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color: #CCC;
	color: #FFF;	
}

div.courses.index ul,
div.courses.view ul {
	list-style: none;
}

div.courses.view .book {
	padding: 20px 40px;
}

div.courses.view .book .title {
	font-weight: bold;
    padding-left: 4px;
}

div.courses.view .ui-button-text-only .ui-button-text {
	padding: 0.1em 0.6em;	
}

div.courses.view div.infobox {
    border: 1px solid #CACACA;
	border-left: 2px solid #569FD3;
	border-right: 2px solid #569FD3;
	padding: 5px;
}


@media screen and (max-width: 480px) {
    div.courses.index .header .week {
        float: none;    
        width: 100%;
    }
    
    div.courses.index .header .buttons {
        position: relative;
        top: 0;
        right: 0;
        
        width: 100%;
        margin-top: 5px;
    }
    
    div.courses.index .header .buttons a.prev {
        float: left;   
    }
    
    div.courses.index .header .buttons a.next {
        float: right;
    }
    
    div.courses.index .header .title,
    div.courses.view .header .title {
        width: 100%;
        float: none;
        display: block;
    }
    
    div.courses.index .label,
    div.courses.view .label {
        float: left;
        margin-left: 0;
        margin-right: 2px;
    }
    
    div.courses.view .book {
        padding: 20px 0;
    }
}