@media only screen and ( max-width: 320px) {
    .leftTopHeader {
        width: 13%;
        float: left;
        display: none;
    }
    .middleTopHeader {
        width: 100%;
        float: left;
		padding-top:40px;
    }
    .basePageLayout {
        float: left;
        margin: 1%;
        width: 98%;
    }
    .createCase {
        width: 100%;
        float: left;
        padding: 5px;
    }
    .createCaseMiddle {
        width: 98%;
        float: left;
        padding: 5px;
    }
    .bodyLeft {
        width: 98%;
        float: left;
    }
    .bodyRight {
        width: 100%;
        float: left;
    }
    .logo {
        width: 100%;
        float: left;
        padding-left: 5px;
        padding-top: 10px;
		text-align:center;
    }
    .headerTopLeft {
        width: 100%;
        float: left;
        background-image: url('../images/navbar_gradient.PNG');
        background-repeat: repeat-x;
        height: 100%;
    }
    .loginText {
        width: 95%;
        float: left;
        padding-top: 5px;
        text-align: right;
    }
    .newEvent {
        width: 100%;
        float: left;
    }
    .newEvent {
        width: 98%;
        float: left;
    }
    .newEventMiddle {
        width: 1%;
        float: left;
        padding-top: 1%;
        display: none;
    }
    .newEventRight {
        width: 98%;
        float: right;
    }
    .newEventText {
        width: 98%;
        float: left;
        padding: 5px;
        color: #0097d9;
    }
    .newEventText1 {
        width: 98%;
        float: left;
        padding: 5px;
        text-align: left;
    }
    .bodyrightTopVoter {
        width: 98%;
        float: left;
        text-align: center;
    }
    .menuPanel {
        width: 100%;
        float: left;
        background-image: url('');
        background-repeat: repeat;
        font-size: 15px;
        border: 1px solid #CCC;
        background-color: #FFF;
        height: auto;
    }
    .menu {
        width: 98%;
        float: left;
        padding:5px 10px 5px 5px;
    }
    .searchbox {
        width:70%;
        float: right;
        padding:12px 2px 5px 5px;
        text-align: right;
    }
    .casePanel {
        width: 100%;
        float: left;
        background-image: url('');
        background-repeat: repeat;
        font-size: 15px;
        border: 1px solid #CCC;
        background-color: #FFF;
        height: auto;
    }
    .case {
        float: left;
        padding: 3px;
        width: 60%;
    }
    .casebox {
        float: left;
        padding: 2px;
        width: 100%;
        text-align: left;
    }
    .casetextbox {
        width: 90%;
        float: left;
        padding: 2px;
    }
    .casedropdown {
        width: 90%;
        float: left;
        padding: 2px;
    }
    .vssmall {
        width: 20%;
        float: left;
        padding-top: 12%;
        text-align: center;
    }
    .inviteVotersLeft {
        width: 98%;
        float: left;
    }
    .inviteVotersRight {
        width: 98%;
        float: left;
    }
    .invoiceVotersMiddle {
        width: 100%;
        float: left;
    }
    .createCaseTopLeft {
        width: 98%;
        float: left;
        padding: 1%
    }
    .createCaseTopMiddle {
        width: 98%;
        float: left;
        padding: 1% 1% 0 1%;
    }
    .createCaseTopRight {
        width: 98%;
        float: left;
        padding: 1%;
    }
    .profileHeaderText {
        background-color: #748899;
        color: #ffffff;
        font-size: 12px;
        font-weight: bold;
        border: 1px solid #b0b0b0;
        padding: 4px 7px;
        text-align: center;
        width: 100%;
        float: left;
    }
    .profileLeft {
        width: 100%;
        float: left;
    }
    .profileRight {
        width: 100%;
        float: left;
    }
    .profilebox1 {
        width: 100px;
        float: left;
    }
    .profilebox2 {
        width: 50px;
        float: left;
    }
    .profilebox3 {
        width: 28%;
        float: left;
    }
    .editProfile {
        width: 100%;
        float: left;
    }
	.changeAvatarLeft
	{
		width:88%;
		float:left;
		position:absolute; 
		height:300px; 
		overflow:auto; 
		background-color:#ccc; 
		text-align:center;
	}
	.changeAvatarRight
	{
		background-color: #ccc;
		float: right;
		height: 300px;
		overflow: auto;
		position: absolute;
		right: 7.5%;
		text-align: left;
		width: 88%;
	}
}
@media only screen and (min-width: 321px) and ( max-width: 480px) {
    .leftTopHeader {
        width: 13%;
        float: left;
        display: none;
    }
    .middleTopHeader {
        width: 100%;
        float: left;
    }
    .basePageLayout {
        float: left;
        margin: 1%;
        width: 98%;
    }
    .createCase {
        width: 100%;
        float: left;
        padding: 5px;
    }
    .createCaseMiddle {
        width: 98%;
        float: left;
        padding: 5px;
    }
    .bodyLeft {
        width: 98%;
        float: left;
    }
    .bodyRight {
        width: 100%;
        float: left;
        text-align: left;
        padding-top: 10px;
        padding-left: 5px;
    }
    .logo {
        width: 100%;
        float: left;
        padding-left: 5px;
        padding-top: 10px;
		text-align:center;
    }
    .loginText {
        width: 95%;
        float: left;
        padding-top: 5px;
        text-align: right;
    }
    .newEvent {
        width: 100%;
        float: left;
    }
    .newEvent {
        width: 98%;
        float: left;
    }
    .newEventMiddle {
        width: 1%;
        float: left;
        padding-top: 1%;
        display: none;
    }
    .newEventRight {
        width: 98%;
        float: right;
    }
    .newEventText {
        width: 98%;
        float: left;
        padding: 5px;
        color: #0097d9;
    }
    .newEventText1 {
        width: 98%;
        float: left;
        padding: 5px;
        text-align: left;
    }
    .bodyrightTopVoter {
        width: 100%;
        float: left;
        text-align: center;
    }
    .menuPanel {
        width: 98%;
        float: left;
        background-image: url('');
        background-repeat: repeat;
        font-size: 15px;
        border: 1px solid #CCC;
        background-color: #FFF;
        height: auto;
    }
    .menu {
        width: 98%;
        float: left;
        padding: 10px;
    }
    .searchbox {
        width: 72%;
        float: right;
        padding:15px 2px 5px 5px;
        text-align: right;
    }
    .casePanel {
        width: 100%;
        float: left;
        background-image: url('');
        background-repeat: repeat;
        font-size: 15px;
        border: 1px solid #CCC;
        background-color: #FFF;
        height: auto;
    }
    .case {
        float: left;
        padding: 8px;
        width: 50%;
    }
    .casebox {
        float: left;
        padding: 2px;
        width: 100%;
        text-align: left;
    }
    .casetextbox {
        width: 40%;
        float: left;
        padding: 2px;
    }
    .casedropdown {
        width: 40%;
        float: left;
        padding: 2px;
    }
    .vssmall {
        width: 20%;
        float: left;
        padding-top: 8%;
        text-align: center;
    }
    .inviteVotersLeft {
        width: 98%;
        float: left;
    }
    .inviteVotersRight {
        width: 98%;
        float: left;
    }
    .invoiceVotersMiddle {
        width: 100%;
        float: left;
    }
    .createCaseTopLeft {
        width: 98%;
        float: left;
        padding: 1%
    }
    .createCaseTopMiddle {
        width: 98%;
        float: left;
        padding: 1% 1% 0 1%;
    }
    .createCaseTopRight {
        width: 98%;
        float: left;
        padding: 1%;
    }
    .profileHeaderText {
        background-color: #748899;
        color: #ffffff;
        font-size: 12px;
        font-weight: bold;
        border: 1px solid #b0b0b0;
        padding: 4px 7px;
        text-align: center;
        width: 100%;
        float: left;
    }
    .profileLeft {
        width: 100%;
        float: left;
    }
    .profileRight {
        width: 100%;
        float: left;
    }
    .profilebox1 {
        width: 100px;
        float: left;
    }
    .profilebox2 {
        width: 50px;
        float: left;
    }
    .profilebox3 {
        width: 28%;
        float: left;
    }
    .editProfile {
        width: 100%;
        float: left;
    }
	.changeAvatarLeft
	{
		width:75%;
		float:left;
		position:absolute; 
		height:300px; 
		overflow:auto; 
		background-color:#ccc; 
		text-align:center;
	}
	.changeAvatarRight
	{
		background-color: #ccc;
		float: right;
		height: 300px;
		overflow: auto;
		position: absolute;
		right: 7.5%;
		text-align: left;
		width: 75%;
	}
}
@media only screen and (min-width: 481px) and ( max-width: 568px) {
    .leftTopHeader {
        width: 13%;
        float: left;
        display: none;
    }
    .middleTopHeader {
        width: 100%;
        float: left;
    }
    .basePageLayout {
        float: left;
        margin: 1%;
        width: 98%;
    }
    .createCase {
        width: 100%;
        float: left;
        padding: 5px;
    }
    .createCaseMiddle {
        width: 98%;
        float: left;
        padding: 5px;
    }
    .bodyLeft {
        width: 98%;
        float: left;
    }
    .bodyRight {
        width: 100%;
        float: left;
        text-align: left;
        padding-top: 10px;
        padding-left: 5px;
    }
    .logo {
        width: 50%;
        float: left;
        padding-left: 5px;
        padding-top: 10px;
    }
    .loginText {
        width: 95%;
        float: left;
        padding-top: 5px;
        text-align: right;
    }
    .newEvent {
        width: 100%;
        float: left;
    }
    .newEvent {
        width: 98%;
        float: left;
    }
    .newEventMiddle {
        width: 1%;
        float: left;
        padding-top: 1%;
        display: none;
    }
    .newEventRight {
        width: 98%;
        float: right;
    }
    .newEventText {
        width: 48%;
        float: left;
        padding: 5px;
        color: #0097d9;
    }
    .newEventText1 {
        width: 48%;
        float: left;
        padding: 5px;
        text-align: left;
    }
    .bodyrightTopVoter {
        width: 100%;
        float: left;
        text-align: center;
    }
    .menuPanel {
        width: 98%;
        float: left;
        background-image: url('');
        background-repeat: repeat;
        font-size: 15px;
        border: 1px solid #CCC;
        background-color: #FFF;
        height: auto;
    }
    .menu {
        width: 98%;
        float: left;
        padding: 10px;
    }
    .searchbox {
        width: 65%;
        float: right;
        padding: 10px;
        text-align: right;
    }
    .casePanel {
        width: 100%;
        float: left;
        background-image: url('');
        background-repeat: repeat;
        font-size: 15px;
        border: 1px solid #CCC;
        background-color: #FFF;
        height: auto;
    }
    .case {
        float: left;
        padding: 8px;
        width: 36%;
    }
    .casebox {
        float: left;
        padding: 2px;
        width: 100%;
        text-align: left;
    }
    .casetextbox {
        width: 30%;
        float: left;
        padding: 2px;
    }
    .casedropdown {
        width: 30%;
        float: left;
        padding: 2px;
    }
    .vssmall {
        width: 20%;
        float: left;
        padding-top: 5%;
        text-align: center;
    }
    .createCaseTopMiddle {
        width: 20%;
        float: left;
        padding: 4% 1% 1% 1%;
    }
    .profileHeaderText {
        background-color: #748899;
        color: #ffffff;
        font-size: 12px;
        font-weight: bold;
        border: 1px solid #b0b0b0;
        padding: 4px 7px;
        text-align: center;
        width: 100%;
        float: left;
    }
    .profileLeft {
        width: 100%;
        float: left;
    }
    .profileRight {
        width: 100%;
        float: left;
    }
    .profilebox1 {
        width: 130px;
        float: left;
    }
    .profilebox2 {
        width: 70px;
        float: left;
    }
    .profilebox3 {
        width: 28%;
        float: left;
    }
    .editProfile {
        width: 50%;
        float: left;
    }
	.changeAvatarLeft
	{
		width:65%;
		float:left;
		position:absolute; 
		height:300px; 
		overflow:auto; 
		background-color:#ccc; 
		text-align:center;
	}
	.changeAvatarRight
	{
		background-color: #ccc;
		float: right;
		height: 300px;
		overflow: auto;
		position: absolute;
		right: 7.5%;
		text-align: left;
		width: 65%;
	}
}
@media only screen and (min-width: 569px) and ( max-width: 786px) {
    .leftTopHeader {
        width: 13%;
        float: left;
        display: none;
    }
    .middleTopHeader {
        width: 100%;
        float: left;
    }
    .basePageLayout {
        float: left;
        margin: 1%;
        width: 98%;
    }
    .createCase {
        width: 100%;
        float: left;
        padding: 5px;
    }
    .createCaseMiddle {
        width: 98%;
        float: left;
        padding: 5px;
    }
    .bodyLeft {
        width: 98%;
        float: left;
    }
    .bodyRight {
        width: 100%;
        float: left;
        text-align: left;
        padding-top: 10px;
        padding-left: 5px;
    }
    .logo {
        width: 90%;
        float: left;
        padding-left: 5px;
        padding-top: 10px;
		text-align:center;
    }
    .loginText {
        width: 95%;
        float: left;
        padding-top: 5px;
        text-align: right;
    }
    .newEvent {
        width: 48%;
        float: left;
    }
    .newEventMiddle {
        width: 1%;
        float: left;
        padding-top: 1%;
        display: none;
    }
    .newEventRight {
        width: 48%;
        float: right;
    }
    .newEventText {
        width: 48%;
        float: left;
        padding: 5px;
        color: #0097d9;
    }
    .newEventText1 {
        width: 48%;
        float: left;
        padding: 5px;
        text-align: left;
    }
    .bodyrightTopVoter {
        width: 100%;
        float: left;
        text-align: center;
    }
    .menuPanel {
        width: 98%;
        float: left;
        background-image: url('');
        background-repeat: repeat;
        font-size: 15px;
        border: 1px solid #CCC;
        background-color: #FFF;
        height: auto;
    }
    .menu {
        width:98%;
        float: left;
        padding: 10px;
    }
    .searchbox {
        width: 65%;
        float: right;
        padding: 10px;
        text-align: right;
    }
    .casePanel {
        width: 100%;
        float: left;
        background-image: url('');
        background-repeat: repeat;
        font-size: 15px;
        border: 1px solid #CCC;
        background-color: #FFF;
        height: auto;
    }
    .case {
        float: left;
        padding: 8px;
        width: 36%;
    }
    .casebox {
        float: left;
        padding: 2px;
        width: 100%;
        text-align: left;
    }
    .casetextbox {
        width: 29%;
        float: left;
        padding: 2px;
    }
    .casedropdown {
        width: 29%;
        float: left;
        padding: 2px;
    }
    .vssmall {
        width: 20%;
        float: left;
        padding-top: 5%;
        text-align: center;
    }
    .profileHeaderText {
        background-color: #748899;
        color: #ffffff;
        font-size: 12px;
        font-weight: bold;
        border: 1px solid #b0b0b0;
        padding: 4px 7px;
        text-align: center;
        width: 100%;
        float: left;
    }
    .profileLeft {
        width: 20%;
        float: left;
    }
    .profileRight {
        width: 80%;
        float: left;
    }
    .profilebox1 {
        width: 130px;
        float: left;
    }
    .profilebox2 {
        width: 70px;
        float: left;
    }
    .profilebox3 {
        width: 28%;
        float: left;
    }
    .editProfile {
        width: 50%;
        float: left;
    }
	.changeAvatarLeft
	{
		width:46%;
		float:left;
		position:absolute; 
		height:300px; 
		overflow:auto; 
		background-color:#ccc; 
		text-align:center;
	}
	.changeAvatarRight
	{
		background-color: #ccc;
		float: right;
		height: 300px;
		overflow: auto;
		position: absolute;
		right: 5.5%;
		text-align: left;
		width: 46%;
	}
}
@media only screen and (min-width: 787px) and ( max-width: 950px) {
    .leftTopHeader {
        width: 13%;
        float: left;
        display: none;
    }
    .middleTopHeader {
        width: 100%;
        float: left;
    }
    .basePageLayout {
        float: left;
        margin: 1%;
        width: 98%;
    }
    .createCase {
        width: 34%;
        float: left;
        padding: 5px;
    }
    .createCaseMiddle {
        width: 66%;
        float: left;
        padding: 5px;
    }
    .bodyLeft {
        width: 98%;
        float: left;
    }
    .bodyRight {
        width: 100%;
        float: left;
        text-align: left;
        padding-top: 10px;
        padding-left: 5px;
    }
    .logo {
        width: 90%;
        float: left;
        padding-left: 5px;
        padding-top: 10px;
		text-align:center;
    }
    .loginText {
        width: 95%;
        float: left;
        padding-top: 5px;
        text-align: right;
    }
    .newEvent {
        width: 48%;
        float: left;
    }
    .newEventMiddle {
        width: 1%;
        float: left;
        padding-top: 1%;
        display: none;
    }
    .newEventRight {
        width: 48%;
        float: right;
    }
    .newEventText {
        width: 48%;
        float: left;
        padding: 5px;
        color: #0097d9;
    }
    .newEventText1 {
        width: 48%;
        float: left;
        padding: 5px;
        text-align: left;
    }
    .bodyrightTopVoter {
        width: 48%;
        float: left;
        text-align: center;
    }
    .bodyrightSimilerCase {
        width: 48%;
        float: left;
        text-align: right;
    }
    .menuPanel {
        width: 98%;
        float: left;
        background-image: url('');
        background-repeat: repeat;
        font-size: 15px;
        border: 1px solid #CCC;
        background-color: #FFF;
        height: auto;
    }
    .menu {
        width: 98%;
        float: left;
        padding: 10px;
    }
    .searchbox {
        width: 45%;
        float: right;
        padding: 10px;
        text-align: right;
    }
    .casePanel {
        width: 100%;
        float: left;
        background-image: url('');
        background-repeat: repeat;
        font-size: 15px;
        border: 1px solid #CCC;
        background-color: #FFF;
        height: auto;
    }
    .case {
        float: left;
        padding: 8px;
        width: 28%;
    }
    .casebox {
        float: left;
        padding: 6px;
        width: 70%;
        text-align: left;
    }
    .casetextbox {
        width: 40%;
        float: left;
        padding: 2px;
    }
    .casedropdown {
        width: 40%;
        float: left;
        padding: 2px;
    }
    .vssmall {
        width: 20%;
        float: left;
        padding-top: 8%;
        text-align: center;
    }
    .profileHeaderText {
        background-color: #748899;
        color: #ffffff;
        font-size: 12px;
        font-weight: bold;
        border: 1px solid #b0b0b0;
        padding: 4px 7px;
        text-align: center;
        width: 100%;
        float: left;
    }
    .profileLeft {
        width: 20%;
        float: left;
    }
    .profileRight {
        width: 80%;
        float: left;
    }
    .profilebox1 {
        width: 130px;
        float: left;
    }
    .profilebox2 {
        width: 70px;
        float: left;
    }
    .profilebox3 {
        width: 28%;
        float: left;
    }
	.changeAvatarLeft
	{
		width:36%;
		float:left;
		position:absolute; 
		height:300px; 
		overflow:auto; 
		background-color:#ccc; 
		text-align:center;
	}
	.changeAvatarRight
	{
		background-color: #ccc;
		float: right;
		height: 300px;
		overflow: auto;
		position: absolute;
		right: 5.5%;
		text-align: left;
		width: 36%;
	}
}