class inheritance issue

I have found many threads about this, but none really answer my question. I found a modal dialog CSS on WebdesignerDepot.com by Keenan Payne, and it worked for my purposes. I decided to use it again for a page where I have multiple uses of a modal dialog. The problem is that each one has a width difference. Below is the code. You can see that the only difference between the 3 instances is that one width property in the modalDialog > div class definition. Is there a way I can make it where the first two class definitions (modalDialog and modelDialog:target) affect all of the modal dialogs, with the third class (modalDialog > div) being split so that all but the width property affect all dialogs, and only the differing width property being specified for individual instances? I will give an example of what I am thinking immediately after the following code.

[code]
.modalDialog1 {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog1:target {
opacity:1;
pointer-events: auto;
}

.modalDialog1 > div {
width: 40%;
position: relative;
margin: 8% auto;
padding: 2px 20px 13px 12px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

.modalDialog2 {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog2:target {
opacity:1;
pointer-events: auto;
}

.modalDialog2 > div {
width: 75%;
position: relative;
margin: 8% auto;
padding: 2px 20px 13px 12px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

.modalDialog3 {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog3:target {
opacity:1;
pointer-events: auto;
}

.modalDialog3 > div {
width: 60%;
position: relative;
margin: 8% auto;
padding: 2px 20px 13px 12px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
[/code]

The following is a modified version of what I actually tried. Note that when I tried it, it did not work, and in fact broke the dialogs.

[code]
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog:target {
opacity:1;
pointer-events: auto;
}

.modalDialog1 > div { width: 40% )
.modalDialog2 > div { width: 75% )
.modalDialog3 > div { width: 60% )

.modalDialog > div {
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
[/code]

Also in #CSS _↴